前言：
今天来和大家分享一下近期自己整理的HTML笔记，希望会对你的学习有所帮助！
***本章关键词：HTML头部格式；常见的块级标签；常见的行级标签；表格；表单。
| 一、HTML头部格式 |
一、HTML文档结构
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 </body> 9 </html>
二、头部标签详解
1、文档声明：<!DOCTYPE html>
HTML5已经简化为上述样式~
注意：文档声明必须有！而且必须在文档页面的第一行！！！
***HTML4.01之前的文档声明：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
2、头部：<head></head>
Head用于表示网页的元数据：即描述网页的基本信息。
3、mete标签
①charset属性：单独使用。设置文档字符集编码格式。
>>>写法：<meta charset="utf-8" >
>>>常见的字符集编码格式：
a.GB-2312:国标码，简体中文
b.GBK:扩展的国标码，简体中文
c.UTF-8：万国码 Unicode码（常用）基本兼容各国语言
②http-equiv属性：将我们的信息写给浏览器看，让浏览器按照这里面的要求执行
需要配合content属性使用，主要声明浏览器如何解释译文。
（http-equiv属性只是表明需要设置哪一部分，具体的设置内容，放到content属性中）
>>>写法：<mete http-equiv="属性值" content="属性值详细内容"></mete>
eg:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
>>>常用属性值：
Content-Type （文档类型）HTML4.01之前的文档内容编码声明
refresh 网页定时刷新
set-Cookie 设置浏览器cookie缓存
③name属性：需配合content属性使用，主要用于给收索引擎提供必要信息
>>>写法：<mete name="属性值" content="属性值常见内容"></mete>
>>>重要属性值：
author 作者，声明网站作者，常用公司网址表示
keywords 网站关键字，多个关键字用英文逗号分隔
description 网页描述，收索引擎显示在title下的描述内容
*http-equiv和name属性，必须与content属性配合使用，前两者只是用来声明即将修改那些属性值，而实际的属性值内容，在content中描述。
eg：
1 <!--声明文件的编码格式--> 2 <meta charset="utf-8" > 3 4 <!--作者--> 5 <meta name="anthor" content="http://www.CC.com"/> 6 7 <!--网页关键字：多个关键字用英文逗号分隔--> 8 <meta name="keywords" content="html5,网页，Web前端开发"/> 9 10 <!--网页描述：搜索网站时，title下面的解释文字。至关重要！！--> 11 <meta name="discription" content="这是我开发的第一个网页"/> 12 13 <!--title标签：网页的标题，即网页选项卡上的文字--> 14 <title>我的第一个网页</title>
4、link标签
①作用：用于为网页链接各种文件（例如：链接网页图标（title前的小logo））
②常用属性：
rel:用于表明被连接文件与当前文件的关系。
此处选icon,表明被连接图片是当前网页的icon图标。
type:表明被连接文件是什么类型，可以省略
href:表明链接文件的地址
eg:
<link rel="icon" type="image/x-icon" href="图标路径"/>
| 二、常见的块级标签 |
1、HTML的标签分类
①块级标签：自动换行、前后隔一行
②行级标签：按行逐一显示
2、常见的块级标签
①标题标签
1 <h1>一级标题</h1> 2 <h2>一级标题</h2> 3 <h3>一级标题</h3> 4 <h4>一级标题</h4> 5 <h5>一级标题</h5> 6 <h6>一级标题</h6>
②水平线<hr/>
③段落<p><p/>
④换行<br />
eg：
1 <p>这是P标签中的一个段落，这是P标签中的一个段落，这是P标签中的一个段落</p> 2 <p>这是P标签中的一个段落，这是P标签中的一个段落<br/>这是P标签中的一个段落</p>
⑤引用<blockquote></blockquote>
表明标签中的文字，为引用的内容，浏览器显示为段落缩紧
cite属性，表明引用的来源，一般为引用的网址URL
eg：
1 <blockquote cite="http://www.jredu100.com"> 2 我是引用的ＷＷＷ。。吼吼吼哈哈哈哈哈哈哈 3 </blockquote>
⑥预格式标签：<pre></pre>（一般来承载代码，格式！）
浏览器(默认显示样式)解析时：
①显示为等宽字体
②代码中的换行，空格等元素可在浏览器中直接显示。
1 <pre> 2 一二三四五 3 一二三四五 4 </pre>
⑦有序列表ol (order list)
1 <ol> 2 <li>列表第一项</li> 3 <li>列表第二项</li> 4 <li>列表第三项</li> 5 <li>列表第四项</li> 6 </ol>
⑧无序列表ul (unorder list)
1 <ul> 2 <li>列表第一项</li> 3 <li>列表第二项</li> 4 <li>列表第三项</li> 5 <li>列表第四项</li> 6 </ul>
⑨定义描述列表
<dl>
<dt>标题</dt>
<dd>描述项</dd>
</dl>
一般情况下，标题dt只有一项，描述项dd可以有N多项。
浏览器显示时，标题格式会显示，显示缩进。
eg：
1 <dl> 2 <dt>这是dl列表的标题</dt> 3 <dd>描述项1</dd> 4 <dd>描述项2</dd> 5 <dd>描述项3</dd> 6 <dd>描述项4</dd> 7 </dl>
⑩图片组合标签figure
①<figure>标签有两个子标签；
②浏览器显示为
1 <figure> 2 <img src="img/3.jpg" /> 3 <figcaption>这是图片的标题。</figcaption> 4 </figure>
（11）分区标签div
常配合CSS使用，为网页中的最常用的分区标签，常用于网页布局使用
eg：
1 <div style="100%; height:100px; background-color:red;"> 2 <h1>我是div里面的标题</h1> 3 这是div里面的文字。 4 </div>
| 三、常见的行级标签 |
***常见的行级标签
span（文本）、img（图片）、em（强调）、strong（强调）、q（短引用）、a（超链接）、
i（倾斜）、b（加粗）、small（缩小字体）
1、span（文本）:用于包裹一部分文字，进行特定样式的修改。
eg:
小希<span style="color:red; font-size:36px;">很萌</span>!!!<br />
2、倾斜/加粗
em:浏览器会显示倾斜
strong:浏览器会显示加粗
i：倾斜
b：加粗
①em和i都能倾斜，strong和b都能加粗，但是strong和em多了一层强调的语义。可以帮助收索引擎快速抓取网站重点,而且HTML5要求开发者尽可能实现代码的语义化。
②em和strong都表示强调，而strong得强调程度要大于em，em和strong标签均可多成嵌套，表示强调程度的递增
eg:
1 <em>我被em标签强调了！！</em><br /> 2 <strong>我被strong标签强调了！！</strong><br /> 3 <i>我被i标签倾斜了！！</i><br /> 4 <b>我被b标签加粗了！！</b><br />
3、q（短引用）：常用于一句话的引用，cite属性表示引用来源
浏览器解析时，会在内容的前后插入双引号
eg:
<q cite="http://www.baidu.com">我是用q标签声明的一句话</q>
small（缩小字体）：small标签可以多层嵌套，表示比默认字体小一号
直到字号小到最小号为止
big（放大字体）：同small可以多层嵌套，直到字号最大为止
但是，在最新规范中，small和big标签，不能被提倡使用，提倡使用style="font-size:11px;"CSS样式替代
eg:
1 <small><small>我被small缩小了</small></small><br /> 2 <big>我被big放大了</big>
4、img 图片标签
①scr属性：表示图片引用路径；
>>>scr的常见路径的写法：
a.相对路径
◀当图片在当前文件下一层时，文件夹名、图片名img/abc.jpg
◀当图片与当前文件同一层时，图片名src="abc.jpg"
◀当图片在当前文件上一层时，../图片名src="../computer.jpg
使用相对路径时，图片最外层只能放到网站根目录（图片必须要在项目文件夹中）
b.绝对路径(了解)
c.网络连接（了解）：直接使用图片的网络地址，
但是由于图片在别人服务器，不可控，所以不建议使用
②title：图片的标题，挡鼠标指上时显示的提示文字
③alt：当图片无法加载时，显示的文字
④width/height：图片的宽度高度，相当于ＣＳＳ中的style=";height：；"
⑤align:图片周围的文字，相当于图片的排列方式，可选值：top/center/bottom
eg:
<img src="img/8.jpg" title="当鼠标指上时显示的提示文字" alt="当图片无法加载时，显示的文字" width="100" height="100" align="center" />
5、超链接<a></a>
①href：超链接的跳转地址。可以写网络连接，或本地html文件的相对路径，确定方式同img的src路径。
②target:设置超链接打开的窗口的位置。_self 自身页面打开（默认） _blank 新页面打开
③title:鼠标指上后显示的文字
④rel:表明即将跳转的页面，与当前页面的关系
rel="prev"即将跳转页面，是当前文档的前一篇文章
rel="next"即将跳转页面，是当前文档的后一篇文章
rel="prefetch"预加载，当前文档加载完成后，利用空余网速，预加载即将跳转的页面
[功能链接]
mailto://271399000@qq.com
tencent://message/?uin=271399000
6、锚链接
①本页面锚链接
a.设置一个锚点<a name="top"></a>用name属性表示锚点名称
b.在超链接的href属性中，使用#name 跳转到指定锚点位置
eg：
<a href="#top">跳转到锚点</a>
②其他页面锚链接
a.需要跳转的页面设置锚链接
b.在超链接的href属性，文件名.html#name
注：由于谷歌/IE的兼容问题，需在锚点中，插入一个空格 才能生效
eg：
1 <a name="top"> </a> 2 <a href="http://www.Baidu.com" title="鼠标指上后显示的文字" target=" _blank">这是一个百度超链接</a> 3 <a href="tencent://message/?uin=2713997369" title="鼠标指上后显示的文字" target=" _self">跟我聊聊天吧</a> 4 <a href="#center" title="鼠标指上后显示的文字" target=" _self">跳 转</a> 5 <a href="mailto://2713997369@qq.com" title="鼠标指上后显示的文字" target=" _self">跟我发个邮件吧</a>
7、其他标签
①<s>有误文本：删除线
eg：
<s>1.这是s标签中的文字</s>
②cite标签：浏览器显示为倾斜，常用于书、画作、作品的引用
eg：
<cite>2.这是cite标签</cite>
③code：只是表示计算机代码。但是浏览器只会显示等宽字体，不会保留代码格式，需配合pre标签使用
eg:
1 <pre> 2 <code> 3 3.StringBuffer sb = new StringBuffer(); 4 for(String s : arr){ 5 sb.append(s); 6 } 7 </code> 8 </pre>
④bdo：表示文本方向，dir="ltr" 从左往右 dir="rtl" 从右往左
eg：
<bdo dir="ltr">4.1234567</bdo>
⑤kbd:表示需要用户用键盘输入的内容。浏览器显示为等宽字体
eg：
5.请输入“<kbd>Esc</kbd>”退出系统。
⑥sup：上标文本 sub：下标文本
eg：
1 X<sup>2</sup> X² 2 <br /> 3 X<sub>2</sub> X²
⑦版权符号 空格
eg：© 7.空格
⑧u:下划线
eg：
<u>8.这是u标签</u>
⑨mark:高亮或标记文本 浏览器显示为黄色背景
eg：
<mark>9.哈哈哈哈哈</mark>
| 四、表格<table> |
一、表格table
表格<table></table>
表格的行<tr></tr>
表格的列<td></td>
th默认加粗，且在单元格居中显示
二、table的常用属性
1.Border：表格的边框属性；当使用border设置边框时会在所有td以及table上嵌套边框，当border加大时，只有table最外层框线加粗，td单元格上的框线不会变化
2.Cellspacing:单元格与单元格之间的间隙，当cellspacing="0"时，
单元格之间的间隙等于0，但边框线并没有合并（边框线还是两条线的宽度）
合并边框的写法:style="border-collapse:collapse;"使用边框合并后，无需设置cellspacing
3.Cellpadding:单元格内边距，单元格中文字与单元格边框之间的距离。
4.Width/Height:表格的宽度，高度
5.Align:表格的对齐方式:left/居左；center/居中；right/居右
*注意：当表格使用align属性时，相当于使表格浮动，可能会导致表格后面的元素受表格浮动影响，导致布局错乱。
6.Bgcolor：背景色
7.Background：背景图片，后接相对路径，当背景图和背景色同时生效时，背景图会覆盖背景色。
8.Bordercolor：边框颜色
style="border-collapse:collapse;"<!--表格中两条线变成一条线-->
三、<tr><td><th>标签属性
>>>当表格属性，与行列属性冲突时，会以行列属性为准
>>>属性设置优先级：td>tr>table
1.Width,Height:给单个的行、列，设置宽度高度；
2.Bgcolor:背景色
3.Align:设置单元格中的文字，在单元格中的水平对齐方式left/center/right
4.Valign:设置单元格中的文字,在单元格中的垂直对齐方式top/center（middle）/bottom
5.nowrap:nowrap="nowrap"设置单元格文字行末不换行
四、表格的跨行与跨列
1.跨列：colspan，某单元格跨N列，则该单元格右边的N-1个td就不需要了
2.跨行：rowspan,某单元格跨N列，则该单元格下边的N-1个td就不需要了
| 五、表单<form> |
1、两个重要属性：
action:表单需要提交的服务器地址
method:表单提交数据使用的方法，get/post
get和post区别：
①get传参使用URL传递，所有的参数在地址栏可见，不安全；get传参数据量有限；
②post传参使用http请求传递，比较安全；post可以传递大量数据
③get请求的传输速率要比post快
>>>URL传参形式：链接URL地址？name1=value1&name2=value2
(地址中的“?”代表传递参数的开始)
2、input的常用属性：
①type:设置input的输入类型
②name:给input输入框起名,一般情况下，name属性必不可少，因为传递数据时，使用name=value(输入内容)的形式传递。
③value:input输入框的默认值
④placeholder:输入框的提示内容.当input有默认的value或者输入值时，placeholder消失。
3.input-type属性的常用属性值：
①text:文本输入框
②password:密码输入框，输入内容默认显示小黑点
③radio:单选框
>>>使用radio/checkbox时，value属性必填，提交时，提交的为value中的默认值
>>>radio/checkbox凭借name属性，确定是否属于同一组，name相同为同组，只能选一个
>>>使用checked="checked"属性，设置默认选中项
④file：文件上传
>>>使用accept="类型"，设置只能上传的文件类型，image/*任意格式图片
⑤sumbit:提交按钮，将所有表单数据，提交至后台服务器
⑥reset:重置表单数据，将表单数据恢复到默认状态
⑦image:图形提交按钮
4.属性名等于属性值的情况：
①checked="checked"设置radio或checkBox时默认选中项
②multiple="multiple" 设置select控件，为多选控件
③selected="selected"设置select控件，默认选项的option选项
④readonly="readonly"设置为textarea只读，不允许编辑。
⑤disabled="disabled"禁止控件。
>>>当input被disabled时，该input的name和value将无法向后台传递。
⑥hidden="hidden"隐藏控件，等效于<input type="hidden"/>
5.下拉选择控件 select
① 写法：
1 <select> 2 <option></option> //可以有N多个 3 </select>
② name属性，应该写在<select>上，所有选项只有一个name
③ multiple="multiple" 设置select控件为多选，可在界面使用Ctrl+鼠标，进行多选。一般不用。
④ option常用属性：
value="":当option没有value属性时，往后台传递的是<option></option>标签中的文字；
当option有value属性时，往后台传递的是value属性的值。
title="":鼠标指上后显示的文字。
selected="selected":默认选中。
⑤ <optgroup label="山东省"></optgroup> :用于将option标签进行分组，label属性表示分组名。
6、文本域 textarea
① 写法：<textarea></textarea>
② 设置宽高style=" 200px; height: 150px;" 自身有cols="" rows=""两个属性，但不常用
③ readonly="readonly" 设置为只读模式，不允许编辑。
④ style="resize: none;" 设置为宽高不允许修改。
⑤ style="overflow: ;" 设置当文字超出区域时，如何处理。
>>> 也可以通过overflow-x/overflow-y分别设置水平垂直方向的显示方式。
>>> 常用属性值:
hidden：超出区域的文字，隐藏无法显示
scroll：无论文字多少，均会显示滚动
auto:自动，根据文字多少自动决定是否显示滚动条（默认样式）
7、表格的边框与标题
1 <form> 2 <fieldset>表格的边框 3 <legend>联系方式</legend>表格的标题 4 ……N多个表单元素（input/select/texrarea） 5 </fieldset> 6 </form>
注：一个边框可以有多组边框+标题
8、HTML5智能表单
①H5新增input的form属性，用于指向特定form表单的id，实现input无需放在form标签中，即可通过表单提交
<form id="xx">...</form>
<input ...form="xx">
②新增N多个type新属性，详见表格
新增input的属性：
Autocomplete：自动完成功能，
>>>记忆之前输入过的内容，在下次输入时提示没有输入的部分，
>>>大多数浏览器默认开启，
>>>有两个属性值on/off（也是form的属性）
>>>可以在<form>标签上设置Autocomplete，
控制整张表单的自动完成开关。但可以在个别input上单独设置，覆盖form的整体设置
Autofocus：自动获得焦点，Autofocus="Autofocus"刚打开网页时，光标所在位置
Form：所属表单，通过form表单的id，指向特定表单
Required：必填。required="required"设置必填
*Pattern：验证input的模式
Placeholder：提示
今天的内容就分享到这里啦~~~小女子初学HTML，还请各位园友多多指教！！！
出处：http://www.cnblogs.com/hope666/