HTML重要知识点及偏僻知识点

一、H5新增用法

        1、html5新特性之用于绘画的canvas元素
        2、html5新特性之更加丰富强大的表单
        3、html5新特性之用于媒介的video和audio元素
        4、html5新特性之html5地理定位
        5、html5新特性之html5拖放
        6：html5新特性之html5 Web存储
        7、html5新特性之html5应用程序缓存
        8、html5新特性之html5 Web Workers
        9、html5新特性之html5服务器发送事件
        10、html5新特性之html5 WebSocket　

二、<pre> 标签

        pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

        <pre> 标签的一个常见应用就是用来表示计算机的源代码。

        可以导致段落断开的标签（例如标题、<p> 和 <address> 标签）绝不能包含在 <pre> 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行，但是这种行为在所有浏览器上并不都是一样的。

        pre 元素中允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。当把其他标签（比如 <a> 标签）放到 <pre> 块中时，就像放在 HTML/XHTML 文档的其他部分中一样即可。

 三、如何获取下面表单select域的选择部分的文本，其中obj=document.getElemById(“obj”)

1 2 3 4 5 6 7

<form name="a">     <select name="a" size="1" id=”obj”>         <option value="a">1</option>         <option value="b">2</option>         <option value="c">3</option>     </select> </form>

window.onload = function(){

    //首先获得下拉框的节点对象；

    var obj = document.getElementById("obj");

    //1.如何获得当前选中的值？：

    var value = obj.value;

    //2.如何获得该下拉框所有的option的节点对象

    var options = obj.options;

    //注意：得到的options是一个对象数组

    //3.如何获得第几个option的value值?比如我要获取第一option的value,可以这样：

    var value1 =options[0].value;

    //4.如何获得第几个option的文本内容?比如我要获取第一option的文本,可以这样：

    var text1 = options[0].text;

    //5.如何获得当前选中的option的索引？

    var index = obj.selectedIndex;

    //6.如何获得当前选中的option的文本内容？

    //从第2个问题，我们已经获得所有的option的对象数组options了

    //又从第5个问题，我们获取到了当前选中的option的索引值

    //所以我们只要同options[index]下标的方法得到当前选中的option了

    var selectedText =options[index].text;

}

四、前端性能优化（CSS动画优化）

https://segmentfault.com/a/1190000000490328https://segmentfault.com/a/1190000000490328

五、readonly与disabled属性

        disabled和readonly这两个属性有一些共同之处，比如都设为true，则form属性将不能被编辑，往往在写js代码的时候容易混合使用这两个属性，其实他们之间是有一定区别的：

• 如果一个输入项的disabled设为true，则该表单输入项不能获取焦点，用户的所有操作（鼠标点击和键盘输入等）对该输入项都无效，最重要的一点是当提交表单时，这个表单输入项将不会被提交。
• 而readonly只是针对文本输入框这类可以输入文本的输入项，如果设为true，用户只是不能编辑对应的文本，但是仍然可以聚焦焦点，并且在提交表单的时候，该输入项会作为form的一项提交。

 六、在做一份调查报告时，要求将问题文类，同一表单内的数据在一组显示，并表明此类型的名称，如何将相同类型的表单进行分组

        legend ：为 fieldset 元素定义标题（caption）

        fieldset ：将表单内的相关元素分组。

七.反语义化标签

        其中 font 标签，存在反语义（ font 解释为文字，但 ”文字“ 意思太泛了，而是应根据使用环境选择其他标签。）在 HTML 4.01 中，不被赞成使用；在 HTML 5 中，不支持该元素，建议使用 CSS 向元素添加样式。

八、html中点击A超链接标签使其不跳转

        <a href="#"></a>有一个缺点，如果页面很长的话，会跳到本页面的顶部，有点像是跳到了一个新页面的感觉，体验不是很好！

        <a href="#" οnclick="return false"></a>

        <a href="javascript:void(0)"></a> 用href=”javascript:void(0)”这种伪协议；（这种伪协议，少写的好）
        <a href="javascript:" ></a>标准答案

 九、空元素（void elements）

空元素 - 术语表 | MDNhttps://developer.mozilla.org/zh-CN/docs/Glossary/Empty_element

十、HTML5删除的元素

• <acronym>：被标记的首字母缩略词
• <applet>：一个嵌入的 Java applet；即能够解析java的class文件的一个东东
• <basefont>：该标签可以为文档中的所有文本定义默认字体颜色、字体大小和字体系列。
• <big>：让文本比常规的字体大一号
• <center>：水平居中
• <dir>：文本方向为从右向左的段落：<bdo dir="rtl">文本方向从右到左!</bdo>
• <font>：规定文本的尺寸、字体和颜色
• <frame>：<frameset>元素被用来组织一个或者多个<frame> 元素
• <frameset>：HTML5 不支持<frameset>标签
• <noframes>：noframes 元素可为那些不支持框架的浏览器显示文本。noframes 元素位于 frameset 元素内部。
• <strike>：<strike>标签可定义加删除线文本定义。
• <tt>：<tt>标签呈现类似打字机或者等宽的文本效果。

 十一、repaint与reflow

        repaint是某个DOM元素进行重绘；reflow是整个页面进行重排，也就是页面所有DOM元素渲染。

        如何触发：

        style变动造成repaint和reflow。

        不涉及任何DOM元素的排版问题的变动为repaint，例如元素的color/text-align/text-decoration等等属性的变动。

        除上面所提到的DOM元素style的修改基本为reflow。例如元素的任何涉及长、宽、行高、边框、display等style的修改。

常见触发场景：

1. 触发repaint：
   1. color的修改，如color=#ddd；
   2. text-align的修改，如text-align=center；
   3. a:hover也会造成重绘。
   4. :hover引起的颜色等不导致页面回流的style变动。
   5. 等等太多，一时间写出来也太难想了。
2. 触发reflow：
   1. width/height/border/margin/padding的修改，如width=778px；
   2. 动画，:hover等伪类引起的元素表现改动，display=none等造成页面回流；
   3. appendChild等DOM元素操作；
   4. font类style的修改；
   5. background的修改，注意着字面上可能以为是重绘，但是浏览器确实回流了，经过浏览器厂家的优化，部分background的修改只触发repaint，当然IE不用考虑；
   6. scroll页面，这个不可避免；
   7. resize页面，桌面版本的进行浏览器大小的缩放，移动端的话，还没玩过能拖动程序，resize程序窗口大小的多窗口操作系统。
   8. 读取元素的属性（这个无法理解，但是技术达人是这么说的，那就把它当做定理吧）：读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))；

十二、页面加载 

1. css加载不会阻塞DOM树的解析
2. css加载会阻塞DOM树的渲染
3. css加载会阻塞后面js语句的执行

 十三、使子元素垂直居中

如何让子元素在父元素中水平垂直居中七种方法_south Joe的博客-CSDN博客_让子元素垂直水平居中显示html:<div class="container"> <div class="box">green</div> </div>第一种：定位+margin:auto.container { position: relative; width: 300px; height...https://blog.csdn.net/weixin_43962555/article/details/88988275

十四、track

        <track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。

        用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。

十五、盒子模型

        标准盒子模型 ＝ margin + border + padding + width （width = content ）

        IE盒子模型 ＝ margin + width（width = border + padding + content ）

 十六、元素类型

       nav、div、p是块状元素

        label、span是内联元素

        img是内联块状元素

十七、html5手册语义化标签 

article

section

aside

hgroup

header

footer

nav

time

mark

figure

figcaption

contextmenu+menu

 十八、Web程序对象作用域

        常用的有三个：请求作用域，会话作用域，应用上下文。 请求作用域req范围最小，需要的资源最少，作用当前请求 session会话作用于本次对话，每个对话都有JSessionID， ServletContext作用域范围大：web应用中所有都能够访问，生命周期和web容器一样长，维护所需资源多。 在满足需求内耗费的资源越小越好。

十九、section元素

         section元素 是html5中新增加的结构元素，它有更进一步的语义。表示页面中的一个内容区块，比如章节、页眉、页脚，或者页面中的其他部分。它可以与 h1, h2, h3, h4, h5等元素结合起来使用，表示文档结构。

二十、iframe

1、创建比一般的 DOM 元素慢了 1-2 个数量级

        iframe 的创建比其它包括 scripts 和 css 的 DOM 元素的创建慢了 1-2 个数量级，使用 iframe 的页面一般不会包含太多 iframe，所以创建 DOM 节点所花费的时间不会占很大的比重。但带来一些其它的问题：onload 事件以及连接池（connection pool）

2、阻塞页面加载

        及时触发 window 的 onload 事件是非常重要的。onload 事件触发使浏览器的 “忙” 指示器停止，告诉用户当前网页已经加载完毕。当 onload 事件加载延迟后，它给用户的感觉就是这个网页非常慢。

        window 的 onload 事件需要在所有 iframe 加载完毕后（包含里面的元素）才会触发。在 Safari 和 Chrome 里，通过 JavaScript 动态设置 iframe 的 SRC 可以避免这种阻塞情况

3、唯一的连接池

        浏览器只能开少量的连接到 web 服务器。比较老的浏览器，包含 Internet Explorer 6 & 7 和 Firefox 2，只能对一个域名（hostname）同时打开两个连接。这个数量的限制在新版本的浏览器中有所提高。Safari 3+ 和 Opera 9+ 可同时对一个域名打开 4 个连接，Chrome 1+, IE 8 以及 Firefox 3 可以同时打开 6 个

        绝大部分浏览器，主页面和其中的 iframe 是共享这些连接的。这意味着 iframe 在加载资源时可能用光了所有的可用连接，从而阻塞了主页面资源的加载。如果 iframe 中的内容比主页面的内容更重要，这当然是很好的。但通常情况下，iframe 里的内容是没有主页面的内容重要的。这时 iframe 中用光了可用的连接就是不值得的了。一种解决办法是，在主页面上重要的元素加载完毕后，再动态设置 iframe 的 SRC。

4、不利于 SEO

        搜索引擎的检索程序无法解读 iframe。另外，iframe 本身不是动态语言，样式和脚本都需要额外导入。综上，iframe 应谨慎使用。

iframe的用法

1：典型系统结构，左侧是功能树，右侧就是一些常见的table或者表单之类的。为了每一个功能，单独分离出来，采用iframe。
2：ajax上传文件。
3：加载别的网站内容，例如google广告，网站流量分析。

4： 在上传图片时，不用flash实现无刷新。

学习HTML：iframe用法总结收藏_super_marioli的专栏-CSDN博客是框架的一种形式，也比较常用到。 一：几个例子——演示iframe的基本用法例1： 不用多说了，iframe的各个属性含义如下：width插入页的宽； height插入页的高；scrolling 是否显示页面滚动条（可选的参数为 auto、yes、no，如果省略这个参数，则默认为auto）；frameborder  边框大小；注意：URL建议用绝对路径；传说中百https://blog.csdn.net/super_marioli/article/details/4437082

5： 跨域访问的时候可以用到iframe，使用iframe请求不同域名下的资源。

 二十一、HTML 音频/视频 方法

方法	描述
addTextTrack()	向音频/视频添加新的文本轨道。
canPlayType()	检测浏览器是否能播放指定的音频/视频类型。
load()	重新加载音频/视频元素。
play()	开始播放音频/视频。
pause()	暂停当前播放的音频/视频。

二十二、元素事件属性

        onblur：元素失去焦点时触发

        onfocus：元素聚焦时触发

        onsearch：用户向搜索域或文本搜索时触发

 二十三、TML5的数据存储方式

     WebStorage和WebSQLDatabase。 

1. WebStorage可用于临时或永久保存客户端的少量数据，WebSQLDatabase是客户端本地化的一套数据库系统，可以将大量的数据保存在客户端，无须与服务器端进行交互，极大地减轻了服务器端的压力。 
2. WebStorage存储是HTML5为数据存储在客户端提供的一项重要功能，分为两种：sessionStorage(保存会话数据)和localStorage(在客户端长期保存数据)。

•  sessionStorage对象：使用sessionStorage对象在客户端保存的数据时间非常短暂，该数据实质上还是被保存在session对象中。用户在打开浏览器时，可以查看操作过程中要求临时保存的数据，一旦关闭浏览器，所有使用sessionStorage对象保存的数据将全部丢失。 

1. 保存：保存数据只需调用setItem()方法，格式：sessionStorage.setItem(key,value)。参数key表示被保存内容的键名，参数value表示被保存的内容。一旦键名设置成功，则不允许修改，不能重复，如果有重复的键名，只能修改对应的键值。 
2. 读取：读取被保存的数据，应该调用sessionStorage对象中getItem()方法，格式：sessionStorage.getItem(key)。该方法将返回一个指定键名对应的键值，如果不存在，则返回一个null值。 

• localStorage对象：长期在客户端保存数据，应该使用localStorage对象，使用该对象可以将数据长期保存在客户端，直至人工清除为止。 

1. 保存：保存数据调用对象中的setItem()方法，格式：localStorage.setItem(key,value)。
2. 读取：与sessionStorage对象保存数据一样。 读取数据调用对象中的getItem()方法，格式：localStorage.getItem(key)。与sessionStorage对象读取数据一样。 localStorage对象可以将内容长期保存在客户端，即使是重新打开浏览器也不会丢失。
3. 清除：如果需要清除localStorage对象保存的内容，应该调用该对象的另一个方法removeItem()，格式：localStorage.removeItem(key)。一旦删除成功，与键名对应的相应数据将全部被删除。

 二十四、Input标签的step属性

        Step规定输入字段的合法数字间隔(如step=”2”,则合法数字可为-2，0，2，4等)

        Step属性的值为负数或0时默认为1，该属性可以配合max，min属性来创建合法值得范围。

        Step，max，min属性适用于<input>类型有:number,range,date,datetime,month,time,week

二十五、DOM的节点格式

        DOM树中总共分为如下几种节点格式：Element类型（元素节点）、Text类型（文本节点）、Comment类型（注释节点）、Document类型（document节点）。

        document可以说是一种节点格式，但节点树的根节点也叫document。

        所有的HTML elements（元素节点，其实就是HTML标签）都是element。

        comments属于注释节点

二十六、隐藏节点

        display：none指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生reflow与repaint

        visibility：hidden指的是元素不可见但存在，保留空间，不影响结构，故只产生repaint，但不可触发绑定事件

        opacity=0：指的是元素不可见但存在，保留空间，不影响结构，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的

二十七、slideUp()和slideDown

        slideUp()和slideDown都是jQuery函数，slideUp()通过使用滑动效果，隐藏被选元素，如果元素已显示出来的话。slideDown() 方法通过使用滑动效果，显示隐藏的被选元素。 

二十八、取得下级节点中的集合

$(‘#’).children();  //（只沿着 DOM 树向下遍历单一层级）查询直接的子元素。而不管子元素的子元素。

$(‘#’).html();  //返回的是dom结构。而不是集合

$(‘#’).contents();  //取得全部下级节点中全部项的集合

$(‘#’).find(“all”);   //并没有all这个元素

二十九、HTML5新增的表单元素

        autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height、list、max、min、multiple、pattern、placeholder、required、step、width。

三十、画圆

        Ctx.arc(x,y,r,0,Math.PI,true);是画半圆

        Ctx.arc(x,y,r,0,2Math.PI,true);画整个圆

三十一、DHTML

        DHTML实现了网页从Web服务器下载后无需再经过服务的处理，而在浏览器中直接动态地更新网页的内容、排版样式和动画的功能。例如，当鼠标指针移到文章段落中时，段落能够变成蓝色，或者当鼠标指针移到一个超级链接上时，会自动生成一个下拉式子链接目录等。

包括：

    ①动态内容(Dynamic Content)：动态地更新网页内容，可“动态”地插入、修改或删除网页的元件，如文字、图像、标记等。

    ②动态排版样式(Dynamic Style Sheets)：W3C的CSS样式表提供了设定HTML标记的字体大小、字形、样式、粗细、文字颜色、行高度、加底线或加中间横线、缩排、与边缘距离、靠左右或置中、背景图片或颜色等排版功能，而“动态排版样式”即可以“动态”地改变排版样式。

三十二、BFC(Block formatting context) 

它是一个独立的渲染区域，只有Block-level box参与,

什么是BFC？看这一篇就够了_Leon的博客-CSDN博客_bfcBFC定义BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。在解释什么是BFC之前，我们需要先知道Box、Formatting Context的概念。Box：css布局的基本单位Box 是 CSS 布局...https://blog.csdn.net/sinat_36422236/article/details/88763187

哪些情况会产生BFC:

1. 根元素(<html>)
2. 浮动元素（元素的 float 不是 none）
3. 绝对定位元素（元素的 position 为 absolute 或 fixed）
4. 行内块元素（元素的 display 为 inline-block）
5. 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
6. 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
7. 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
8. overflow 值不为 visible 的块元素
9. display 值为 flow-root 的元素
10. contain 值为 layout、content或 paint 的元素
11. 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
12. 网格元素（display为 grid 或 inline-grid 元素的直接子元素）
13. 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
14. column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

三十三、内联元素和块级元素

        内联元素是不可以控制宽和高、margin等；并且在同一行显示，不换行。

        块级元素时可以控制宽和高、margin等，并且会换行。

        1. inline ： 使用此属性后，元素会被显示为内联元素，元素则不会换行。

        inline是行内元素，同行可以显示，像span、font、em、b这些默认都是行内元素，不会换行，无法设置宽度、高度、margin、border。

        2. block ： 使用此属性后，元素会被现实为块级元素，元素会进行换行。  

        block，块元素，div、p、ul、li等这些默认都是块元素，会换行，除非设置float。

        3. inline-block ： 是使元素以块级元素的形式呈现在行内。意思就是说，让这个元素显示在同一行不换行，但是又可以控制高度和宽度，这相当于内敛元素的增强。(IE6不支持)。

        inline-block，可以同行显示的block，想input、img这些默认就是inline-block，出了可以同行显示，其他基本block一样。

三十四、日期

        date 选取日、月、年 month 选取月和年 week 选取周和年 time 选取时间（小时和分钟）。

 三十五、元素分类

 三十六、隐藏与显示

        .fadeIn()  使用淡入效果显示元素

        .fadeOut()  淡入效果隐藏元素

        .fadeToggle()  淡入效果显示 / 隐藏元素来回切换

        .fadeTo()  元素的透明度逐渐变化到制定的值

 三十七、doctype

        在HTML中，文档类型 doctype 的声明是必要的。在所有文档的头部，你都将会看到"<!DOCTYPE html>" 的身影。这个声明的目的是防止浏览器在渲染文档时，切换到我们称为“怪异模式(兼容模式)”的渲染模式。“<!DOCTYPE html>" 确保浏览器按照最佳的相关规范进行渲染，而不是使用一个不符合规范的渲染模式。

三十八、dom中HTMLDivElement的继承关系

 三十九、css选择器

        .a，.b｛“，”指相同的css样式｝；

        .a .b｛“ ”指后代元素｝；

        .a>.b｛“>”指子代所有元素｝；

        .a + .b｛这个“+”是选择相邻兄弟，叫做“相邻兄弟选择器”

        例：h1 + p {margin-top:50px;}

        这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。｝；

四十、CSS 百分比参照问题 

• 参照父元素宽度的元素：padding margin width text-indent

• 参照父元素高度的元素：height

• 参照父元素属性:font-size line-height

• 特殊：相对定位的时候，top(bottom) left(right)参照的是父元素的内容区域的高度与宽度，而绝对定位的时候参照的是最近的定位元素包含padding的高度与宽度

四十一、 manifest 文件

        manifest 文件是一个简单的文本文件，列举出了浏览器用于离线访问而缓存的资源。