次日·初识HTML

时间 2019-12-04

标签次日 html 栏目 HTML 繁體版

原文原文链接

一·什么是HTML

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

二·HTML的结构

1.骨架

HTML有本身的语法骨架格式：编程

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="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是属性的值。
一个属性通常包括如下三点：ide

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

4.元素之间的嵌套

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

5.空元素

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

三.解析HTML文档

咱们再回头看咱们的HTML骨架：搜索引擎

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="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）属性值的引号

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

（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。