首页 / HTML / 四、HTML（二）-- HTML标签
四、HTML（二）-- HTML标签
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了四、HTML（二）-- HTML标签，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含29351字，纯文字阅读大概需要42分钟。
内容图文
一、HTML基础
1.1 html标签
整个网页是从<html>这里开始的，然后到</html>结束。
1.2 head标签
| <head>内部标签 | 说明 |
|---|---|
| <title> | 定义网页的标题 |
| <meta> | 定义网页的基本信息（供搜索引擎） |
| <style> | 定义CSS样式 |
| <link> | 链接外部CSS文件或脚本文件 |
| <script> | 定义脚本语言 |
| <base> | 定义页面所有链接的基础定位（用得很少） |
head标签代表页面的“头”，定义一些特殊内容，这些内容往往都是“不可见内容”（在浏览器不可见）。
<head>的内部标签也非常重要，在前期大家只需要感性认知就可以。
1) 引入外部文件
引入外部css：
<link type="text/css" rel="stylesheet" href="wcss.css" />
引入外部js：
<script type="text/javascript" src="js/a.js" ></script>
2) meta标签
meta主要用于设置网页中的元数据，元数据不是给用户看的，而是给浏览器、爬虫看的。
+++ 设置网页字符集
<meta name="charset" content="UTF-8">
简写:<meta charset="UTF-8">
+++ 设置网页关键字
<meta name="keywords" content="Java,Ruby">
表示网站的关键字，可以指定多个
seo:用于搜索引擎搜索。
+++ 设置网页描述
<meta name="description" content="这是一个网站的描述">
用于指定网站的描述
seo:网站的描述会出现在搜索引擎的结果中
+++ 设置定时重定向
<meta http-equiv="refresh" content="10;url=http://www.baidu.com" >
几秒之后跳转到另外一个页面
<title>xxx</title>
seo:title标签的内容会作为搜索结果的超链接显示
1.3 body标签
body标签代表页面的“身”，定义网页展示内容，这些内容往往都是“可见内容”（在浏览器可见）。
二、段落与文字
2.1 标题标签
在网页中html专门负责网页的结构，
所以在使用html标签时，应该关注的是标签的语义，而不是标签的样式。
1）h1-h6标签与hgroup标签
h1~h6标签：
1.h1~h6 一共有六级标题
2.从seo角度分析：
1.h1~h6是标题标签，h表示“header”。h1~ h6在HTML语义化中占有极其重
要的地位。 h1~h6按照标题的重要性依次递减，其中h1重要性最高，h6重要性最低。
2.一般情况只会使用h1~h4 ， h5~h6很少使用。从搜索引擎优化的角度来说，
h1、h2、h3和h4这4个标签会被赋予一定的权重，而h5和h6的权重跟普通标
签差不多，在SEO优化上意义不大。
4.h1在网页的重要性仅次于title。
hgroup标签
1.用于给标题分组，将一组相关的标签进行分组
2.块级元素，独占一行
2) 注意事项
注意事项：
1.一个页面只能有一个h1标签。
h1标签表示每个页面中最高层级的标题，捜索引擎会赋予hl标签最高权重。
h1标签代表网页的标题，如果你写多个，对于seo引擎来说肯定是权重降低。
2.hl ~ h6之间不要断层。
搜索引擎对hl ~ h6标签比较敏感，尤其是hl和h2。
一个语义良好的页面，hl ~ h6 应该是完整有序而没有出现断层的。
也就是说，要按照“hl、h2、h3、h4”这样的顺序依次 排列下来，不要出现“hl、h3、h4”而漏掉h2的情况。
3.不要用h1 ~ h6来定义样式。
我们都知道h1 ~ h6是有默认样式的，在实际开发中，很多时候我们需要为文本定义字体加粗或者字体大小。
有些人喜欢用h1 ~ h6来代替CSS,使用标签来控制样式，这是一种非常不好的做法。
我们一定要记住，HTML关注的是结构(语义)，CSS关注的是样式，结构跟样式应该分离。
4.不要用div来代替h1 ~ h6.
从语义上来说，一个页面的标题应该使用h1?h6标签，不要使用div来代替。
分析：div是无语义的标签，如果使用div来代替h1?h6,后期维护比较困难，而且对SEO 影响也非常大。
因为这种做法会让一个页面丢失大量的权重。
3) 案例
- h1-h6标签案例
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
- hgroup标签案例
<hgroup>
<h1>一级标题</h1>
<h2>二级标题</h2>
</hgroup>
2.2 段落标签
| 标签 | 语义 | 说明 |
|---|---|---|
| <p> | paragraph | 段落 |
| <br> | break | 换行 |
| <hr> | horizontal rule | 水平线 |
| <div> | division | 分割（块元素） |
| <span> | span | 区域（行内元素） |
+++ p标签
<p> </p>
1.表示页面中的段落
2.块级元素，独占一行
3.块元素可以放入任何元素，但是p元素中不能放入块元素。
+++ br
<br/>
1.换行
+++ hr
<hr size="10"width="100" align="left/center/right" color="red"> 水平线标签
size 高度
width 宽度
align 对其方式
2.3 文本格式化标签
| 标签 | 语义 | 说明 |
|---|---|---|
| <font> | 字体 | 设置字体 |
| <strong> | strong（加强） | 加粗 |
| <b> | b（加强） | 加粗 |
| <em> | emphasized（强调） | 斜体 |
| <cite> | cite（引用） | 斜体 |
| <sup> | superscripted（上标） | 上标 |
| <sub> | subscripted（下标） | 下标 |
+++ font
<font size="7" color="red" face="黑体" ></font>
字体标签 size 1-7
+++ strong、b 加粗
<strong></strong>
<b></b> 字体加粗
+++ em 斜体
1.语义：表示语音语调的一个加重[斜体]
2.行内元素，不独占一行
+++ blockquote
1.语义：表示长引用[缩进两个字符]，引用内容比较长时使用
2.块级元素，独占一行
+++ q
1.语义：表示短引用[加引号 ""]，引用内容比较短时使用
2.行内元素，不独占一行
2.4 实体标签
1.在网页中输入多个空格，默认会解析为一个空格。
2.空格实体标签:
3.在HTML中，如果想要显示一个特殊符号，也是需要通过代码形式来实现的。
空格
小于号 @lt;
大于号 @gt;
人民币 @yen;
版权 @copy;
注册商标 @req;
三、超链接
<a href="链接地址" target="目标窗口的打开方式">
target属性
target="_self" 在当前窗口打开资源（默认值）
target="_blank" 在独立的窗口上打开新资源
target="_top" 在顶层框架中打开链接
target="_parent" 在当前框架的上一层里打开链接
href属性,表示跳转的地址。
超链接注意事项：
1.超链接也是行内元素，在a标签内可以嵌套除了它以外的任何元素。
2. 不产生任何动作
<a href="javascript:;">回到某个位置</a>
3.1 超链接原理
1）基本原理
a标签的href属性值
1.如果是以http开头，浏览器会马上启动http解析器去解析该网址
1）首先会在本地机器去找一个hosts文件(c:/windows/system32/drivers/etc/hosts） ，
如果在hosts文件上该域名没有对应的主机，那么浏览器就去到对应的dns服务器上（dns服务器相当于map集合）去找到对应的主机号，
2）如果找到对应的主机，那么该请求就会找到对应的主机。
2.如果a标签的href属性没有指定以任何协议开头，那么浏览器回启动file协议解析器去解释该资源路径。
<a href="www.baidu.com"></a>
该标签会启动file协议去解析路径。会查找本地资源，不会去访问百度网页。
3.如果a标签的herf属性使用了其他的协议，那么浏览器就会到我们本地的注册表中会查找是否有处理这种协议的应用程序，
如果有，就会马上启动该应用程序处理该协议。
文件协议：
<a href="www.baidu.com"></a>
邮箱协议：
<a href="mailTo:554030346@qq.com">请发送给我</a>
迅雷协议：
<a href="mailTo:554030346@qq.com">请发送给我</a>
2）a标签 常用协议
- file协议：启动本地资源
文件协议，这种协议主要是用于搜索本地机器的资源文件。
格式
file:\\\f:\\美女.png
- maiTo协议：启动邮件客户端
<a href="mailTo:554030346@qq.com">请发送给我</a>
mailTo会启动本地的邮箱，发送信息。
- thunder协议：启动迅雷
<a href="thunder://a/java逆袭之路.avi">java逆袭之路.avi</a>
3.2 超链接作用
1）锚点定位
定位到顶部
<a href="#">回到顶部</a>
定位到某个位置
方式一：
<a name="aa"></a>
<a href="#aa">回到某个位置</a>
方拾二：
<a id="aa"></a>
<a href="#aa">回到某个位置</a>
2）跳转资源
<a href="http://www.baidu.com"></a>
3.3 相对路径
./ 表示当前文件所在的目录(可省略不写)
../ 表示当前文件所在目录的上一级目录
<!--跳转到当前文件所在目录的a.html-->
<a herf="a.html"></a>
<a herf="./a.html"></a>
<!--跳转到当前文件所在目录的上一级目录的a.html-->
<a herf="../a.html"></a>
四、图像
4.1 img标签
1）语法
<img src="图片地址" alt="图片描述（给搜索引擎看）" title="图片描述（给用户看）">
1.src属性：指定图片路径
2.width属性、height属性:
1.默认单位像素(px，可省略不写)。
2.如果宽度、高度只修改了一个，那么另一个会等比例缩放。
3.alt属性：
图片无法加载时显示文字描述。
作用：搜索引擎会根据alt字段来识别图片内容。如果不写该属性，则搜索引擎不会搜索该图片。
4.title属性：
指针悬浮到图片上时显示文字描述。
4.属于inline-blobk（行内块）元素。
2）alt属性和title属性区别
img标签有两个重要属性：alt和title。
alt属性： 用于图片描述，这个描述文字是给捜索引擎看的。
并且当图片无法显示时，页面会显示alt中的文字。
title属性：用于图片描述，不过这个描述文字是给用户看的。
并且当鼠标指针移到图片 上时，会显示title中的内容。
说明：搜索引擎跟人不一样，它看不出一张图片描绘的是什么东西，它只会査看HTML代码，
通过img标签的alt属性或者页面上下文来判断图片的内容。因此，对于img标签，
我们一定要添加alt属性，以便搜索引擎识别图片的内容。alt属性在搜索引擎优化
中也很重要，并且会被赋予一定的权重。
注意：alt属性是img标签必需属性，一定要添加；
title属性是img标签可选属性，可加可不加。建议大家在实际开发中，对于img标签，要记得在alt属性中添加必要的描述信息。
4.2 图片格式
jpeg(jpg)：
支持颜色比较丰富。不支持透明效果。不支持动图。
一般用来显示照片。
png:
支持的颜色比较丰富。支持复杂透明。不支持动图。
颜色丰富，复杂透明图片。（转为网页而生）
gif：
支持的颜色比较少。支持简单透明。支持动图。
颜色单一的图片、动图。
webp:
谷歌新推出的专门用于网页中的图片格式。
它具备了其他图片格式的所有优点。
base64：
将图片使用base64编码，这样可以将图片转化为字符，通过字符的方式来引入图片。
一般是都一些需要和网页一起加载的图片才会使用。
<img src="data:image/png;base64,iVBORw0KGgoAAAAN..." />
选择图片格式的规则：
效果一样，用小的。
效果不同，用好的。
我们只需要掌握.jpg、.png和.gif三种图片格式的区别即可。
1、JPG可以很好处理大面积色调的图像，如相片、网页一般的图片。
2、PNG格式图片体积小，而且无损压缩，能保证网页的打开速度。最重要的是PNG格式图片支持透明信息。
PNG格式图片可以称为“网页设计专用格式”。
3、GIF格式图片图像效果很差，但是可以制作动画。
4.3 图片路径
在HTML中，路径分为两种：绝对路径和相对路径。
绝对路径：指的是图片在你的电脑中的完整路径。
平常我们用电脑都知道，文件夹上方会有一个路径，其实这个就是绝对路径
相对路径：指的是图片相对当前页面的位置。
五、多媒体标签
5.1 插入音频、视频和flash
网页中插入音频、视频和flash都可使用embed标签
<embed src="多媒体文件地址" width="播放界面的宽度" height="播放界面的高度" hidden="true/false" ></embed>
5.2 插入背景音乐
为某个网页设置背景音乐，使用的是bgsound标签。不过bgsound标签只适用于IE浏览器，在Firefox等浏览器中未必适用。
设置网页背景音乐时常用的方法除了使用bgsound标签，还有使用embed标签。
<bgsound src="背景音乐的地址" loop="2" />
loop="2" 表示重复2次
loop="infinite" 表示无限次循环播放，
也可以使用loop="-1"表示无限次循环播放。
5.3 音频、视频标签（HTML5 新增）
1）audio标签引入音频文件
audio标签用来向页面引入一个外部的音频文件：
方式一:
<audio src="./a.mp3" controls autoplay loop></audio>
方式二：
<audio controls>
对不起，你的浏览器不支持该标签！
<source src="./a.mp3">
<source src="./a.odd">
</audio>
controls属性，用于控制播放器是否显示。
autoplay属性，用于设置自动播放。
如果设置了autoplay，则音乐在打开页面时会自动播放，
但是目前来讲，大部分浏览器都不会对音乐自动播放。
loop属性，用于循环播放。
注意事项：
1.音视频文件引入时，默认不允许用户控制停止和播放。即不显示播放器。可以使用 controls属性来显示浏览器。
2.方式二优势：
当audio标签不被浏览器不识别时，就会显示标签内文字。
多个source存在时，不会同时使用。当第一个source被播放，不会播放第二个。当第一个source不被播放时，会播放第二个。
>>>>>> audio参数
>>>>>> 代码演示
<body>
<!-- 注意：在 chrome 浏览器中已经禁用了 autoplay 属性 -->
<!-- <audio src="./media/snow.mp3" controls autoplay></audio> -->
?
<!--
因为不同浏览器支持不同的格式，所以我们采取的方案是这个音频准备多个文件
-->
<audio controls>
<source src="./media/snow.mp3" type="audio/mpeg" />
</audio>
</body>
2）video 标签引入视频文件
video 标签用来向页面引入一个外部的视频文件，使用方式和audio一样：
<video controls >
<source src="./a.mp4">
<source src="./a.mp4">
</video>
>>>>>> video参数
>>>>>> 代码演示
<body>
<!-- <video src="./media/video.mp4" controls="controls"></video> -->
?
<!-- 谷歌浏览器禁用了自动播放功能，如果想自动播放，需要添加 muted 属性 -->
<video controls="controls" autoplay muted loop poster="./media/pig.jpg">
<source src="./media/video.mp4" type="video/mp4">
<source src="./media/video.ogg" type="video/ogg">
</video>
</body>
3）多媒体标签总结
1.音频标签与视频标签使用基本一致
2.多媒体标签在不同浏览器下情况不同，存在兼容性问题
3.谷歌浏览器把音频和视频标签的自动播放都禁止了
4.谷歌浏览器中视频添加 muted 标签可以自己播放
注意：重点记住使用方法以及自动播放即可，其他属性可以在使用时查找对应的手册
六、列表
列表有3种：有序列表、无序列表和定义列表。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--无序-->
<ul>
<li>1</li>
<li>2</li>
</ul>
<!--有序-->
<ol>
<li>1</li>
<li>2</li>
</ol>
<!--定义-->
<dl>
<dt>xx</dt>
<dd>这是一个描述</dd>
<dd>这是一个描述</dd>
<dd>这是一个描述</dd>
<dt>xx2</dt>
<dd>这是一个描述2</dd>
<dd>这是一个描述2</dd>
<dd>这是一个描述2</dd>
</dl>
</body>
</html>
6.1 无序列表
<ul type="disc">
<li>1</li>
<li>2</li>
</ul>
type: disc 默认值，实心圆“●”
circle 空心圆“○”
square 实心正方形“■”
6.2 有序列表
<ol type="1">
<li>1</li>
<li>2</li>
</ol>
表1 有序列表type属性
| type属性值 | 列表项的序号类型 |
|---|---|
| 1 | 数字1、2、3…… |
| a | 小写英文字母a、b、c…… |
| A | 大写英文字母A、B、C…… |
| i | 小写罗马数字i、ii、iii…… |
| I | 大写罗马数字I、II、III…… |
6.3 定义列表
<dl>
<dt>xx</dt>
<dd>这是一个描述</dd>
<dd>这是一个描述</dd>
<dd>这是一个描述</dd>
<dt>xx2</dt>
<dd>这是一个描述2</dd>
<dd>这是一个描述2</dd>
<dd>这是一个描述2</dd>
</dl>
定义列表:使用dl标签来创建无序列表，使用dt来表示定义的内容， 使用dd对内容进行说明。
定义列表语义：
dl: 定义列表
dt：定义标题
dd：定义描述
6.4 列表之间可以互相嵌套
<ul>
<li>
<ul>
<li>11</li>
<li>11</li>
</ul>
</li>
<li>
<ul>
<li>22</li>
<li>12</li>
</ul>
</li>
</ul>
七、表格
7.1 表格语义化（通过语义化记忆表格标签）
| 标签 | 语义 | 说明 |
|---|---|---|
| table | table （表格） | 表格 |
| tr | table row（表格行） | 行 |
| td | table data cell（表格单元格） | 单元格 |
| thead | table head | 表头 |
| tbody | table body | 表身 |
| tfoot | table foot | 表脚 |
| th | table header | 表头单元格 |
1）table表格
<table border="1" width="1000" cellspacing="0"></table>
border="1" 设置边框
cellspacing="0" 单元格外边距，单元格与外边框的距离，设置为0，则边框由双线合为一条实现。
cellpadding="0" 单元格内边距，单元格中的内容与单元格边线的距离。
width="1000"
width="50%" 设置表格宽度
height="600" 高度， 一般不为设置。由内容去撑
bgcolor="red" 设置表格背景色
background="../img/2.jpg" 设置表格背景图
align="center/left/right" 设置表格相对于页面的居中方式
2）tr行
<tr></tr>
height="20" 设置高度（tr没有width属性）
bgcolor="red" 设置行背景色
background="../img/2.jpg" 设置行背景图
align="center/left/right" 设置字体居中
3）td单元格
<td></td>
width="500" 设置宽度
heigtht="20" 设置高度
bgcolor="red" 设置行背景色
background="../img/2.jpg" 设置行背景图
align="center/left/right" 设置字体居中
7.2 表格基础结构
基础表格：
<table>、<tr>和<td>是HTML表格最基本的3个标签，
其他标题标签<caption>、表头单元格<th>可以没有，但是这3者必须要有。
注意：
1.tr的父标签不是table，而是tbody。
如果table标签中没有tbody标签，浏览器会自动加上tbody标签。
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>
7.3 表格完整结构（长表格）
1. 可以将一个表格分为三个部分：
caption 标题（可省略）、thead 头部、tbody 主体、tfoot 底部
<table border="1" width="50%" align="center">
<caption>可省略</caption>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
注意事项：
1. thead、tbody、tfoot这三个部分可以颠倒位置，但是页面显示不变。
2. 只有tbody标签可以写多个，其他的只能写一个。
3. tr的父标签是tbody标签
>>>>>> 长表格可以将表格分为三个部分
<table>
<caption>表格标题</caption>
<!--表头-->
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<!--表身-->
<tbody>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tbody>
<!--表脚-->
<tfoot>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tfoot>
</table>
>>>>>> 长表格可以将表格分为三个部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1" width="50%" align="center">
<thead>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>b</td>
<td>b</td>
<td>b</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
</tr>
</tfoot>
</table>
</body>
</html>
>>>>>> 长表格可以将表格分为三个部分，这三个部分写代码顺序可随意，但是页面展示不变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1" width="50%" align="center">
<thead>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</thead>
<tfoot>
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>b</td>
<td>b</td>
<td>b</td>
</tr>
</tbody>
</table>
</body>
</html>
7.4 表格使用技巧
1） 合并单元格（合并行、合并列）
+++ 水平方向合并两个单元格 colspan="2"
<table>
<tr>
<td colspam="2">1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
+++ 垂直方向合并两个单单元格 rowspan="2"
<table>
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
</tr>
</table>
2）caption 标题
<html>
<body>
<h4>这个表格有一个标题，以及粗边框：</h4>
<table border="6">
<caption>我的标题</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
3）表格隔行变色
>>>>>> 使用步骤
table{
width:500px;
height:400px;
border:1px solid red;
/** 设置单元格的空隙。 如果单元格合并了，则此属性无效 */
border-spacing: 10px;
/** 设置边框的合并 */
border-collapse: collapse;
/**设置水平居中 */
margin:0 auto;
}
td{
width:300px;
height:50px;
border:1px solid red;
/** 默认情况下，元素在td中是垂直居中的。可以通过vertical-align来设置*/
vertical-align: middle;
/**设置文字水平居中*/
text-align:center;
}
/** 设置隔行变色 */
tr:nth-child(2n+1){
background-color: pink;
}
注意：table > tr:nth-child(2n+1) 无效
tbody > tr:nth-child(2n+1) 有效
原因：如果浏览器没有使用tbody，而是直接使用tr。
那么浏览器创建tbody，并将tr放在tbody中。此时tr的父元素是tbody，而非table。
所以第一个无效，第二个有效。
>>>>>> 使用案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table{
width:500px;
border:1px solid red;
/** 设置单元格的空隙。 如果单元格合并了，则此属性无效 */
border-spacing: 10px;
/** 设置边框的合并 */
border-collapse: collapse;
/**设置水平居中 */
margin:0 auto;
}
td{
width:300px;
height:50px;
border:1px solid red;
/** 默认情况下，元素在td中是垂直居中的。可以通过vertical-align来设置*/
vertical-align: middle;
/**设置文字水平居中*/
text-align:center;
}
/** 设置奇数行背景颜色 */
tr:nth-child(2n+1){
background-color: pink;
}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>b</td>
<td>b</td>
<td>b</td>
</tr>
<tr>
<td>b</td>
<td>b</td>
<td>b</td>
</tr>
<tr>
<td>b</td>
<td>b</td>
<td>b</td>
</tr>
</table>
</body>
</html>
八、表单
8.1 表单
表单用于将本地数据提交给服务器。
1） Get和Post的区别
2）表单
<form action="http://www.baidu.com" method="get"></form>
action:用于指定提交的地址。
method:数据提交的方式
注意：表单项的数据必须含有name属性，数据才会被提交。
8.2 表单基础标签
1）input标签
+++ 文本框
<input type="text" value="默认文字" size="文本框长度" maxlength="最多输入字符数"/>
value 默认文字
placeholder 输入框为空就会显示该内容，作用：提示文字
maxlength 输入框最大字符
+++ 密码框
<input type="password" />
+++ 单选框
<input type="radio" name="sex" value="man" /> 男
<input type="radio" name="sex" value="woman" checked="true" /> 女
1.checked="true" / checked 默认被选中
2.value:设置提交的数据的值。 eg：sex=man。
3.单选框分组： name属性相同，即为一组。
+++ 复选框
<input type="checkbox" name=“hobby” value=“java” checked />唱歌
<input type="checkbox" name=“hobby” value=“play” />篮球
1.checked="true" / checked 默认被选中
2.value:设置提交的数据的值。 eg：sex=man。
3.同一组的复选框，name名称要一致。
+++ 文件上传框
<input type="file" name="file" /> 上传文件
+++ 隐藏
<input type="hidden" />
+++ 按钮
普通按钮 <input type="button" value="按我一下" />
提交按钮 <input value="submit" />
和button一样都是按钮，不过submit默认有提交功能。
重置按钮 <input type="reset" />
重置当前表单,并不是清空表单
图片按钮 <input type="image" src="2.jpg" />
图片按钮，带有提交功能。和提交按钮功能一样
2）textarea标签（文本域）
<textarea rows="行数" cols="列数">多行文本框内容</textarea>
rows 行数
cols 列数
minlength 当前的文本域最少输入多少字，否则表单不会提交
maxlength 当前的文本域最多输入多少字，否则表单不会提交
3）select标签（下拉框）
<select>
<option>北京</opiton>
<option>上海</option>
<option selected="true">农村</option>
</select>
1.默认被选中: selected="true" / selected
<option selected="true">上海</option>
默认选中
<select>
<option selected="true">HTML</opiton>
<option>CSS</option>
<option>jQuery</option>
</select>
分组
<select >
<optgroup label="北京" >
<option> 海淀区</option>
<option> 朝阳区</option>
</optgroup>
<optgroup label="长春">
<option selected="true" >宽城区</option>
<option>南关区</option>
<option>高新区</option>
</optgroup>
</selected>
4）表单标签新增属性（HTML5新增）
autocomplete="on" /"off" 关闭自动补全 / 打开自动补全（默认值）
readonly/readonly=“true” 只读，数据会提交
disabled/disabled="true" 禁用，数据不会提交
autofocuse/autofocus="true" 自动获取焦点
九、内联框架
9.1 iframe标签(浮动框架标签)
浮动框架是一种较为特殊的框架，它是在浏览器窗口中嵌套的子窗口，整个页面并不一定是框架页面，但要包含一个框架窗口。框架可以完全由设计者定义宽度和高度，并且可以放置在一个网页的任何位置，这极大地扩展了框架页面的应用范围。
<frameset>生成的框架结构是依赖上级空间尺寸的，它的宽度或者高度必须有一个和上级框架相同。而<iframe>浮动框架可以完全由指定宽度和高度决定。
<iframe src="http://www.baidu.com" width="500" height="500" frameborder="0"> </iframe>
src: 它定义浮动框架页面的源文件地址。
width、height： 定义引入页面的宽高
frameborder：指定内联框架的边框。
frameborder="0" 表示元素无边框
frameborder="1" 表示元素有边框
scrolling：设置滚动条
scrolling=“auto” 默认值，整个表格在浏览器页面中左对齐
scrolling=“yes” 总是显示滚动条，即使页面内容不足以撑满框架范围，滚动条的位置也预留
scrolling=“no” 在任何情况下都不显示滚动条
举例
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="main">
<h3>绿叶学习网</h3>
<iframe src="http://www.baidu.com" width="400px" height="300px" scrolling="no"></iframe>
</div>
</body>
</html>
9.2 frameset标签
<frameset rows="30%,50%,*">
<frame src="logo.html"></frame>
<frameset cols="30%,*">
<frame src="left.html"></frame>
<frame src="content.html"></frame>
</frameset>
<frame src="footer.html"></frame>
</frameset>
frameSet 一个frameSet可以把一个页面切割成多分。
frame 不能被切割，frame是位于frameSet中
【frameset不能位于body中】
<html>
<head>
<title>12</title>
</head>
<frameset rows="30%,50%,*">
<frame src="logo.html"></frame>
<frameset cols="30%,*">
<frame src="left.html"></frame>
<frame src="content.html"></frame>
</frameset>
<frame src="footer.html"></frame>
</frameset>
</html>
十、HTML进阶
10.1 div和span
+++ 语义
div和span没有任何语义,正是因为没有语义，这两个标签一般都是配合CSS来定义元素样式的。
+++ div和span区别如下：
(1) div是块元素，可以包含任何块元素和行内元素，不会与其他元素位于同一行；
span 是行内元素，可以与其他行内元素位于同一行。
(2 ) div常用于页面中较大块的结构划分，然后配合CSS来操作；
span 一般用来包含文字等, 它没有结构的意义，纯粹是应用样式。
当其他行内元素都不适合的时候，可以用span来配合CSS 操作。
10.2 id和class
id和class是HTML元素中两个最基本的公共属性。一般情况下，id和class都用来选 择元素，以便进行CSS操作或者JavaScript操作。但是很多新手对id和class这两个属性感到很迷茫，不知道什么时候用id,什么时候用class,甚至随便使用。
（一）id 属性
id属性具有唯一性，也就是说在一个页面中相同的id只允许出现一次。W3C建议，对于页面关键的结构或者大结构，我们才使用id。所谓的关键结构，指的是诸如LOGO、导航、 主体内容、底部信息栏等结构。对于一些小地方，还是建议使用class属性。
我们知道搜索引擎识别一个页面结构，是根据标签的语义以及id属性来识别的。因此 id属性不要轻易使用。此外，id的命名也十分关键，特别是对搜索引擎优化而言。对于id和 class的命名，我们在CSS进阶部分会详细介绍。
（二）class属性
class,顾名思义，就是“类”。它釆用的思想跟C、Java等编程语言中的“类”相似。 我们可以为同一个页面的相同元素或者不同元素设置相同的class,然后使得相同class的元 素具有相同的CSS样式。
如果你要为两个或者两个以上元素定义相同的样式，建议使用class属性。因为这样可以 减少大量的重复代码。
注意，对于一个元素而言，我们可以定义多个class. 一般来说，定义多个class的目的在于：一般用一个class抽取公共样式，然后用另外一个class定义单独样式。
对于id和class,我们总结一下：对于页面关键结构，建议使用id；对于小地方，建议 使用class。就算我们不需要对关键结构进行CSS操作或者JavaScript操作，也建议加上id.以便搜索引擎识别页面结构。
10.3 浏览器标题栏小图标
<link rel="shortcut icon" type="image/x-icon" href="favicon.icon"/>
href属性取值为小图标的地址。
注意：小图标格式是.ico,而不是.jpeg、.png、.gif等格式。
案例
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML进阶学习</title>
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"/>
</head>
<body>
xxx
</body>
</html>
10.4 语义化
1）换行符语义化
W3C标准规定，＜br/＞ 标签仅仅用于段落中的换行，不能用于其他情况。
也就是说，＜br/＞标签只适合用于p标签内部的换行，不能用于其他标签。
换行符语义化举例：
很多新手会使用＜br/＞标签来换行，或者使用多个＜br/＞标签来实现元素之间的上下间距。
<div>
<span> 标题 </span><br/><br/>
<span>第 1 部分内容 </span><br/>
<span>第 2 部分内容 </span><br/>
<span>第 3 部分内容 </span>
</div>
上面例子使用＜br/＞标签的方式是错误的，这也是＜br/＞标签很常见的错误用法。
事实上，＜br/＞标签有自己特定的语义，不能随便用来实现换行效果。
2）无序列表语义化
在实际开发中，对于列表型的数据，为了实现良好的语义，我们还是建议使用无序列表
或者有序列表，不建议使用div等来实现。
案例
对于如图所示效果，不少新手很可能会写出如下代码来实现。
<div>
<div><span>l</span>HTML 教程 </div>
<div><span>2</span>CSS 教程 </div>
<div><span>3</span>JavaScript 教程 </div>
</div>
这种实现方式缺乏语义化，并且也不利于维护。正确的做法是:
<ul>
<li><span>l</span>HTML 教程 </li>
<li><span>2</span>CSS 教程 </li>
<li><Sp^n>3</span>JavaScript 教程 </li>
</ul>
有人问，每一个列表项前都有数字，不应该使用有序列表来实现吗？为什么这里使用无序 列表来实现呢？假如使用有序列表，我们是做不到这种外观效果的。因为有序列表前的数字外 观是固定的。在实际开发中，大多数情况下都是使用无序列表，极少情况下会使用有序列表。
3）strong标签和em标签语义化
strong用于实现加粗文本，em用于实现斜体文本。
基于结构和样式分离的原则，标签仅仅是为了实现简单的加粗或者 斜体效果，我们一般不会用这两个。
实际上，W3C对这两个标签赋予“强调”的语义，在strong或者em标签内部的文本被强调为重要文本。并且搜索引擎对这两个标签也赋予一定的权 重。
如果在一个页面中，为了 SEO而想要突出某些关键字，可以使用strong和em这两个标 签。
一般情况下，我们都是去掉strong和em的默认样式，然后使用CSS重新定义新的样式, 但这并不影响这两个标签的语义。也就是说，样式只会改变标签的外观，但不会改变标签的语 义。
5）img标签语义化
想要在页面显示一张图片，我们有两种方式：一是使用img标签；二是使用背景图片。 这两种实现方式最明显的区别在于：使用img标签添加图片，是通过HTML来实现；使用背 景图片，是通过CSS来实现。
在实际开发中，很多人添加图片的方式很随意。对于什么时候使用img标签，什么时候 使用背景图片，并不是很清楚我们应该根据HTML的语义来判断。如果图片作为HTML的一 部分，并且想要被捜索引擎识别，则应该使用img标签，例如常见的各种图片列表。如果图 片仅仅是起到修饰作用，并且不想被搜索引擎识别，则应该使用背景图片。
举个例子，图左这个页面中的图标图片就应该使用背景图片实现，因为这些图标并不 需要被搜索引擎识别，也不作为HTML的一部分。而图右页面中应该使用img标签来实 现，因为这是页面HTML结构的一部分，并且希望被搜索引擎识别。
6）【总结】
以上只是列举了在实际开发中比较常见的语义标签，其实HTML5新增了很多结构语义标签，
例如header、nav、aside、footer、article、section等。
如果想要实现语义更为良好的页面，我们也应该去关注这些新增的标签。
不过结构语义标签是HTML5的内容，因此这里不展开介绍。
10.5 html5舍弃的标签
HTML5除了新增的标签还舍弃了许多标签。
为了实现页面的语义化，我们在实际开发中应该避免使用这些标签。
对于HTML5舍弃的标签，总体分为两大类：
1.仅仅为了定义样式，没有任何语言，因此被舍弃。
2.很少使用或者已经被新标签替代，因为被舍弃。
1) HTML5舍弃的标签(仅为了定义样式)
| 标 签 | 说明 |
|---|---|
| basefont | 定义页面文本的默认字体、颜色或尺寸 |
| big | 定义大字号文本 |
| center | 定义文本居中 |
| font | 定义文本的字体样式 |
| strike | 定义删除线文本 |
| s | 定义删除线文本 |
| u | 定义下划线文本 |
2) HTML5舍弃的标签(很少使用或者已被新标签代替)
| 标 签 | 说明 |
|---|---|
| dir | 定义目录列表，应该用ul代替 |
| acronym | 定义首字母缩写，应该用abbr代替 |
| applet | 定义嵌入的applet,应该用object代替 |
| isindex | 定义与文档相关的可搜索索引 |
| frame | 定义frameset中的一个特定的框架 |
| frameset | 定义一个框架集 |
十一、HTML5
11.1 什么是 HTML5
+++ HTML5 的概念与定义
定义：
HTML5 定义了 HTML 标准的最新版本，是对HTML的第五次重大修改，号称下一代的 HTML
两个概念：
1.是一个新版本的 HTML 语言，定义了新的标签、特性和属性
2.拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是广义上的 HTML5。
11.2 HTML5 拓展了哪些内容
1.语义化标签
2.本地存储
3.兼容特性
4.2D、3D
5.动画、过渡
6.CSS3 特性
7.性能与集成
11.3 HTML5 的现状
绝对多数新的属性，都已经被浏览器所支持，最新版本的浏览器已经开始陆续支持最新的特性，
总的来说：HTML5 已经是大势所趋
11.4 HTML5 新增标签
1）结构化标签
header:表示网页的头部
main：表示网页的主题部分，一个页面中只会有一个main
footer:表示网页的底部
nav:表示网页中的导航
aside：表示和主体相关的其他内容（侧边栏）
article:表示文章
section：上面的标签在语义上都不能表示时，用section。表示一个独立的区块
注意事项:
1.这些标签是在html5中新增的标签，在开发中很少用到，了解即可。
2.这些标签没有任何样式。
3.这些标签没有任何样式。
4.div标签:
div没有语义，用来表示一个区块。
目前来说div是我们主要的布局元素，他可以代替以上标签。
span标签：
span没有语义，一般用于在网页中选中文字。
<header>头部</header>
<main>主题</main>
<footer>底部</footer>
<nav>xxx</nav>
<aside>xxx2</aside>
<article>xxxx</article>
<section>xxx</section>
2）多媒体音频标签、视频标签
多媒体标签有两个，分别是
音频 -- audio
视频 -- video
audio标签
<body>
<!-- 注意：在 chrome 浏览器中已经禁用了 autoplay 属性 -->
<!-- <audio src="./media/snow.mp3" controls autoplay></audio> -->
?
<!--
因为不同浏览器支持不同的格式，所以我们采取的方案是这个音频准备多个文件
-->
<audio controls>
<source src="./media/snow.mp3" type="audio/mpeg" />
</audio>
</body>
video标签
<video src="./media/video.mp4" controls="controls"></video>
11.5 新增input标签
- 新增input标签
- 新增属性
二、块元素（block element）、行内元素（inline element）
块元素（block element）：
1.在网页中一般使用块元素来对页面进行布局。
行内元素（inline element）
1.行内元素主要用于包裹文字
注意事项:
1.一般情况下我们会在块元素中放行内元素，不会在行内元素中放块元素。
2.块元素可以放任何元素，但是p元素中不能放任何的块元素。
3.浏览器在解析元素时，会对错误语法进行修正。
比如：
标签写在根元素的外部
p元素中放入了块元素
浏览器在解析元素时，会对错误语法进行修正
浏览器在解析元素时，会对错误语法进行修正。
比如： 标签写在根元素外面；
p元素中放块元素
>>>>>> 案例：P元素中不能放入块元素，在p元素中放入块元素，浏览器在在解析时会修正
块元素中可以放入任何元素，但是P元素中不能放入块元素。
在案例中我们在P元素中放入块元素，查看源代码，会看到浏览器对其进行了修正。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="" />
</head>
<body>
<p>
<h1>sss</h1>
</p>
</body>
</html>
内容总结
以上是互联网集市为您收集整理的四、HTML（二）-- HTML标签全部内容，希望文章能够帮你解决四、HTML（二）-- HTML标签所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】