三、常用标签介绍
1. 基本结构解析
<!-- 文档类型声明，便于浏览器正确解析标签及渲染样式 -->
<!doctype html>
<!-- HTML文档开始的标志 -->
<html lang="en">
<!-- 头部设置，可在head中设置网页标题，引入外部的资源文件 -->
<head>
<!-- 设置网页标题，显示在网页选项卡上方 -->
<title>网页标题</title>
#移动端需加下面代码
<meta name="viewport" content="width=device-width,user- scalable=no,initial-scale=o，maximum-scale=1.0,minirrum-scale=1.0">
<!-- 设置网页字符编码 -->
<meta charset="utf-8">
</head>
<!-- 网页主体部分，显示网页主要内容 -->
<body>
网页主体内容
</body>
</html><!-- 文档结束-->
<!--
lang语言种类
用来定义当前文档显示的语言。
1. en定义语言为英语
2. zh-CN定义语言为中文
简单来说,定义为en就是英文网页,定义为zh-CN就是中文网页
-->
<!--
meta 的name属性值
keywords 关键词引用
description 描述引用
author 作者引用
viewport 配置引用
-->
<!--
viewport 对应的content属性值
width 视口宽度
height 视口高度
initial-scale 初始缩放比例
maximum-scale 最大缩放比例
minimum-scale 最小缩放比例
user-scalable 是否允许用户缩放
-->
<!--
link 作用：引入外部资源
属性：
href ；链接文件的路径
rel: 当前文档与链接文档的关系
stylesheet css样式表
lcon 小图标
type: 目标文件的类型
-->
注：在idea中输入 ！ + tab 生成基本框架
2. 标签分类
-
块标签
独占一行,不与标签共行;可以手动设置宽高,默认宽度与与父标签保持一致 例 : body div h1~h6 p ul ol li form table(默认尺寸由内容决定)
-
行内标签
可以与其他标签共行显示;不能手动设置宽高,尺寸由内容决定 例 : span label b strong i s u sub sup a
-
行内块标签
可以与其他标签共行显示,又能手动调整宽高 例 : img input button (表单控件)
3. 标签比较
-
行内标签的特征
-
块标签特征
4. 标签间的转换(display)
-
转成块元素 （display: block）
-
转成内联元素(display: inline)
-
转换行内块（display: inline-block）
-
==display==的其他属性(默认为空)
none ->使得元素隐藏
block->使得元素显示
5. 标签嵌套
-
块标签中可以嵌套任意类型的标签 p 标签除外，段落标签只能嵌套行内标签，不能嵌套块标签
-
行内标签中最好只嵌套行内或行内块标签
-
标签嵌套 在双标签中书写其他标签，称为标签嵌套
-
嵌套结构中，外层标签称为父标签，内层标签称为子标签。
-
多层嵌套结构中，所有外层标签统称为祖先标签，内层标签统称为后代标签。
-
平级结构互为兄弟标签。
-
6. body中常用标签
(1) 文本标签
标题标签：自带加粗效果，从h1到h6字体大小逐级递减
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6> - 段落标签：
<p>段落文本</p>普通文本标签：
<strong>强调标签</strong> <b>加粗标签</b>
<em>斜体标签</em> ，<i>斜体标签</i>
<del>删除线标签</del> ,<s>删除线标签</s>
<ins>下划线</del> ,<u>下划线</u>
<span>行分区标签，用于对特殊文本特殊处理</span>
<label>普通文本标签，常与表单控件结合实现文本与控件的绑定</label>换行标签：
浏览器会忽略代码中的换行和空格，只显示为一个空格。想要实现页面中的换行，需要借助于换行标签。
<br>水平线标签，在页面中插入一条水平分割线
<hr>字符实体：
某些情况下，浏览器会将一些特殊字符按照 HTML 的方式解析，影响显示结果。此时需要将这类字符转换为其他的形式书写。 例：
```
使用 < 在页面中呈现 "<"
使用 > 在页面中呈现 ">"
使用 在页面中呈现一个空格
使用 © 在页面中呈现版权符号"©"
使用 ¥ 在页面中呈现人民币符号"￥"
使用 & 在页面中呈现和号"&"
使用 ® 在页面中呈现注册商标符号"OR"
使用 ° 在页面中呈现摄氏度符号""
使用 ± 在页面中呈现正负号符号""
```(2)容器标签
常用于页面结构划分，结合CSS实现 div+css 网页布局 < div>标签用来布局，但一行只能放一个； < span> 一行可以放多个
<div id="top">页面顶部区域</div>(div#top 快捷方式 #->id) <div id="main">页面主体区域</div> <div id="bottom">页面底部区域</div>
(3)图片标签
图片标签** <img src=""> **：用于在网页中插入一张图片。
属性 src 用于给出图片的URL，必填。 属性 width/height 用于设置图片尺寸，取像素值px，默认按照图片的原始尺寸显示。 属性 title 用于设置图片标题，鼠标悬停在图片上时显示 属性 alt 用于设置图片加载失败后的提示文本
属性 border 用于设置图片的边框粗细
语法：
```html
<img src="" width="" height="" title="" alt="">
```(4)超链接标签
用户可以点击超链接实现跳转至其他页面
属性 href 用于设置目标文件的URL，必填。 属性 target用于设置目标文件的打开方式，默认在当前窗口打开(取"_ self")。可以设置新建窗口打开目标文本(取"_blank")
空链接:如果当时没有确定链接目标时, 首页 。 下载链接:如果href里面地址是一个文件或者压缩包，会下载这个文件。
属性href也可以指向某个id号属性的标签(实现至顶部或底部 href="# ") 锚点链接
点击链接，可以定位到页面中的某个位置。href属性中，设置属性值为** #名字 **的形式
<a href="http://www.taobao.com" target="_self">淘宝</a> <a href="http://www.baidu.com" target="_blank">百度</a> <a href="#id"> 锚点链接</a> <div id="id"> </div>
(5) 路径
相对路径
同一路径
<img src="baidu.jpg">下一路径<img src="img/baidu.jpg">上一路径<img src="../baidu.jpg">绝对路径
是指目录下得绝对位置，直达目标位置，从盘符开始的路径
c:\appdate\jpg.jpg
(6) iframe标签
打开一个指定的界面
<iframe src=" www.baidu,com" frameborder="0"> </iframe>
(7)多媒体标签 html5
| 标签 | 描述 |
|---|---|
| <audio> | 定义音频内容 |
| <video> | 定义视频（video 或者 movie） |
| <source> | 定义多媒体资源 <video> 和 <audio> |
| <embed> | 定义嵌入的内容，比如插件。 |
| <track> | 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。 |
注：目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。
目前<audio> 元素支持的3种文件格式：MP3、Wav、Ogg。
-
视频属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| height | pixels | 设置视频播放器的高度。 |
| loop | loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放。 |
| muted | muted | 如果出现该属性，视频的音频输出为静音。 |
| poster | URL | 规定视频正在下载时显示的图像，直到用户点击播放按钮。 |
| preload | auto metadata none | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 |
| src | URL | 要播放的视频的 URL。 |
| width | pixels | 设置视频播放器的宽度。 |
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>-
音频属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。 |
| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放。 |
| muted | muted | 如果出现该属性，则音频输出为静音。 |
| preload | auto metadata none | 规定当网页加载时，音频是否默认被加载以及如何被加载。 |
| src | URL | 规定音频文件的 URL。 |
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>7. 常用结构标签
(1)列表标签
无序列表 默认用实心圆点标识列表项(快捷 ul>li*n )
注：去掉项目符号(小圆点) css: list-style: none
<ul> <li>list item 列表项</li> <li>list item 列表项</li> <li>list item 列表项</li> </ul>
有序列表 默认使使用阿拉伯数字标识每条数据，可以使用start属性设置起始的值，默认为1，type属性设置显示符号种类,reversed反向显示(快捷 ol>li*n )
<ol start="" type="" reversed> <li>list item 列表项</li> <li>list item 列表项</li> <li>list item 列表项</li> </ol>自定义列表 在html标签中，<dl>标签用于定义描述列表，与<dt>(定义项目)和<dd>(描述每一个项目)
名词1
名词1解释1
名词1解释2
```
列表嵌套
在已有列表中嵌套添加另一个列表，常见于下拉菜单
```html
<ol>
<li>
西游记
<ul>
<li>孙悟空</li>
<li>孙悟空</li>
<li>孙悟空</li>
</ul>
</li>
</ol>
```(2)表格标签
表格由行和单元格组成，常用于直接的数据展示或辅助排版，基本结构如下：border加边框，cellspacing 边框距离(快捷 table>trn>tdn）
<!-- 创建表格标签 --> <table border="1" cellspacing="0"> <!-- 创建行标签 --> <caption>表格名 </cellspacing> <!-- 表格的头部区域--> <thead> <tr> <!-- 行中创建单元格以显示数据 --> <th>姓名</th> <th>年龄</th> <th>班级</th> </tr> </thead> <!-- 表格的主体区域--> <tbody> <tr> <td>张三</td> <td>20</td> <td>一(1)班</td> </tr> </tbody> </table>注：
<thead> </thead> 用于定义表格的头部区域。里面必须有<tr>标签。
<tbody> </tbody> 用于定义表格的主体
单元格合并：用于调整表格结构，分为跨行合并和跨列合并，合并之后需要删除被合并的单元格，保证表格结构完整。
| 单元格属性 | 作用 | 取值 | | ---------- | -------------- | ---------- | | colspan | 跨列合并单元格 | 无单位数值 | | rowspan | 跨行合并单元格 | 无单位数值 | 注： 跨行 最上测单元格为目标单元格，写合并代码 跨列 最左侧单元格为目标单元格，写合并代码
- 合并示例代码：
```html
<table border="1">
<tr>
<th>姓名</th> <!-- 标题-->
<td>李小明</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>010-1234567</td>
</tr>
<tr>
<td>13912321213</td>
</tr>
</table>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>李小明</td>
<td>010-1234567</td>
<td>13912321213</td>
</tr>
</table>
```
(3)表单标签
表单用于采集用户的信息并提交给服务器，由表单标签和表单控件组成。表单标签form负责提交数据给服务器，表单控件负责收集数据。
表单使用
**<form> </form>**
属性名 取值 action 设置数据的提交地址(服务器) #->本网页地址 method 设置数据的提交方式，默认为get方式，可以设置为post name 指定表单的名称 onsubmit 设置表单数据提交时的触发事件的执行函数（事件绑定中详细介绍 例如： GET 请求的特点是：
1、浏览器地址栏中的地址是：action 属性[+?+请求参数]
请求参数的格式是：name=value&name=value
2、不安全
3、它有数据长度的限制
POST 请求的特点是：
1、浏览器地址栏中只有 action 属性值
2、相对于 GET 请求要安全
3、理论上没有数据长度的限制
<form action="" method="" οnsubmit=""> <!--此处为表单控件--> </form>
所有表单标签
标签 描述 <input> 定义输入域 <textarea> 定义文本域 (一个多行的输入控件) <label> 定义了 <input> 元素的标签，一般为输入标题 <select> 定义了下拉选项列表 <option> 定义下拉列表中的选项 <fieldset> 定义了一组相关的表单元素，并使用外框包含起来 <legend> 定义了 <fieldset> 元素的标题 <optgroup> 定义选项组 <button> 定义一个点击按钮 <datalist> 指定一个预先定义的输入控件选项列表 <keygen> 定义了表单的密钥对生成器字段 <output> 定义一个计算结果 <range> 设置拖动元素 与min,max属性连用 表单控件用于采集用户信息，可设置以下标签属性
属性名 取值 type 设置控件类型 name 设置控件名称，最终与值一并发送给服务器 单选与多选name相同 value 设置控件的值 placeholder 设置输入框中的提示文本 maxlength 设置输入框中可输入的最大字符数 checked 设置单选按钮或复选按钮的默认选中 selected 设置下拉菜单的默认选中 readonly 规定输入字段是只读的。 accept audio/* video/* image/* MIME_type规定通过文件上传来提交的文件的类型。 (只针对type="file") 比如 <input accept="audio/*,video/*,image/*" /> max number|date 规定输入字段允许的最大值。 maxlength number 在 <input> 元素中允许的最大字符数。 min number |date 规定输入字段允许的最小值。 pattern regexp规定用于验证 <input> 元素的值的正则表达式。 pattern="[A-Za-z]{3}" required 属性规定必需在提交表单之前填写输入字段。 src 规定作为提交按钮来使用的图像的 URL。只能与 <input type="image"> 配合使用。 step 属性规定 <input> 元素的合法数字间隔。适用于下面的 input 类型：number、range、date、datetime、datetime-local、month、time 和 week。<input type="number" name="points" step="3"> autocomplete off/on 当用户在字段开始键入时,浏览器基于之前键入过的值，应该显示出在字段中填写的选项。 默认已经打开,如autocomplete="on"，关闭autocomplete ="off"需要放在表单内，同时加上name属性,同时成功提交 multiple 可以多文件提交 注：
（1）name的主要功能就是用于区别不同的表单
（2）radio或checkbox类型的，是一组，必须取相同的名字
type属性
button 定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。 checkbox 定义复选框。 color 定义拾色器。 date 定义 date 控件（包括年、月、日，不包括时间）。 datetime 定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）。 datetime-local 定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。 定义用于 e-mail 地址的字段。 file 定义文件选择字段和 "浏览..." 按钮，供文件上传。 hidden 定义隐藏输入字段。 image 定义图像作为提交按钮。 month 定义 month 和 year 控件（不带时区）。 number 定义用于输入数字的字段。 password 定义密码字段（字段中的字符会被遮蔽）。 radio 定义单选按钮。 range 定义用于精确值不重要的输入数字的控件（比如 slider 控件）。 reset 定义重置按钮（重置所有的表单值为默认值）。 search 定义用于输入搜索字符串的文本字段。 submit 定义提交按钮。 tel 定义用于输入电话号码的字段。 text 默认。定义一个单行的文本字段（默认宽度为 20 个字符）。 time 定义用于输入时间的控件（不带时区）。 url 定义用于输入 URL 的字段。 week 定义 week 和 year 控件（不带时区）。
<form action="#">
<div>
<!-- label 要与 input 连接，可以点击文字也可输入,只要展现文字就要使用label-->
<label for="id">账号：</label>
<input type="text"
id="id"
name="id">
</div>
<div>
<!-- label 要与 input 连接，可以点击文字也可输入-->
<label for="password">密码：</label>
<input type="password"
id="password"
name="password">
</div>
<div>
<!-- 下拉列表 -->
<label for="xl">学历</label>
<select name="xl" id="xl">
<!-- 下拉列表表项 value用来传送服务器 -->
<option value="1">大学</option>
<option value="2">中学</option>
</select>
</div>
<div>
<label for="sex">性别：</label>
<!-- 单选按钮 相同的name值 起到排斥 -->
<label for ="nan">男</label>
<input type="radio"
name="sex"
id = "nan"
checked
value="1">男
<label for ="nv">女</label>
<input type="radio"
name="sex"
id = "nv"
value="2">女
</div>
<div>
<label for="like">爱好：</label>
<!-- 多选 -->
<input type="checkbox"
name="like"
value="1">编程
<input type="checkbox"
name="like"
value="2">游戏
<input type="checkbox"
name="like"
value="3">吃货
</div>
<div>
<label for="demo">简介：</label>
<!-- 文本框 输入多行文本 -->
<textarea name="demo"
id="demo"
cols="30" #显示多少列
rows="10"> #每行显示多少字符
</textarea>
</div>
<div>
<!-- 提交按钮 会将form的内容提交到服务器-->
<input type="submit"
value="注册" />
<input type="reset" value="重置">
</div>
</form>#注册页面
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="register">
<h3>
青春不常在，抓紧谈恋爱
</h3>
<form action="#" method="get">
<div class="sex">
<span>性别</span>
<input type="radio"
name="sex"
id="nan"
checked
value="男">
<label for="nan">男</label>
<input type="radio"
name="sex"
id="nv"
value="男">
<label for="nv">女</label>
</div>
<div class="bairday">
<span>生日</span>
<select name="year" id="year" >
<option value="2022">2022</option>
<option value="2021">2021</option>
<option value="2020">2020</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
</select>
<select name="month" id="month" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="day" id="day" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="adress">
<span>所在地区</span>
<input type="text" name="place">
</div>
<div class="marriage ">
<span>婚姻状况</span>
<input type="radio"
name="marriage"
id="n"
checked
value="未婚">
<label for="n">未婚</label>
<input type="radio"
name="marriage"
id="y"
value="已婚">
<label for="y">已婚</label>
<input type="radio"
name="marriage"
id="l"
value="离婚">
<label for="l">离婚</label>
</div>
<div class="education">
<span>学历</span>
<select name="edu" id="edu" >
<option value="1">初中以下</option>
<option value="2">高中</option>
<option value="3">专科</option>
<option value="4">本科</option>
<option value="5">硕士</option>
<option value="6">博士</option>
</select>
</div>
<div class="like" >
<span>喜欢的类型</span>
<input type="checkbox" name="like" value="可爱的">可爱的
<input type="checkbox" name="like" value="小鲜肉">小鲜肉
<input type="checkbox" name="like" value="成熟的">成熟的
<input type="checkbox" name="like" value="妖娆的">妖娆的
</div>
<div class="me">
<span>自我介绍</span>
<textarea
name="me"
placeholder="自我介绍"></textarea>
</div>
<div class="btn">
<input type="submit" value="免费注册">
</div>
<div class="radio">
<input type="radio" id="rad">
<label for="rad"> 我同意条款</label>
</div>
</form>
</div>
</body>
</html>(4)新增元素
| 标签 | 描述 |
|---|---|
| <article> | 定义页面独立的内容区域。 |
| <aside> | 定义页面的侧边栏内容。 |
| <bdi> | 允许您设置一段文本，使其脱离其父元素的文本方向设置。 |
| <command> | 定义命令按钮，比如单选按钮、复选框或按钮 |
| <details> | 用于描述文档或文档某个部分的细节 |
| <dialog> | 定义对话框，比如提示框 |
| <summary> | 标签包含 details 元素的标题 |
| <figure> | 规定独立的流内容（图像、图表、照片、代码等等）。 |
| <figcaption> | 定义 <figure> 元素的标题 |
| <footer> | 定义 section 或 document 的页脚。尾部标签 |
| <header> | 定义了文档的头部区域 |
| <mark> | 定义带有记号的文本。 |
| <meter> | 定义度量衡。仅用于已知最大和最小值的度量。 |
| <nav> | 定义导航链接的部分。 |
| <progress> | 定义任何类型的任务的进度。 |
| <ruby> | 定义 ruby 注释（中文注音或字符）。 |
| <rt> | 定义字符（中文注音或字符）的解释或发音。 |
| <rp> | 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。 |
| <section> | 定义文档中的节（section、区段）。 |
| <time> | 定义日期或时间。 |
| 规定在文本中的何处适合添加换行符。 |
这种语义化标准主要是针对搜索引擎的这些新标签页面中可以使用多次 在IE9中，需要把这些元素转换为块级元素
375
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
