一·什么是HTML

HTML（HyperText Markup Language）是超文本标记语言，“超文本”的意思就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。HTML不是一种编程语言，而是一种标记语言。所谓的标记语言实际上就是一套标记标签。总之，HTML的作用就是通过标记标签来描述网页，使得网页的结构在浏览器中展现出来。

二·HTML的结构

1.骨架

HTML有自己的语法骨架格式：

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>My test page</title>

  </head>

  <body>

    <img src="data:images/firefox-icon.png" alt="My test image">

  </body>

</html>

2.标签

以下图这个标签为例

这样的标签一般包括以下几部分：
1.开始标签（The opening tag）：这里包含了元素的名称（本例为p），被开、闭尖括号所包围。这表示元素从此开始或者开始起作用——在本例中即段落由此开始。
2.闭合标签（The closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾——这表示元素在此结束——在本例中即段落在此结束。
3.内容（The content）：这是一个元素的内容，这个例子中就是所输入的文本本身。
4.元素（The element）：开标签、闭标签与内容相结合，便是一个完整的元素。

3.元素的属性

元素有时候会有属性，比如下图：

属性（Attribute）包含了关于元素的一些额外信息，这些信息不会出现在内容中，但是一般会影响元素的显示或者动作。上面的例子中，class是一个属性名，editor-note是属性的值。
一个属性一般包括以下三点：

在属性与元素名称（或上一个属性，如果有超过一个属性的话）之间的空格符。
属性的名称，并接上一个等号。
由引号所包围的属性值。

4.元素之间的嵌套

我们可以将一个元素置于其他元素之中，这种方式被称为嵌套，例如我们强调某一部分文字，可以使用元素包裹，意味着这段文字被强调：
My cat is very grumpy.
在嵌套过程中，标签的顺序是很重要的，在这个例子中我们首先使用 p 标签，然后是 strong 标签，接着我们需要先闭合 strong 标签，最后再闭合 p 标签。下面是个错误的示范：
My cat is very grumpy.

5.空元素

有一些元素并不包含内容，也没有闭标签，例如“骨架”中的<img>元素：
<img src="data:images/firefox-icon.png" alt="My test image">
它包含了两个属性，但是这里并没有 </img> 闭合标签，也没有内部内容。因为图像元素不需要包含内容来产生效果，它的作用是向其所在的位置嵌入一个图像。

三.解析HTML文档

我们再回头看我们的HTML骨架：

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>My test page</title>

  </head>

  <body>

    <img src="data:images/firefox-icon.png" alt="My test image">

  </body>

</html>

<!DOCTYPE html>用于声明文档类型，文档类型的声明必须位于HTML的第一行，它的意思是该HTML是HTML5。如果是其他版本的HTML那么声明方法会不同，但是我们现在只要用HTML5的声明就可以了。具体其他HTML版本的声明可以参考HTML <!DOCTYPE> 标签

浏览器解析HTML有三种方式：
1.标准模式（非怪异模式）：在该模式中，页面按照HTML与CSS的定义渲染。
2.怪异模式：在该模式中则尝试模拟更旧的浏览器的行为。
3.部分怪异（近乎标准）模式：一些浏览器（例如，那些基于Mozilla的Gecko渲染引擎的，或者Internet Explorer 8在strict mode下）也使用一种尝试于这两者之间妥协的“近乎标准”(almost standards)模式，实施了一种表单元格尺寸的怪异行为，除此之外符合标准定义。
总结：一个不含任何 DOCTYPE 的网页将会以怪异(quirks) 模式渲染。HTML5提供的<DOCTYPE html>是标准模式，向后兼容的, 等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。

<html>元素包含了整个页面的内容，有时也被称作根元素或根标签。
<head>元素规定了文档相关的配置信息，包括文档的标题，引用的样式和脚本等等，<head>标签中的内容一般不会直接出现在页面中。具体内容可以参考<head>标签里有什么? Metadata-HTML中的元数据
<body>元素含了想让用户在访问页面时看到的内容，不管是文本，图像，视频，游戏，可播放的音轨或其他内容。
<meta charset="utf-8">元素指定了当前的字符编码是UTF-8，它包括了非常多人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容，具体的字符编码原理可以参考字符编码笔记：ASCII，Unicode 和 UTF-8
<meta>元素用于表述那些不能由其他元素表述的任何元数据，包括页面的说明，关键字，最后修改日期，和其它的元数据。具体可以参考HTML meta标签总结与属性使用介绍、<meta> - HTML（超文本标记语言） | MDN
<title>元素设置了页面的标题，标题显示在浏览器标签页上，而且在你将网页添加到收藏夹或喜爱中时将作为默认名称。

四·HTML其他

1.关于属性

（1）布尔属性

有时候我们会看到一些属性没有值，但是仍然合法，例如：<input type="text" disabled>（disabled属性用于使表单输入变为不可用(变灰色)，此时用户不能向他们输入任何数据。）只有当属性值和属性名相等的时候才能这样使用属性，这是一种简写。

（2）属性值的引号

有一些粗糙的网站中会用一些奇怪的标记风格，有的开发者会不给属性值加引号，有时浏览器会误解我们的标记，始终添加引号会避免很多问题，使得代码更易读。

（3）单引号或双引号

属性值用单引号或者双引号都可以，这只是代码风格的问题，但是千万不要在一条属性值里混用，尽量避免在同一套代码中混用，这样可以增加你代码的易读性。而如果你已经使用了一种引号，在这个引号中你可以嵌套另外一种引号。

2.HTML中的空白

有一些代码中会包含很多的空格，但是实际上这是没有必要的，例如下面两端代码是等价的：

<p>Dogs are silly.</p>

<p>Dogs        are

         silly.</p>

无论用了多少空白（包括空白字符和换行），当我们渲染这些代码的时候，HTML解释器会将连续出现的空白字符减少为一个单独的空格符·

3.HTML中的特殊字符

在HTML中，<、>、"、'、&是特殊字符，它们本身就是HTML语法的一部分，因此，如果直接把它们包含进我们的文本中有时会出现错误，如果想要在文本中使用它们就必须使用字符引用（表示字符的特殊编码），它们每个字符以&开始，以;结束，具体如下表：

原义字符	等价字符引用
<	`<`
>	`>`
"	`"`
'	`'`
&	`&`

维基百科这一篇中收录了全部的字符引用表：XML和HTML字符实体引用列表

4.HTML注释

就如同大部分的编程语言一样，在HTML中也可以书写注释，注释是被浏览器忽略，且对用户不可见的，它们的目的是允许我们来描述代码的工作的。如果我们在若干年以后重新查看我们的代码库，或者处理别人的代码，注释是很有用的。为HTML添加注释，需要特殊记号：包括起来，例如：

<p>I'm not inside a comment</p>

<!-- <p>这是一条注释!</p> -->

5.HTML标签的语义化

语义化的标签，旨在让标签有自己的含义，选择最合适最正确的标签，具体左右有三：

代码结构清晰，方便阅读，有利于团队合作开发。
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。

3.搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。

第二天·初识HTML的更多相关文章

二、Android学习第二天——初识Activity（转）
(转自:http://wenku.baidu.com/view/af39b3164431b90d6c85c72f.html) 一. Android学习第二天——初识Activity 昨天程序搭建成功以 ...
第二章初识JSP
第二章初识JSP 一．JSP简述 1.是JSP JSP是指在HTML中嵌入Java脚本语言.全称(Java Server Pages) 当用户通过浏览器访问Web应用时,使用JSP容器对请求的J ...
【Python之路】第二篇--初识Python
Python简介 Python可以应用于众多领域,如:数据分析.组件集成.网络服务.图像处理.数值计算和科学计算等众多领域.目前业内几乎所有大中型互联网企业都在使用Python,如:Youtube.D ...
第二节初识 python
Python的由来在1989年12月时,吉多·范罗苏姆——龟叔,想寻找一门“课余”编程项目来打发圣诞节前后的时间.Guido决定为当时正构思的一个新的脚本语言写一个解释器,它是ABC语言(教学语言. ...
Python第二话初识复杂数据类型（list、dictionary、tuple）
上一篇我们简单认识了数据类型:数字number和字符串string,这篇我们就来隆重介绍一下重量级的数据类型:列表list.字典dictionary和元组tuple. 一.列表List: ①列表是什么 ...
基于.NET的微软ORM框架视频教程（Entity Framework技术）
基于.NET的微软ORM框架视频教程(Entity Framework技术) 第一讲 ORM映射第二讲初识EntifyFramework框架第三讲 LINQ表达式查询第四讲 LINQ方法查询 ...
OO第四单元总结——查询UML类图暨 OO课程总结
一.本单元两次作业的架构设计总结作业一.UML类图查询 1. 统计信息图 2. 复杂度分析基本复杂度(Essential Complexity (ev(G)).模块设计复杂度(Module Des ...
ReactNative的学习笔记
一.安装nodejs 查看是否安装:npm -v 二.安装react-native命令工具 npm install -g react-native-cli 三.查看 react-native --he ...
Python开发【第二篇】：初识Python
Python开发[第二篇]:初识Python Python简介 Python前世今生 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏 ...

随机推荐

常见IE6兼容问题总结
1.<!DOCTYPE HTML>文档类型的声明. 产生条件:IE6浏览器,当我们没有书写这个文档声明的时候,会触发IE6浏览器的怪异解析现象: 解决办法:书写文档声明. 2.不同浏览器当 ...
面试题：10亿url去重只给4G内存
我能想到的有以下几种: 用语言判断去重,ex表格去重,数据库去重,文件名字去重, 有人说:10亿url ex表放不下!! 可以用树和折半的思想将10亿url,变成单元最小化的树,然后用ex表去重 ex ...
BeanFactory 和FactoryBean的区别
转自:https://www.cnblogs.com/aspirant/p/9082858.html BeanFacotry是spring中比较原始的Factory.如XMLBeanFactory就是 ...
【OpenJ_Bailian - 2790】迷宫(bfs)
-->迷宫 Descriptions: 一天Extense在森林里探险的时候不小心走入了一个迷宫,迷宫可以看成是由n * n的格点组成,每个格点只有2种状态,.和#,前者表示可以通行后者表示不 ...
NOIp2013D2T3 华容道【搜索&图论-最短路】
题目传送门暴力搜索看到这道题的第一反应就是直接上$bfs$啦,也没有想到什么更加优秀的算法. 然后就是$15$分钟打了$70$分,有点震惊,纯暴力诶,这么多白给分嘛,太划算了,这可是$D2T3$诶 ...
【Linux开发】linux设备驱动归纳总结（六）：3.中断的上半部和下半部——工作队列
linux设备驱动归纳总结(六):3.中断的上半部和下半部--工作队列 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ...
DNS 域名系统与邮件服务器
目录 DNS 域名系统定义域名分类解析流程 DNS分类资源记录格式资源记录类型用bind搭建一台DNS服务器安装bind 创建自己的zone文件在主配置文件中,增加自己的zone 检 ...
C++多线程基础学习笔记（二）
先总结延申以下前面(一)所讲的内容. 主线程从main()函数开始执行,我们创建的线程也需要一个函数作为入口开始执行,所以第一步先初始化函数. 整个进程是否执行完毕的标志是主线程是否执行完毕,一般情况 ...
Python3学习笔记-更新中
1.Python概况 2.Anaconda安装及使用 3.Pycharm安装及使用 4.Hello World!!! 5.数据类型及类型转换 6.分支结构 7.循环语句 8.异常
JavaScript处理股票数据
1, 先使用Ajax发送异步请求到:http://hq.sinajs.cn/list=s_sh000001 2, 然后用[,]切割成数组https://www.w3school.com.cn/js/j ...

第二天·初识HTML