11月11日一些小知识

1. 常用的块级行内元素有哪些？行内块级元素有哪些？块级元素有哪些？

块级元素（block）:

自动换行，独占一行，其后的元素也必须另起一行显示，宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制。

常用的有：

address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , ol , p , pre , table , ul , li

内联元素（inline）：

宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小。

常用的有：

• a - 锚点
• abbr - 缩写
• acronym - 首字
• b - 粗体(不推荐)
• bdo - bidi override
• big - 大字体
• br - 换行
• cite - 引用
• code - 计算机代码(在引用源码的时候需要)
• dfn - 定义字段
• em - 强调
• i - 斜体
• img - 图片
• input - 输入框
• kbd - 定义键盘文本
• label - 表格标签
• q - 短引用
• samp - 定义范例计算机代码
• select - 项目选择
• small - 小字体文本
• span - 常用内联容器，定义文本内区块
• strike - 中划线
• strong - 粗体强调
• sub - 下标
• sup - 上标
• textarea - 多行文本输入框
• tt - 电传文本
• u - 下划线
• var - 定义变量

行块级元素（inline-block）：

inline-block 的元素既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性，比如 inline-block 元素也可以设置 vertical-align（因为这个垂直对齐属性只对设置了inline-block的元素有效） 属性。
HTML 中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下，空白符自然占据一定的宽度，使用inline-block 会产生了元素间的空隙。

常用的有：

button,input，textarea,select, img，object

2.怎么给新元素的后面增加一个新元素？

jQuery有insertAfter方法，但如果要使用原生js解决的话，我们可以去看jQuery的insertAfter方法的源码：

after: function() {
        return this.domManip( arguments, function( elem ) {
            if ( this.parentNode ) {
                this.parentNode.insertBefore( elem, this.nextSibling );
            }
        });
    }

使用的是原生JS的insertBefore方法
我的代码是：

<div>
    <div class="a1">1</div>
    <div class="a2">2</div>
    <div class="a3">3</div>
</div>
<script>
    let a2=document.querySelector('.a2');
        let newEle=document.createElement('div');
        newEle.setAttribute('class','a2.5');
        newEle.appendChild(document.createTextNode("2.5"));
        a2.parentNode.insertBefore(newEle,a2.nextSibling);
</script>

结果为

<div>
    <div class="a1">1</div>
    <div class="a2">2</div>
    <div class="a2.5">2.5</div>
    <div class="a3">3</div>
</div>

3、获取ul中第3个li：

<div>
    <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
    <script>
        let li3=document.querySelector('ul li:nth-child(3)');
        li3.innerHTML='3';
    </script>
</div>

4、HTML5为什么只需要写<！DOCTYPE html>？

HTML 4.01 中的 doctype 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为。
其中，SGML是标准通用标记语言,简单的说，就是比HTML,XML更老的标准，这两者都是由SGML发展而来的。
BUT，HTML5不是的。

5、HTML5有哪些新特性？怎么处理新标签的兼容？怎么区分HTML和HTML5？

新特性：

1) 拖拽释放(Drag and drop) API
2) 语义化更好的内容标签（header,nav,footer,aside,article,section）
3) 音频、视频API(audio,video)
4) 画布(Canvas) API
5) 地理(Geolocation) API
6) 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
7) sessionStorage 的数据在浏览器关闭后自动删除
8) 表单控件，calendar、date、time、email、url、search
9) 新的技术webworker, websocket, Geolocation

兼容方案：

》IE8/IE7/IE6支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式（当然最好的方式是直接使用成熟的框架、使用最多的是html5shiv框架）：

1 <!--[if lt IE 9]> 
2 <script> src="http://html5shiv.googlecode.com/svn/trunk/html5.js"</script> 
3 <![endif]--> 

区分：文档类型和结构语义