<a> 标签
用法：用于定义超链接
清除浏览器默认样式：
a { ???text-decoration: none;/* 去除下划线 */ ???color: #333;/* 改变链接颜色 */}常用属性：“href” 定义超链接的 URL
“target” 规定在何处打开文档
注意事项：<a> 标签属于内联元素，原则上不能包含块级元素，对于链接块，最好先设置 <a> 标签的样式为 { display: block; } 或者 { display: inline-block; }
<a> 标签还可以搭配锚伪类使用，例如：
a:link { color: #333; }/* 未访问的链接 */a:visited { color: #ff6600; }/* 已访问的链接 */a:hover { color: #ff00ff; }/* 鼠标悬浮在链接上 */a:active { color: #0000ff; }/* 当前选中的链接 */<img> 标签
用法：用于定义图片
清除浏览器默认样式：<img> 标签在浏览器中相当于内联块元素，其 "vertical-align" 值默认是 "baseline"，也就是基线对齐，因此图片也像文本一样，底部具有几个像素的空白节点，防止与边缘重叠。去除空白节点的方法如下：
img { display: block; }/* vertical-align 对块级元素不生效 */img { vertical-align: top; }/* 改变vertical-align 的默认值 *///html<div class="test"> ???<img src="images/test.jpg" ?/></div>//css.test { line-height: 0; }/* 在父容器设置行高为0 */.test { font-size: 0; }/* 通过 font-size 间接设置行高为0 */常用属性：“src” 定义显示图片的 URL
“alt” 定义图片的替换文本
注意事项：对于有潜在用户下载需求的图片用 <img> 标签，否则使用 CSS sprite （雪碧图） 技术将多张小图或图标合成一张大图，减少http请求次数
重复利用图片，大多数浏览器会对文档进行缓存，重复用到的图片会直接从缓存中读取
对图片进行压缩
使用懒加载
使用缩略图
<p> 标签
用法：用于定义段落
清除浏览器默认样式：
p { margin: 0; }常用属性：-
注意事项： <p> 标签虽然是块级元素，但是它只能包含内联元素，不能包含块级元素，也不能包含另一个<p> 标签
<ul> <ol> <dl> <li> 标签
用法：用于定义无序，有序，定义列表
清除浏览器默认样式：
ul,ol,dl,dd { margin: 0; }ul,ol { padding: 0; }ul,ol { list-style: none; }常用属性：-
注意事项：-
<input> 标签
用法：用于用户输入
清除浏览器默认样式：
input[type=‘text‘],input[type=‘button‘] { ???padding: 0; ???border: none; ???outline: none; ???font: 14px/24px ‘Microsoft YaHei‘; ???color: #333;}//重置提示信息样式input::-webkit-input-placeholder { font: 14px/24px ‘Microsoft YaHei‘;color:#999; }input:-moz-placeholder { font: 14px/24px ‘Microsoft YaHei‘;color:#999; } input::-moz-placeholder { font: 14px/24px ‘Microsoft YaHei‘;color:#999; } input:-ms-input-placeholder { font: 14px/24px ‘Microsoft YaHei‘;color:#999; }常用属性：“type” 规定 <input> 元素的类型
“value” 规定 <input> 元素的值
注意事项：<input> 标签自带的字体样式优先级高于继承来的样式，所以一般都要重新设置它的 font 字体，避免在不同浏览器下表现不一样
<input> 和 <img> 标签一样，相当于内联块元素，可以设置宽高
<textarea> 标签
用法：定义一个文本域
清除浏览器默认样式：
textarea { ???padding: 0; ???border: none; ???outline: none; ???overflow:auto; ???resize:none;/* 防止被用户拉伸 */ ???font: 14px/24px ‘Microsoft YaHei‘; ???color: #333;}textarea::-webkit-input-placeholder { font: 14px/24px ‘Microsoft YaHei‘;color: #999; }textarea::-moz-placeholder { ?font: 14px/24px ‘Microsoft YaHei‘;color: #999; }textarea::-moz-placeholder { ?font: 14px/24px ‘Microsoft YaHei‘;color: #999; }textarea:-ms-input-placeholder { font: 14px/24px ‘Microsoft YaHei‘;color: #999; }常用属性：-
注意事项：同 <input>
<select> 标签
用法：用于下拉列表
清除浏览器默认样式：
select { ???border: none; ???outline: none; ???-webkit-appearance: none;/* 去除默认箭头 */ ???-moz-appearance: none; ???appearance: none;}常用属性：-
注意事项：<select> 标签默认显示第一个 <option> 中的值，如何让 <select> 显示提示信息，又不在 <option> 列表中显示出来
//html<select> ???<option value="">请选择</option> ???<option value="1">1</option> ???<option value="2">2</option> ???<option value="3">3</option> ???<option value="4">4</option></select>//cssselect option:first-child { display: none; }<table> 标签
用法：用于定义表格
清除浏览器默认样式：
table { border-collapse: collapse; }/* 折叠边框 */常用属性：-
注意事项：合并单元格，使用 <td> 标签的 “colspan” 属性合并列，使用 “rowspan” 合并行
常用的 html 标签及注意事项
原文地址：https://www.cnblogs.com/blog-cxj2017522/p/8707564.html