瞧瞧HTML+CSS3“灯泡”知识点

1.HTML:
HyperText Markup Language 超文本标记语言，注意它非编程语言；
浏览器对其解析有兼容性的问题，不同的浏览器呈现的效果可能不同。

2.HTML和XHTML的区别：
XHTML是HTML像XML的一个过渡语言
XHTML 必须正确嵌套
XHTML 所有元素必须被关闭
XHTML 区分大小写，其标签名必须用小写字母
XHTML 文档必须拥有根元素
XHTML 文档要求给所有属性赋一个值
XHTML 文档需要把所有 < 、>、& 等特殊符号用编码表示
XHTML 文档不要在注释内容中使“–”
XHTML 文档中用id属性代替name属性

3.对标签语义化标签的理解，有什么作用
有语义的标签，例如table表示表格，form表示表单等等；
标签语义化最大的作用应该是不仅可以让自己看懂，也可以让别人理解，团队合作越来越普遍了；还可以和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息；也能增加代码的可复性和可移植性

4.CSS中link和@import的区别：
1）link属于html中的标签，而@import属于css
2）页面加载的时候，link会同时被加载，而@import引用的css要等到页面加载完毕后才被加载
3）link没有兼容问题，而@import只有在IE5以上才能被识别
4）link的样式权重高于@import的权重
5）link是属于XHTML的，除了可以加载css，还可以定义RSS等其他事务，而@import是属于css范畴，只能加载css

5.在HTML中插入样式的优先级：
内联style属性 > 内部style标签 > 外部style导入 > @import导入 （就近原则）

6.块级元素和行内元素的区别:
块级元素独占一行；可以设置宽高，块级元素内部可以嵌套块级元素和行内元素
行内元素与其他元素共享一行；不能设置宽高，即使设置了也无效，行内元素内部无法嵌套块级元素

7.块级元素如何在父元素中水平垂直居中？
写两种自己常用的方法

方法一：比较笨的计算方法
    给父元素： position: absolute;
    块级元素： position: absolute;
			 top: calc(50% - 100px); // 这里的100px是指块级元素自身的height的一半
			 left: calc(50% - 100px); // 这里的100px是指块级元素自身的weight的一半

方法二：
    给父元素：position: relative;
    块级元素：
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;

8.外边距合并问题

1.父子级:给子元素设置margin，子元素没有设置上，而给了父元素
    1-1:给父元素添加padding并且`box-sizing: border-box;`
    1-2:给父元素添加边框
    1-3:给父元素清除浮动`overflow:hidden`
    1-4:给父元素或者子元素添加浮动`float:left`
    1-5:给父元素或者子元素添加浮动绝对定位
    1-6:给父元素或者子元素添加`display: inline-block;`
2.兄弟级：在设置时注意避免
    水平方向：外边距会进行叠加
    垂直方向：
        如果都是正数，那么会进行合并，并且取较大的值
        如果都是负数，那么会进行合并，并且取绝对值较大的值
        如果一正一负，会叠加，不会进行合并

9.清除浮动的方式

父子级：
    1)在子元素都浮动，父元素没有设置高度的情况下，使用`overflow: hidden;`清除子元素的浮动对父元素产生的影响
    2)在最后一个浮动标签后新增一个空标签，再给其设置`clear:both`
    3)使用after伪元素清除浮动
	     ::after{
	    	content:"";
	    	clear:both;
	    	display:block;
	      }
兄弟级：
	在两个div之间添加空标，然后给此空标签添加样式clear:both

10.position的几种属性值比较（定位）
position:static/absolute/relative/fixed
static静态定位，默认;
absolute绝对定位 脱离文档流，原先位置不保留,根据浏览器左上角进行定位；如果父元素有定位属性(不管是什么)，那么根据父元素左上角进行定位;
relative相对定位 相对于原先在文档流中的位置定位,不脱离文档流，原先位置保留，以自己本身的位置进行偏移;
fixed固定定位 不会随着滚动条滚动 脱离了文档流，原先位置不保留；在没有设置定位属性的情况下，默认是在原先位置固定定位.

11.z-index只能在定位元素上有效；设置叠加顺序，值越大越在上层。

12.float和absolute
float浮动不会对文本进行遮挡，脱离文档流不脱离文本流;
absolute全部遮挡，既脱离文档流又脱离文本流;
【注意】区别文档流和文本流

13.三种显示与隐藏的比较
display 、 visibility 、 opacity
display:none; 隐藏，不占据屏幕空间，通常对应显示—>display:block;
visibility: hidden; 隐藏，占据屏幕空间（空间依然保留）,对应显示—>visibility: visible;
opacity: 0; 隐藏，透明度0-1，占据屏幕空间,对应显示—>opacity:1

14.盒子模型
拥有的属性：width&height内容区的宽高,显示内容、padding内间距、border边框、margin外边距；
使用box-sizing属性可以改变盒子模型，默认为content-box，w3c盒子；取值为border-box为IE盒子(边框盒子模型)；
【重点】：

w3c盒子，设置的宽高是内容区的宽高
        内容区的宽高
            宽：width，
            高：height
        盒子的宽高
            宽：width+paddingLeft+paddingRight+borderLeft+borderRight 
          高：height+paddingTop+paddingBottom+borderTop+borderBottom
        所占屏幕空间的宽高
            宽：width+paddingLeft+paddingRight+borderLeft+borderRight+marginLeft+marginRight
            高：height+paddingTop+paddingBottom+borderTop+borderBottom+marginTop+marginBottom

        IE盒子 使用box-sizing:border-box;设置的宽高就是盒子的宽高
            内容区的宽高
                宽：width-paddingLeft-paddingRight-borderLeft-bordrRight
                高：height-paddingTop-paddingBottom-borderTop-borderBottom
            盒子的宽高
                宽：width
                高：heigt
            所占屏幕空间宽高
                宽：width+marginLeft+marginRight
                高：height+marginTop+marginBottom

15.px、em、rem的区别
px:精准的单位，像素点；
em:相对单位，相对于父元素的字体大小；如果父元素没有设置大小，那么就以根元素进行参考；
rem:根据根元素(html标签)进行参照；

16.如何使用1px边框不使用border属性

<div style="height:1px;overflow: hidden;background-color: red;"></div>;

【div高度设置为1px；hr中size属性为1[size="1"]；伪元素高度为1px；outline:1px solid red】

17.HTML5新增标签

<header>放置头部信息</header>
<nav>放置导航信息</nav>
<aside>侧边栏，广告</aside>
<footer>尾部信息</footer>
<address>地址，联系信息</address>
<article>文章</article>
<section>独立区域内容</section>
<figure>表示网页上的一块独立内容</figure> <figcaption>figure元素的标题</figcaption>
<details>一种用于标识该元素内部的子元素可以被展开，收缩显示的元素怒</details><summary>从属于details</summary>

18.HTML5新增特性
新增了图像、位置、存储、多任务等功能。
新增语义化标签，是页面内容结构化，见名知义；
新增表单控件，date,email,month,number,range,search,tel,time,url,week等等；
新增用于媒介回放的video和audio、canvas画布、SVG绘图、地理定位、拖放API、WebWorker、WebStorage、WebSocket

19.css3新增属性

边框属性：
    border-image图片边框
    border-radius圆角边框
    box-shadow边框阴影
背景属性：
    background-size背景图片尺寸大小
    background-origin背景图片定位位置(content-box、padding-box 、border-box)
    background-clip背景图片裁剪开始位置
文字效果：
    text-shadow文本阴影
    word-wrap自动换行
动画效果：
    transform变换效果
        transform、transform-origin设置变形原点
    animation动画效果
        animation-duration动画持续时间
        animation-iteration-count动画迭代次数
        animation-delay动画延迟时间
        animation-direction动画方向
        animation-timing-function动画速度曲线
        animation-fill-mode填充模式
        animation-play-state暂停/恢复
过渡效果：
    transition过渡效果
        例如"transition: width 3s linear 1s;" /* 过渡的属性，过渡时长，速度时间函数，延迟时间 */

20.简述css3的各种选择器、级联机制、继承机制、常见布局技巧
选择器：

 类选择器，以"."开头；
    ID选择器，以"#"开头；
    普遍选择器，用"*"表示；
    层次选择器，(后代选择器)空格""代表后代，(子代选择器)">"代表直接子代， (相邻同胞选择器)"+"代表下一个兄弟元素，(一般同胞选择器)"~"代表之后所有的兄弟；
    组合选择器，多个选择器组合使用，用","分割；
    嵌套选择器，例如"div.one"表示class为one的div元素；
    属性选择器，[attr]选择具有attr属性的元素，[attr=val]选中attr属性并且值为val的元素，"~="只要值之一为XX的，"^="以XX属性值开头的，"$="以XX属性值结尾的,"*="属性值包含XX的；
    伪类选择器，以":"开头，用在选择器后，用于指明元素在某种特殊的状态下才能被选中，例如：":first-child"第一个孩子元素,":hover"鼠标悬停的状态等等；
    伪元素选择器，以"::"开头，用在选择器后，用于选择指定的元素，例如："::first-line"选中第一行文本,"::after"选中之后的不存在的节点，可配合content属性进行内容填充

级联：

	在属性值后边使用!important修饰。
	使用!important修饰的声明优先级最高，如果有多个!important修饰或者没有!important修饰，那么比较选择器的特性値。特性値越高的优先级越高。
	特性値====》style属性内行内样式   1000
         ID选择器     100
         类选择器，属性选择器，伪类选择器  10
         元素选择器，伪元素选择器     1
         其他，空格，+~>    0
	特性値相等情况下，后面的覆盖前面的，即后面的有效；特性値不同，特性値相对较高的即有效(就近原则)

继承：
可继承属性：font系列属性、文本系列属性、列表系列属性、cursor、visibility等
不可继承属性：margin、padding、border
处理继承：inherit继承、initial不继承，应用浏览器的默认样式、unset不设置，原本该继承就继承

布局：

可以通过改变position的值、设置float、指定display的值来改变布局
浮动布局Float：
    让块级元素在一行中显示(列级布局)，或者让文字在图片的周围显示
定位布局Position：
    结合前面position的几种属性值比较，用left、right、top、bottom来定位元素的属性
伸缩盒布局：列布局/行布局
    给父元素设置 display: flex;
    flex-direction: row （列布局）
    flex-direction: column （行布局）
    默认情况下主轴为X，改变主轴即可切换行列布局
    flex-wrap: wrap;可设置自动换行功能
    flex属性设置等比例划分
网格布局：
    由行，列，沟组成的一种布局方式，当使用网格布局的时候无需考虑每个元素的宽度，只需要考虑每个元素需要占几列。网格布局是利用float属性实现。
利用第三方网格框架：
    Bootstrap、Foundation、Skeleton

21.form的post和get的区别
Form表单主要用于用户与Web应用程序进行数据的交互，它允许用户将数据发给web应用程序，网页也可以拦截数据的发送以便自己使用；
post和get是Form提供的两种数据传输方式，分别对应于HTTP协议中的POST和GET方法；
post方法，表单数据包含在HTTP协议的请求报文的体部，按照变量和值相对应的方式传递到action所指向url，post方法相对来说更安全；
get方法，表单数据被附加在url上，使用"?“连接分隔，而各个变量之间使用”&"连接，数据可以被直接看到，没有安全性。
同时相比较而言，get方式速度较快，但是传输的数据量较小。

22.超链接打开方式以及锚点操作

<a href="">xxx</a> 
    href属性：
        锚点：ID值
        外部链接：url
        相对路径：./        ../
        发送邮件：mailto:liuyr@briup.com
    target：(常见的两种)
        "_blank"在新窗口打开
        "_self"在当前窗口打开，默认的
    锚点操作：
        例如前面有一个标题<h3 id="top">超链接</h3>，后面可以设置<a href="#top">返回顶部</a>，这样点击超链接网页就会返回到top那一块

23.sessionstorage,localstorage,cookie的区别
1）cookies是为了标识用户身份而存储在用户本地终端上的数据，始终在同源http请求中携带，即cookies在浏览器和服务器间来回传递，而sessionstorage和localstorage不会自动把数据发给服务器，仅在本地保存。
2）cookie保存的数据很小，每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉，另外cookie还需要指定作用域，不可以跨域调用；而sessionstorage和localstorage保存的数据大，可达到5M。
3）cookie在设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭；sessionstorage仅在浏览器窗口关闭之前有效，仅仅是会话级别的存储；localstorage始终有效，即使窗口和浏览器关闭也一直保存，除非主动删除数据，否则数据永远不会过期，常用作长久的数据保存。
3）cookie在所有的同源窗口都是共享；sessionstorage不在不同的浏览器共享，即使同一页面；localstorage在所有同源窗口都是共享。

24.http协议的通信过程
建立TCP连接->WEB浏览器向WEB服务器发送请求命令->WEB浏览器发送请求头信息->WEB服务器应答->WEB服务发送应答头信息->WEB服务器向浏览器发送数据->WEB服务器关闭TCP连接