html标签
html标签一般是成对出现的，叫做双标签，其中第一个标签叫做开始标签（开放标签），第二个标签叫做结束标签（闭合标签），结束标签的标签名前是有/标注。
- 单标签
<标签名 />
- 标签关系：嵌套关系（父子关系） 并列关系（兄弟关系）
<p>1234324
<span>与第一个<p>是嵌套关系（父子关系) <span>
</p>
<p>
与第一个<p>是并列关系（兄弟关系）
</p>
- 标签属性，有些标签是自带属性的
<标签名 属性名1=‘属性值’ 属性名2=‘属性值’>标签体</标签名>- 标签的通用属性，即每个标签都会有的属性，通用属性是写在标签里的id class style title
- 注意，有些自带属性是不能写在css样式中的，比如a链接的href属性，img的url属性，通用属性等…
- 有些标签会自带一些样式属性，不推荐使用，标签的样式要写在css样式中，这样才能实现结构与样式相分
html的基本结构
<html>
<head>
<!--head标签是网页的头部，里面是给浏览器看的是网页的设置信息，除了title标签展示的标题以外，其他内容是不可见的-->
<title>网页的标题，用户保存网页时会使用这个标题作为，默认标题</title>
</head>
<body>
<!-- 页面的主体，里面的内容是给用户看的会在浏览器中展示出来-->
</body>
</html>
基本标签的解释
<!DOCTYPE html>
<!-- 文档声明标签（不是html标签） document type ，作用：就是告诉浏览器以html5的版本来熏染页面-->
<html lang="en">
<!-- html是网页根标签 网页的最大的标签，其他的html标签都要写在html标签内 lang告诉浏览器这是一个中文网站(lang="zh-CN")还是英文（lang="en"）网站-->
<head>
<!-- head标签作用：用来设置网页的配置信息 里面的内容主要是给浏览器看的 除了title标签以外head标签内的其他内容都不会在浏览器中展示出来 -->
<!--
head标签内主要是通过meta标签来设置网页的基本信息 （作者 关键字 描述信息 更新时间 字符集）
-->
<meta charset="UTF-8">
<!--
设置网页采用的字符集（字符的集合）
常用的字符集：gb2312（中文字符集 包含了简体中文和一些常见的外文 特殊符合） gbk （中文的字符集 新增繁体中文 ） utf-8（包含了世界上所有国家的语言，万国码）
-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 为ie8 服务的 ，告诉ie8以最高版本的ie浏览器来熏染页面 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="设置网页的描述信息 为了seo可以将该网站更快更高效的搜索出来">
<meta name="Keywords" content="设置网页的关键字 为了seo可以将该网站更快更高效的搜索出来" />
<!-- 视口标签 移动端适配 。。。。 -->
<title>html的基本结构</title>
<!-- 设置网页的标题 用户在收藏页面的时候会作为收藏的默认标题 -->
</head>
<body>
<!-- body标签是网页主体 里面的内容是用户看的 -->
<!--
html标签的作用：向浏览器解释其他普通文本的语义
常见的浏览器：火狐 谷歌 ie opero safari 这5款浏览器有自己的内核 （渲染引擎）
w3c组织 （万维网联盟）是一个组织 专门来制定和web相关的规则
web标准：结构 表现 行为相分离
网页组成 html css js
结构 html 网页的骨架
表现 css 网页样式
行为 js 用户和网页之间的交互
-->
</body>
</html>
元素的显示模式
元素一般分为块级元素和行内元素两种
1. 块级元素
<div>定义文档中的分区或节
<h1>定义最大的标题
<h2>定义副标题
<h3>定义标题
<h4>定义标题
<h5>定义标题
<h6>定义最小的标题
<ul>定义无序列表
<ol>定义有序列表
<li>定义有序列表或无序列表的列表项目
<dl>定义自定义列表
<dd>定义自定义列表中的条目
<dt>定义自定义列表中的项目
<hr>创建一条水平线
<p>定义段落
<table>定义表格
<td>表格中的标准单元格
<th>定义表头单元格
<thead>标签定义表格的表头
<tr>定义表格中的行
特点：
- 独占一行，可设置宽高内外边距等，如果块级元素没有设置宽度默认宽度是父元素的100%
- 是一个容器级元素，里面可以嵌套行内或者块级元素
- 注意：文本级元素内里面不能放块级元素。p标签是用来存放文字的里面不能放块级元素特别是不能放div标签。同理，h系标签都是文字类的块级元素，里面不能放其他块级元素，（有几个特殊的块级元素里面不嵌套块级元素，h系，p，dt）
- 常见的文本级元素 p span b u i s ins strong em del
2. 行内元素
<a>定义超链接
<b>字体加粗
<span>定义在文档中的行内元素
<img>向网页中插入题图像
<input>输入框
<small>小号字体效果
<br>换行
<big>字体加大加粗
<strong>强调的语气
<select>创建单选或多选菜单
<textarea>定义文本域，多行的文本输入控件
特点
- 一行可显示多个，默认是在页面中从左向右排列的，如果一行放不下会自动另起一行继续自左向右排列
- 直接设置宽高无效，靠内容撑开,可以设置行高line-height
- 行内元素只能容纳文本或其他行内元素
- 行内元素对margin仅设置左右方向有效，设置上下方向无效，对padding设置上下左右方向都有效，即会撑大空间
- 注意：
1:a链接里不能放a链接 2:特殊情况a标签里可以放块级元素，但是给a标签转化一下模式最安全
3. 行内块元素
在行内元素中有几个特殊的标签 img input td 他们同时具有块级元素和行内元素的优点，有些资料称之为行内块元素
特点
- 可以和其他行内元素（行内块元素）在一行显示，但他们之间有空白缝隙
- 默认宽度是本身内容的宽度（行内元素的特点）
- 可设置宽高边距（块级元素的特点）
常见的html标签
文本格式化标签
html放弃的标签：因为这些早期标签只是为了单纯的修改文本的样式，没有语义，不符合html标签语义化的原则，所以被放弃替代`
-
b（blod）加粗文本，没有语义；
-
i（italic）将文本倾斜，没有语义 italic倾斜
-
u（underline）给文本添加下划线，没有语义
-
s（strikethrough）给文本添加删除线，没有语义 strikethrough删除线
新增的文本格式化标签
-
strong 定义重要性强调文字，替代了b标签
-
em （emphasized）：定义强调性文字， 替代了i标签
-
ins （inseted）定义插入的文字，替代了u标签
-
del（deleted） 定义被删除的文字，替代了s标签`
字符实体
因为有些字符是被html保留的或者有特殊的作用，所以这些字符我们不能使其直接在页面中直接显示出来，需要使用相对应的字符实体
空格  ；
-
小于号 < <；less than
-
大于号 > >； greater than
-
版权符号©️ ©； 复制
h系列标签 给页面设动标题
- 有h1至h6 ；6个标签，表示1到6级标题
<h1>标题内容</h1>
特点：
- 级别依次降低，重要性也依次降低
- 都会被加粗，字体从大到小，h1最大，h6最小
- 是文本级标签，但是没有嵌套关系
- h系标签会独占一行
- h系标签要慎用，特别是h1标签，一个页面最多只能出现一次，会影响seo
注意：
-
文字类的元素内里面不能放块级元素。p标签是用来存放文字的里面不能放块级元素特别是不能放div标签。同理，h系标签都是文字类的块级元素，里面不能放其他块级元素
-
容器级的元素里面可以嵌套任意类型的标签
-
文本级的标签只能嵌套文字，图片，超链接
p标签
作用：给文字添加段落语义，给文本分段
格式：<p>xxxx</p>
注意点：在浏览器中独占一行
p标签是一个用来存放文本的标签，里面不要放其他块级标签特别是div标签
p标签
作用：给文字添加段落语义，给文本分段
格式：
<p>xxxx</p>
注意点：在浏览器中独占一行
p标签是一个用来存放文本的标签，里面不要放其他块级标签特别是div标签
br
br标签是强制换行的标签
hr标签
分割线标签，在浏览中实现一条分割线
<hr />
注意点：在浏览器中独占一行
div标签
div标签无语义块级元素，是用来给页面分区的，可以将页面分成一个个独立的区域，里面可以嵌套任意类型的标签
span标签
span无语义行内元素，常用来将文本或文档的一部分独立出来，单独设置样式
span没有默认的样式，如果不给span标签设置样式的话，span标签内的文本和普通文本没有任何视觉上的差异
a标签 href target title
-
a标签作用：实现页面之间的跳转
-
格式：
<a href='要跳转到的目标页面的地址'>要展示给用户看的内容（可以是文字也可以是图片，视频等...）</a> -
a标签的href属性：
-
a标签必须有一个href属性否则a标签不知道要跳转到什么地方
-
a标签指定的url地址前必须要带有http：//或https：//
-
a标签除了可以指定一个网络地址外还可以指定一个本地地址（绝对路径，相对路径）
-
-
a标签的target属性
target： ⽬标 的意思，跳转后的⽹站是否在新标签⻚打开。
属性值：
-
a. _self :当前标签⻚跳转，也就是不打开新⻚⾯，a标签默认的target属性。
-
b. _blank：打开⼀个新的⻚⾯，在新的⻚⾯进⾏跳转。
-
-
a标签的title属性：
设置鼠标悬停时显示的提示文本
扩展：base标签
base标签为⻚⾯上的所有链接规定默认地址或默认⽬标。
<base href="" target="_black" />
案例：集体设置 后 单独给某一个a链接设置
注意：base标签必须要写在head标签里
（ （base标签的href先不讲） 通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。
使用 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 、、、 标签中的 URL。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VyzdX9Cj-1649689733272)(/Users/wei/Desktop/markdown/截屏2021-04-16 下午6.26.36.png)]
）
-
使用a标签创建假链接：假链接就是点击后不会跳转的链接
-
假链接的格式：
-
href：# （）点击后会回到页面的顶部
-
href：javascript:;
-
这两种格式的区别是 #号点击后会返回页面的顶部，而使用javascript不会回到页面的顶部
- 锚点：
要想通过a链接跳转到指定的位置，那么必须要告诉a标签一个独一无二的身份证号（id），这样a标签才能在页面中找到需要跳转的目标位置。
如何给html页面中的标签绑定一个独一无二的身份证号呢，在html中每一个标签都有一个id属性，这个属性就是用来给标签指定独一无二的身份证号的。
- 锚点格式
<a href="#center">跳转到中部</a>
<h1 id="center">我是中部<h1>
注意点：
1:我们通过a链接跳转到指定位置是没有过度动画的，是一下跳转到指定位置
2:a标签除了可以当前页面的指定位置以外，还可以跳转到其他页面的指定位置。
页面1:
<a href="其他页面的地址#center">跳转到中部</a>
页面2:
<h1 id="center">我是中部<h1>
3:a标签里不能嵌套a标签
4:a标签里可以嵌套块级标签但是转化一下a标签的显示模式会更加的安全
img标签
img标签：常见属性 src width height alt title
-
作用：告诉浏览器显示一张图片
-
img标签的常见属性 src width height alt title，必须具备两个属性是src和alt属性
-
src属性是img标签的必备属性，是source的简写，属性值是图片的地址
-
alt属性是在图片加载失败的情况下展示的提示语句，或者为盲人提供文字信息,搜索引擎会根据alt中的提示文字来识别图片，如果图片不写alt则不会被搜索引擎所检索到
-
width,height属性用来设置图片显示宽度和高度
-
不给img标签设置宽高的情况下，显示图片的原始尺寸
-
同时给元素指定宽高，容易是图片发生变形。如果想给图片设置宽高尺寸，但是图片不变形的情况下，我们需要给img便签只设置宽度或者高度中的一个即可
（pc端一般不建议修改图片的大小，需要多大的图片就裁多大，移动端经常需要对图片进行缩放，大图缩小）
-
title属性是在图片加载成功后，鼠标在图片上悬停时显示的提示语句
常见的图片格式
-
图片是网页的外在资源，网页中的图片需要单独请求
jpg：色彩多，不能保存通明背景的图片，不支持动图 。 一般用来显示照片
gif：存储颜色较少只有256种，可以支持简单的通明背景，支持动图。 一般是颜色单一的图片，动图
png：具有jpg和gif格式的优点，颜色多，支持复杂透明，不支持动图，一般是颜色丰富，复杂透明图片（专为网页而生）
psd：ps的专用格式，可以直接在上面获取图片，文字，尺寸等信息
webp：谷歌新推出的专门为表示网页中的图片的一种的格式，它具备其他图片格式的所有优点，颜色丰富，支持复杂透明，支持动图，文件小（谷歌的压缩算法比较先进），缺点：兼容性不好，ie老的浏览器不支持，但是在移动端，谷歌，火狐可以用，老得浏览器可能会有兼容性问题，一般轻易不用，得经过一些适配手段处理
base64不是图片格式，但是可以使用base64对图片进行编码，可以将图片转换为字符，然后通过字符的形式引入图片（base64就是对数据进行加密），bsae64处理图片用的场景并不多，一般都是需要和网页一起加载的图片（重要图片）才会使用base64，图片加载就不需要单独请求数据了，图片加载的快，有base64在线转码网站可以直接使用
图片格式的选择，效果一样用小的，效果不一样用效果好的，同时还要考虑一下大小
相对地址绝对地址
- 相对地址：（推荐）
相对文件自己出发的地址就是相对地址
相对路径最多到盘符，不能跨盘
-
绝对地址：(不推荐使用)
-
本地址：从盘符出发到目标文件的路径 例如：windows系统下的 c:\user\a\b\cc.png
-
网络文件：完整的网络地址 http://www.baidu.com https://image.baidu.com/search/index
-
同级目录 ./
上级目录 …/
下级目录 images/banner.jpg
注意：
windows系统下的路径地址是这样的： c:\user\a\b\cc.png
文件地址引用是不能使用,因为你的项目可能在除windows外的操作系统运行
列表标签
-
作用：是给一堆数据添加列表的语义，也就是告诉浏览器这一堆数据是一个整体
-
案例：163新闻网站等，看列表使用情况
-
html中列表标签的分类
-
无序列表 （最多）unordered list
-
有序列表（最少）order list
-
定义列表（其次）definition list
-
无序列表
- 无序列表的作用：给数据添加列表语义，并且数据没有先后顺序
- 无序列表的语法：
<ul>
<li>需要显示级的条目内容</li>
<li>需要显示级的条目内容</li>
<li>需要显示级的条目内容</li>
</ul>
li其实是list item的缩写，列表条目的意思
注意：
1. ul标签是用来给一堆数据添加列表语义的，而不是用来给他们添加小圆点样式
2. ul标签和li标签是一个整体，通常是结合起来使用，不会单独使用ul标签或li标签
3. ul标签和li标签是一个组合，也就是说在ul标签中只能 用li标签，不能出现其他标签，li标签中可以放其他标
签来丰富页面，li标签中还可以包含ul标签
- 快速生成无序列表的方式
ul>li*3
生成一对ul标签，然后在ul中再生成3对li标签
ul>li*3>h2+li*2
....
-
案例：…
-
无序列表的应用场景：
新闻列表，商品列表，导航条。（看其他网站的案例）163网站
有序列表：
给一堆数据添加列表语义，并且这堆数据中所有数据有先后顺序之分，其他用法同无序列表一致
<ol>
<li><l/i>
</ol>
定义列表
-
格式：
<dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl> -
定义列表的做用
-
给一堆数据添加列表语义
-
dt是definition title的缩写，所以dt是用来定义列表中的标题，dd是definition description的缩写，所以dd是对dt标题的描述
-
dl：定义列表。
dt：定义标题。
dd：定义说明、解释。对前⾯最近这个dt（标题）的解释。
-
先通过dt标签定义列表中的所有标题，再通过dd标签给每个dt标签添加描述信息
-
-
定义列表的应用场景：
- 做网站尾部的相关信息（案例：京东官网）
- 做图文混排
-
定义列表的注意点：
- 同无序列表和有序列表一样，dl和dt/dd是一套组合标签，所以不能单独使用
- 在dl中只能有dt和dd标签，不能有其他标签，但可以在dt标签和dd标签中添加其他标签
- 一个dt标签可没有dd标签或多个dd标签，但推荐一个dt标签只有一个dd标签作为描述
table标签
-
作用：是给一堆数据添加表格语义
-
其实表格是一个种数据的展现形式，当数据量非常大时，表格被认为是一种最清晰的展现形式
-
表格的格式：
<table> <tr> <td>单元格中的内容</td> </tr> </table>一个table标签就表示一个表格
一个tr标签是表格里面的一行
一个td标签是行里的一个单元格
（案例：看exsle表格，写表格2行3列看效果）
-
注意点：table，tr，td标签是一套组合标签不可单独使用
-
表格标签的属性（了解，表格的样式后期会通过css设置）
-
table标签有一个border属性，这个属性是用来设置表格的边框的宽度，其默认值为0，所以展现不出来表框
-
宽度和高度属性： width height
可以给table标签和td标签使用
- 表格的宽高默认是由表格内容撑开的，也可以通过给table标签添加宽高属性设置
- 如果给td标签设置宽高属性，可以修改当前单元格的宽高(但不会影响table表格的总体宽高??单元格宽高大的话会撑大整个表格)
-
水平对齐和垂直对齐属性（align）
1.水平对齐属性：align：left/center/right
-
水平对齐可以给table标签tr，td标签使用
-
table标签使用align属性，可以控制表格在页面水平方向的展示
tr标签使用align属性，可以控制该行内所有单元格的内容在水平方向的对齐方式
td标签使用align属性，可以控制该单元格内容在水平方向的对齐方式
注意：如果tr和td所对应的同一单元格都设置了align属性，则采用td的属性值
2.垂直对齐属性：valign：top/center/bottom
- 只能给tr和td标签使用
- 给tr标签使用valign属性时，可以控制当前行中所有单元格的内容在垂直方向的对齐方式
- 给td标签使用valign属性时，可以控制当前单元格内容在垂直方向的对齐方式
注意：如果tr和td所对应的同一单元格都设置了valign属性，则采用td的属性值
-
-
外边距和内边距 ，只能给table标签使用
1.外边距 cellspacing
- 单元格边框和单元格边框之间的距离就是外边距
- 外边距的默认值是2px
2.内边距 cellpadding
- 单元格边框和内容之间的距离就是内边距
- 内边距的默认值是1px
-
-
（案例，了解）细线表格：
通过设置table标签的cellapcing=‘0’不能实现，要通过先给table标签设置bgcolor，再给tr标签设置bgcolor后再给table标签设置cellspacing=‘1px’
<table border='1px' cellspacing='0' bgcolor='black' width='800px' height='200px'> <caption> <h2>水果表格</h2> </caption> <tr bgcolor='#ededed' > <th align="left">标题1</th> <th>标题2</th> <th>标题3</th> <th>标题4</th> <th>标题5</th> <th>标题6</th> </tr> <tr bgcolor='#FFF' align="center"> <td align="left">1</td> <td>苹果</td> <td>香蕉</td> <td>橘子</td> <td>橙子</td> <td>芒果</td> </tr> <tr bgcolor='#FFF' align="center"> <td align="left">2</td> <td>苹果</td> <td>香蕉</td> <td>橘子</td> <td>橙子</td> <td>芒果</td> </tr> <tr bgcolor='#FFF' align="center"> <td align="left">3</td> <td>苹果</td> <td>香蕉</td> <td>橘子</td> <td>橙子</td> <td>芒果</td> </tr> <tr bgcolor='#FFF' align="center"> <td align="left">4</td> <td>苹果</td> <td>香蕉</td> <td>橘子</td> <td>橙子</td> <td>芒果</td> </tr> </table> -
表格的其他标签
-
表格标题
在html中captoion标签是专门用来给表格设置标题的，标题写在caption标签中后标题会始终相对于表格剧中
注意：caption标签要写在table标签中，紧挨着table标签后
-
标题单元格标签
th标签是用来给表格的每一列设置列的标题的，th标签中的内容是会默认加粗，居中的
（在表格标签中一共有两种单元格标签，分别的td和th，td是用来存储数据的单元格，th是）
-
-
表格的结构
- 由于表格数据比较复杂， 为了加强语义和对表格数据的管理，我们把表格中的数据分为了4分类：
1.表格的标题 caption
2.表格的表头信息 thead
3.表格的主体信息 tbody
4.表格的页尾信息 tfoot 指定表格的附加信息
-
表格的完整结构
<table> <caption>表格的标题</caption> <thead> <tr> <th></th> <th></th> </tr> <thead> <tbody> <tr> <td></td> <td></td> </tr> </tbody> <tfoot> <tr> <td></td> <td></td> </tr> </tfoot> </table> -
注意：
-
tbody标签如果没有写的话，浏览器会自动添加上，tr是tbody的子元素，不是table的子元素，table的子元素是caption thead tbody tfoot
-
thead和tfoot有名默认的高度，不会随着表格高度的变化而变化，后期可以通过css设置修改
-
css的vertical-align可以设置td单元格内的元素垂直方向的对齐，不单单只是文字的在td标签上的对齐
（vertical-align一般只是作用在行内元素，文本，行内块元素在垂直方向的对齐方式，但是对于td标签或者通过display：table-cell转化td单元格的标签可以通过vertical-align属性设置单元格内的元素的垂直对齐方式，可以给一个块级元素转化为diaplay：table-cell为单元格元素，就可以使用vertical-align：top｜middle｜bottom来设置其里面元素在垂直方向的对齐方式了，但是这种方式很少使用）
块级元素在父元素中：
水平居中：margin：0 auto；
垂直居中：将父元素转化为单元格并设置vertical-align：middle 定位
行内元素在父元素中：
水平居中：text-align：center
垂直居中：line-height等height vertical-align:middle并将父元素转换为单元格
-
-
合并单元格
-
水平方向合并单元格
1.水平方向合并单元格使用colspan属性
<td colspan='2'></td> 是将该单元格再水平方向上看作多个个单元格，会导致水平方向上后面的单元格有多出来，需要将多余的单元格删除 -
垂直方向合并单元格使用rowspan
<td roespan='2'></td> 是将该单元格在垂直方向上看做多个单元格，会导致垂直方向上后面的单元格多出来，根据需求将多余的单元格删除即可 -
**注意：**合并单元格都是向下或向后合并，不会向前或向上合并。
-
thead和tfoot的单元格不能做垂直方向上的合并
-
-
案例练习
form表单
案例：珍爱网注册表单 https://www.zhenai.com/n/registerInfo
作用：fome表单用于为用户创建表单收集用户信息，并将信息上传至服务器
fome表单内包含了很多表单元素，元素即使标签，所有的表单元素在浏览器中都有默认的外观和功能
格式：
<form>
<表单元素></表单元素>
</form>
（fieldset标签可以给表单设置一个边框，legend标签给表单设置标题）不用讲，了解即可，工作中用不到
input标签
https://www.cnblogs.com/archermeng/p/7537583.html
input标签自带的type属性可以通过不同的属性值使输入字段拥有不同的表现形式。
明文输入框 密码输入框 单选框 多选框 普通按钮 图片按钮 重置按钮 提交按钮 隐藏域
-
value
除了按钮类型的input标签外，其他的input标签都可以通过value属性来设置提交到服务器的值，name属性用来设置提交到服务器的键值名
按钮类型的input标签的value属性只是用来设置按钮的名字
可以通过给文本框和密码框类型的input设置vlue来设置默认值
-
name
-
checked 单选框 多选框设置默认选中
-
selected 给下拉菜单设置默认选中
-
Placeholder 占位符 用来给输入框设置提示信息
-
autofocus 自动聚焦
<form action="http:yaopai.com">
<!-- 文本输入框 明文输入框 -->
账号：<input type="text" name="user"> <br>
<!-- 密码输入框 -->
密码：<input type="password" name="key"> <br>
<!-- 给输入框设置默认的值 -->
账号：<input type="text" value="默认值1"><br>
密码：<input type="password" value="默认值2"><br>
<!-- 单选框
注意：1:单选框在默认的情况下是不会互斥的，需要给每一个单选框设置一个name属性，摒并且属性值要相同，这样他们算是一组单选框才会发生互斥
2:可以给单选框设置默认选择中的状态 checked=‘checked’
在html中如果属性名和属性值一样可以只写属性名（不推荐）
-->
你喜欢吃什么：
苹果：<input type="radio" name='food' checked=‘checked’>
香蕉：<input type="radio" name='food'>
大鸭梨：<input type="radio" name='food'>
芒果：<input type="radio" name='food'> <br>
<!-- 多选框 默认选择中的状态 checked=‘checked’ 多选框可以默认选中多个选项-->
天上有什么：
<input type="checkbox" checked=‘checked’> 白云
<input type="checkbox"> 太阳
<input type="checkbox" checked=‘checked’> 月亮
<input type="checkbox"> 星星 <br>
<!-- input可以设置为普通按钮 type="button" 通过value属性给按钮设置标题 配合js做一些操作-->
<input type="button" value="普通按钮">
<!--
input可以设置为图片按钮 type="image" src设置获取图片的路径 配合js进行一些操作
-->
<input type="image" src="./images/fengcai-main.png" onclick="alert('122')">
<!--
input重置按钮 重置按钮有默认的标题 可以通过value修改标题
重置按钮的作用是将已经填写过的表单信息恢复到最初值
-->
<input type="reset" value="清空">
<!--
input提交按钮 作用是将表单元素输入的信息提交到服务器
必须的条件：
1：form表签的action属性z指定需要提交到的服务器地址
2:给要提交的表单元素设置name属性
-->
<input type="submit">
<!-- input隐藏域 隐藏域在页面上不显示，但是提交表单时会将隐藏域的信息悄悄地提交到服务器-->
<input type="hidden" value="hidden66" name='hidden'>
</form>
h5中新增的input类型 了解即可，因为大多浏览器有兼容性问题
datalist给输入框绑定带选列表 了解
邮箱 url date日期 颜色 数字 等
掌握：number search tel
button按钮
格式：
<button>展示出来的内容，可以是图片，文字</button>
button按钮的标题是直接在标签体的位置书写的，不用value属性设置
取值：button｜reset｜submit（默认值）
lable标签
想要在点击输入框的对应文字时使输入框聚焦，需要将文字与输入框使用lable标签进行绑定
绑定方式：
1:给输入设置id属性
2:将文字使用lable标签包裹，被给lable标签设置for属性，属性值为输入框的id值
<label for="zw">你好</label>
<input type="text" id="zw">
如何给输入框绑定待选项列表
（许多浏览器都不支持，所以仅了解，可以不讲）
格式：
<input type="text" list="所对应的datalist标签的id名"></input>
<datalist id="id名">
<option>待选项1</option>
<option>待选项2</option>
<option>待选项3</option>
<option>待选项4</option>
</datalist>
实现步骤： 1 写一个标签
2 写一个datalist 列表
3 给datalist 列表标签添加一个id
4 给输入框添加一个list属性，将datalist 的id对应的属性值赋值给list属性即可
Select 标签 下拉菜单
-
作用：定义下拉菜单
-
语法
<select name="提交表单时提交键名">
<option value="提交表单时提交的键值">下拉菜单的选项展示出来</option>
</select>
- 注意：下拉菜单是不能输入的，但是可以通过选项进行选择
可以通过给option标签通过selected="selected"设置默认选中
下拉菜单选项分组：
将要分为一组的option标签用optgroup标签包裹，并给optgroup标签设置label属性指定组名
<select name="提交表单时提交键名">
<option value="提交表单时提交的键值">下拉菜单的选项 页面展示出来的值</option>
</select>
<select name="提交表单时提交键名">
<optgroup label="组名1">
<option value="提交表单时提交的键值">下拉菜单的选项 页面展示出来的值</option>
<option value="提交表单时提交的键值">下拉菜单的选项 页面展示出来的值</option>
<option value="提交表单时提交的键值">下拉菜单的选项 页面展示出来的值</option>
<optgroup>
<optgroup label="组名2">
<option value="提交表单时提交的键值">下拉菜单的选项 页面展示出来的值</option>
<option value="提交表单时提交的键值">下拉菜单的选项 页面展示出来的值</option>
<option value="提交表单时提交的键值">下拉菜单的选项 页面展示出来的值</option>
<optgroup>
</select>
textarer 多行文本域
作用：input输入框只能输入单行文字，textarea定义一个多行输入框
语法：
<textarea>
</textarea>
注意
-
textarear有默认的宽度和高度，里面的文字可以无限换行
-
可以通过rows和cols指定文本域显示的行数和列数，但而然可以无限输入
-
默认情况下可以通过手动缩放文本框，也可以通过css进行设置其是否可以拉伸
textarea{ resize:none; }
div和span
div：把标签中的内容作为⼀个块⼉来对待(division)。必须单独占据⼀⾏。
div标签是⼀个容器级标签，⾥⾯什么都能放，甚⾄可以放div⾃⼰。
span：是⼀个⽂本级的标签。
就是说，span⾥⾯只能放置⽂字、图⽚、表单元素。 span⾥⾯不能放p、h、ul、dl、ol、div等标签。
h5新增标签
video
作用：在页面引入视屏
格式1
<video src="音频文件的路径">
</video>
格式2
<video>
<source src="xxx.webm" type="video/webm"></source>
<source src="xxx.mp4" type="video/mp4"></source>
<source src="xxx.ogg" type="video/ogg"></source>
（embed可以不讲）
<embed></embed> 可以在source标签的最后使用embed的标签来处理ie8的兼容性问题，当前面的source中的文件都不支持的时候就会忽略source使用该embed标签了
</video>
video标签自带的属性，在两种格式都适用
- src=“…” 设置引入的视频地址
- width
- height 宽高属性同img标签一样，如果宽高不是按照原视频比例设置的会使视屏变形
- autoplay=“autoplay” 设置视频自动播放，在很多浏览器（chrom，火狐）视频和音频的自动播放禁用了（ie没有禁用自动播放，没有考虑用户体验的问题，可能会吓用户一跳），在第一次打开网页没有点击播放时就算设置了autoplay属性也不会自动播放，但是用户点击过播放后，再次进入网页就会自动播放了，解决视频自动播放的方式是同时设置muted=“muted”，静音播放，音频需要使用js解决
- controls=“controls” 视频显示控制条 属性可以简写 音视频文件引入到网页默认是不让用户自己操作的，要通过controls属性显示控制条
- poster=“占位图地址” 视频在播放前的展位图
- preload=“preload” 设置视频提前加载 preload=“none” 不预先加载视频，注意，如果设置了自动播放会忽略此属性
- loop=“loop” 视频循环播放 多用于广告视频
- muted=“muted” 视频静音
video标签的第二种格式是为了解决浏览器的兼容性问题，目前video标签支持的有三种视频格式，没有哪个格式是所有浏览器中兼容的，（mp4 格式的兼容性相对好一些）所以通过source标签将这三种格式的视频都指定给浏览器。浏览器依次查找自己可以兼容的视频格式来播放
虽然video标签的第二种格式解决了视频在浏览器的兼容性问题，但是有一些浏览器还是不能兼容html5的标签，所以视频在那些浏览器中还是无法播放，我们可以通过js框架胡桃木lmedia来解决这个问题
audio音频标签
ie8不支持音频（视频？？）标签，且播放器在不同浏览器中显示的样子是不一样的，需要js来使样式统一
可以通过embed标签在页面中引入音视频文件，Ie8也支持embed标签，但是该标签不好用
同video标签一样也是因为音频格式在浏览器中的兼容性问题（不同的浏览器支持的音视频的格式不同），音频标签也有两种格式，video标签的属性除了width/height/poster外在audio标签上都可以使用且功能一样，mp3格式兼容性相对好一些
格式1:
<audio src="">
</audio>
格式2: 通过第二种格式可以在不支持音频标签的浏览器中显示提示文字，音频标签会被忽略不显示，但是文字不会被忽略
<audio>
您的浏览器不支持音频标签，请升级浏览器
<source src="xxx.wav" type="video/mav"></source>
<source src="xxx.mp3" type="video/mp3"></source>
<source src="xxx.ogg" type="video/ogg"></source>
<embed></embed> 可以在source标签的最用使用embed的标签来处理ie8的兼容性问题，当前面的source中的文件都不支持的时候就会忽略source使用该embed标签了
</audio>
内敛框架
iframe标签（使用场景不多）
作用：在当前网页中引入一个其他页面
frameborder 指定内敛框架的表框 取值0（没有边框）或者1 （有边框）
使用内敛框架实际就像一个标签一样，我们的页面还是正常书写，没有什么影响，但是内敛框引入的网页不会被搜索引擎检索到
686
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
