一·什么是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.标签

以下图这个<p>标签为例

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

3.元素的属性

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

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

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

4.元素之间的嵌套

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

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

原义字符 等价字符引用
< &lt;
> &gt;
" &quot;
' &apos;
& &amp;

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

4.HTML注释

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

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

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

5.HTML标签的语义化

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

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

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

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

  1. 二、Android学习第二天——初识Activity（转）

    (转自:http://wenku.baidu.com/view/af39b3164431b90d6c85c72f.html) 一. Android学习第二天——初识Activity 昨天程序搭建成功以 ...

  2. 第二章 初识JSP

    第二章   初识JSP 一．JSP简述 1.是JSP JSP是指在HTML中嵌入Java脚本语言.全称(Java Server Pages) 当用户通过浏览器访问Web应用时,使用JSP容器对请求的J ...

  3. 【Python之路】第二篇--初识Python

    Python简介 Python可以应用于众多领域,如:数据分析.组件集成.网络服务.图像处理.数值计算和科学计算等众多领域.目前业内几乎所有大中型互联网企业都在使用Python,如:Youtube.D ...

  4. 第二节 初识 python

    Python的由来 在1989年12月时,吉多·范罗苏姆——龟叔,想寻找一门“课余”编程项目来打发圣诞节前后的时间.Guido决定为当时正构思的一个新的脚本语言写一个解释器,它是ABC语言(教学语言. ...

  5. Python第二话 初识复杂数据类型（list、dictionary、tuple）

    上一篇我们简单认识了数据类型:数字number和字符串string,这篇我们就来隆重介绍一下重量级的数据类型:列表list.字典dictionary和元组tuple. 一.列表List: ①列表是什么 ...

  6. 基于.NET的微软ORM框架视频教程（Entity Framework技术）

    基于.NET的微软ORM框架视频教程(Entity Framework技术) 第一讲  ORM映射 第二讲 初识EntifyFramework框架 第三讲 LINQ表达式查询 第四讲 LINQ方法查询 ...

  7. OO第四单元总结——查询UML类图 暨 OO课程总结

    一.本单元两次作业的架构设计总结 作业一.UML类图查询 1. 统计信息图 2. 复杂度分析 基本复杂度(Essential Complexity (ev(G)).模块设计复杂度(Module Des ...

  8. ReactNative的学习笔记

    一.安装nodejs 查看是否安装:npm -v 二.安装react-native命令工具 npm install -g react-native-cli 三.查看 react-native --he ...

  9. Python开发【第二篇】：初识Python

    Python开发[第二篇]:初识Python   Python简介 Python前世今生 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏 ...

随机推荐

  1. HNU_团队项目_数据库框架Mybatis_环境配置和样例

    前言 数据库从最传统的JDBC连接方式和数据库池化技术到Hibernate的使用,再到Mybatis的快捷轻量级操作,技术迭代的速度飞快. 在了解了基础的理论和方法后,学习前沿编程框架.工具,我认为是 ...

  2. centos下kill、killall、pkill命令区别

    kill是用来终止进程的 首先可以通过ps aux查看系统有哪些进程正在运行. 1.用kill来杀死某一个进程 #kill,加选项-9,加PID,表示杀死进程编号为PID的这个进程# -1 重启#ki ...

  3. mobile/immobile species的区别

    在地下水反应运移模型中: “mobile species” 涉及运移和反应过程(transport+reaction) “immobile” species 只涉及反应过程 (reaction)

  4. 人工智能01 刺激响应agent

    刺激响应agent 不具有内部状态而仅对其所处环境的即刻刺激有所反应的机器称为刺激响应(SR)agent 感知和动作 一机器人可以感知出周围8个单元是否空缺.这些传感器输入用二进制变量s1,s2 ,s ...

  5. 【Python开发】Python 适合大数据量的处理吗？

    Python 适合大数据量的处理吗? python 能处理数据库中百万行级的数据吗? 处理大规模数据时有那些常用的python库,他们有什么优缺点?适用范围如何? 需要澄清两点之后才可以比较全面的看这 ...

  6. 【DSP开发】【图像处理】Gray与YUV之间的转换关系

    标准的V4L2 API http://v4l.videotechnology.com/dwg/v4l2.pdf 在例程/home/dvevm_1_20/demos/ImageGray中,涉及到图像采集 ...

  7. 【Linux开发】linux设备驱动归纳总结（五）：2.操作硬件——IO内存

    linux设备驱动归纳总结(五):2.操作硬件--IO内存 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ...

  8. 统计学习方法 | 第1章 统计学习方法概论 | Scipy中的Leastsq()

    Scipy是一个用于数学.科学.工程领域的常用软件包,可以处理插值.积分.优化.图像处理.常微分方程数值解的求解.信号处理等问题.它用于有效计算Numpy矩阵,使Numpy和Scipy协同工作,高效解 ...

  9. python的变量 以及操作系统

    变量 : (变量真没有什么好说的) 变: 就是会变化的 量:衡量现实的事物标准 python 中引用 变量值的作用 操作系统:就计算机控制硬件的软件,定义各个硬件的接口给应用软件调用 应用软件:在操作 ...

  10. 系统的可用性用平均无故障时间( MTTF)

    计算机系统的可用性用平均无故障时间( MTTF)来度量,即计算机系统平均能够正常运行多长时间,才发生一次故障.系统的可用性越高,平均无故障时间越长. 可维护性用平均维修时间(MTTR)来度量,即系统发 ...