一·什么是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. Django下orm学习 一对多

    概念说明 ORM:关系对象映射的全称是 Object Relational Mapping, 简称ORM SQLAlchemy: 是Python编程语言下的一款ORM框架,该框架建立在数据库API之上 ...

  2. CentOS下Vim加密解密文本

    CentOS用vim/vi给文件加密和解密 一. 利用 vim/vi 加密: 优点:加密后,如果不知道密码,就看不到明文,包括root用户也看不了: 缺点:很明显让别人知道加密了,容易让别人把加密的文 ...

  3. 【POJ - 3187】Backward Digit Sums（搜索）

    -->Backward Digit Sums 直接写中文了 Descriptions: FJ 和 他的奶牛们在玩一个心理游戏.他们以某种方式写下1至N的数字(1<=N<=10). 然 ...

  4. 【VS开发】关于SEH的简单总结

    尽管以前写过一篇SEH相关的文章<关于SEH的简单总结>, 但那真的只是皮毛,一直对Windows异常处理的原理似懂非懂, 看了下面的文章 ,一切都豁然开朗.  1997年文章,Windo ...

  5. PHP7 开启Zend Opcache

    PHP7 开启Zend Opcache 作为PHP这10年来最大的版本与性能升级,PHP7在多次的测试中都表现出很夸张的性能提升,然而,为了让它能发挥出最大的性能,需要手动开启PHP自带的opcach ...

  6. String和ByteBuffer互转

    String 转换 ByteBuffer: public static ByteBuffer getByteBuffer(String str) { return ByteBuffer.wrap(st ...

  7. SpringBoot 使用Mybatis操作mysql示例

    1.准备数据库 创建数据库 create databases baodanjia; 创建帐号 create user 'baodanjia'@'%' identified by '123456' gr ...

  8. Elasticsearch-数组和多字段

    ES-数组和多字段 当需要在同一个字段中需要拥有多个值时,就会用到数组. 数组 如果要索引拥有多个值的字段,将这些值放入方括号中即可.在music索引下的album类型中,添加songs字段,存储专辑 ...

  9. 西安邀请赛-E（树链剖分+线段树）

    题目链接:https://nanti.jisuanke.com/t/39272 题意:给一棵树,n个结点,树根为1,n-1条边,每个结点有一个权值.进行3种操作: 1 s t:把1和s之间的最短路径上 ...

  10. PostgreSQL查询数据库中包含某种类型的表有哪些

    and c.relnamespace = n.oid and nspname = 'public' and a.atttypid = t.oid and typname = 'TEXT' and c. ...