一、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. 通过jquery获得某个元素的位置, 透明div, 弹出框, 然后在旁边显示toggle子级联菜单-hover的bug解决

    jquery的"筛选选择器", 都是用冒号开头的, 即, 冒号选择器就是 筛选选择器.如: :first, :last, :eq(index), :first-child,...等 ...

  2. Docker 下安装 Spark

    1. 安装Docker, 见上篇. 2. 安装ubuntu:    docker run --name dcSpark ubuntu 3. 运行 Bash:     docker exec -ti d ...

  3. JavaScript:正则表达式 全局

    关于正则表达式的 RegExp方法:test,exec, String 方法:match,search, 全局 g var str = "abababa"; var re = /a ...

  4. ZooKeeper与Kafka相关

    Kafka集群搭建: https://www.cnblogs.com/likehua/p/3999538.html https://www.cnblogs.com/mikeguan/p/7079013 ...

  5. php跨域

    <?php header('Content-type:text/html; charset="utf-8"'); $url = 'http://10.32.41.194:80 ...

  6. label表单的关联性

    <input type="checkbox" id="cr" /> <label for="cr">点击关联复选框& ...

  7. 从nodejs到在线商城

    nodejs安装express开发框架 (开发环境:mkdir nodeshop && cd nodeshop > npm init > npm install expre ...

  8. UVa 11300 分金币

    https://vjudge.net/problem/UVA-11300 题意: 圆桌上有n个人,每个人都有一定的初始金币,每个人可以给他旁边的人一些金币,最终使每个人的金币数相等.计算最少需要转手的 ...

  9. 用python生成器实现杨辉三角

    先看杨辉三角的形态: 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 1 5 10 10 5 1 上学的时候大多是用c语言的两层for循环在实现,现在我们尝试用生成器来实现. 先说思路:我 ...

  10. c语言 数组合并

    #include<stdio.h> int main() { int m,n,i,j,k; printf("Enter no. of elements in array1:\n& ...