1）有序列表ol，由多个li标签组成。

<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
显示结果中自带序号：

2）无序列表ul
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
显示结果中无序号：

两层无序列表嵌套的话第二层的黑点变为空心：

3）定义列表dl

<dl>
<dt>定义列表的标题</dt>
<dd>定义列表的描述项</dd>
<dd>定义列表的描述项</dd>
<dd>定义列表的描述项</dd>
</dl>
显示结果中，标题自动顶格显示，一个列表一般只有一个标题，但可
以有多个描述项。
4）figure组合标签
包含img一张图片，figcaption图片的标题，在图片正下方显示
。

<figure>
<img src="http://www.mamicode.com/img/icon.png" />
<figcaption>
图标
</figcaption>
</figure>
5）div分区标签
用于配合css使用，将网页划分为区块，可以包裹各种标签。

<div style="background-color: blue; >
div里面的文字
</div>
6）span标签
span标签用于包裹行内的文字，常配合css使用修改文字样式。

学习<span style="color: red; font-size: 50px;">前端</span>

7）em、i、strong、b标签
em和i都表示倾斜，strong和b都表示加粗。
em和strong有强调含义，强调给搜索引擎看。strong的强调成都比em
更高。
强调的作用：可以让搜索引擎快速抓取网页的重点内容，实现代码的
语义化。

<em>em标签，字体倾斜+强调</em><br />
<strong>strong标签，字体加粗+强调</strong><br />
<i>仅仅是倾斜</i><br />
<b>仅仅是加粗</b><br />

8）<u>下划线标签</u>

9） 引用标签：blockquote、q、cite。
blockquote：显示效果为整段缩进，用于引用一整段标签，是块级标
签。
q：自动加引号，用于引用一句话，是行级标签。
cite：字体倾斜常用语引用作品名，书画名。
<blockquote cite="">引用标签</blockquote>
<q cite="www.baidu.com">引用，自动加双引号,短引用</q>
<cite>引用，字体倾斜。常用语作品名字的引用</cite>

10）img图片标签(行级标签)
src：图片所在路径。
路径的表示方式：①网络图片地址不建议使用；
②可以使用图片的绝对路径，因为绝
对路径使用file://协议，网页使用http://协 议打开无法访问
file协议的文件。绝对路径写法file:///C:/tupian.jpg
③相对路径，推荐使用的唯一方式。
a.图片在当前文件的下一层"文件夹名
/图片名"；
b.图片与当前文件在同一层，直接写
图片名；
c.在上一层，"../图片名"，注意图片
必须包含在项目里面不能退出项目根目录。
width/height:宽度高度属性

title：鼠标放在图片上时显示的文字。
alt：图片由于各种原因无法加载出来时显示的文字。
省略alt将默认显示title的名称。
align：图片周围的文字相对于图片的排列方式。top、center、
bottom。
<img src="http://www.mamicode.com/img/icon.png" width="50px" height="50px" title="鼠
标放在图
片上时显示的文字" alt="图片未加载" align="center" />

11）超链接标签a
href:跳转的地址，可以是网络连接，也可以是本地html文件的相对路
径。
target:超链接新页面打开的位置。_self在当前页面打开(默认)，
_blank在新页面打开。
title:鼠标指在超链接上显示的文字。
功能性超链接：
mailto：给指定邮箱发送邮件
tencent：与指定QQ聊天。
锚链接：点击超链接可以跳转到页面的指定的位置(锚点)。
a.在页面指定位置定义一个锚点<a name="top"></a>
b.将超链接的href属性改为 #锚点名称。<a href="http://www.mamicode.com/#top">
跳转到某位置</a>
c.跳转到其他页面指定锚点的方式。<a href="http://www.mamicode.com/其他页面的地>址.html#top">其他页面的某位置</a>
12）表格table及相关属性
tr:行；td：列；th:首行表头中每个单元格用th表示，默认文字加粗
居中。
border：给表格的每个td和整个tabl加边框。如果boder的值>1，则只
有最外层边框加粗，td边框不变。
cellspacing：单元格与单元格之间的间距。值为0时，相邻的边框不
会合并，而是两条边框的宽度。
表格边框合并：
style="border-collapse: collapse;"
设置边框合并以后，cellspacing属性将会失效。
cellpadding：单元格内边距，单元格中文字与边框之间的距离。
width/height：表格的宽高。
align：表格的位置。
bodercolor/bgcolor/background:后俩同时存在是背景图生效。
表格的行列属性：
作用于tr或者td上的属性：
1、宽高
2、bgcolor。当表格的属性与行列的属性发生冲突时，优先级采用“
近者优先”的原则：table<td<tr
3、align/valign：设置单元格中文字水平对齐方式/垂直对齐方式。
表格的跨行与跨列：
1、跨列：colspan
2、跨行：rowspan
3  H5智能表单

1）H5给我们提供了将form外的input与表单关联的方式。只需要给form表单起一个id，然后给表单外面的input添加form属性，指向这个id，就可以实现表单与input的绑定。
2）H5给我们新增了许多input的新的type类型。
3）H5新增的input属性：
①form：关联制定表单的id。
②placeholder：输入框的提示内容
③required：必填。
④autofocus：指定输入框，自动获取焦点。
⑤autocomplete：记住输入情况。自动提示。可以给form标签设置

1 表格完整化结构
caption：表格标题，无论<caption>标签放在表格第几行，表格标题
永远在表格正上方居中。
thead:表头，永远在紧挨表格最上部。
tbody：身体部分，在thead之下，在tfoot之上。
tfoot：尾部，永远在表格最下部。
2 表单

1）action：表单提交给哪个服务器地址；
method：表单提交数据的方式。
get和post区别：
①get使用url传递数据，所有内容在地址栏可见，不安全。
post的数据无法在地址栏看到，较安全。
②get传递的数据量有限，而且只能传递纯文本。而host可传
递大量数据，且可传递图片、视频等文件。
③get传输速度比post快。
get传递数据的url格式：http://原来的地址.html?
name1=value1&name2=value2;
所以，input使用时，name属性必不可少，若缺少name，
将导致该输入框的数据不向后台传递。
2）input常用属性(属性名与值相同的，值都可以省略)
①type：表示当前输入框时哪种类型的；
②name：给输入框起别名，向后台传递时，使用name=value的形式传
递；
③value：当前input的默认值
④placeholder：输入框的提示内容，当输入框有value时，提示内容
消除。
⑤hidden：隐藏当前输入框，可以写为hidden="hidden"，也可以省略
属性值，只写<input type="text" hidden />隐藏的输入框内容，依
然可以向后台传递数据。
⑥disabled：禁用当前输入框，显示但不能使用。被禁用的输入框内
容，将不能向后台传递数据。
3）input的type类型：
①text
②password
③radio：单选。value值不能省略。凭借name是否相同，区
分按钮是否为同一组。同一组按钮只能选中一个，name必须相同。
checked="checked" 设置单选按钮，默认被选中 。
④checkbox：多选按钮，其他与单选按钮相同。
⑤file：文件上传框。
accept属性，可以限制上传哪种类型的文件。"*"表示可以上
传所有类型文件，"image/*"可以上传图片类型的所有。
multiple：设置可以上传多个文件。
⑥submit：表单提交按钮。
⑦reset：表单重置按钮。
⑧image：图形提交按钮，作用同submit。
⑨button：无任何作用，只显示按钮形状。
⑩hidden：隐藏的输入框。与text输入框使用hidden时效果一样。
4）select下拉选择区块
①此标签里每一项用<option></option>。
②name属性，学要卸载select标签中。
③option标签中value值若有则传递value值，若没有则传递标签中间
的文字。
④option添加属性selected="selected",设置默认选中项。
⑤selected属性multiple，设置当前下拉控件可以多选。(了解)
⑥option添加属性title，鼠标指向时显示的文字。
⑦select可以使用<optgroup></optgroup>,标签对选项进行分组，用
lable属性显示分组名。
5）textarea文本域
①文本域大小用css控制。
②设置文本域大小不能在网页中显示时拖动改变。
style="resize:none;"
③属性readonly只读。文本域中的文字在网页中显示时不能更改。
④文字超出区域处理overflow样式，可以设置文字超出区域的显示方
式。style="overflow:"
a.overflow:hidden;超出区域的字隐藏。
b.overflow:scroll;无论文字多少都会显示水平&垂直滚动条
。
c.overflow:auto;默认效果。文字多出现滚动条，文字少不
出现。
d.overflow-x/-y单独修改某个方向的滚动条。

3  H5智能表单
1）H5给我们提供了将form外的input与表单关联的方式。只需要给
form表单起一个id，然后给表单外面的input添加form属性，指向这个
id，就可以实现表单与input的绑定。
2）H5给我们新增了许多input的新的type类型。
3）H5新增的input属性：
①form：关联制定表单的id。
②placeholder：输入框的提示内容
③required：必填。
④autofocus：指定输入框，自动获取焦点。
⑤autocomplete：记住输入情况。自动提示。可以给form标
签设置。

HTML最基本知识