HTML学习笔记

HTML学习笔记

1 HTML5有哪些操作可以SEO优化？（其实就是html5新增的几个更好语义的标签）

• title标签、meta标签、 header标签、 footer标签 、
  导航标签（nav标签）、文章标签（article标签）、左或右侧标签（aside标签）

2 css盒模型有哪些及区别content-box border-box padding-box

CSS盒子模型可以分为

• IE盒子模型：box-sizing:border-box(怪异模式）
• W3C标准盒子模型：box-sizing:content-box(标准模式）。

content-box:这是默认样式指定CSS标准。测量width和height属性值包括的内容，但不是border, margin, 或者 padding。

padding-box:width和height属性包括padding的大小，不包括border和margin

border-box:width和height属性包括padding和border，但不是margin。这是盒模型的文档时，Internet Explorer使用Quirks模式。

content-box不包含padding，border-box包含padding。所以如果你设置的大小是一样的，content-box看起来，会比border-box大

3 行内元素和块状元素的区别？行内块元素的兼容性使用？

行内元素：在水平方向上排列，不能包含块级元素，设置height和width属性无效（line-height属性可以设置）。行内元素的margin-top、margin-bottom、padding-top、padding-bottom无法设置，但是左右可以设置。
块级元素：在垂直方向上排列，各行只容纳一个块级元素，从新行开始接着上面的断行。

兼容性：display:inline-block;display:inline;zomm:1;

4 box-sizing、transition、translate分别是什么？

• 1 box-sizing：是用来指定盒模型大小的计算方式，主要分为border-box（从边框计算盒子大小）和content-box（从元素本身固定盒子大小）两种计算方式。
• 2 transition：元素的过渡属性，当前元素只要有“属性”发生变化时，可以平滑的进行过渡。通过transition-propety来设置过度属性；transition-duration来设置过渡时间；transition-triming-function来设置过渡速度，transition-delay设置过渡延时。
• 3 translate：通过移动改变元素的位置；有x y z 三个属性

5 CSS实现垂直水平居中

HTML结构：

<div class="wrapper">
    <div class="content"></div>
</div>

CSS：

.wrapper{position:relative;}
.content{
    background-color:#6699FF;
    width:200px;
    height:200px;
    position: absolute;        //父元素需要相对定位
    top: 50%;
    left: 50%;
    margin-top:-100px ;   //二分之一的height，width
    margin-left: -100px;
}

方法二

.content{
        position:absolute;
        left:50%;
        top:50%;
        width:200px;
        height:200px;
        background:red;
        -webkit-transform:translate(-50%,-50%);
        -moz-transform:translate(-50%,-50%);
        -o-transform:translate(-50%,-50%);
        -ms-transform:translate(-50%,-50%);
        transform:translate(-50%,-50%);
    }

6 display有哪些值，都有什么作用？

• block：块类型，默认宽度为父元素宽度，可设置宽高，换行显示
• none：缺省值，像行内元素一样显示
• inline：行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
• inline-block：行内块级显示。默认宽度为内容宽度，可设置宽高，同行显示。
• list-item：像块类元素一样显示，并添加样式列表标记
• table：作为块级表格来显示
• inherit：继承父元素的display属性的值。

7 px、em、rem的区别？

• 1 px像素：绝对单位，px是相对于显示器分辨率而言的，是一个虚拟单位。是计算机系统的数字化图像长度单位，如果px需要换成物理长度，需要指定精度DPI。
• 2 em是相对长度单位，相对于当前对象内文本的字体尺寸，如果当前行内文本的字体尺寸未被人为地设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，一次不是一个固定值。
• 3 rem 是CSS 3新增的一个相对单位（root,em,根em），使用rem为元素设定字体大小时，任然是相对大小，但相对的只是HTML根元素。
• 区别：IE无法调用使用PX作为单位的字体大小，而em和rem可以缩放，rem相对的只是HTML根元素，这个单位集相对大小和绝对大小于一身，通过它可以做到只修改根元素就成比例的调整所有字体大小，又可以避免字体大小逐层符合的连锁反应。目前，出IE8及更早版本以外，所有浏览器都支持rem。

8 CSS3新特性有哪些？

• 1 颜色 rgba 透明度 opcity

• 2 文字阴影 ：text-shadow

• 3 边框：圆角 ：border-radius 边框阴影 ： border-shadow

• 4 盒子模型：border-sizing

• 5 背景：background-size 设置背景图片尺寸， background-origin 设置背景图片的原点， background-clip 设置背景图片的裁剪区域，以“，”分隔可以设置多背景，用于自适应布局，background-repeat 背景重复设置

• 6 渐变 ： linear-gradient radial-gradient

• 7 过渡：transition

• 8 自定义动画

• 9 CSS3中唯一引入的伪元素就是::selection

• 10 多媒体查询 多栏布局

• 11 border-image

• 12 2D转换 ：transform：translate（x,y) rotate(x,y) skew(x,y) scale(x,y) 需要考虑浏览器兼容问题

• 13 3D转换
  9 display:none;与visibility:hidden的区别是什么？

• 使用display ：none后，HTML元素的宽高，高度等各种属性值都将“丢失“。

• 使用visibility:hidden属性后，HTML元素仅仅是在视觉上看不到（完全透明），而他所占据的空间位置仍然存在，也就是它依旧具有高度宽度等属性值。

10 前端页面有哪三层构成，分别是什么？作用是什么？

结构层 、表示层、 行为层
结构层（structural layer）：由XHTML或者HTML之类的标记语言负责创建
表示层（presentation layer）：由CSS负责创建。
行为层（behavior layer）: 负责回答"内容改如何对事件作出反应“这一问题。” 由JavaScript语言和DOM操作负责。

11 实现布局中间自适应宽度，左右两栏固定宽度

HTML结构：

 <div class="box" >
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>

CSS结构：

        .box{
            display:flex;
        }
        .left{
            width: 200px;
            height: 600px;
            background:red;
        }
        .right{
            width: 200px;
            height: 600px;
            background:red;
        }
        .center{
            width: 100%;
            height:600px;
            background:green;
        }

12 你如何对网站的文件和资源进行优化？期待的解决方案包括：

文件合并、文件最小化、文件压缩（CSS JS打包 图片压缩）
使用CDN托管
缓存的使用

13 css的基本语句构成是
选择符 属性 、值

14 写出几种IE6双边bug的解决方法

• 1 双边距BUG float引起的 使用 display
• 2 3像素问题是由float使用 display：inline -3px
• 3 超链接hover点击后失效，使用正确的书写顺序 link visited hover active
• 4 z-index问题给父级加上position:relative
• 5 min-height最小高度 ！important解决
• 6 select在IE6下遮盖使用iframe嵌套
• 8 为什么没有办法定义1px左右的宽度器？IE6默认行高造成的，使用overflow:hidden,zoom:0.08,line-height:1px解决