常用Html标签表
html
定义html文档
body
定义文档体body
head
定义文档头信息
title
定义文档的标题title
a
html链接标签
img html图像标签img
div
html层div
table
定义html表格table
tr
定义表格行
td
定义表格列
form
html表单标签
input
定义表单的输入域input
hr 水平分割线
br 换行
font 字体
h1~h6 标题
标签可以有属性，它包含了额外的信息，属性的值一定要在双引号中。（属性由属性名和值成对出现。）
语法格式
<标签名 属性名1="属性值" 属性名2="属性值" ... ">…..</标签名>
注：标签由<>来表现，因此<>属于
特殊符号，需要进行转译后才能使用。
< 代表 < > 代表 >
除此之外，还有一些特殊符号需要进行转译后才能使用，如下：
代表 空格
& 代表
符号&
" 代表
双引号"
© 代表
版权符号©
® 代表
注册商标符号®
× 代表
乘号x
÷ 代表
除号÷
1.列表标签——dl，ol，ul
列表标签：dl·
上层项目：dt
下层项目：dd ——
封装的内容是会被缩进的。有自动缩进的效果。
有序：ol
无序：ul
无论有序和无序，条目的封装用的都是<li>，而且它们都有缩进效果。
无序列表<ul>
基本语法：
<ul>
<li> 项目1</li>
<li> 项目2</li>
<li> 项目3</li>
</ul>
无序列表type属性的三个数值：
disc：实心圆（默认） circle：空心圆 square：小方块
有序列表<ol>
基本语法：
<ol>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ol>
有序列表的属性
:<type>、
<start>
基本语法：
<ol type=value1 start=value2>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ol>
value1表示有序列表项目符号的类型（如数字、大小写字母、大小写罗马数字）,
value2表示项目开始的数值。
（注意有序列表的结果是带有前后顺序之分的编号,如果插入和删除一个列表项，
编号会自动调整。）
start是编号开始的数字
，属性值只能是数字；
如start=2则编号从2开始，如果从1开始可以省略，
或是在<li>标签中设定value＝"n"改变列表行项目的特定编号，例如<li value="7">。
type=用于编号的数字,字母等的类型
，如type=a，则编号用英文字母。
使用这些属性，把它们放在<ol>或<li>的的初始标签中。
2.插入图片——img
网页中常用的图片格式有：jpg、gif、png等。
HTML中插入图片使用<img>标签
基本语法：
<img src=“图片路径” width=宽度 height=高度>
语法解释：宽度和高度的单位都是像素，<img>是插入图片的HTML标签，src 是描述图片路径的属性,它的值表示图片的路径。
<img>标签除了src属性外还包括的属性有:
alt： 设定图像的提示文字属性
(alt属性是指鼠标放在网页的图片上弹出一行提示性的文字)
border：设定图片的边框
align： 设定图像的排列属性
width、height：设定图像的宽度和高度
vspace：设定图像的垂直间距
hspace：设定图像的水平间距
lowsrc：设定分辩率比较低的图片
3.创建表格——table
所有的表格都包括3个基本标签，即表格标签<table>...</table>、行标签<tr>...</tr>和单元格标签<td>...</td>。可以说，在页面中如果要创建一个完整的表格，至少要包含这3对标签。
创建表格的基本语法：
<table border=1 bordercolor="#000000" cellpadding=10 cellspacing=0 width=500>
<tbody> ------表格的下一级标签tbody，不定义也存在。
<caption>表格标题</caption>
<tr>
<td>
-----<th>
单元格内容
换成th单元格内容则会居中
</td>
-----<th>
</tr>
<tbody>
</table>
(1)表格是可以分体的：
<thead></thead>表格头
<tbody></tbody>表格体
<tfoot></tfoot>表格尾
(2)表格也可跨行跨列
跨多行的表格 例：<td rowspan="n">...</td>
跨多列的表格 例：<td colspan="n">...</td>
(3)表格的美化修饰：
边框（的厚度）：border （表格的背景）颜色：bordercolor 文字居中：align
(4)填充属性和间距属性
cellpadding：单元格填充（单元格内部数据与单元格的间距）
cellspacing：单元格间距（单元格与单元格之间的间距）
4.文章标题——h1~h6 <!-- title标签 是定义文档标题 -->
H标签在<body>体内， title是头部标签，在<head>体内。
h标签有6种：<h1> - <h6> ,字体从大到小。
注：默认状态下，h标签是由
字体加粗的。
5.段落标记——p
浏览器解析HTML文档会忽略空白符，因此要正常的分段换行就要用到标签<p>。
<p>标签式段落标记,浏览器会自动地在段落的前后添加空行。
<p></p> 和 <br/> 的区别：
使用<p></p>标签换行
上下文有间距
(
浏览器会自动地在段落的前后添加空行
),而<br>标签换行是软换行,上下文没有间距.
6.水平线标记——hr
<hr />标签在HTML页面中创建水平线，hr元素可用于分隔内容。它的属性有：
width（水平线的宽度标记）
size（水平线的高度）
color（水平线的颜色）
noshade（水平线去掉阴影属性标记）
align（
水平线对齐属性）
7.超链接——a
6.水平线标记——hr
<hr />标签在HTML页面中创建水平线，hr元素可用于分隔内容。它的属性有：
width（水平线的宽度标记）
size（水平线的高度）
color（水平线的颜色）
noshade（水平线去掉阴影属性标记）
align（
水平线对齐属性）
7.超链接——a
特点：上下有一个外边距，都为8px。
作用：链接资源
当有了href属性才有了点击效果。
href属性的值的不同，解析的方式也不一样。
如果在该值中没有指定过任何协议。
解析时，是按照默认的协议来解析该值的。默认协议是file协议。
如何取消超链接的默认效果？
<a href="javascript:void(0)" οnclick="alert('我弹')">这是一个超链接</a>
定位标记
专业术语：锚
<a name="超链接名字">我在网页顶部</a>
<a href="#超链接名字">点我即可回到网页顶部</a>
（1）图片的超链接
图片的超链接就是在图片上建立链接。和文字的链接相同，就是点击过链接的图片或文字后就会跳到对应的目标地址上。
图片的超链接与文字相同都是<a>标记。
基本语法：
<a href=”目标地址”><img src=”图片路径” /> </a>
a标签的属性包括：
href: 链接地址
target： 指定链接的目标窗口
name : 给链接命名(title属性和alt的用法相似)
title： 给链接提示文字
accesskey：链接热键
设定链接的目标窗口（target属性）
基本语法：
<a href =”文件名” target =”属性值”> 链接文字</a>
target属性用来定义被链接的文档在何处显示(在新的出口打开,还是在原有的窗口打开).默认的被链接文档是在原有的窗口中打开的。如果将target属性设为"_blank"文档就会在新窗口打开.
target属性的值及含义：
_parent ：在上一级窗口中打开。
_blank： 在新窗口中打开。(最常用)
_self： 在同一窗口中打开。（默认）
_top ： 在浏览器的整个窗口中打开，忽略任何框架。
（2）书签链接(name属性)
1. 建立
书签
基本语法：
<a name=”书签名” >文字</a>
2.建立指向该
锚的链接
基本语法：
<a href=“#书签名”>文字</a>
3.链接到其他页面中的书签
基本语法：
<a href=“文件名#书签名”>文字</a>
4.下载文件
基本语法：
<a href=” file_url”>链接文字</a>
”file_url”表示文件所在的路径。
（3）空链接
空链接：指指向链接后，鼠标变成手形，但单击后仍停留在当前页面。这个主要是网页前端开发布局时，临时加的空链接，主要为了能更好的看到最终的效果。
基本语法：
<a href=“ # ”>链接文字</a>
其中“ # ”表示空链接。
链接文字的颜色属性
link： 设定链接文字默认的颜色
alink：设定激活链接时文字的颜色
vlink：设定访问过的链接文字的颜色
基本语法：
< body link =”颜色的值” alink =”color_value” vlink=”color_value” >
8.表单标签——form
表单标签是最常用的标签，用于与服务器端的交互。
<input>:输入标签，接收用户输入信息。
其中的type属性指定输入标签的类型。
若想要给服务器端提交数据，表单中的组件必须要有name和value这两个属性，用于给服务端获取数据方便，否则服务器端将无法识别解析表单数据。
（1）表单标签<form>……</form>
语法：<form name="form_name" action="url" method="get|post">…</form>
placeHolder:请填写你的姓名
Name ：定义表单的名称
Method: 定义表单结果从浏览器传送到服务器的方式，默认参数为：get ；
Action ：用来指定表单处理程序的位置(服务器端脚本处理程序）
get提交和post提交的区别：
1)get提交，提交的信息都显示在地址栏中；
post提交，提交的信息不显示在地址栏中。
2)get提交，对于敏感的数据信息不安全；
post提交，对于敏感信息安全。
3)get提交，对于大数据不行，因为地址栏存储体积有限；
post提交，可以提交大体积数据。
4)get提交，将信息封装到了请求消息的请求行中；
post提交，将信息封装到了请求体中。
（2）文本框（text）
是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。
代码格式：
＜input type=“text” name=“...” size=“...” maxlength=“...” value=“...”＞
type=“text” 定义单行 文本输入框；
name 属性定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
size 属性定义文本框的宽度，单位是单个字符宽度；
maxlength 属性定义最多输入的字符数。
value 属性定义文本框的初始值
（3）密码框（password）
密码框是一种特殊的文本框，它的不同之处是当输入内容时，均以*表示，以保证密码的安全性。
代码格式：
<input type=“password” name=“...” size=“...” maxlength=“...” >
（4） 按钮类型：普通按钮、提交按钮、重置按钮。
1)普通按钮（button）
----很常用，可以自定义点击事件。 当type 的类型为button 时，表示该输入项输入的是普通按钮。
语法格式： <input type="button" value="…" name="..." onclick="alert('提示语')" />
Value: 表示显示在按钮上面的文字。 普通按钮经常和脚本一起使用。
2)提交按钮（submit）
通过提交(input type=submit)可以将表单(Form)里的信息提交给表单里action所指向的文件。
示例： <input type="submit" value="提交" />
3)重置按钮（reset）
当type的类型为reset时，表示该输入项输入的是重置按钮，单击按钮后，浏览器可以清除表单中的输入信息 而恢复到默认的表单内容设定。
语法格式：
<input type="reset" value="..." name="..." />
4)图片按钮（image） -----具有提交效果的图片按钮
语法格式：
<input type="image" src="图片url" />
（5）单选框和复选框
单选框（radio）
格式：<input type=“radio”name=“组名” value=“...” checked=“checked” />
给单选框起名name即给单选框分组，要想多个单选框一次只能选中一个，必须将这些单选框分在同一组里面，即name 的值必须相同。
Checked: 表示此项默认选中 --标记属性，属性名与属性值相同。
Value :表示选中后传送到服务器端的值。
Name: 表示单选框的名称，如果是一组单选项，name 属性的值相同有互斥效果。
复选框（checkbox）
语法格式：
<input type="checkbox" name=“组名” value=“…” checked=“checked”（） />
Checked: 表示此项默认选中Value 表示选中后传送到服务器端的值。
Name: 表示复选框的名称，如果是一组单选项，name 属性的值相同亦不会有互斥效果。
（6） 文件输入框（file）
当type=“file”时，表示该输入项是一个文件输入框，用户可以在文件输入框的内部填写自己硬盘中的文件路径，然后通过表单上传。
语法格式：
<input type=“file” name=“…” />
隐藏组件(hidden)：数据不需要客户端知道，但是可以将其提交服务端。
<input type="hidden" name="...." value="...." />
（7）下拉框 (Select)
既可以用做单选，也可以用做复选。
selected:和checked一样，都表示此项默认选中。 --标记属性，属性名与属性值相同。
如果要变成复选，加multiple即可 。用户用Ctrl来实现多选。
<select name="fruit" multiple>，用户还可以用size 属性来改变下拉框的大小。
（8）多行输入框(textarea)
多行输入框(textarea)主要用于输入较长的文本信息。
例句如下<textarea name="yoursuggest" cols ="50" rows = "3"></textarea>
其中cols 表示textarea 的宽度，rows 表示textarea 的高度。
扫一扫
831
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
