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. CNN、RNN、DNN

    一:神经网络 技术起源于上世纪五.六十年代,当时叫感知机(perceptron),包含有输入层.输出层和一个隐藏层.输入的特征向量通过隐藏层变换到达输出层,由输出层得到分类结果.但早期的单层感知机存在 ...

  2. SSH框架整合过程总结

    ---------------------siwuxie095                                 SSH 框架整合过程总结         (一)导入相关 jar 包(共 ...

  3. collections之命名元组

    #python中没有为我们提供可命名的tuple的类,这个类需要我们自己来定义,下面我们就自己来定义一个类,然后namedtuple就是可以通过名称来get#tuple中的元素,python中的tup ...

  4. HttpClient实战二：单线程和多线程连接池实例

    为什么使用HTTP连接池? 随着系统架构风格逐渐向前后端分离架构,微服务架构转变,RestFul风格API的开发与设计,同时SpringMVC也很好的支持了REST风格接口.各个系统之间服务的调用大多 ...

  5. WCF生成客户端代理对象的两种方法的解释

    最近在封装WCF,有一些很好的实践就记录下来,大家可以放心使用,所有代码都已经调试过.如果有高手可以大家探讨一下. 在WCF中有两种不同的方法可以用于创建客户端服务对象,他们分别为: 1. 代理构造法 ...

  6. linux下常用文件操作命令

    1.find命令 按内容查找文件 find /home/vpopmail/domains/best-21ixi.jp/bounce/Maildir/new/ -name "*" | ...

  7. Linux indent命令

    一.简介 indent可辨识C的原始代码文件,并加以格式化,以方便程序设计师阅读. 二.选项 http://www.cnblogs.com/xuxm2007/archive/2011/11/03/22 ...

  8. Windows 7 手动添加受信任证书教程

    步骤如下: 1.点击开始-运行,如下图: 2.弹出"控制台"窗口如下,如下图: 3.点击"文件-添加/删除管理单元",如下图: 4.选择"证书&quo ...

  9. TF Boys (TensorFlow Boys ) 养成记（二）： TensorFlow 数据读取

    TensorFlow 的 How-Tos,讲解了这么几点: 1. 变量:创建,初始化,保存,加载,共享: 2. TensorFlow 的可视化学习,(r0.12版本后,加入了Embedding Vis ...

  10. 【Maven】安装及配置（Win）

    Maven Maven是一款自动化构建的工具软件,它是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具. 检查环境 maven是基于Java的工具软件, ...