HTML常用标签及属性

发布时间:2020-10-27 10:02:05.84编辑:佚名阅读(124)

标签

标签分类标签名英文英文含义标签类型备注
HTML页面结构<html>HyperText Markup Language超文本标记语言


<head>head头部


<title>title网页标题


<body>body主体

常用标签<h1>~<h6>head1~6子标题块标签

<p>Paragraph段落块标签

<font>fort字体


<a>Anchor锚(超链接)


<img>image图像空标签

<br>Barter Rabbet换行空标签

<hr>Horizontal Rule水平线空标签、块标签

<marquee>marquee选取框(文字滚动)

格式化标签<b>bold粗体


<big>big大号字


<em>EMphasize着重


<i>Italic斜体


<small>small小号字


<strong>strong加重语气


<sub>SUBscript下标


<sup>SUPerscript上标


<u>Underline下划线

列表标签<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>caption标题


<thead>Table head表头部分


<tbody>Table body主体部分


<tfoot>Table foot底部业脚部分

表单相关<form>form表单


<input>input表单元素
(输入框)
空标签

<select>select选择(下拉框)


<option>option选项(下拉列表项)


<textarea>text area文本域

框架相关<frameset>frame set框架集


<frame>frame框架空标签

<iframe>iframe内嵌框架

容器<div>division分隔(容器标签
(块))



<span>span跨度(容器标签
(行内))


属性

属性名英文英文含义取值应用场景备注
srcSouRCe资源位置资源的路径

borderborder边框数字(像素)

sizesize尺寸数字(像素)

widthwidth宽度数字(像素)

heightheight高度数字(像素)

bgcolorBackGround COLOR背景颜色颜色值:rea或#ffffff

backgroundbackground背景图片图片路径

list-stylelist-style设置列表的所有属性
列表
list-style-imagelist-style-image将图像设置为列表项标记None
url
列表
list-style-typelist-style-type设置列表项标记的类型Disc(实心圆)
Cirle(空心圆)
Square(实心方块)
列表
line-heightline-height行高(行间距)数字(像素)布局多行文本
text-aligntext-align对齐方式Left、right、center各种元素对齐
letter-spacingletter-spacing字符间距数字(像素)加大字符间间隔
text-decorationtext-decoration文本修饰Underline、none加下划线、中划线等
margin-top
(right、bottom、left)
margin外边距数字(像素)

padding-top
(right、bottom、left)
padding内边距数字(像素)

displaydisplay改变块级元素与行内元素的默认显示方式block(行变块)
inline(块变行)
none(该元素不显示在网页中)


positionposition定位static(静态定位)
relative(相对定位)
absolute(绝对定位)
fixed(固定定位)
用于定位
floatfloat浮动None、left、right

clearclear处理浮动塌陷left(清除左边浮动)
right(清除右边浮动)
both(清除两边浮动)
none(不清除浮动)


typetype列表类型Disc(实心圆)
Cirle(空心圆)
Square(实心方块)
用于列表
alignalign对齐Left、right、center
top、middle、bottom
段落内容水平对齐文字与图片垂直对齐
typetype表单元素类型text(文本)
checkbox(复选)
radio(单选)
password(密码)
file(文件)
submit(提交)
reset(重置)
button(按钮)
image(图片按钮)
hidden(隐藏)
表单元素
methodmethod表单数据的提交方式get
post


altalter改变、替换(图片不显示时提示信息)
图片
cellpaddingcell padding单元格内边距数字表格
cellspacingcell spacing单元格之间距离数字表格
hrefHypertext REFerence超文本引用(跳转到文件位置)


relRELationship关系(用于定义链接的文件和HTML文档之间的关系)StyleSheet样式表link链接一个文件时
targettarget目标(网页打开的位置)_blank(新窗口打开)
_self(自身窗口打开)
_top(以整个浏览器作业作为窗口显示新页面)
_parent(在父窗口中打开新的页面)


colspanCOLumn span单元格跨列数字(跨的列数)表格
rowspanrow span单元格跨行数字(跨的行数)表格
readonlyread only只读


valuevalue输入框的初始值


maxlengthmax length最大长度


scrolldelayscroll delay滚动延时
<m arquee>
directiondirection方向(滚动方向)
<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:linklink链接a:link{color:#999}未单击访问时的超链接样式常用,超链接主样式
a:visitedvisited访问a:visited{color:#999}单击访问后的超链接样式区分是否已被访问
a:hoverhover悬停a:hover{color:#999}鼠标悬浮在超链接上的样式常用,实现动态效果
a:activeactive起作用的、有效的、积极的a:active{color:#999}鼠标单击未释放的超链接样式少用,通常与link一致

  关键字:HTML标签属性


鼓掌

0

正能量

0

0

呵呵

0


评论区