Html标签与元素的关系：一个标签对构成一个元素
a) <html></html>：标签对，成对出现，<html>标志着html文件的开始，</html>文件的结束
b) <head></head>：标签对,代表html文件的头部
c) <body></body>：标签对，代表html文档的主体
d) <meta>:单标签，一般写在head里，可以用charset属性来设置网页的编码
e) <title></title>：标签对，一般写在head中，设置网页的标题
排版标签
1）<br />换行
2）<p></p> 段落标签 在开始和结束的位置上会留一个空行。
3）<hr /> 一条水平线
属性：
1）width：值像素 100px 可以写百分比 30%
2）align ：对齐方式
3）size ：粗细
4）color ： red green blue RGB 三原色 (red green blue #aa55ff)
4）div 声明一块区域 <div>数据</div> css+div
5）span 声明一块区域
字体标签
1<font>文本内容</font>
属性：
1）size 字号的大小 最大值是7 最小值是1
2）color 颜色
3）face 字体
2标题标签
<h1></h1>
...
<h6></h6>从大到小字体缩小。
3<B></B>粗体
4<I></I>斜体
5<u></u>：下划线字体标签
6<em></em>：标签强调，强调的结果正好是倾斜
7<strong></strong>：表示强调，强调的结果是加粗
9：字体上标标签
10：字体下标标签
标签支持嵌套
列表标签
1）dl 列表标签
<dl>
<dt>上层项目</dt>
<dd>下层项目</dd>特点：自动对齐，自动缩进。
</dl>
2）有序列表和无序列表
有序：<ol>
type：列表前序标号
start：从第几个开始。
无序：<ul>
数据条目：
<li>数据内容</li>
<li>
<a href="后台的路径">用户管理</a>
</li>
图片标签
<img >
属性：
src="图片的路径"
width： 显示图片的宽度
height： 显示图片的高度
alt： 图片的说明文字(当图片加载失败时)
title：设置鼠标悬浮时的提示信息
width: 设置图片的宽度，单位是像素(px)
height: 设置图片的高度，单位是像素(px)
超链接
<a></a>
作用：1）链接资源
href="" 必须指定如果href的值不指定，默认是file文件的协议。
（如果href中指定的协议，浏览器不能解析，就会调用应用程序，可以解析的程序就可以打开。）
title：设置鼠标悬浮时的提示信息
target：规定在何处打开窗口
_blank：在一个新的窗口打开页面
_self ：默认。在相同的框架中打开被链接文档。
_parent： 在父框架集中打开被链接文档。
_top： 在整个窗口中打开被链接文档。
定位资源
描点连接
注意：href中的值必须和name中的值一致
表格标签（重点）
<table></table> 声明一个表格
属性：
1）border 边框
2）width 宽度
4)cellspacing//设置单元格之间的间距(空间)
5)cellpadding//内容到单元格之间的距离
6)align//设置表格的水平对齐方式（left,right,center
7)bordercolor//设置表格的边框颜色
8)bgcolor//设置表格的背景颜色
9)background//设置表格的背景图片
<tr></tr> 行
属性：
1）align 对齐方式（文本内容）
<td></td>
属性：
1）width
2）height
3）colspan 列合并单元格
4）rowspan 行合并单元格
<th></th> 会加粗 并且会居中。
<caption> 表格的标题
valign: 规定表格相对周围元素的对齐方式, 它的取值有center、left、right
• 给table设置valign属性, 无效
• 给tr设置valign属性, 是让当前行中所有内容居上/居中/居下
• 给td设置valign属性,是让当前单元格中所有内容居上/居中/居下
• 如果td中设置了valign属性, tr中也设置了valign属性, 那么单元格中的内容会按照td中设置的来对齐
表格的结构
• thead标签:用来存放当前列的表头, 如果没有加css页面默认将表头中的高度设置变小
• tbody标签:一般用来存放页面中的主体数据, 如果不写会自动加上
tfoot标签:用来存放表格的页脚（脚注或表注), 如果没有加css页面默认将表头中的高度设置变小,
表单标签（重点）
作用：可以和服务器进行交互。输入项的内容 用户名 密码
<form></form>
属性：
action="提交的请求位置"
method 提交方式(get和post)如果method没有写默认是get方式提交。
get和post区别：
1）get方式表单封装的数据直接显示在url上。post方式数据不显示在url上。
2）get方式安全级别较低，post级别较高。
3）get方式数据的长度，post支持大数据。
<input />
属性：type 值可以指定很多的值，每一个不同的值代表的不同输入组件。
1）type=text 文本框
2）type=password 密码
3）type=radio 单选按钮
4）type=checkbox 多选按钮
单选和多选都有默认值：checked="checked"
5）type=reset 重置按钮
6）type=submit 提交按钮
7）type=file 上传文件的输入项
8）type=button 按钮
9）type=image 图片（也是提交按钮，）
10）type=hidden 隐藏标签（用户不用看到的，开发时必须要使用的可以把数据封装到隐藏标签中，和表单一起提交到后台）。
i. type：规定input控件的类型
ii. id：唯一标识此控件
iii. name：规定控件的名称
iv. value：设置控件的值
v. placeholder:设置控件的提示信息
i) 单选框：<input type=’radio’>
i. name必须设置为相同的值，才能实现单选
ii. checked//设置单选框选中
iii.若要实现点击文字选中单选框，必须把label中的for属性值设成和radio中的id值相同
控件中的属性
i.只读：readonly,只对input type=’text/password’或textarea起作用
ii.不可用：disabled，对form表单中的所有控件都起作用
iii.size:设置控件可输入字符的宽度，只对文本框及密码框起作用
iv. maxlength：规定输入字符的最大长度，只对文本框及密码框起作用
选择标签
<select></select>选择下拉
文本域textarea
<textarea>文本内容</textarea>
跑马灯
文字滚动效果：<marquee></marquee>
a) direction//设置滚动方向,值：right,left,up,down
b) behavior//设置滚动的方式
i. scroll//循环滚动(由一端滚向另一端，会重复)
ii. slide//只滚动一次
iii. alternate//在边框之间来回滚动
c)scrollamount//滚动的速度,单位是毫秒(1000ms=1s),单位越大，速度越快
d)scrolldelay//设置滚动的延时,单位是毫秒,值越大，延时(速度)越慢
e)onmousemove=‘this.stop()’//当鼠标移到目标时，停止滚动
f)onmouseout=’this.start()’//当鼠标移动目标时，开始滚动
框架标签
作用：
<frameset>
<frame>
</frameset>
框架标签不能写在<body>的内部。body不能写在frameset的上面。
lable标签
HTML字符实体：语法：以&符合，以;结尾
a) & lt;//小于号
b) & gt;//大于号
c) & amp;//&(和)
d) & nbsp;//空格
e) & copy;//版权
f) & reg;//商标
g) & quot;//"
h) & plusmn;//+-
thead:表格的表头
tbody:表格的主题
tfoot:表格的页脚
主要结合css,javaScript 来使用
colgroup:用来组合列它的span属性可以设定组合列的数目必须放在caption之后thead之前
<colgroup span="2" style="width : 150px"> </colgroup>
align:设置文字的水平对其方式(left,center,right)
valign:设置文字的垂直对齐方式（top,middle,botton）
meta其它类型
Keywords类型
• 作用: 告诉搜索引擎当前网页的关键词, 在SEO中非常重要, 能够提高搜索命中率, 让别人更容易找到你
• 格式: <meta name="keywords" content="IT前言技术、iOS技术、HTML5技术、Android技术" />
Descriiption类型
• 作用: 告诉搜索引擎当前网页的主要内容, 在SEO中非常重要,
• 格式: <meta name="description" content="HTML5技术、Android技术研究" />
Author类型
• 作用: 告诉搜索引擎当前网页的作业, install B专用
• 格式: <meta name="author" content="Jonathan_Lee" />
Refresh类型
• 作用: 告诉浏览器多久自动刷新一次页面并指向新页面, 常用于新老域名交替时, 访问老域名自动跳转到新域名, 或用语一些需要定时刷新的聊天室等.
• 格式: <meta http-equiv="Refresh" content="2；URL=http://www.baidu.com/">
Robots类型
• 作用: 告诉搜索引擎当前网页的作业, 写给网络爬虫看的内容
• 格式: <meta name="robots" content="all|none|index|follow|noindex|nofollow" />
○ index: 告诉搜索引擎允许抓取当前页面
○ noindex:告诉搜索引擎不允许抓取当前页面
○ follow: 告诉搜索引擎可以从当前页面上找到链接，然后继续访问抓取下去
○ nofollow:告诉搜索引擎不允许从当前页面上找到链接, 拒绝其继续访问
○ all: 告诉搜索引擎允许抓取当前页面, 并且允许从此页找到链接继续访问
○ none: 告诉搜索引擎不允许抓取这个页面,并且不允许从此页找到链接、拒绝其继续访问
常见组合
○ <META NAME="ROBOTS" CONTENT="INDEX,FOLLOW">：可以抓取本页，而且可以顺着本页继续索引别的链接
§ 有可以写成<META NAME="ROBOTS" CONTENT="ALL">
○ <META NAME="ROBOTS" CONTENT="NOINDEX,FOLLOW">：不许抓取本页，但是可以顺着本页抓取索引别的链接
○ <META NAME="ROBOTS" CONTENT="INDEX,NOFOLLOW">：可以抓取本页，但是不许顺着本页抓取索引别的链接
○ <META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW">：不许抓取本页，也不许顺着本页抓取索引别的链接。
○ 注意事项:
§ 不要把两个对立的反义词写到一起，
网友评论