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. nyoj1076-方案数量 【排列组合 dp】

    http://acm.nyist.net/JudgeOnline/problem.php?pid=1076 方案数量 时间限制:1000 ms  |  内存限制:65535 KB 难度:2   描述 ...

  2. 91. Decode Ways (Array; DP)

    A message containing letters from A-Z is being encoded to numbers using the following mapping: 'A' - ...

  3. phpStudy5——php导入其他php文件（php文件的引入）

    前言: 通过前边几个例子,相信大家都会有一个疑惑了,就是每个请求数据库的php页面,都要写一次连接数据库的代码,这个肯定是有违代码复用原则的.那么怎么解决这个问题呢? 在php中可以通过include ...

  4. php SESSON共享 (mysql方式)

    为什么要进行session共享? 因为一些大型网站,通常会有很多服务器,每个服务器运行不同的业务模块,并使用二级域名(或是完全不同的域名),而用户系统是统一的,通过登陆名.密码来登陆各模块.用户数据放 ...

  5. 【SQL模板】二.创建表视图模板TSQL

    ---Name: 创建表视图模板.sql ---Purpose: 用于创建 数据库中 新的数据表/视图 ---Author: xx ---Time: 2015-12-18 10:26:06 ---Re ...

  6. Ui设计流行趋势，对颜色的探讨

    设计风向转换的趋势越来越短,在设计圈中,流行设计的跟新换代更是快.在设计时间越来越短的今天,在经理领导不断催促的时下,如何准确的把握当下的流行趋势,如何在设计之初就能定好设计的基调.这对于还是刚入设计 ...

  7. Debian9开机运行Python脚本

    吾星喵 关注 2018.04.14 15:30 字数 214 阅读 202评论 0喜欢 1 Debian9开机运行Python脚本 Debian 9.x "stretch" 解决 ...

  8. 面向对象与基于对象 学习记录 thread举例

    /********************************************************************/* @file* @author def< qq gr ...

  9. sqlserver将数据库的数据导成excel文档方法

    sqlserver将数据库的数据导成excel文档方法 最近公司需要下载uniport的数据跟之前的数据进行对比,所以避免不了需要将数据库的数据导出来,把SQLServer表中的数据导出为Excel文 ...

  10. 2018.09.16 bzoj1086: [SCOI2005]王室联邦（贪心）

    传送门 就是给树分块. 对于一个节点. 如果它的几棵子树加起来超过了下限,就把它们分成一块. 这样每次可能会剩下几个节点. 把它们都加入栈中最顶上那一块就行了. 代码: #include<bit ...