HTML语言
复习：
1.Web项目的部署结构
静态Web技术(客户端技术)：提供的内容任何人在任何时间访问都是一样的
HTML/CSS/JS/Flash....
动态Web技术(服务器端技术)：提供的内容不同人在不同时间访问都可能改变——一般需要访问数据库等
PHP/JSP/ASP.NET/Node/Python....
自学一门新语言的步骤：
(1)了解背景
(2)搭建环境
(3)变量和常量
(4)数据类型
(5)运算符
(6)逻辑结构
(7)通用小程序
(8)函数和对象
(9)第三方库和框架
(10)实用项目
结论：HTML编程语言非常简单！——只学2天！——在背单词，后续天天用肯定不会忘记！——记得整理思维导图！
今日目标：
(1)HTML语言
1.HTML语言概述
Hyper Text Markup Language：超文本标记语言，1991年产生，文件后缀为.html、.htm、.xhtml等。后来升级为HTML1.0 .... HTML4.0、XHTML、HTML5等多个版本。
世界上的第一个网页：
http://info.cern.ch/hypertext/WWW/TheProject.html
HTML语言的特点：简单、跨平台。
标记：标签、元素，指用<>括起来的特殊单词，能够被浏览器中的HTML解释器翻译为一种特殊的页面效果。
2.搭建HTML语言的运行环境
标准情况下：
服务器端：安装WEB服务器，编写并保存网页，启动WEB服务器
客户端：安装WEB浏览器，输入服务器的地址开始访问
简单情况下：
自己编写的HTML网页，可以直接拖拽到浏览器中显示——没有经过WEB服务器的处理——不推荐这样使用。
3.HTML基础语法
(1)HTML文档中可以包含任意字符，以及W3C/HTML标准预定义的标签。
(2)标签分为两类：
双标记标签： <标签名>内部内容</标签名>
单标记标签： <标签名/> 或简写为<标签名>
(3)开始标签上可以声明属性：
<标签名 属性名='值' 属性名="值">
如：<hr width='50%' color="red" id="shuipingxian2" title="" class="" style="">
(4)标签可以嵌套，但不能交叉
正确：<p>A<span>B</span>C</p>
错误：<p>A<span>B</p>C</span>
(5)HTML文档可以使用注释
<!-- ... -->
|
SQL中的注释： # /*...*/ PHP中的注释： #、// /*...*/ HTML中的注释： <!-- ... --> |
4.一篇HTML文档的标准结构
<! 文档类型声明 >
<html>
<head>...</head>
<body>...</body>
</html>
5.HTML标准中常用的标签 —— 重点！
|
标签名 |
含义 |
|
<html></html> |
标识一篇HTML文档的开始和结束 |
|
<head></head> |
定义文档的头部 |
|
<body></body> |
定义文档的主体 |
|
<title></title> |
只能声明在<head>标签内，标识文档的标题 |
|
<meta> |
只能声明在<head>标签内，用于标识网页的“元数据” |
|
metadata：元数据，指描述数据的数据 { empId: 101 empName: tom isMarried: true salary: 8000 } |
6. HTML标准中常用的标签 —— 文本相关标签——重点！
|
标签名 |
含义 |
|
<b></b> |
Bold，文本加粗显示 |
|
<i></i> |
Italic，文本斜体显示 |
|
<u></u> |
Underline，文本添加下划线 |
|
<s></s> |
Strike，文本添加删除线 |
|
<sub></sub> |
文本显示为“下标字” |
|
<sup></sup> |
文本显示为“上标字” |
|
<h1></h1> |
一号标题字 |
|
<h2></h2> |
二号标题字 |
|
<h3></h3> |
三号标题字 |
|
<h4></h4> |
四号标题字 |
|
<h5></h5> |
五号标题字 |
|
<h6></h6> |
六号标题字 |
|
<p></p> |
Paragraph，表示为文章中的一个段落，每段落必然重启一行 |
|
空格 ™ 商标TM ® 注册商标® < 小于号 > 大于号 × ×号 |
HTML转义字符 |
|
<div></div> |
区块，最简单的区块元素，不附加任何样式 |
|
<span></span> |
跨距，最简单的行内元素，不附带任何样式 |
练习：统计出来h1~h6标签默认字体大小是标准文本字体大小的几倍？
H1:2em、H2:1.5em、H3:1.17em、
H4:1em、H5:0.83em、H6:0.67em
小知识点：HTML块级标签和行内标签
所有的HTML标签可以分为两大类：
块级元素(block)：必须独立占据一整行，同一行中不允许存在其他内容
H1~H6、P、DIV
行内元素(inline)：可以与其他内容同处于同一行
B、I、S、U、SUB、SUP、SPAN
7. HTML标准中常用的标签 —— 图片和超链接——重点！
|
标签名 |
含义 |
|
<img src="" alt="" width="" height="">单标记标签；IMG是一个行内元素！ |
在页面中呈现一幅图片 src：Source，指定图片的地址 alt：Alternative，指定图片无法加载时显示的提示文字 width：指定显示的宽度 height：不指定的话会与宽度等比例缩放，若指定了可以实现拉伸或压缩图片的效果 |
|
<a href="" target=""></a> |
Anchor：超链接、锚点，用于在不同的网页间跳转，或者是在一个网页的不同部分跳转 href：指定跳转的地址 target：指定如何打开目标地址，可取值为_self(当前窗口)或_blank(空白窗口) |
小知识：常见的图片格式
(1)jpg/jpeg：色彩细节丰富，适合于展示照片；只能是矩形。
(2)png：色彩比较丰富，支持透明。
(3)gif：色彩一般丰富，支持动画效果。
切记：网页中显示的图片一定不要太大！如1024*768图片大约在xxKB或100+KB足够了！
小知识：图片地址的种类
URL：Unified Resource Locator，统一的资源定位符，互联网上所有的网页、图片、音视频都有一个唯一的地址，称为URL地址。
绝对地址：以协议名或//开头的URL地址
http://127.0.0.1:8080/HTML_DAY01/img/1.jpg
https://www.baidu.com/img/bd_logo1.png
http://tmooc.cn/script/img_v2/logo_v3.png
//127.0.0.1:8080/HTML_DAY01/img/1.jpg
//www.baidu.com/img/bd_logo1.png
//tmooc.cn/script/img_v2/logo_v3.png
相对地址：不以协议名或//开头，而是指定相对于当前资源的相对地址
img/1.jpg 在当前路径下寻找img目录
./img/1.jpg 在当前路径下寻找img目录
../img/1.jpg 在当前目录的上一级目录下寻找img目录
超链接A元素的两种用法：
(1)在不同的网页间跳转：
<a href="./2.html">跳转到2</a>
<a href="http://www.baidu.com">跳转到百度</a>
(2)在某个网页的不同部分间跳转：
<a href="#chapter3">跳转到第三章</a>
........
<h1 id="chapter3">第三章 大闹天宫</h1>
课后练习：
编写HTML网页，实现如下的页面效果：
HTML语言的更多相关文章
- C语言 · 高精度加法
问题描述 输入两个整数a和b,输出这两个整数的和.a和b都不超过100位. 算法描述 由于a和b都比较大,所以不能直接使用语言中的标准数据类型来存储.对于这种问题,一般使用数组来处理. 定义一个数组A ...
- Windows server 2012 添加中文语言包(英文转为中文)（离线）
Windows server 2012 添加中文语言包(英文转为中文)(离线) 相关资料: 公司环境:亚马孙aws虚拟机 英文版Windows2012 中文SQL Server2012安装包,需要安装 ...
- iOS开发系列--Swift语言
概述 Swift是苹果2014年推出的全新的编程语言,它继承了C语言.ObjC的特性,且克服了C语言的兼容性问题.Swift发展过程中不仅保留了ObjC很多语法特性,它也借鉴了多种现代化语言的特点,在 ...
- C语言 · Anagrams问题
问题描述 Anagrams指的是具有如下特性的两个单词:在这两个单词当中,每一个英文字母(不区分大小写)所出现的次数都是相同的.例如,"Unclear"和"Nuclear ...
- C语言 · 字符转对比
问题描述 给定两个仅由大写字母或小写字母组成的字符串(长度介于1到10之间),它们之间的关系是以下4中情况之一: 1:两个字符串长度不等.比如 Beijing 和 Hebei 2:两个字符串不仅长度相 ...
- JAVA语言中的修饰符
JAVA语言中的修饰符 -----------------------------------------------01--------------------------------------- ...
- Atitit 项目语言的选择 java c#.net php??
Atitit 项目语言的选择 java c#.net php?? 1.1. 编程语言与技术,应该使用开放式的目前流行的语言趋势1 1.2. 从个人职业生涯考虑,java优先1 1.3. 从项目实际来 ...
- 【开源】简单4步搞定QQ登录，无需什么代码功底【无语言界限】
说17号发超简单的教程就17号,qq核审通过后就封装了这个,现在放出来~~ 这个是我封装的一个开源项目:https://github.com/dunitian/LoTQQLogin ————————— ...
- InstallShield 脚本语言学习笔记
InstallShield脚本语言是类似C语言,利用InstallShield的向导或模板都可以生成基本的脚本程序框架,可以在此基础上按自己的意愿进行修改和添加. 一.基本语法规则 ...
- 用C语言封装OC对象（耐心阅读，非常重要）
用C语言封装OC对象(耐心阅读,非常重要) 本文的主要内容来自这里 前言 做iOS开发的朋友,对OC肯定非常了解,那么大家有没有想过OC中NSInteger,NSObject,NSString这些对象 ...
随机推荐
- iterator简单描述
Item 26. Prefer iterator to const iterator, reverse_iterator, and const_reverse_iterator. 上面一段话,是< ...
- JVM内部细节之一：synchronized关键字及实现细节（轻量级锁Lightweight Locking）
在C程序代码中我们可以利用操作系统提供的互斥锁来实现同步块的互斥访问及线程的阻塞及唤醒等工作.然而在Java中除了提供Lock API外还在语法层面上提供了synchronized关键字来实现互斥同步 ...
- 关于element-ui日期选择器disabledDate使用心得
实现目的: 使用type="data"类型实现具备开始日期与结束日期组件(ps:element有自带的type="daterange"类型的组件可以实现此功能) ...
- Tomcat、TongWeb5.0、TongWeb6.0部署solr
将solr,solr-4.7.2复制到某一路径下,比如F盘根目录. 1.tomcat中进行配置,配置如下: <Context docBase="F:/solr" reload ...
- java中存在三种调用机制
1:同步调用:一种阻塞式调用,调用方要等待对方执行完毕才返回,它是一种单向调用 2:回调:一种双向调用模式,也就是说,被调用方在接口被调用时也会调用对方的接口: 3:异步调用:一种类似消息或事件的机制 ...
- VS2010 永久配置OpenCv2.4.9 及转换到COFF 期间失败:文件无效或损坏，解决方法
1.下载OpenCv2.4.9(win pack):http://opencv.org/releases.html 下载完成后,进行解压(win7 64位系统) 2.环境配置,配置如下图所示: 找到p ...
- [INet] WebSocket 数据收发的详细过程
WebSocket 和 HTTP 相似,只是一个应用层协议,对下层透明,所以不涉及 TCP/IP. 由于浏览器支持了 WebSocket,所以在用 JS 写客户端的时候,是无需考虑数据的编码解码的. ...
- php中使用com组件出现"拒绝访问"的处理
php中使用com组件出现"拒绝访问"的处理 2010年05月14日 12:28:00 阅读数:1529 代码如下, // 建立一个指向新COM组件的索引 $word = new ...
- 项目（二）DNS解析——配置域名服务器
NDS服务器常见种类有:缓存域名服务器.主域名服务器.从域名服务器.DNS服务器查询方法有两种:递归查询和迭代查询.其中,递归查询是DNS服务器在本地通过缓存.本地映射.记录本得到结果,而迭代查询是D ...
- TCP/UDP 常用端口列表
计算机之间依照互联网传输层TCP/IP协议不同的协议通信,都有不同的对应端口.所以,利用短信(datagram)的UDP,所采用的端口号码不一定和采用TCP的端口号码一样.以下为两种通信协议的端口列表 ...