HTML语义化

要讲HTML语义化还要从历史讲起，大家知道前端也是这两年才发展起来的，以前的前端都是写写展示页，所以其实很早以前，是没有专门的前端的，需要写网页了，就让后端看看顺手写了，所以那时候的网页，都是一堆Table 或者满屏幕的div标签。不要说给别人看自己的HTML结构了，估计自己也看的够累。而且对于搜索引擎和设备解析来说，非常的不友好。

为了解决上面说的问题，HTML语义化就逐渐地诞生了。

什么是HTML语义化？

简单来说：就是用正确的标签做正确的事。比如：

头部：header
导航：nav
主体内容：main
标题：h1 ~ h6
段落：p
侧边栏：aside
页脚：footer

这样，整篇HTML结构非常清晰，好看。

HTML语义化有什么好处呢？

网页加载慢导致CSS文件还未加载时（没有CSS），页面仍然清晰、可读、好看。
提升用户体验，例如title、alt可用于解释名词或解释图片信息。
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息。
方便其他设备（如屏幕阅读器、盲人阅读器、移动设备）更好的解析页面。
使代码更具可读性，便于团队开发和维护。

希望我们能够写出更规范整洁的HTML，多用语义化标签，尽量不用无意义标签。

meta viewport标签的解析

<meta name="viewport" content="width=device-width,innitial-scale=1,maximum-scale=1">

key mean example width 视口的宽度;
width=device-width 指缩放为 100% 时以 CSS 像素计量的屏幕宽度;
initial-scale 初始化缩放比例 ;
initial-scale=1.0 初始化不进行缩放;
maximum-scale 用户最大缩放比例;
maximum-scale=1.0 不允许用户缩放

HTML5标签

常见的一些内容相关的标签：header main footer article；
功能性的：cavans video audio

什么是H5?

移动端页面；

CSS押题

两种盒模型:W3C标准盒模型和IE盒模型

盒模型的内容里有：content,padding,border,margin

1. W3C 标准盒模型：

属性width,height只包含内容content，不包含border和padding。

2. IE 盒模型：

属性width,height包含border和padding，指的是content+padding+border。

什么是BFC?举例子就可以

BFC全称：Block Formatting Context，名为“块级格式化上下文”；
如果给一个div写overflow-hidden，这个div里面的浮动元素就会被他包裹；
当display:inline-block,时可以触发BFC.

CSS选择优先级

1.越具体优先级越高；
2.写在后面的覆盖前面的；
3.important！最高少用；
4.清除浮动

.clearfix{
content:'';
display:block/table;
clear:both;
}

把。clearfix加到容器上，里面的子元素浮动就消除了；内联 > ID选择器 > 类选择器 > 标签选择器。

HTML押题