一、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. LightOJ 1199 Partitioning Game（sg函数）题解

    题意:可以把一堆石子分成不相等的两堆,不能操作为败 思路:把一个石子拆成两个,变成了两个独立的游戏,mex里加上两者的sg异或.sg打表. 代码: #include<set> #inclu ...

  2. NS3 一个小问题

    可能会在执行./waf 命令的时候遇到这个问题,比如我想编译 /home/wasdns/Documents/NS3/ns-3.17/scratch 目录下的一个文件:newnsthree.cpp 编译 ...

  3. NOI 8785 装箱问题（0-1背包）

    http://noi.openjudge.cn/ch0206/8785/ 描述 有一个箱子容量为V(正整数,0<=v<=20000),同时有n个物品(0< n<n<=30 ...

  4. python正则表达式re模块详细介绍--转载

    本模块提供了和Perl里的正则表达式类似的功能,不关是正则表达式本身还是被搜索的字符串,都可以是Unicode字符,这点不用担心,python会处理地和Ascii字符一样漂亮. 正则表达式使用反斜杆( ...

  5. windows 命令行中使用winrar

    加入环境变量即可 我的电脑右键属性->高级->环境变量->系统变量->编辑 变量名:path 变量值:C:/Program Files/WinRAR; --变量值为WinRAR ...

  6. bash Shell 中如何实现条件判断之if判断

    http://blog.51cto.com/lovelace/1211353 bash中如何实现条件判断?条件测试类型:    整数测试    字符测试    文件测试 一.条件测试的表达式:     ...

  7. Mutex, semaphore, spinlock

    Mutex是一把钥匙,一个人拿了就可进入一个房间,出来的时候把钥匙交给队列的第一个.一般的用法是用于串行化对critical section代码的访问,保证这段代码不会被并行的运行. Semaphor ...

  8. php7-soap调用wsdl接口报错：Could not connect to host

    由php5.6升级到php7.1以上版本,在用soap调用wsdl接口是报错:Could not connect to host 后来经过排查是centos服务器上装有2个版本的openssl造成的. ...

  9. Android程序员眼中世界上最遥远的距离

    世界上最遥远的距离,是我在if里你在else里,似乎一直相伴又永远分离: 世界上最痴心的等待,是我当case你是switch,或许永远都选不上自己: 世界上最真情的相依,是你在try我在catch. ...

  10. Jersey 2.x 从Maven Archetype 创建一个新项目

    创建 Jersey 工程需要使用 Apache 的 Maven 软件工程和管理工具.所有的Jersey产品模块都可以在 Maven中央库 中找到.这样的话 Jersey 可以非常容易和其他基于 Mav ...