html冲刺

Posted 2021-11-24 tanqurey

html知识点回顾与面试题
<!--
1、<DOCTYPE>告诉浏览器当前文档要以何种HTML或者XHTML规范解析
2、语义标签
strong 粗体
em 斜体
del 删除线
ins 下划线

3、阻止a标签默认跳转
1)原生js：<a href="..." onclick="return false"></a>
2)jquery/原生js:$(‘a‘).each((e)=>{
e.preventDefault()
})

获取鼠标事件对象：在IE/Opera中，是window.event，而在Firefox中，是event。chrome两种都支持

4、em/rem的区别
1)rem是基于html根节点的字体大小来决定
2)em则根据使用它的元素的大小决定（很多人错误以为是根据父类元素，实际上是使用它的元素继承了父类的属性才会产生的错觉）

5、对齐与居中
1)line-height属性用于设置行间的距离（行高）
单行文字的垂直居中对齐，将line-height属性设置为所需要的行框高度，即line-height=height
若是多行文字，上述设置文本方法失效，设置父容器上下padding一致即可
2)text-align用于设置盒子内部文本内容水平对齐方式
3)水平垂直居中方法1：-->
#out {
display: table-cell;
text-align: center;
vertical-align: middle;
border:1px solid green;
}

#inner {
display: inline-block;
border:1px solid red;
width: 100px;
height: 100px;
}

<!--这在子元素不确定宽高和数量时，特别实用

6、块级元素与行内元素
1)块级元素：h系列/p/div/ul/ol/li
特点：高宽，内外边距均可控，从新一行开始，可以容纳其他块级元素和内联元素（但p/h不能容纳其他块级元素）
2)行内元素：a/span
特点：水平方向的内外边距可设置，只能容纳文本和其他行内元素（a特殊里面可以放块级元素）