HTML（一）基本标签的使用
一、HTML5的优势
HTML5作为HTML的最新版本，是HTML的传递和延续。经历HTML4.0、XHTML再到HTML5从某种意义上讲，这是HTML超文本标签语言的更新与规范过程。因此，HTML5并没有给用户带来多大的冲击，大部分标签在HTML5版本中依然适用
HTML的全称为超文本标记语言（Hyper Text Markup Language），是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等，HTML5的优势主要体现在兼容、合理、易用三个方面。
二、HTML5全新的结构
| <!DOCTYPE>标签 | 标签 | 标签 | 标签 |
|---|---|---|---|
| 位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范。 | DOCTYPE> 标签之后，也称为根标签，用于告知浏览器其自身是一个 HTML 文档。 | 定义HTML文档的头部信息，也称为头部标签，紧跟在标签之后，主要用来封装其他位于文档头部的标签。 | 定义HTML文档所要显示的内容，也称为主体标签。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于标签内。 |
<html lang="en"> ： lang表示开发语言
<meta charset="UTF-8"> ：charset表示使用的字符集。UTF-8支持中文
三、标签概述
1、基本概念
在HTML页面中，带有“< >”符号的元素被称为HTML标签，如上面提到的、、都是HTML标签。所谓标签就是放在“< >”符号中表示某个功能的编码命令，也称为HTML标签或HTML元素,统一称作HTML标签。
2、标签的分类
- 双标签 <标签名>内容</标签名> 左边表示该标签的作用开始，一般称为“开始标签 “ 右边表示该标签的作用结束，一般称为“结束标签”
- 单标签 < 标签名 /> 注：为什么会有单标签？
HTML标签的作用原理就是选择网页内容，从而进行描述，也就是说需要描述哪个元素，就选择哪个元素，所以才会有双标签的出现，用于定义标签作用的开始与结束。而单标签本身就可以描述一个功能，不需要选择。例如，水平线标签<‘hr /’>,按照双标签的语法，它应该写成<‘hr’><’/hr’>，但是水平线标签不需要选择，本身就代表一条水平线，此时写成双标签就显得有点多余，但是又不能没有结束符号，所以在标签名称后面加一个关闭符，即<标签名 />。
3、标签的关系 - 嵌套关系
Dreamweaver菜单栏由各种菜单命令构成，包括文件、编辑、查看、插入、修改、格式、命令、站点、窗口、帮助10个菜单项
例如
<‘p’>标签中包含<‘font’>标签 <‘font’>标记中又包含了一个内层的<‘font’>标记
<p align="center">
<font color="#979797" size="2">
更行时间：2013年09月28日14时08分 来源：
<font color="blue">传智播客</font>
</font>
</p>
- 并列关系
并列关系也称为兄弟关系，就是两个标签处于同一级别，并且没有包含关系。例如在HTML5的结构代码中，标签和标签就是并列关系。在HTML标签中，无论是单标签还是双标签，都可以拥有并列关系。
<p align=“left">
更行时间：2013年09月28日14时08分 来源：
</p>
<p align="center">
更行时间：2013年09月28日14时08分 来源：
</p>
4、标签的属性
属性值可以设置该标签内容的字体、颜色、位置、字号等特征
标签的属性：设置标签的特征
<标签名 属性名1="属性值" 属性名2="属性值"> 内容 </标签名>
例如
<body style="text-align: center;">
<hr color="blue" size="4" width="200"/>
5、HTML5文档头部相关标签
<meta/>
四、文本控制标签
无论网页内容如何丰富，文字自始至终都是网页中最基本的元素。为了使文字排版整齐、结构清晰，HTML中提供了一系列文本控制标签，如标题标签<‘h1’>~<‘h6’>、段落标签<‘P’>等
1、页面格式化标签
- 标题标签：<‘hn’>内容<‘/hn’>
HTML提供了6个等级的标题，即<‘h1’>、<‘h2’>、<‘h3’>、<‘h4’>、<‘h5’>和<‘h6’>，从<‘h1’>到<‘h6’>标题的重要性依次递减
<h1>陕西省</h1>
<h2>西安市</h2>
<h3>长安区</h3>
- 段落标签：<‘p’> 内容 <‘/p’>
<‘p’>标签是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。 - 水平线标签（分割线）
<hr color="颜色" size="粗细" width="宽度"/>
在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。水平线可以通过<‘hr /’>标签来定义。
| 属性名 | 含义 | 属性值 |
|---|---|---|
| align | 设置水平线的对齐方式 | 可选择left、right、center三种值，默认为center，居中对齐显示。 |
| size | 设置水平线的粗细 | 以像素为单位，默认为2像素。 |
| color | 设置水平线的颜色 | 可用颜色名称、十六进制#RGB、rgb(r,g,b)。 |
| width | 设置水平线的宽度 | 可以是确定的像素值，也可以是浏览器窗口的百分比，默认为100%。 |
- 换行标签<‘br/’>
在word中，按【Enter】键可以将一段文字换行显示，但在网页中，浏览器不识别回车换行符，如果想要将某段文本强制换行显示，就需要使用换行标签<‘br /’>
2、文本样式标签
<font 属性=“属性值”>文本内容
|| 属性名 | 含义 |
| ---------- | ------------------------------------------ |
| face | 设置文字的字体，例如微软雅黑、黑体、宋体等 |
| size | 设置文字的大小，可以取1到7之间的整数值 |
| color | 设置文字的颜色 || |
3、文本格式化标签
| 标记 | 显示效果 |
|---|---|
| <‘b><’/b>和***<‘strong><’/strong>*** | 文字以粗体方式显示（XHTML推荐使用strong） |
| <‘i><’/i>和*<‘em><’/em>* | 文字以斜体方式显示（XHTML推荐使用em） |
| <‘s><’/s>和**<‘del><’/del>** | 文字以加删除线方式显示（XHTML推荐使用del） |
| <‘u><’/u>和*<‘ins><’/ins>* | 文字以加下划线方式显示（XHTML不赞成使用u） |
4、文本语义标签
-
time标签
time标签用于定义时间或日期，可以代表24小时中的某一时间。time标签不会在浏览器中呈现任何特殊效果，但是该元素能够以机器可读的方式对日期和时间进行编码，用户能够将生日提醒或其他事件添加到日程表中，搜索引擎也能够生成更智能的搜索结果。
-
mark标签
mark标签的主要功能是在文本中高亮显示某些字符，该元素的用法与em标签和strong标签有相似之处，但是使用mark标签在突出显示样式时更随意灵活。
-
cite标签
cite标签可以创建一个引用，用于对文档引用参考文献的说明，一旦在文档中使用了该标签，被标注的文档内容将以斜体的样式展示在页面中，以区别于段落中的其他字符。
<mark>德云前端</mark>
<br /><br />
<p>《资本论》</p>
<cite>马克思</cite>
5、特殊字符标签
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| 空格符 | ||
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ￥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方2（上标2） | ² |
| ³ | 立方3（上标3） | ³ |
补充：下标标签：<sub> </sub>
<p>2 > 1</p>
<p>©网络公司</p>
<p>®</p>
<p>温度: 7°~ 2°</p>
<p>3×4=12</p>
<p>16÷8=2</p>
<p>a² ^ b³ = c³</p>
<h2>O<sub>3</sub></h2>
五、 图像标签
1、常见图像格式
-
GIF
GIF最突出的地方就是它支持动画，同时GIF也是一种无损的图像格式，也就是说修改图片之后，图片质量几乎没有损失。再加上GIF支持透明（全透明或全不透明），因此很适合在互联网上使用，GIF格式常常用Logo、小图标及其他色彩相对单一的图像
-
PNG
PNG包括PNG-8和真色彩PNG（PNG-24和PNG-32）。相对于GIF，PNG最大的优势是体积更小，支持alpha透明（全透明，半透明，全不透明），并且颜色过渡更平滑，但PNG不支持动画。IE6是可以支持PNG-8，但在处理PNG-24的透明时会显示灰色
-
JPG
JPG所能显示的颜色比GIF和PNG要多的多，可以用来保存超过256种颜色的图像，但是JPG是一种有损压缩的图像格式，这就意味着每修改一次图片都会造成一些图像数据的丢失。
注:小图片考虑GIF或PNG-8，半透明图像考虑PNG-24，类似照片的图像则考虑JPG
2、图像标签
<img src="图像URL" /><!--src属性用于指定图像文件的路径和文件名-->
六、超链接标签
<a></a> ,可以进行页面跳转
(1)文字超链接：
<a href="网页的地址"> 文字 </a>
(2)图像超链接
<a href="网页的地址">
<img src="图像名" />
</a>
例如
①文字超链接
<a href="004.html">跳转到004</a>
<a href="./html/006.html">跳转到006</a>
②图像超链接
<a href="./html/006.html">
<img src="./image/4.jpg" width="200" height="150">
</a>
七、补充
1、设置页面背景颜色
<body bgcolor="颜色值">
2、设置背景图像
<body background="图像名">
3、滚动标签：
(1)图像滚动：
<marquee behavior="500" direction="down">
<img src="./images/7.png" width="500" height="280">
</marquee>
direction属性表示滚动方向，取值有4个：left、right、up、down
behavior属性表示滚动的速度，数字越小速度越快
(2)文字滚动
<marquee behavior="500" direction="down">
<font color="" size="" face="">滚动的文字</font>
</marquee>
4、块级标签：
。可以作为容器(可以放其他的块级标签)
2154
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
