一、HTML的基础结构

以上图片可以看出HTML的基础结构：

文档声明+<html>根元素（也叫顶级元素）------》<html>里包括<head>元素+<body>元素

文档声明：http://www.cnblogs.com/Jm-jing/articles/6973877.html、

<head>元素：主要包括三大类信息：

1、网页基本信息

  • 文档标题（浏览器标签中显示的文本）：<title>深入了解 head 元素</title>
  • 编码格式：<meta charset="utf-8">（你可能还看到 gb2312格式，不过不建议使用），如果你的页面出现乱码，那一般就是编码格式不对
  • 视窗设置：<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • 搜索引擎优化相关内容： <meta name="description" content=“帮助你深层次了解HTML文档结构”>
  • IE浏览器版本渲染设置：<meta http-equiv="X-UA-Compatible" content="ie=edge">

2、其他文件链接

  • CSS 文件：<link rel="stylesheet" type="text/css" href="style.css">
  • JavaScript 文件：<script src=“script.js"></script>

3、厂商定制

比喻开启双核浏览器先河的360浏览器就定制了一个默认使用哪个内核来渲染页面，可以设置为webkit内核、IE标准，IE兼容三种模式。代码分别为：

<meta name="renderer" content="webkit"> <!-- 默认webkit内核 -->


<meta name="renderer" content="ie-stand"> <!-- 默认IE标准模式 -->


<meta name="renderer" content="ie-comp"> <!-- 默认IE兼容模式 -->

相关参考链接：

　 http://www.cnblogs.com/Jm-jing/articles/6986967.html

　 http://www.cnblogs.com/Jm-jing/articles/6986998.html

补充：

从理论上讲，<html>元素的子元素只能是<body>元素以及<head>元素，但是有一些网页却将<script>元素放在了<body>元素外，也就是<html>元素下，但是，却没有报错？

HTML5标准中的HTML语法规则，如果在</body>后再出现<script>或任何元素的开始标签，都是parse error，浏览器会忽略之前的</body>，即视作仍旧在body内。所以实际效果和写在</body>之前是没有区别的。

详情请看：http://www.cnblogs.com/Jm-jing/articles/6974074.html

二、HTML树

树的特点：以主干为主，同时从主干中延伸出很多的分支。因此，我们可以将HTML的代码想象成一棵HTML树，这样便于我们去理解。

父元素：包含另一个元素的元素是被包含元素（即子元素）的父元素【一个元素可以拥有多个子元素，但只能有一个父元素】

兄弟元素：具有同一个父元素的几个元素互称为兄弟元素

补充一些提高Web性能的注意事项：　

1、避免过多层嵌套：

　层级越深的节点在初始化构建时，所占内存越多。通过浏览器HTML解析器会将整个HTML文档的结构存储为DOM树结构。当节点嵌套层次越深，构建的DOM书层    次也越深。所以，我们在写HTML页面的时候，要想清楚要以怎样简洁却又能表现整个HTML页面的结构去写代码。

2、显示设置图片的宽高

有时需要在页面加载完之前，就对页面布局进行定位。若页面中的图片没指定尺寸，或尺寸与实际图片大小不符，浏览器会在图片下载完成后再"回溯"该图片并重新显示，从而浪费时间。所以最好为页面的图片设置指定尺寸

三、HTML元素

元素的定义：两个标签连同它们之间的内容构成元素。

元素的用途：是用来向浏览器说明文档内容的工具 。其效果体现在内容之上

元素的特点：1、不同的元素有不同的确切含义。2、元素名不区分大小写。3、语义元素可用来说明内容的含义以及内容的不同部分之间的关系。

元素类型：

1、元数据元素（metadata element）

　　定义：用来构建HTML文档的基本结构，就如何处理文档的浏览器提供信息和指示

　　元数据元素：<tittle> <base> <meta> <link> <script> <noscript>等等

2、流元素（flow element）

　　定义：是短语元素的超集，即所有短语元素都是流元素，但并非所有流元素都是短语元素

　　流元素有：<noscript> <a>等等

3、短语元素（phrasing element）

　　定义：是HTML的基本成分

　　短语元素有：<script> <noscript> <a> <b>等等

4、其他元素

　　有些元素无法归入以上3种类型，这些元素要么没有特别意义，要么只能用在一些非常有限的情况下

　　例：<li>元素只能有3中父元素（<ul>/<ol>/<menu>）

详情可参考：《HTML5权威指南》

补充

1、空元素

定义：元素的开始和结束标签间并非一定有内容，没有内容的元素成为空元素。（有些空元素为空时没有意义---<code>）

<p></p>

2、自闭合标签

空元素可以更简洁地使用一个标签表示

<code/>

3、虚元素

定义：有些元素只能使用一个标签，在其中放置任何内容都不符合HTML规范。

表示：1、只使用开始标签----><hr>

　　　2、在1的基础上加一个斜杠符号，其形式与空元素一致

虚元素有：<img>、<hr>

4、行内元素以及块级元素

块级元素：

　　特点：默认占据正行宽度

　　例：<p> <div> <h1> <ul> <ol> <li>

行内元素：

　　特点：同行显示，默认宽度由内容决定

　　例：<a> <span> <i> <em> <img>

四、全局属性

　　定义：它们用来配置所有元素的共有行为，全局属性可以用在任何一个元素身上，不过这不一定会带来有意义或者有用的行为改变。

详情请参考：http://www.w3school.com.cn/tags/html_ref_standardattributes.asp

五、总结

1、一个HTML页面先从声明出发，到结构，再到元素，最后到属性。就是说，一个HTML页面肯定会包含声明+结构+元素+属性这4个基础。

2、在写一个网页的结构前，要先想好页面的布局

3、尽量做到语义化（多用H5元素），也是利于SEO

4、为了提高性能，谨记不要多层嵌套，尽量做到以最小的嵌套做出最好的结构

5、一个好的页面，谨记要完善好<head>元素里的内容，利于SEO

对HTML（HyperText Markup Language)的认识以及总结的更多相关文章

  1. html(HyperText Markup Language)--超文本标记语言

    1.html的简介? * 什么是html? ** HyperText Markup Language:超文本标记语言,网页语言 ** 超文本:超出文本的范畴,使用html可以轻松实现这样操作: ** ...

  2. 00HyperText Markup Language

    HyperText Markup Language HTML超文本标记语言是一种用于创建网页的标准标记语言用于显示网页内容,HTML运行在浏览器上,由浏览器来解析,您可以使用 HTML 来建立自己的 ...

  3. XML EXtensible Markup Language

    1.基础:XML设计被用来传输和存储数据:全称是EXtensible Markup Language.它的设计宗旨是传输数据,而不是显示数据.xml的标签没有被预定义,需要由用户自行定义标签.xml被 ...

  4. 基于.NET Core的Hypertext Application Language（HAL）开发库

    HAL,全称为Hypertext Application Language,它是一种简单的数据格式,它能以一种简单.统一的形式,在API中引入超链接特性,使得API的可发现性(discoverable ...

  5. HTML （Hyper Text Markup Language） 常用标签

    HTML是什么?  英文全称:Hyper Text Markup Language  中文全称:超文本标记语言  网页主要由 机构  表现 行为  组成 什么是标签?    < > 里的叫 ...

  6. HTML：Hyper Text Markup Language 超文本标记语言

    1.HTML是什么? *Hyper Text Markup Language 超文本标记语言 *Hyper Text:超链接.把不同空间的资源,整合在一起,形成逻辑上的网状结构. *Markup La ...

  7. 我眼中的SAML (Security Assertion Markup Language)

    提到SAML (Security Assertion Markup Language), 很多人都会联想到单点登录SSO.那么Saml到底是什么,它跟sso到底有什么联系?这里给大家分享一下我在读完了 ...

  8. Hypertext Application Language（HAL）

    Hypertext Application Language(HAL) HAL,全称为Hypertext Application Language,它是一种简单的数据格式,它能以一种简单.统一的形式, ...

  9. XML简介——可扩展标记语言（Extensible Markup Language）

    (What) XML是什么? XML指可扩展标记语言(Extensible Markup Language) 1.  XML是一种标记语言,类似HTML. 2.  XML具有自我描述性 3.  XML ...

随机推荐

  1. 九数组分数|2015年蓝桥杯B组题解析第五题-fishers

    九数组分数 1,2,3...9 这九个数字组成一个分数,其值恰好为1/3,如何组法? 下面的程序实现了该功能,请填写划线部分缺失的代码. #include <stdio.h> void t ...

  2. 三羊献瑞|2015年蓝桥杯B组题解析第三题-fishers

    三羊献瑞 观察下面的加法算式: 祥 瑞 生 辉 三 羊 献 瑞 三 羊 生 瑞 气 (如果有对齐问题,可以参看[图1.jpg]) 其中,相同的汉字代表相同的数字,不同的汉字代表不同的数字. 请你填写& ...

  3. User-Defined Table Types 用户自定义表类型

    Location 数据库--可编程性--类型--用户定义表类型 select one database--> programmability-->types-->user--defi ...

  4. Visual Studio 项目模板制作(四)

    上一篇,介绍了VSIX安装模板的方法,那么,你是不是要问,为何有些项目模板却可以有向导,那是怎么做到的 今天这篇文章就是介绍如何为自己的模板添加向导,向导可以引导你完成项目中各种参数的设置,比如项目创 ...

  5. Ubuntu 14.04 更新gcc版本至4.9.2

    参考: ubuntu 14.04 更新 gcc/g++ 4.9.2 Ubuntu 14.04 更新gcc版本至4.9.2 1.更新源,安装gcc v4.9.2 $ sudo add-apt-repos ...

  6. 【转载】TCP 与 UDP 的区别

    原文地址:TCP 与 UDP 的区别 首先咱们弄清楚,TCP协议和UCP协议与TCP/IP协议的联系,很多人犯糊涂了,一直都是说TCP/IP协议与UDP协议的区别,我觉得这是没有从本质上弄清楚网络通信 ...

  7. 《剑指offer》第三十三题（二叉搜索树的后序遍历序列）

    // 面试题33:二叉搜索树的后序遍历序列 // 题目:输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果. // 如果是则返回true,否则返回false.假设输入的数组的任意两个数字都 ...

  8. css3转盘

    此效果涉及到 : 1. css 画图形 2. css3 动态效果 3. 贝塞尔曲线 用法 <style> .lds-hourglass { display: inline-block; p ...

  9. js的单双引号

    单引号开始: 有时候上边的不行 双引号开始. 一般最外边是单引号 属性是双引号. 如果属性中还是需要一个属性的话,那么我们用\“,里边用‘+data.id+'来区分. 今天又一次遇到一次单双引号,花了 ...

  10. English trip -- VC(情景课) 8 A Get ready

    Words cashier  # 收银员                a cashier counts money   收钱 custodian  # 清洁工     a custodian  cl ...