input、img、button、textera、label
（inline-block属性是拥有内在尺寸，可设置高宽，但不会换行）
rgba()和opacity都能实现透明效果
//方法一：已知元素的高宽
#div{
background-color: #666666;
width: 200px;
height: 200px;
position: absolute;//父元素需要相对定位
top:50%;
left:50%;
margin-top: -100px;//二分之一的height，width
margin-left: -100px;
}
//方法二：未知元素的高度
#div1{
width: 200px;
height: 200px;
background-color: #666666;
margin: auto;
position: absolute;//父元素需要相对定位
left: 0;
top: 0;
right: 0;
bottom: 0;
}
//补充：用简便的方法使一个img元素居中
#contaniner{
display: table-cell;
text-align: center;
vertical-align: middle;
}
px和em都是长度单位，区别是：px的值是固定的，指定是多少是多少，计算比较容易，em的值是不固定的，并且em会继承父级元素的字体大小
浏览器的默认字体高都是16px，所以未经调整的浏览器都符合：1em=16px，那么12px=0.75em,10px=0.625em
重置样式非常多，凡是一个前端开发人员肯定有一个常用的重置CSS文件并知道如何使用它们。使用重置样式是因为不同的浏览器对一些元素有不同的默认样式，如果不处理，在不同的浏览器下会存在必要的风险，或者更有戏剧性的情况发生。
例如：normalize.css可以代替重置样式文件，它没有重置所有的样式风格，但仅提供了一套合理的默认样式值，既能让众多浏览器达到一致和合理，但又不扰乱其他的东西
link属于HTML标签，而@important是CSS中提供的，在页面加载的时候，link会同时被加载，而@important引用的CSS会在页面加载完成后才会加载引用的CSS。@important只有在IE5以上才可以被识别，而link是html标签，不存在浏览器兼容性问题，link引入样式的权重大于@important的引用（@important是将引用的样式导入到当前的页面中）
CSS的盒子模型有两种：IE盒子模型、标准的W3C盒子模型，盒模型包括：内容、内边距、外边距（一般不计入盒子实际宽度）、边框。IE盒子模型的宽度包括：内容、内边距、边框；标准的W3C盒子模型包括：内容
<div style="height:1px;overflow:hidden;background:red"></div>
编写CSS；让页面结构更合理化，提升用户体验；实现良好的页面效果和提升性能
*用户界面
*主进程
*内核
*渲染引擎
*JS引擎
*执行栈
*事件触发线程
*消息队列
*微任务
*宏任务
*网络异步线程
*定时器线程
1、<!DOCTYPE html> H5标准声明，使用 HTML5 doctype，不区分大小写
2、<head lang=”en”> 标准的 lang 属性写法
3、<meta charset=’utf-8′> 声明文档使用的字符编码
4、<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> 优先使用 IE 最新版本和 Chrome
5、<meta name=”description” content=”不超过150个字符”/> 页面描述
6、 <meta name=”keywords” content=””/> 页面关键词者
7、<meta name=”author” content=”name, email@gmail.com”/> 网页作
8、<meta name=”robots” content=”index,follow”/> 搜索引擎抓取
9、<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> 为移动设备添加 viewport
10、<meta name=”apple-mobile-web-app-title” content=”标题”> iOS 设备 begin
11、<meta name=”apple-mobile-web-app-capable” content=”yes”/> 添加到主屏后的标题（iOS 6 新增）
12、 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>
13、添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
14、<meta name=”format-detection” content=”telphone=no, email=no”/> 设置苹果工具栏颜色
15、<meta name=”renderer” content=”webkit”> 启用360浏览器的极速模式(webkit)
16、<meta http-equiv=”X-UA-Compatible” content=”IE=edge”> 避免IE使用兼容模式
17、<meta http-equiv=”Cache-Control” content=”no-siteapp” /> 不让百度转码
18、<meta name=”HandheldFriendly” content=”true”> 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓
19、<meta name=”MobileOptimized” content=”320″> 微软的老式浏览器
20、<meta name=”screen-orientation” content=”portrait”> uc强制竖屏
21、<meta name=”x5-orientation” content=”portrait”> QQ强制竖屏
22、<meta name=”full-screen” content=”yes”> UC强制全屏
23、<meta name=”x5-fullscreen” content=”true”> QQ强制全屏
24、<meta name=”browsermode” content=”application”> UC应用模式
25、<meta name=”x5-page-mode” content=”app”> QQ应用模式
26、<meta name=”msapplication-tap-highlight” content=”no”> windows phone 点击无高光
27、设置页面不缓存
<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>
预格式化就是保留文字在源码中的格式 最后显示出来样式与源码中的样式一致 所见即所得。
<pre> 定义预格式文本，保持文本原有的格式
DHTML 将 HTML、JavaScript、DOM 以及 CSS 组合在一起，用于创造动态性更强的网页。通过 JavaScript 和 HTML DOM，能够动态地改变 HTML 元素的样式。 DHTML 实现了网页从 Web 服务器下载后无需再经过服务的处理，而在浏览器中直接动态地更新网页的内容、排版样式和动画的功能。例如，当鼠标指针移到文章段落中时，段落能够变成蓝色，或者当鼠标指针移到一个超级链接上时，会自动生成一个下拉式子链接目录等。
包括：
<head>>标签用于定义文档的头部，它是所有头部元素的容器。<head>> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供
元信息等等.文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者
getCurrentPosition()
参考：https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Html/Html.md
原文：https://www.cnblogs.com/yujiao-99/p/12589167.html