一、head中的基本标签
1、HTML文档的结构：
a、<head>头部部分，b、<body>主体部分
<!DOCTYPE html>
<!--
↑为文档声明，H5已经简化为上述样式
注意：文档声明必须有!!!而且必须在文档页面的第一行!!!
-->
2、HTML标签：闭合
HTML标签属性：a、属性和属性值成对出现；b、可以有多个属性
HTML文档注释：<!--注释-->
3、link标签：连接网页与文件
<!--使用link标签，链接网页图标（title前的小logo）
rel属性：声明连接文件的类型，此处选icon
type属性：可以省略
href属性：表示图片的路径地址
-->
<link rel="icon" type="image/x-icon" href="img/icon.png" />
4、Title标签：
<!--title标签：网页的标题，即网页选项卡上的文字。-->
<title>我的第一个网页</title>
5、meta标签：
meta标签常用属性：
1、charset：设置文档的字符集编码格式···属性名=“”
HTML5中设置字符集编码<meta charset="UTF-8">
>>>常见的字符集编码格式：
a.GB2312:国标码，即简体中文
b.GBK：扩展的国标码
c.UTF-8：万国码Unicode 常用 2、http-equiv:将我们的信息写给浏览器看，让浏览器按照此要求执行，
可选属性值：content-type（文档类型）、refresh（网页定时刷新）、
set-cookie（设置浏览器cookie缓存），需要配合content属性使用。
（http-equiv属性只是表明需要设置那一部分，具体设置与否，放到content
属性中） 3、name属性：使用方法同“http-equiv”，将我们的信息写给搜索引擎看。
常用且需要掌握的属性值：author（作者）、keywords(网页关键词)、description(描述)，
这两个属性设置，网页必不可少
例如：
-->
<!--作者-->
<meta name="author" content="http://www.jredu100.com" />
<!--网页关键词-->
<!--关键词之间用英文逗号隔开-->
<meta name="keywords" content="关键词1,关键词2" />
<!--网页描述-->
<meta name="description" content="杰瑞教育很好" />
<meta charset="UTF-8"/>
二、常见的块级标签：
1、h标签：标题标签，自动加粗，h1最大，h6最小
<h1></h1>,<h2></h2>,......<h6></h6>
2、水平线标签：<hr />
3、 段落标签：<p>.....</p>
4、 换行标签：<br />
(判断块级标签与行级标签：另写，看是否隔一行)
5、引用标签：有cite属性，一般表明引用网址，浏览器默认首行缩进
<blockquote cite="http://www.baidu.com">
白日依山 尽，黄河入海流
</blockquote>
6、预格式标签：<pre></pre> （不常用）
浏览器默认显示样式：1、显示为等宽字体，2、代码中的换行、空格等元素可在浏览器中直接显示
补充：HTML文件中，空格的表示：
三、基于布局的块级标签
1、有序列表：<ol></ol>
列表项：<li>可以有多个</li>
2、无序列表：<ul></ul>
列表项：<li>可以有多个</li>
3、定义描述列表：<dl></dl>
列表标题：<dt>一般只有一项</dt>
列表描述项：<dd>可以有多项</dd>
注意：嵌套时，HTML标签一定不能交叉
4、组合标签：<figure></figure>用于显示图片及图片标题
两个子标签：<img /> 图片
<figcaption></figcaption>
显示效果：图片下面一个标题，同时图片和标题前带缩进
<figure>
<img src="../img/icon.png" />
<figcaption>这是图片标题</figcaption>
</figure>
5、分区标签：<div></div>
四、常见的行级标签
1、span（文本）：无实际意义，用于包裹某部分，修改特定样式
2、【strong、em、i、b标签的区别】
a、Strong和em都表示强调，strong显示为粗体，em显示为斜体，而且strong程度高
b、strong和b都能加粗，i和em都能倾斜，strong和em多了一层强调的语义。
HTML5语言，要求标签尽可能的实现语义化，即看到strong，它不止加粗，还有强调的含义。
3、q（短引用）：显示为文字用“”引起来。cite属性
4、small（缩小字体）,big(增大字体)，可多层嵌套，直到达到上下限，不常用
5、a（超链接）
a、href:超链接的路径,可以是网络连接，也可以是网络文件（路径确定同img）
b、target:超链接打开的位置。_self 自身页面（默认） _blank 新页面
c、title：鼠标指上后显示的文字
d、*（了解）rel用于表明被链接文档与当前文档的关系：
rel="prev"代表前一篇，rel="next"代表后一篇
rel="icon"代表被连接图片是当前文档的图标
rel="stylesheet"代表被链接文档是当前文档的样式表
rel="prefetch"预加载在当前文档加载完成后利用空余时间预加载即将连接的文档
浏览器不会以任何方式使用该属性，但搜索引擎可以利用该属性获得更多相关连接的信息
e、锚链接（即跳转）：
①本页面锚链接：
a、设置锚点
b、在超连接上使用#name跳转到对应锚点
②页面间锚链接：
a、在即将跳转页面的指定位置设置锚点
b、在超链接的href属性中，使用“页面地址.html#name”
<a href="T4.html#name"></a>
6、img（图片）
五、表格：
①、
table：
表格的行 tr 每行中的列 td
表格的表头：<th></th>,默认加粗，单元格居中
【常用属性】
、border：给表格添加边框。当border属性增大时，只有外围框线增加，单元格的边框始终为1px
、Cellspacing:单元格之间的间隙,当callspacing=""时，只会使单元格间隙为0，不会合并边框线
【表格边框合并】style="border-collapse: collapse;"，无需再写callspacing=""
、cellpadding:每个单元格的内容与边框之间的距离
、height/width:宽高
、align:表哥在屏幕的左中右位置显示 left center right
>>>注意1、给表哥加上align属性，相当于让表格浮动，会直接影响表格后面元素的原有排列方式
、若要在table中修改文字，用样式 style="text-align:top/center/bottom;"
、bgcolor:背景色，等同于style="background-color:;"
、background:背景图片，等同于style="background-image:;"，且背景图会覆盖背景色
、bordercolor:边框颜色
②、
【tr和td相关的属性】
、width/height：单元格的宽高
、bgcolor:单元格的背景色
、align：left center right 单元格中的文字，水平对齐方式
、valign:top center bottom 单元格中的文字，垂直对齐方式
、nowrap:单元格中文字不换行
、background:背景图片 注意：.当表格属性与行列属性冲突时，以行列属性为准
.表格的align属性，是控制表格在浏览器中的显示位置
行和列的align属性，是控制单元格中文字在单元格中的对齐方式
、表格的align属性，并不响单元格内，文字的对齐方式
tr的align属性，可以控制一行中所有单元格的水平对齐方式
③、
表格的跨行与跨列： ·····td
colspan 跨N列，当某个格跨n列时，其右边n-1个单元格需删除
rowspan 跨N行，当某个格跨n行时，其下边n-1个单元格需删除
④、
表格的结构化
完整表格结构：thead tbody tfoot
无论各部分在表格什么位置，显示时，caption均在表格外最上方
thead会在表内最上方
tfoot会在表内最下方
⑤、
表格的直列化
<colgroup class="name"> 前两个为一组
<col style="background-color: red;" /> 第一列
<col style="background-color: green;" /> 第二列
</colgroup>
<col style="background-color: blue;" /> 第三列
六、表单
form：表单
1、两个重要属性：action-表单提交的服务器地址 method-表单提交数据的方法（get/post）
2、get和post的区别：
①get：使用URL传参：http://服务器地址?name1=value1&name2=value2(?表示传递参数，
?后面采用name=value的形式传递，多个参数间，用&连接)
so，URL传参不安全，所有信息可在地址栏看到，并且可以通过地址栏随意传递其他数据
URL传递数据量有限，只能传递少量数据
②post：使用http请求传递数据，URL地址栏不可见，比较安全，且数据量没有限制
综上：常用post（get速度快）
3、【input常用属性】 PS：input只能单行输入
①type：表示input输入框的类型
②name:input输入框的别名。一般情况下，必填，因为数据传输时使用name=value形式传送
③value：input输入框的默认值
④placeholder:input的提示内容，当输入框有value时，提示内容消失
⑤tabindex：控制点击tab时的跳转顺序，由TabIndex数值小往数值大跳转
⑥size：直接改框的大小
【input特殊属性】
①checked="checked"默认选中
②disabled="disabled"设置控制不能使用，用在按钮上不能点击，用在输入框上不能修改
而且，如果输入框disabled，则输入框信息不能往后传递
③hiden="hidden"隐藏。等同于<input type="hidden" name="username" value=1234/>
常配合disabled，或根据其他需要，使用隐藏域传递数据
4、【input-type属性详解】
①text：文本输入框
②password：密码输入框
③radio:单选按钮，
checkbox复选按钮
>>>name和value属性需同时存在，提交时提交的是value中的属性值
例如：<input type="radio" name="sex"value="男" />提交时，显示“sex=男”
>>>radio凭借name属性区分是否为同一组，name相同为同组，同组中只能选一个
>>>checked="checked"默认选中。（radio只能选一个，checkbox可以选多个）
④file：文件上传按钮
⑤submit：提交按钮，提交表单数据
⑥reset：重置按钮，将表单数据重置为初始状态
⑦image：图形提交按钮，功能同submit，可以提交数据
⑧button：普通按钮，没有任何功能
5、【下拉框控件 select】 （是另一标签，不在input中）
①写法：<select name="city">
<option>青岛</option>
</select>
②name属性，应该写在<select>上，所有选项只有一个name
③multiple：设置select控件为多选，可在界面使用Ctrl+鼠标进行多选，一般不用
④option常用属性：
value="":当option没有value属性时，往后台传的是option标签中的文字
当option有value属性时，往后台传的是value中的值
title：鼠标指上后显示的文字。
selected=“selected”:默认选中。可修改为多选控件（也可单选）
⑤ <optgroup label="北京市">
<option>东城区</option>
<option>朝阳区</option>
</optgroup>
用于将option标签进行分组，label属性表示分组名
6、 【textarea：文本域】
①写法：<textarea></textarea>
②设置宽高style="width: 200px;height: 150px;" 自身有cols="" rows=""两个属性，不常用
③readonly="readonly"设置为只读模式，不允许编辑
④style=" resize: none;" 设置为宽高不允许修改
⑤style="overflow：；"设置当文字超出区域时，如何处理
>>>也可以通过overflow-x,overflow-y分别设置水平垂直方向的显示方式
>>>常用属性值：hidden：超出区域无法显示
scroll:无论文字多少均显示
auto：自动，根据文字多少决定是否显示
7、表单边框与标题
<fieldset>
<legend>表单标题</legend>
</fieldset>
>>>如果想要标题嵌入到边框中，需将标题标签写到边框标签里面
>>>一个表单，可以有多组边框+标题的组合
8、【H5智能表单】
① H5新增iuput的form属性，用于指向特定form表单的ID，实现input无需放在form标签，
即可通过表单进行提交
<input type="text" name="text" form="form1" />
<form action="T9.html" method="get" id="form1">
② type新增属性：见表格
③ input元素的新增属性：
Autocomplete：自动完成功能：记录用户之前输入的内容，并在下此次输入时自动提示完成输入
>>>（input和form能用,分别完成对特定输入框和整张表单进行修改）
>>>属性值：on/off
>>>绝大部分浏览器默认开启
Autofocus：自动获得焦点：autofocus="autofocus"只能获得一个焦点
Form：所属表单：见①
Required：必填 required="required"设置input必填，否则组织提交
Pattern：验证input的模式 正则表达式
Placeholder：提示 提示内容