一、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. ZooKeeper 增加Observer部署模式提高性能

    Observer:在不伤害写性能的情况下扩展ZooKeeper. 虽然通过Client直接连接到ZooKeeper集群的性能已经很好了,可是这样的架构假设要承受超大规模的Client,就必须添加Zoo ...

  2. [Java中实现国际化] - 配合thymeleaf实现中英文自动切换(多语言)

    MOOC该链接第三章第二节 尚硅谷SpringBoot全集 web开发国际化 xjbo  (7天,过期可以留言索取) resources下建立文件 上到下为: 默认的,英语(美国),中文(中国) en ...

  3. HDU 2242 考研路茫茫——空调教室（边双连通分量+树形dp+重边标号）

    http://acm.hdu.edu.cn/showproblem.php?pid=2242 题意: 思路:首先求一下双连通分量,如果只有一个双连通分量,那么无论断哪根管子,图还是连通的. 最后只需要 ...

  4. UVa 10118 免费糖果（记忆化搜索+哈希）

    https://vjudge.net/problem/UVA-10118 题意: 桌上有4堆糖果,每堆有N颗.佳佳有一个最多可以装5颗糖的小篮子.他每次选择一堆糖果,把最顶上的一颗拿到篮子里.如果篮子 ...

  5. UVa 714 抄书（贪心+二分）

    https://vjudge.net/problem/UVA-714 题意:把一个包含m个正整数的序列划分成k个非空的连续子序列,使得每个正整数恰好属于一个序列.设第i个序列的各数之和为S(i),你的 ...

  6. 深蓝色 --ppt

    Deep Learning of Binary Hash Codes for Fast Image Retrieval [Paper] [Code-Caffe] 1. 摘要 针对图像检索问题,提出简单 ...

  7. 退出shell 脚本

    #!/bin/bash export TOP_PID=$$ trap 'exit 1' TERM exit_script(){ kill -s TERM $TOP_PID } echo "b ...

  8. C#中正确使用enum做Key的姿势

    C#中自定义enum,然后将其作为Dictionary的Key,通常的做法如下: using System; using System.Text; using System.Collections.G ...

  9. Java 集合-List接口和三个子类实现

    List List:有序的 collection(也称为序列).此接口的用户可以对列表中每个元素的插入位置进行精确地控制.用户可以根据元素的整数索引(在列表中的位置)访问元素,并搜索列表中的元素.与 ...

  10. 笔试题目练习-python

    以下内容包含笔试练习库的题目和代码,题目来自牛客网,仅供参考. # coding = utf-8 import sys def test1(): """ 题目描述:计算字 ...