HTML/HTML5

一、文档加载顺序。

文档入下，数字编号为加载顺序。
<html><!--1-->

    <head><!--2-->

        <link href="link/common.css" rel="stylesheet" /><!--3-->

        <script src="js/v2.js"></script><!--4-->

    </head>

    <body><!--5-->

        <div>

            <span></span><!--6-->

            v2是一个轻量级的前端框架。<!--7-->

        </div>

        <img alt="" src="yep.png"><!--8-->

        <p>vue是一套灵活的html标记类型的前端框架。<!--9--></p><!--10-->

    </body>

</html>

{?} 可以利用加载顺序的原理做什么？

二、文档加载规则（文档阻塞）。

{?} 文档加载阻塞会造成什么问题？

[A] 界面卡顿、变形、闪烁等。

{?} 哪些内容会阻塞文档加载？

[A] 只有 脚本文件 会阻塞文档加载。☆

三、解决文档加载。

{?} 解决文档加载有哪几种方式？分别在哪个版本开始支持？原理是什么？

[A]

  • 可以在脚本文件上加属性标记(defer[HTML4.1]/async[HTML5])。
  • 异步加载。

{?} 两种标记有什么区别？

[A]

  • 书写规范。

    • defer 书写规范入下。
    <script src="js/v2.js" defer="defer"></script><!--推荐价值对的方式（``HTML4.1``不支持单标记）-->
    • async 书写规范入下。
    <script src="js/v2.js" async></script><!--推荐单标记的方式（``HTML5``可以良好的支持单标记）

  • 脚本执行时间。

    • 绿色 ---- HTML解析
    • 蓝色 ---- 脚本网络读取。
    • 红色 ---- 脚本执行。

    结论：

    • 实现原理：都是异步加载。
    • 执行时间：defer 总是在HTML解析完成后执行。async 在网络请求完成时，及时执行。

四、文档解析。

  • 单标签和双标签。

    • HTML的解析时，所有标签应该有闭合标记。
    • 单标签的闭合标记以 /> 结尾（如:<img/>），理论上单标签元素不允许有子元素。
    • 双标签的闭合标记以 </{nodeName}> 结尾（如：<div></div>）。

  • 块级元素、行级元素、行级-块级元素。

    • 块级元素[display:block]

      • 特点：

        • 每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。
        • 元素的高度、宽度、行高和顶底边距都是可以设置的。
        • 元素的宽度如果不设置的话，默认为父元素的宽度。
      • 常见块级元素：div、p、h1...h6、ol、ul、dl、table、address、blockquote、form
    • 行级元素[display:inline]
      • 特点：

        • 可以和其他元素处于一行，不用必须另起一行。
        • 元素的高度、宽度及顶部和底部边距不可设置。
        • 元素的宽度就是它包含的文字、图片的宽度，不可改变。
      • 常见行级元素：a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、span、strike、strong、sub、sup、textarea、tt、u、var
  • 行级-块级元素[display:inline-block]
    • 特点：

      • 可设置高度、宽度、行高以及顶和底边距，且可元素共用一行。
    • 常见行级-块级元素：无。

五、元素属性。

  • 标准属性。

    • 标准属性包含属性名称和属性值。
    • 定义规范。
      • 属性名称和属性值用等于符号拼合，属性值包含在单引号或双引号中间。多个属性之间用空格分开。
    <div aria-lib="v2" arai-support="IE9+"></div>

  • 特殊属性。

    • 属性值和属性名称相同，属性值唯一，且DOM解析时具有特殊含义。
    • 定义规范。
      • 只写属性名称（可按照标准属性属性）。
    <input readonly required/>

六、标签特性和属性特性。

  • 不同标签的默认属性和样式有所区别，请使用合适的标签做界面呈现，减少不必要的样式。

  • 不同的属性在用户交互中有不同的响应，请使用合适的属性，减少不必要的脚步。

HTML/HTML5的更多相关文章

  1. 使用HTML5开发Kinect体感游戏

    一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...

  2. 读书笔记：《HTML5开发手册》--HTML5新的结构元素

    读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...

  3. HTML5 Boilerplate - 让页面有个好的开始

    最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用.   一:HTML5 ...

  4. 戏说HTML5

    如果有非技术人员问你,HTML5是什么,你会怎么回答? 新的HTML规范... 给浏览器提供了牛逼能力,干以前不能干的事...(确切地说应该是给浏览器规定了许多新的接口标准,要求浏览器实现牛逼的功能. ...

  5. nw.js桌面软件开发系列 第0.1节 HTML5和桌面软件开发的碰撞

    第0.1节 HTML5和桌面软件开发的碰撞 当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Win ...

  6. Web大前端时代之：HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  7. 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  8. HTML5 介绍

    本篇主要介绍HTML5规范的内容和页面上的架构变动. 目录 1. HTML5介绍 1.1 介绍 1.2 内容 1.3 浏览器支持情况 2. 创建HTML5页面 2.1 <!DOCTYPE> ...

  9. HTML5 语义元素(一)页面结构

    本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.< ...

  10. HTML5 input元素新的特性

    在HTML5中,<input>元素增加了许多新的属性.方法及控件.本文章分别对这三方面进行介绍. 目录 1. 属性 2. 方法 3. 新控件 1. 属性 <input>元素在H ...

随机推荐

  1. 二叉树的层次遍历 · Binary Tree Level Order Traversal

    ［抄题］: 给出一棵二叉树,返回其节点值的层次遍历(逐层从左往右访问) ［思维问题］: ［一句话思路］: 用queue存每一层 ［输入量］:空: 正常情况:特大:特小:程序里处理到的特殊情况:异常情况 ...

  2. 53. Maximum Subarray最大求和子数组12 3（dp）

    ［抄题］: Find the contiguous subarray within an array (containing at least one number) which has the la ...

  3. 一个新的threejs理论基础学习网站

    网站:  https://webglfundamentals.org/ 

  4. Codeforces 710C. Magic Odd Square n阶幻方

    C. Magic Odd Square time limit per test:1 second memory limit per test:256 megabytes input:standard ...

  5. HDU 4499.Cannon 搜索

    Cannon Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others)Total Subm ...

  6. [Groovy] List和Map用法搜集

    http://chenfeng0104.iteye.com/blog/609075 http://www.cnblogs.com/muzi1994/p/5169928.html https://zhi ...

  7. Storm 系列（三）Storm 集群部署和配置

    Storm 系列(二)Storm 集群部署和配置 本章中主要介绍了 Storm 的部署过程以及相关的配置信息.通过本章内容,帮助读者从零开始搭建一个 Storm 集群. 一.Storm 的依赖组件 1 ...

  8. 主成分_CPA

    基本原理:方差最大原理 通过正交变换将原相关性变量转化为不相关的变量 第一主成分:线性组合  方差最大 第二主成分:线性组合,COV(F1,F2)=0 步骤: 原始数据标准化:DataAdjust(m ...

  9. stl string 小练习

    最近没啥可写的  这里写下做的STL小练习 作为记录 去除指定字符串中的空格 获取文件名并根据名字创建临时文件,以TMP后缀结尾,已经为TMP后缀结尾文件则创建以XXX后缀结尾文件 读取一行输入内容 ...

  10. Directory /usr/local/hadoop/tmp/tmp/hadoop-root/dfs/name is in an inconsistent state: storage directory does not exist or is not accessible

    解决方法: <property> <name>hadoop.tmp.dir</name> <value>/usr/local/hadoop/tmp< ...