三年前端从零开始学前端
（失业的前端开始系列强化自己）
第一章 重新认识HTML、HTML5、CSS、CSS3相关的新特性以及面试题
前言
随着当下IT行业的就业环境，直线式的下降，自己也面临了失业，在没有充分认识到自己的不足情况下，以及自己认知不够深，情绪化的求职态度，一度让自己陷入焦虑的死循环，还好在朋友的帮助下，认识到自己的严重错误。至此重新强化自己的软实力和硬实力。
一、HTML和HTML5的特性和面试题
1.HTML
1：html 是用于定义内容结构的标记语言，html是由一系列`元素`组成，元素用来包裹不同的部分内容，使其以某种方式呈现或者工作。
2：元素主要部分：
1.开始标签、结束标签、内容、元素。
3.块级元素和内联元素：
1.块级元素在页面中以块的形式展现。一个块级元素出现在它前面的内容之后的新行上。任何跟在块级元素后面的内容也会出现在新的行上。块级元素通常是页面上的结构元素。例如，一个块级元素可能代表标题、段落、列表、导航菜单或页脚。一个块级元素不会嵌套在一个内联元素里面，但它可能嵌套在另一个块级元素里面
2.内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行。它通常与文本一起使用，例如，<a> 元素创建一个超链接，<em> 和 <strong> 等元素创建强调。
3.`<!DOCTYPE html>:` 是指声明的文档类型。
4. <head/> 标签是指元素的容器，包含了你想要在HTML页面但不在ＨＴＭＬ页面显示的内容。
5. <meta charset = 'utf-8'> 标签这个元素代表了不能由其他 HTML 元相关元素表示的元数据，比如<base>、 <link>、 <script>、<style>、<title>。
1. charset属性将你的文档设置为utf-8。用作处理书面语言的字符。属性一般包括name（提供文档级别于整个页面）、
2. http-equiv（编译指令，提供的信息与类似的命名的HTTP头部相同）、
3. charset（字符集声明显示文档为那种字符编码）、itemprop（提供用户定义的元数据）等属性。
4. http-equiv 属性值：content-security-policy 它允许页面作者定义当前页的内容策略 (en-US)。内容策略主要指定允许的服务器源和脚本端点，这有助于防止跨站点脚本攻击。
5. content-type 如果使用这个属性，其值必须是"text/html; charset=utf-8"。注意：该属性只能用于 MIME type 为 text/html 的文档，不能用于 MIME 类型为 XML 的文档。
6. refresh：是指定：content只包含一个整数，则重新载入页面的时间间隔（秒）；
7. 如果 content 包含一个正整数，并且后面跟着字符串 ';url=' 和一个合法的 URL，则是重定向到指定链接的时间间隔 (秒) 无障碍相关考虑
8.<html lang = 'zh-CN'> 使用`lang`来设置文档的语言。
2.HTML5
HTML5新增的特性：
1. 语义化的标签 <header>、<nav> 、<footer> 、<article> 、<section> 、<aside>
2. 媒体标签：
1. <audio> (controls-控制面板,autoplay-自动播放,loop="true"-循环播放)
2. <video> ( poster 指定视频没有下载完毕，或者用户还没有点击播放，默认显示第一帧画面， controls width height)
3. <source> 源
3. 表单类型 > email url number search range color time date datetime-local week month
4. DOM查询操作
1. document.querySelecor()、 document.querySelecorAll()
5. web存储
1. localStorage --没有时间限制的存储
2. sessionstorage 针对一个session的数据存储
6. canvas（画布）、 Geolocation(地理定位)，webSocket（通信协议）
7. input 标签新增属性 placeHolder autocomplete autofocus required
8. historyApi :go 、forward、 back、 pushstate
9.拖拽属性 ---> draggable :auto | true | false
API 事件：
- dragstart 在元素开始被拖动时触发
- dragend 在拖动操作完成时触发
- drag 在元素被拖动时触发释放区事件：
- dragenter 被拖动元素进入到释放区所占据得屏幕空间时触发
- dragover 当被拖动元素在释放区内移动时触发
- dragleave 当被拖动元素没有放下就离开释放区时触发
- drop 当被拖动元素在释放区里放下时触发
3. css以及css3
1. CSS常见面试题总结
1. 隐藏元素的方式：
display：none -> 渲染树 不会包含该渲染对象，元素不会占据文档位置，也不会绑定响应事件。
visibility：hidden-> 元素在文档仍然占据空间，但不会响应绑定的监听事件。
opacity：0、 将元素的透明度设置为0，以此来实现元素的隐藏，元素仍在文档空间，并且能够响应元素绑定监听事件。
position：absolute、 通过绝对定位将元素移除可视区域来达到隐藏的效果。
z-index：负值、是其他元素遮盖住此元素。
clip/clip-path:使用元素裁剪的方法来实现，但 这种元素仍然在文档流占据位置且这种是不会绑定响应的事件。
Tansform：scale（0,0）将元素缩放为0，来实现元素隐藏，但这种元素仍然存在文档流，但不会绑定响应监听事件。
2. transition和animation的区别
transition是过度属性，强调过度，它的实现需要触发一个事件才可执行动画。
animation是动画属性，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。
3. display：none & visibility：hidden区别
两者属性都是让元素隐藏，不可见，但区别：
一： 在渲染树中
display：none 会让元素从渲染树中消失，渲染时不会占据空间
visibility：hidden 不会让元素从渲染树中消失占据文档空间
二：display：none 是非继承属性，子节点会随着父节点消失，通过修改子节点属性也无法显示，
visibility：hidden是继承属性，子节点消失是继承了hidden，通过设置visibility：visible 可以让子节点显示
三：修改常规文档流中的display通常会造成重排，但是修改visibility属性只会造成本元素的重绘；
四： 如果使用读屏器 设置display：none内容不会被读取，设置为visibility：hidden内容会容易被读取。
4.盒模型的理解：
盒模型都是有四个部分组成，分别是margin、border、padding、content。
标准盒模型和IE盒模型的区别在于width和height时，所对应的范围不同：标准盒模型的width和height只包含了content，IE 盒模型的width和height的范围包含了border。padding和content。
2. CSS3中新增的新特性
新增各种CSS的选择器（：not（。input）所有的class不是input的节点）
圆角、多列布局、阴影和布局、文字特效、文字渲染、线性渐变、旋转、增加 缩放、定位、倾斜 动画和多背景
3. CSS 优化和提升性能的方法
1. **加载性能**：
（1）CSS的压缩，将写好的css 进行打包压缩，减小体积，
（2）css 单一样式
（3）减少使用@import，使用 <link> ，后者和页面一起加载，前者是等待页面加载完成之后在进行加载
2. **渲染性能** ：
（1）减少使用浮动和定位
（2）减少页面的重排和重绘
（3）选择器的优化嵌套，尽量避免层级过深。
3. 维护性、健壮性：
（1） 将具有相同的样式抽离出来，整合并且通过class在页面进行使用，提供维护性
（2） 样式和内容进行分里，将CSS代码定义到外部的css。
4. 媒体查询的理解
1. 首先媒体查询是一个css3的新特性，允许内容的呈现针对一个特定的范围的输出设备进行裁剪，而不比改变内容本身，其主要用做浏览器的适配方案。
2. 使用@media查询，可以针对不同的媒体类型进行定义不同的样式，其是主要的响应式页面设计的一种方案。
5. 常见的布局单位（px、%、em、rem、vw/vh）。
6. px 、em、rem 的区别以及使用场景
px 是固定的像素，一旦设置了就无法因为适应页面大小而改变
em和rem相当于px更具有灵活性，他们是相对长度单位，其长度不是固定的，更适应于响应式布局。
em是相对于父元素来设置字体大小，其存在问题，进行设置任何元素，都有可能知道父元素的大小，而rem是相对于根元素，只需要在根元素确定一个参考值。
**常见的场景：**
对于只需要适配部分少数移动设备，且分辨率只对页面影响不大的，px即可。
对于只需要适配各种移动设备，使用rem。
7. 常见的两栏和三栏布局的实现
两栏：左边一栏固定，右边一栏宽度高度自适应
三栏：左右两栏宽度固定，中间自适应的布局，
8. 移动端适配
移动端适配主要有两个维度：**适配不同像素密度**，**适配不同屏幕大小**
9. flex布局理解以及使用场景
1. flex 布局一般 简称弹性盒子，弹性布局任何一个容器都可以指定为flex布局，行内元素也可以使用flex布局。简称flex容器，
2. 设置属性在容器上：flex-direction 决定主轴的方向、fle-warp：属性定义，
flex-flow 是指flex-dirction和flex-warp的简写，
justify-content属性定义了在主轴上的对齐方式
align-items 属性定义在交叉轴上的对齐方式
align-content 属性定义了多根轴线的对齐方式
10. flex：1 表示含义
1. flex属性 是flex-grow、flex-shrink、flex-basis的简写，默认为0 1 auto。flex：1表示flex：1 1 0%，
11. BFC的概念，以及如何创建一个BFC
概念：是指块级格式化上下文，是布局中生成块级盒子的区域，也是浮动元素于其他元素的交互限定区域。简单来说：BFC是独立的布局环境，可以理解为一个容器，在这个容器按照一定的规则物品进行摆放，且不会影响其他环境中的物品。若触发BFC，则BFC外部布局不受影响。
条件：根元素body、元素设置浮动，或设置绝对定位：position，display值为：inline-block，flex，overflow 为hidden，auto ；
特点：垂直方向，自上而下排列，计算BFC高度则需要计算浮动元素的高度
作用：解决margin的重叠问题，解决高度塌陷，创建自适应两栏布局。
总结
以上就是今天要讲的内容，大概记录一下css html 问题~~
948
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
