当前位置：首页 > news >正文

HTML之常用标签及属性

news 来源：原创 2024/5/19 12:29:16

标签分类	标签名	英文	英文含义	标签类型
HTML页面结构	< html>
	< head>		头部
	< title>		网页标题
	< body>		主体
常用标签	< h1>~< h6>		子标题	块标签
	< p>		段落	块标签
	< font>		字体
	< a>		超链接
	< img>	image	图像	空标签
	< br>		换行	空标签
	< hr>		水平线	空标签、块标签
	< marquee>		滚动
格式化标签	< b>		粗体
	< big>		大号字
	< em>		着重
	< i>		斜体
	< small>		小号字
	< strong>		加重语气
	< sub>		下标
	< sup>	supper	上标
	< u>		下划线
列表标签	< ul>	Unorder List	无序列表	块标签
	< ol>	Order List	有序列表	块标签
	< li>	LIst	列表项目	块标签
	< dl>	Define List	定义列表	块标签
	< dt>	Define Title	定义标题	块标签
	< dd>	Define Describtion	定义描述	块标签
表格相关	< table>		表格	块标签
	< tr>	Table Row	表行	块标签
	< td>	Table Data cell	单元格
	< th>	Table Head	表头
	< caption>		标题
	< thead>		表头部分
	< tbody>		主体部分
	< tfoot>		底部业脚部分
表单相关	< form>		表单
	< input>		表单元素 (输入框)	空标签
	< select>		下拉框
	< option>		下拉列表项
	< textarea>		文本域
框架相关	< frameset>		框架集
	< frame>		框架	空标签
	< iframe>		内嵌框架
容器	< div>		容器标签 (块)
	< span>		容器标签 (行内)

属性

属性名	英文	英文含义	取值	应用场景
src	SouRCe	资源位置	资源的路径
border		边框	数字(像素)
size		尺寸	数字(像素)
width		宽度	数字(像素)
height		高度	数字(像素)
bgcolor	BackGround COLOR	背景颜色	颜色值：rea或#ffffff
background		背景图片	图片路径
list-style		设置列表的所有属性		列表
list-style-image		将图像设置为列表项标记	None url	列表
list-style-type		设置列表项标记的类型	Disc(实心圆) Cirle(空心圆) Square(实心方块)	列表
line-height		行高(行间距)	数字(像素)	布局多行文本
text-align		对齐方式	Left、right、center	各种元素对齐
letter-spacing		字符间距	数字(像素)	加大字符间间隔
text-decoration		文本修饰	Underline、none	加下划线、中划线等
margin-top (right、bottom、left)		外边距	数字(像素)
padding-top (right、bottom、left)		内边距	数字(像素)
display		改变块级元素与行内元素的默认显示方式	block(行变块) inline(块变行) none(该元素不显示在网页中)
position		定位	static(静态定位) relative(相对定位) absolute(绝对定位) fixed(固定定位)	用于定位
float		浮动	None、left、right
clear		处理浮动塌陷	left(清除左边浮动) right(清除右边浮动) both(清除两边浮动) none(不清除浮动)
type		列表类型	Disc(实心圆) Cirle(空心圆) Square(实心方块)	用于列表
align		对齐	Left、right、center top、middle、bottom	段落内容水平对齐文字与图片垂直对齐
type		表单元素类型	text(文本) checkbox(复选) radio(单选) password(密码) file(文件) submit(提交) reset(重置) button(按钮) image(图片按钮) hidden(隐藏)	表单元素
method		表单数据的提交方式	get post
alt		图片不显示时提示信息		图片
cellpadding		单元格内边距	数字	表格
cellspacing		单元格之间距离	数字	表格
href		跳转到文件位置
target		网页打开的位置	_blank(新窗口打开) _self(自身窗口打开) _top(以整个浏览器作业作为窗口显示新页面) _parent(在父窗口中打开新的页面)
colspan		单元格跨列	数字(跨的列数)	表格
rowspan		单元格跨行	数字(跨的行数)	表格
readonly		只读
value		输入框的初始值
maxlength		最大长度
scrolldelay		滚动延时		< m arquee>
direction		滚动方向		< m arquee

块级标签与行级标签

块级标签	行级标签
< div>、< h1>~< h6>、< p>、< hr>、 < ul>、< li>、< ol>、< dl>、< dt>、 < dd>、< table>	< a>、< font>、< img>、< input>、< select>、< textarea>、< label>、< span>

选择器

格式	选择器类别	备注
标签名{}	标签选择器
.类名{}	类选择器
#ID标识名	ID选择器
p.red	交集选择器	第一个必须是标签选择器，第二个必须是类选择器或ID选择器
P,.red,#header	并集选择器
#header ul li a	后代选择器
标签名:伪类名	特殊选择器

超链接伪类

伪类	示例	含义	应用场景
a:link	a:link{color:#999}	未单击访问时的超链接样式	常用，超链接主样式
a:visited	a:visited{color:#999}	单击访问后的超链接样式	区分是否已被访问
a:hover	a:hover{color:#999}	鼠标悬浮在超链接上的样式	常用，实现动态效果
a:active	a:active{color:#999}	鼠标单击未释放的超链接样式	少用，通常与link一致