对于很多人来说，用HTML标签都是熟能生巧，而不清楚为什么是那样的标签，所以我在这列了一个表，翻译了其对应的英文。

HTML

路径

相对路径

相对路径是指目标相对于当前文件的路径，网页结构设计中多采用这种方法来表示目标的路径。相对路径有多种表示方法，其表示的意义不尽相同。表示方法如下：
./：代表文件所在的目录（可以省略不写），一般相对前边有这么一个./表示“当前目录”，但是可以省略不写。如 page/index和./page/index是一样的效果。
../：代表文件所在的父级目录
../../：代表文件所在的父级目录的父级目录
/：代表文件所在的根目录
值得注意的是，（/ ：代表文件所在的根目录）其实可以理解成项目内部的绝对路径。

绝对路径

绝对路径是指完整的网址，假设图一中项目的网站域名为www.test.com，那么000.css的绝对路径应该是
https://www.test.com/HelloHBuilder/html/css/css1/000.css。

标签分类	标签名	英文	英文含义	标签类型
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	跨度(容器标签 (行内))

属性

属性名	英文	英文含义	取值	应用场景
src	SouRCe	资源位置	资源的路径
border	border	边框	数字(像素)
size	size	尺寸	数字(像素)
width	width	宽度	数字(像素)
height	height	高度	数字(像素)
bgcolor	BackGround COLOR	背景颜色	颜色值：rea或#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	内边距	数字(像素)
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

块级标签

行级标签

CSS

选择器

其实选择器也没必要记得太清楚，如果不会的话，直接在浏览器F12，打开开发人员工具，选中你想要选择的元素，右键复制其选择器即可。

这里给大家推荐一个CSS选择器的在线练习网站，是一个游戏噢！
选择器练习：
https://github.com/flukeout/css-diner
https://flukeout.github.io/

布局练习：

gird布局：https://github.com/thomaspark/gridgarden
https://cssgridgarden.com/
flex布局：https://github.com/thomaspark/flexboxfroggy
https://flexboxfroggy.com/

简单选择器

格式	选择器类别	备注
标签名{}	标签选择器	根据标签名来选中指定的元素
.类名{}	类选择器	根据元素的class属性值来选中一组元素
#ID标识名{}	ID选择器	根据元素的ID属性值来选中一个元素（ID唯一）
*{}	通配选择器	选中页面中的所有元素

属性选择器

格式	选择器类别	备注
[属性名]	属性选择器	选择含有指定属性的元素
[属性名=属性值]	属性选择器	选择含有指定属性和属性值的元素
[属性名^=属性值]	属性选择器	选择属性值以指定值开头的元素
[属性名$=属性值]	属性选择器	选择属性值以指定值结尾的元素
[属性名*=属性值]	属性选择器	选择属性值中含有指定值的元素

复合选择器

格式	选择器类别	备注
选择器1选择器2...{}	交集选择器	选中同时符合多个选择器条件的元素如果有标签选择器，第一个必须是标签选择器开头(不然就混在一起没法区分了)，第二个可以是类选择器或ID选择器(ID选择器已经唯一选中了，没必要) p.red{}即选中p标签class为red的所有元素
选择器1,选择器2,...{}	并集选择器	同时选中多个选择器对应的元素

关系选择器

格式	选择器类别	备注
父 > 子{}	子元素选择器	选中父元素的指定子元素
祖先后代{}	后代选择器	选中指定元素内的指定后代元素
兄 + 弟	直接弟弟选择器	选中下一个弟弟（仅仅是下一个）
兄 ~ 弟	弟弟选择器	选中下面所有的弟弟

伪类选择器

伪类：（不存在的类，特殊的类）一般是使用:开头，用来描述一个标签元素的特殊状态（很像是类）。

比如，第一个元素，被点击的元素，鼠标移入的元素

个人感觉就是选择标签的不同状态

格式	选择器类别	备注
标签名:伪类名{}	伪类选择器	ul > li:first-child{} 表示ul标签的第一个孩子li子标签

li:nth-child(1)代表第一个孩子li标签
li:nth-of-type(1)代表第一个li标签

伪元素选择器

伪元素：一般使用::开头，表示页面中一些特殊状态（如位置）的并不真实存在的元素

个人感觉就是选择标签内部部分的不同状态，比如标签内的第一个字母。

格式	选择器类别	备注
标签名:伪元素名{}	伪元素选择器	p::first-letter{}表示p标签里面的第一个字母

助记：看到这里，我想你已经明白为什么类选择器是用.了。因为使用交集选择器时，我们使用div.red这种标签.类属性值的结构，很有条理性。
比如说，人.攻击力

超链接伪类

伪类	英文	英文含义	示例	含义	应用场景
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(未完待续)...

【前端HTML】常用标签及属性