HTML常用标签
2015-08-24 20:49
453 查看
HTML
HTML：（Hype Text Markup Language）超文本标记语言，是最基本的网页语言。代码由标签组成，不区分大小写。
由<html>开始，</html>结束，分头部分（head）和体部分（body），头部分用于给页面增加一些辅助或属性信息，最先加载。体部分是真正存放页面数据的地方。
属性和属性值用“=”连接，属性值可加双引号、单引号或不加引号。
标签相当于一个容器，数据存放在容器里，对数据操作，就是在修改容器的属性值。
字体标签：<font size=”5” color=”red”>文字</font>
color属性可用颜色单词，也可用“#FFFFFF”：井号加十六进制数据表示，红绿蓝
标题标签：<h1>文字</h1> 共有6级标题
水平线标签：<hr color=”red” size=”5”/> size属性指定水平线粗细
特殊符号：
列表和项目符号标签：
注释标签：<!—注释内容-->
图像标签：<img src=”../dir/file” alt=”说明文字” height width border/>
src属性中可用两个点（../）代表上层目录
alt属性中的说明文字在鼠标悬停和图片加载失败时显示
图像地图：用<img>封装好图像后，切换到DW设计视图，在属性中选择热点区域形状并在图像上拖动出一块热点区域，用热点区域链接某个资源。在页面中点击热点区域就会跳转到相应资源。
表格标签：<table><tr><td></td></tr></table>
<table border=”边框粗细” bordercolor cellpadding=”单元格中数据与单元格边框间距” cellspacing=”单元格与单元格间距 0两线并为一线” width=’固定像素值或相对页面百分比’> cellspacing=0两线并成一线但显示出来粗，用CSS中border-collapse两线重叠看起来就是一条线
<table>标签内<caption></caption>给表格加标题，是表格的一部分
table标签中默认都有一个tbody标签 thead、tbody、tfoot
浏览页面时，浏览器解析由table标签封装的页面数据时，读到</table>表格结束标记才会显示数据，若封装页面数据的表格很大，没读到结束标记就不显示任何数据，用户体验不佳，所以将表格分为多个部分，读一个</tbody>就显示一部分。用tbody将表格分体
超链接标签：<a href=”http://www.xxx.cn” >文字</a>
点击一个超链接做了什么？首先启动相应的协议解析引擎，访问本机hosts文件，查找对应主机IP，未找到再请求网络DNS服务器获取对应IP，用IP访问指定主机。
href属性，可以指定协议，mailto:abc@qq.com?subject=”邮件主题”&cc=”抄送地址”
mailto thunder…… 不指定协议默认启动文件协议解析
href=www.baidu.com 默认使用file协议打开的是一个本地文件 并不是主机地址
超链接实现页面内跳转：定位标记、锚
<a name=”top”>顶部位置</a>
用a标签的name属性为当前位置指定一个名字，不使用href属性
…很多页面内容…
在适当位置用a标签链接到指定名字的位置 用#标示当前页面
<a href=”#top”>回到顶部位置</a>
target属性指定页面打开方式，默认在当前页面内打开，_blank新窗口打开
title属性：当鼠标悬停在文字上时显示的文字内容
表单标签：用于与服务端交互
<form action=”表单提交目的地” method=”表单提交方式”></form>
form标签内的组件：input接收用户输入数据 select下拉列表 textarea文本区域
<input type=”text” name=”user” value=”zhangsan” />
input标签内要指定name属性，服务端才能获取到对应的value
input内包含的组件类型 通过type指定：
text文本框 password密码框
radio单选框 属于同一组的选择框name属性要一致，不然单选框不能实现单选
checkbox复选框 分组 同单选框 单选框不加属性时还不让你选
file 提供一个文件浏览按钮，多用于上传文件
hidden 隐藏组件，不需用户看到但服务端要用到，可通过JavaScript将其值在用户端运算后再提交至服务端使用
button 按钮 通过onclick方法添加事件监听
reset 重置按钮 submit 提交按钮
image 和submit一样，但可通过src属性指定一个图片充当按钮 美化效果
<select>选择列表，默认单选下拉式 设定multiple属性使选项全部列出，无下拉效果
size属性指定显示多少项，显示不完出现滚动条
通过<option></option>标签封装列表项
<textarea cols=”” rows=””> 文本区域 可指定行数和列数
<fieleset>区域设置，可给form加外框 外框上的文字可用legend标签指定
form中的method指定提交方式，有7中，常用get和post
用Java自定义服务端与form交互 查看数据提交不同之处
get提交：信息显示在地址栏中，敏感信息泄露，不安全；
地址栏存储信息量有限，不利于大数据量提交；
将信息封装在消息头前边；
提交至服务端的中文乱码需要再次编码后再解码
post：地址栏上不显示提交的信息，避免信息泄露，安全；
提交数据量无限制，方便大数据提交；
将信息封装在消息头后边（空行后）的数据体中；
中文乱码可通过设定字符集方法简单搞定
Tomcat服务端默认使用的iso8859编码，两种提交方式提交中文时，服务端会显示乱码，需要在服务端使用指定字符集解码，request.setCharacterEncoding(“GBK”)但设定字符集方法只对数据体中的数据有效，get方式提交的信息封装在消息头中，不能使用这种方法。但可以通过先用iso8859编码再GBK解码的方式解决。推荐使用post方式提交。
暴力提交、暴力注册
<a href=”http://注册地址?name=value&id=value......”>暴力开始</a>
超链接默认就是get方式提交
客户端首先进行数据有效性校验，服务端对客户端提交的数据必须再次校验
label标签：用于给各元素定义快捷键
for属性指定快捷键起作用的表单元素，其值必须与该表单元素的id值相同
accessKey指定快捷键，要与Alt合用
例：<label for=”user” accessKey=”u”>user name</label>
<input type=”text” id=”user” />
label使用技巧：
将label标签加到tr标签上，for属性指向该tr里的文本框，在这行的任意位置点击鼠标，文本框都将获得焦点。
其他标签：
<pre></pre>此标签内封装的文本数据格式将保持原样，包括空格和缩进等格式。常用于页面中显示带有缩进层次的代码。
<p></p>段落标签，两个段落之间带有空行
<b>加粗 <strong>加粗 <i>斜体 <u>下划线 <sub>下标 <sup>上标
<marquee direction=”left/right/down/up” behavior=”scroll/alternate/slide”>
此标签内可以让内容动起来，scroll滚动穿过/alternate来回弹/slide一下摔死
框架集frameset标签：将浏览器页面分成多个独立的部分，分别显示不同的页面
放在head和body之间 frameset分割页面 frame指定小页面内容
<frameset rows=”30%, *” frameborder=”yes” border=”1” framespacing=”0”>
<frame src=”1.html” noresize=”noresize” />
<frame src=”2.html” noresize=”noresize” />
</frameset>
frameset中用rows和cols属性指定分割页面大小区域，可用百分比也可用像素值
frame中的noresize属性使框架页面大小不可随意改动
frame中添加的超链接默认都是在当前框架页面内打开的，要让其在当前窗口中的其他框架页面中打开，需要将框架页面添加一个name属性，让超链接的target属性值等于这个框架页面的name属性即可
iframe画中画标签：直接在当前页面中挖出一个区域，显示指定页面内容
<iframe src=”1.html” width=30 height=50>画中画标签说明文字，这些文字在浏览器不支持iframe标签时显示</iframe>
画中画标签具有一定的危险性，可能被用于隐藏执行一些恶意的代码
如：<iframe src=”1.js” height=0 width=0>
头标签<head>内的一些标签：<title></title> <base /> <meta /> <link />
title：页面标题，显示在浏览器标题栏上的文字
base：href指定页面中所有超链接的目录，可本地，也可网络，结尾一定要用斜杠/表示
目录，只作用于相对路径文件。 target指定打开方式
meta： <meta name=”keywords” content=”电影，视频，关键字……” />
<meta http-equiv=”refresh” content=”3, url=http://www.xxx.com” />
http-equiv：模拟HTTP协议响应消息头，3秒后刷新，打开指定网页
link：给HTML关联一些文件，如CSS，JS等
<link rel=”stylesheet” href=”1.css” media=”print/screen”>
rel指定关联文件与HTML的关系 media指定文件作用的设备，多个设备斜杠分隔
XHTML是可扩展的（Extensible）超文本标记语言，可理解为HTML向XML的过渡。
XML是可扩展标记语言，是对数据信息的描述，而HTML是对数据显示的描述。XML规定更为严格，如标签不结束即错误。XML规范可被更多应用程序解释，将成为一种通用的数据交换语言，各个服务器、框架都将XML作为配置文件。
Dreamweaver创建HTML文件自动生成的头部信息中，又一个规范约束文件（.dtd），描述一些标签信息，由此文件来约束标签的自动闭合，删除这些头部信息后，DW中输入标签将不会自动闭合。前边的网址并不代表此文件要从网络获取，只表示名称空间，可自定义。
HTML：（Hype Text Markup Language）超文本标记语言，是最基本的网页语言。代码由标签组成，不区分大小写。
由<html>开始，</html>结束，分头部分（head）和体部分（body），头部分用于给页面增加一些辅助或属性信息，最先加载。体部分是真正存放页面数据的地方。
属性和属性值用“=”连接，属性值可加双引号、单引号或不加引号。
标签相当于一个容器，数据存放在容器里，对数据操作，就是在修改容器的属性值。
字体标签：<font size=”5” color=”red”>文字</font>
color属性可用颜色单词，也可用“#FFFFFF”：井号加十六进制数据表示，红绿蓝
标题标签：<h1>文字</h1> 共有6级标题
水平线标签：<hr color=”red” size=”5”/> size属性指定水平线粗细
特殊符号：
| 大于号＞ | 小于号＜ | 与符号& | 双引号” | 空格 | 注册符® | 版权符© | TM符™ |
| < | > | & | " | ® | © | ™ |
| 定义列表<dl> </dl> | 数字标签<ol> </ol> | 符号标签<ul> </ul> |
| <dl>定义列表DefinedList <dt>定义项目 <dd>具体项目</dd> <dd>具体项目</dd> </dt> </dl> 自动缩进效果 | 具体项目内容用<li></li>封装 自动缩进 | |
| 默认数字样式 可用type修改：a A I i 1 Start属性指定起始号码 | 默认样式空心圆circle disc实心圆 square黑方块 可用CSS自定义符号 |
图像标签：<img src=”../dir/file” alt=”说明文字” height width border/>
src属性中可用两个点（../）代表上层目录
alt属性中的说明文字在鼠标悬停和图片加载失败时显示
图像地图：用<img>封装好图像后，切换到DW设计视图，在属性中选择热点区域形状并在图像上拖动出一块热点区域，用热点区域链接某个资源。在页面中点击热点区域就会跳转到相应资源。
表格标签：<table><tr><td></td></tr></table>
<table border=”边框粗细” bordercolor cellpadding=”单元格中数据与单元格边框间距” cellspacing=”单元格与单元格间距 0两线并为一线” width=’固定像素值或相对页面百分比’> cellspacing=0两线并成一线但显示出来粗，用CSS中border-collapse两线重叠看起来就是一条线
<table>标签内<caption></caption>给表格加标题，是表格的一部分
| <td colspan=2>行占两列 | |
| <td rowspan=2>列占两行 第一行第一个单元格 | 第一行第二个 |
| 第二行只有一个 |
浏览页面时，浏览器解析由table标签封装的页面数据时，读到</table>表格结束标记才会显示数据，若封装页面数据的表格很大，没读到结束标记就不显示任何数据，用户体验不佳，所以将表格分为多个部分，读一个</tbody>就显示一部分。用tbody将表格分体
超链接标签：<a href=”http://www.xxx.cn” >文字</a>
点击一个超链接做了什么？首先启动相应的协议解析引擎，访问本机hosts文件，查找对应主机IP，未找到再请求网络DNS服务器获取对应IP，用IP访问指定主机。
href属性，可以指定协议，mailto:abc@qq.com?subject=”邮件主题”&cc=”抄送地址”
mailto thunder…… 不指定协议默认启动文件协议解析
href=www.baidu.com 默认使用file协议打开的是一个本地文件 并不是主机地址
超链接实现页面内跳转：定位标记、锚
<a name=”top”>顶部位置</a>
用a标签的name属性为当前位置指定一个名字，不使用href属性
…很多页面内容…
在适当位置用a标签链接到指定名字的位置 用#标示当前页面
<a href=”#top”>回到顶部位置</a>
target属性指定页面打开方式，默认在当前页面内打开，_blank新窗口打开
title属性：当鼠标悬停在文字上时显示的文字内容
表单标签：用于与服务端交互
<form action=”表单提交目的地” method=”表单提交方式”></form>
form标签内的组件：input接收用户输入数据 select下拉列表 textarea文本区域
<input type=”text” name=”user” value=”zhangsan” />
input标签内要指定name属性，服务端才能获取到对应的value
input内包含的组件类型 通过type指定：
text文本框 password密码框
radio单选框 属于同一组的选择框name属性要一致，不然单选框不能实现单选
checkbox复选框 分组 同单选框 单选框不加属性时还不让你选
file 提供一个文件浏览按钮，多用于上传文件
hidden 隐藏组件，不需用户看到但服务端要用到，可通过JavaScript将其值在用户端运算后再提交至服务端使用
button 按钮 通过onclick方法添加事件监听
reset 重置按钮 submit 提交按钮
image 和submit一样，但可通过src属性指定一个图片充当按钮 美化效果
<select>选择列表，默认单选下拉式 设定multiple属性使选项全部列出，无下拉效果
size属性指定显示多少项，显示不完出现滚动条
通过<option></option>标签封装列表项
<textarea cols=”” rows=””> 文本区域 可指定行数和列数
<fieleset>区域设置，可给form加外框 外框上的文字可用legend标签指定
form中的method指定提交方式，有7中，常用get和post
用Java自定义服务端与form交互 查看数据提交不同之处
get提交：信息显示在地址栏中，敏感信息泄露，不安全；
地址栏存储信息量有限，不利于大数据量提交；
将信息封装在消息头前边；
提交至服务端的中文乱码需要再次编码后再解码
post：地址栏上不显示提交的信息，避免信息泄露，安全；
提交数据量无限制，方便大数据提交；
将信息封装在消息头后边（空行后）的数据体中；
中文乱码可通过设定字符集方法简单搞定
Tomcat服务端默认使用的iso8859编码，两种提交方式提交中文时，服务端会显示乱码，需要在服务端使用指定字符集解码，request.setCharacterEncoding(“GBK”)但设定字符集方法只对数据体中的数据有效，get方式提交的信息封装在消息头中，不能使用这种方法。但可以通过先用iso8859编码再GBK解码的方式解决。推荐使用post方式提交。
暴力提交、暴力注册
<a href=”http://注册地址?name=value&id=value......”>暴力开始</a>
超链接默认就是get方式提交
客户端首先进行数据有效性校验，服务端对客户端提交的数据必须再次校验
label标签：用于给各元素定义快捷键
for属性指定快捷键起作用的表单元素，其值必须与该表单元素的id值相同
accessKey指定快捷键，要与Alt合用
例：<label for=”user” accessKey=”u”>user name</label>
<input type=”text” id=”user” />
label使用技巧：
将label标签加到tr标签上，for属性指向该tr里的文本框，在这行的任意位置点击鼠标，文本框都将获得焦点。
其他标签：
<pre></pre>此标签内封装的文本数据格式将保持原样，包括空格和缩进等格式。常用于页面中显示带有缩进层次的代码。
<p></p>段落标签，两个段落之间带有空行
<b>加粗 <strong>加粗 <i>斜体 <u>下划线 <sub>下标 <sup>上标
<marquee direction=”left/right/down/up” behavior=”scroll/alternate/slide”>
此标签内可以让内容动起来，scroll滚动穿过/alternate来回弹/slide一下摔死
框架集frameset标签：将浏览器页面分成多个独立的部分，分别显示不同的页面
放在head和body之间 frameset分割页面 frame指定小页面内容
<frameset rows=”30%, *” frameborder=”yes” border=”1” framespacing=”0”>
<frame src=”1.html” noresize=”noresize” />
<frame src=”2.html” noresize=”noresize” />
</frameset>
frameset中用rows和cols属性指定分割页面大小区域，可用百分比也可用像素值
frame中的noresize属性使框架页面大小不可随意改动
frame中添加的超链接默认都是在当前框架页面内打开的，要让其在当前窗口中的其他框架页面中打开，需要将框架页面添加一个name属性，让超链接的target属性值等于这个框架页面的name属性即可
iframe画中画标签：直接在当前页面中挖出一个区域，显示指定页面内容
<iframe src=”1.html” width=30 height=50>画中画标签说明文字，这些文字在浏览器不支持iframe标签时显示</iframe>
画中画标签具有一定的危险性，可能被用于隐藏执行一些恶意的代码
如：<iframe src=”1.js” height=0 width=0>
头标签<head>内的一些标签：<title></title> <base /> <meta /> <link />
title：页面标题，显示在浏览器标题栏上的文字
base：href指定页面中所有超链接的目录，可本地，也可网络，结尾一定要用斜杠/表示
目录，只作用于相对路径文件。 target指定打开方式
meta： <meta name=”keywords” content=”电影，视频，关键字……” />
<meta http-equiv=”refresh” content=”3, url=http://www.xxx.com” />
http-equiv：模拟HTTP协议响应消息头，3秒后刷新，打开指定网页
link：给HTML关联一些文件，如CSS，JS等
<link rel=”stylesheet” href=”1.css” media=”print/screen”>
rel指定关联文件与HTML的关系 media指定文件作用的设备，多个设备斜杠分隔
XHTML是可扩展的（Extensible）超文本标记语言，可理解为HTML向XML的过渡。
XML是可扩展标记语言，是对数据信息的描述，而HTML是对数据显示的描述。XML规定更为严格，如标签不结束即错误。XML规范可被更多应用程序解释，将成为一种通用的数据交换语言，各个服务器、框架都将XML作为配置文件。
Dreamweaver创建HTML文件自动生成的头部信息中，又一个规范约束文件（.dtd），描述一些标签信息，由此文件来约束标签的自动闭合，删除这些头部信息后，DW中输入标签将不会自动闭合。前边的网址并不代表此文件要从网络获取，只表示名称空间，可自定义。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- C#将HTML导出Excel
- django模板变量直接显示html代码的问题
- HTML中的<head>标签及其内容
- 安装程序检测到 HTML 帮助数据文件已损坏，无法继续进行
- html标签正则表达式
- html中出现的script失效
- 用innerHTML暴力操作节点
- html中select标签刷新后不回到默认值而是保持之前选择值
- csdn的博客栏目html设置
- HTML页面跳转的5种方法
- html+vlc 播放多视频
- 教你pdf如何转换成html
- 网页中插入FLASH（swf文件），并且让Flash不遮挡HTML元素
- HTMLParser使用
- HTML学习02
- HTML学习 01
- document.write和innerHTML的区别
- HTML DOM addEventListener() 方法
- HTML `element` disabuse
- html制作选项卡