【前端HTML 】常⽤标签及属性
路径r
相对路径
绝对路径
标签
ⅡⅢⅢⅡ
<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跨度(容器标签
(⾏内))
标签分类标签名英⽂英⽂含义标签类型备注属性
属性名英⽂英⽂含义取值应⽤场景备注
src SouRCe资源位置资源的路径border border边框数字(像素) size size尺⼨数字(像素) width width宽度数字(像素) height height⾼度数字(像素)
bgcolor BackGround
COLOR背景颜⾊颜⾊值：red或#ffffff
background background背景图⽚图⽚路径
list-style list-style设置列表的所有属性列表
list-style-image list-style-image将图像设置为列表项标记None
url列表
list-style-type list-style-type设置列表项标记的类型Disc(实⼼圆)
Cirle(空⼼圆)
Square(实⼼⽅块)
列表
line-height line-height⾏⾼(⾏间距)数字(像素)布局多⾏⽂本
text-align text-align对齐⽅式Left、right、center各种元素对齐letter-spacing letter-spacing字符间距数字(像素)加⼤字符间间隔text-decoration text-decoration⽂本修饰Underline、none加下划线、中划线等margin-top
(right、
bottom、left)
margin外边距数字(像素)
padding-top
(right、bottom、left)padding内边距数字(像素)
Ⅱ
bottom 、left)
display
display
改变块级元素与⾏内元素的默认显⽰⽅式
block(⾏变块)inline(块变⾏)
none(该元素不显⽰在⽹页中)position position 定位static(静态定位)relative(相对定位)absolute(绝对定位)fixed(固定定位)⽤于定位
float float 浮动
None 、left 、right clear
clear
处理浮动塌陷
left(清除左边浮动)right(清除右边浮动)both(清除两边浮动)none(不清除浮动)type type 列表类型Disc(实⼼圆)Cirle(空⼼圆)
Square(实⼼⽅块)⽤于列表align
align
对齐
Left 、right 、center top 、middle 、bottom 段落内容⽔平对齐⽂字与图⽚垂直对齐
type type 表单元素类型
text(⽂本)
checkbox(复选)radio(单选)
password(密码)file(⽂件)submit(提交)reset(重置)button(按钮)image(图⽚按钮)hidden(隐藏)表单元素
method method 表单数据的提交⽅式
get post
alt alter 改变、替换(图⽚不显⽰时提⽰信息)图⽚
cellpadding cell padding 单元格内边距数字表格cellspacing cell spacing 单元格之间距离
数字
表格href Hypertext REFerence 超⽂本引⽤(跳转到⽂件位置)
rel
RELationship
关系(⽤于定义链接的⽂件和HTML ⽂档之间的关系)
StyleSheet 样式表
link 链接⼀个⽂件时
target target ⽬标(⽹页打开的位置)
_blank(新窗⼝打开)_self(⾃⾝窗⼝打开)
_top(以整个浏览器作业作为窗⼝显⽰新页⾯)
_parent(在⽗窗⼝中打开新的页⾯)colspan COLumn span 单元格跨列数字(跨的列数)表格rowspan row span 单元格跨⾏数字(跨的⾏数)
表格
readonly read only 只读
value value 输⼊框的初始值maxlength max length 最⼤长度scrolldelay scroll delay 滚动延时<m arquee>direction
direction
⽅向(滚动⽅向)
<m arquee
属性名英⽂英⽂含义
取值应⽤场景
备注
块级标签
<div>、<h1>~<h6>、<p>、<hr>、<ul>、<li>、<ol>、<dl>、<dt>、<dd>、<table>
⾏级标签
<a>、<font>、<img>、<input>、<select>、<textarea>、<label>、<span>
html href属性
ⅡⅡ
选择器
简单选择器
属性选择器
复合选择器
关系选择器
伪类选择器
ⅡⅢⅢⅢⅢⅢ
伪类：（不存在的类，特殊的类）⼀般是使⽤：开头，⽤来描述⼀个标签元素的特殊状态（很像是类）。
⽐如，第⼀个元素，被点击的元素，⿏标移⼊的元素个⼈感觉就是选择标签的不同状态
格式
选择器类别备注
标签名：伪类名{}
伪类选择器
ul > li:first-child{} 表⽰ul 标签的第⼀个孩⼦li ⼦标签
li:nth-child(1)代表第⼀个孩⼦li 标签li:nth-of-type(1)代表第⼀个li 标签
伪元素选择器
伪元素：⼀般使⽤:：开头，表⽰页⾯中⼀些特殊状态（如 位置）的并不真实存在的元素个⼈感觉就是选择标签内部部分的不同状态，⽐如标签内的第⼀个字母。
格式
选择器类别
备注
标签名：伪元素名{}
伪元素选择器
p::first-letter{}表⽰p 标签⾥⾯的第⼀个字母
助记：看到这⾥，我想你已经明⽩为什么类选择器是⽤.了。因为使⽤交集选择器时，我们使⽤d 这种标签.类属性值的结构，很有条理性。⽐如说，⼈.攻击⼒
超链接伪类
伪类英⽂英⽂含义
⽰例
含义
应⽤场景
a:link link 链接a:link{color:#999}未单击访问时的超链接样式常⽤，超链接主样式a:visited visited 访问过的a:visited{color:#999}单击访问后的超链接样式区分是否已被访问a:hover hover 悬停
a:hover{color:#999}⿏标悬浮在超链接上的样式常⽤，实现动态效果a:active
active
起作⽤的、有效的、积极的
a:active{color:#999}
⿏标单击未释放的超链接样式
少⽤，通常与link ⼀致
to be continued(未完待续)...
ⅢⅡ

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。