首页 > 代码库 > HTML 常用标签
HTML 常用标签
HTML常用标签
HTML的结构
<html>
<head></head>
<body></body>
</html>
Body标记的属性
<body 属性=“属性值”>
Background:给网页设置背景图片
bgColor:给网页设置背景颜色
文本与字体修饰标记
<b></b>或者<strong></strong> 给字体加粗
<i></i>或者<em></em> 给字体设置斜体
<u></u>或者<ins></ins> 给字体设置下划线
<s></s>或者<del></del> 给字体设置删除线
<sup></sup> 字体上标
<sub></sub> 字体下标
<font 属性=“属性值”></font> 给文本设置颜色，设置字体大小，设置字体
Color 给字体设置颜色
Size 给字体设置大小
Face 给字体设置字体
排版标记
<h1></h1>~<h6></h6> 标题标记（1大6小）
<p></p> 段落标记
属性：align 设置里面的内容水平方向对齐 取值：left(默认)/center/right
<br /> 换行标记
<hr /> 水平线标记
属性： color 设置水平线的颜色
Size 设置水平线的粗细
Width 设置水平线的宽度
Align 设置水平线的水平对齐方式
Noshade 去除阴影
列表
无序列表
<ul>
<li></li>
<li></li>
</ul>
有序列表
<ol>
<li></li>
<li></li>
</ol>
自定义列表
<dl>
<dt></dt> (标题)
<dd></dd> (内容)
</dl>
跑马灯标记
<marquee></marquee>
常见属性：
Direction:滚动的方向 取值：left(默认)/center/right
Behavior:滚动的方式 取值：scroll(滚动 默认)/slide(只滚动一次)/alternate(弹动)
Width:设置宽度
Height:设置高度
bgColor:设置背景颜色
scrollAmount:滚动的步长值（值越大速度越快）
Head标记
<title></title>:这个标记的作用是用来显示网页的标题
<meta />
n 它告诉浏览器要使用什么编码来解析当前的文档
<meta http-equiv=”Content-Type” content=”text/html;charset=字符编码”/>
n 它可以实现网页刷新
<meta http-equiv=”refresh” content=”每隔指定的时间刷新当前网页”/>
n 它可以实现网页跳转
<meta http-equiv=”refresh” content=”指定跳转时间;要跳转的网页网址”/>
n 它还可以实现SEO优化
<meta name=”keywords” content=”关键字列表”/>
<meta name=”description” content=”网页描述”/>
超级链接
<a><a/>:通过这个标记就可以实现超级链接
常见属性：
Href:要跳转的链接的URL地址
Target:目标文件的打开方式
属性值：_self 在当前窗口打开（默认）
_blank 在新窗口打开
_top 在顶窗口打开
_parent 在父窗口打开
Name: 用来实现锚点的链接
Id:用来实现锚点的链接
锚点链接
要实现锚点链接需要两步：
第一步：要定义锚点
<a name=”锚点名”></a>或者<a id=”锚点名”></a>
第二步：要找到定义的锚点链接
<a href=http://www.mamicode.com/”#锚点名”>文字或者图片 </a>
图片标记
<img />:图片标记
常见属性：
Src:引用图片的地址
Alt:当图片不存在的时候显示的文字信息
Title:当鼠标放在图片的位置时显示文字信息
Border:给图片设置边框
Width:给图片设置宽度
Height:给图片设置高度
图像热点
格式：
<img src=http://www.mamicode.com/”图片的地址” usemap=”#名称”>
<map name=”它要和img标记里面的usemap的属性值一样”>
<area shape coords=”” href=http://www.mamicode.com/”” title=”当鼠标放上图片上面时显示的文字”/>
<area />
<area />
</map>
area标记的属性：
shape：表示区域里面的形状 取值：rect(矩形)、circle(圆形)、poly(多边形)
coords：坐标值
如果形状设置为 rect(矩形)时 那么坐标值应该有4个:x1,y1,x2,y2
如果形状设置为 circle(圆形)时 那么坐标值应该有3个:x1,y1,r
如果形状设置为 poly(多边形)时 那么坐标值应该有根据多少边来决定
多媒体标记
<embed /> HTML5
常见的属性：
src：要引入的源文件地址
width：设置宽度
height：设置高度
表格
表格的格式
<table>
<tr>
<td></td>
</tr>
</table>
表格的标记
<table></table>:表示表格
<tr></tr>:表示表格中的行
<td></td>:表示表格中的单元格
<th></th>:表示表格中的标题单元格、
<caption></caption>:表示表格中的标题
Table标记的属性
<table></table>
属性：border:设置边框宽度 取值：0~n
borderColor:设置边框颜色
Width:设置表格宽度 取值：固定值或者百分比
Heigh:设置表格高度 取值：固定值或者百分比
Align:设置表格的水平对齐方式 取值:left(默认)/center/right
Background:设置表格的背景图片
bgColor:设置表格的背景颜色
Cellspacing:表格中单元格与单元格之间的距离
Cellpadding:表格中单元格里面的内容与单元格边框之间的距离
<tr></tr>
属性：background:设置行的背景图片
bgColor:设置行的背景颜色
Width:设置行的宽度
Height:设置行的高度
Align:设置行内容的水平对齐方式 取值：left(默认)/center/right
Valign:设置行内容的垂直对齐方式 取值：top(顶部对齐)/middle(默认)/bottom
<td></td>或者<th></th>
属性：width:设置单元格的宽度
Height:设置单元格的高度
Background:设置单元格的背景图片
bgColor:设置单元格的背景颜色
Rowspan:跨行合并单元格
Colspan:跨列合并单元格
标题的标记
<caption></caption> 这个是table的自标记 它是用于设置表格的标题
表格的隐藏标记
<thead></thead>:表示表格的头部
<tbody></tbody>:表示表格的主体部分 可以有多个
<tfoot></tfoot>:表示表格的尾部 它一般是用来做统计用
表单
<form>
表单的控件
</form>
Form标记的属性：
Action:表单数据的处理程序 将表单的数据交给“谁”来进行处理
Method:表单数据的提交方式 取值：get(默认)/post
Get:将所有的表单数据显示在浏览器的地址栏中
Post:它不会将表单的数据显示在浏览器的地址栏中 它是直接发送给后台
Enctype:表单数据的编码方式 一般情况下都不用写 只有在文件上传的时候才需要写
取值：application/x-www-form-urlencoded 默认就是它 不同的加密方式
Multipart/form-data 多文件的方式进行上传
表单控件
单行文本框：
<input type=”text” name=”名称” value=http://www.mamicode.com/”值” size=”设置宽度” />
单行密码框：
<input type=”password” name=”名称” value=http://www.mamicode.com/”值” size=”设置宽度” />
单选按钮：
<input type=”radio” name=”名称” value=http://www.mamicode.com/”值” checked=”checked”(默认选中) />
多选按钮：
<input type=”checkbox” name=”名称” value=http://www.mamicode.com/”值” checked=”checked”(默认选中/)>
提交按钮：
<input type=”submit” name=”名称 不建议写” value=http://www.mamicode.com/”值” / >
重置按钮：
<input type=”reset” name=”名称 不建议写” value=http://www.mamicode.com/”值”>
普通按钮：
<input type=”button” name=”名称 不建议写” value=http://www.mamicode.com/”值” >
图片按钮
<input type=”image” src=http://www.mamicode.com/”图片地址URL” />
文件上传按钮
<input type=”file” name=”名称”>
form标记里面的method=”POST” enctype=”multipart/form-data”
隐藏域：
<input type=”hidden” name=”名称” value=http://www.mamicode.com/”值”>
使用button这个双标签来实现按钮
提交按钮：
<button type=”submit”>提交</button>
重置按钮：
<button type=”reset”>重置</button>
普通按钮：
<button type=”button”>普通</button>
注意：如果button标记里面的type没有写 在form标记里面 这个按钮它具有表单的提交功能 如果在form标记的外面 它就是一个普通按钮
下拉列表：
<select>
<option>请选择以下的省份</option>
</select>
文本域：
<textarea rows=”行数” cols=”列数” name=”名称”></textarea>
框架型网页的结构
<frameset rows=”将这个框架网页设置为上下型” cols=”将这个框架网页设置为左右型”>
<frame />
<frame />
</frameset>
属性：
frameset这个标记它用来定义这个框架网页是上下还是左右型
rows=”80,*” 将窗口分割为上下型 上边的窗口占据80个像素 剩下的所有的空间都给到下窗口
rows=”80,100,*” 将窗口分割为上中下型 上边的窗口占据80个像素 中间的窗口占据100个像素 剩下的所有的空间都给到下窗口
cols=”100,*” 将窗口分割为左右型 左边的窗口占据100个像素 剩下的所有的空间都给到右窗口
cols=”100,80,*” 将窗口分割为左中右型 左边的窗口占据100个像素 中间的窗口占据80个像素 剩下的所有的空间都给到右窗口
Border:用来设置框架网页的边框的粗细
bordeColor:用来设置框架网页的边框颜色
frame这个标记表示小窗口 这个框架网页里面有多少个小窗口 就要有多少个frame这个标记
Src:它可以引入外部的html网页或者是其他的网站都可以
Name:设置小窗口的名称 这个属性非常重要
HTML 常用标签