探索HTMLHTML，超文本标记语言，是网页的基础结构。通过嵌入代码或标记来表明文本格式的国际标准 ... ...

初识Web

什么是网页

网站是指在因特网上更具一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。

网页是网站中的一"页",通常是HTML格式的文件，它要通过浏览器来阅读。

网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。

通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为HTML文件。

HTML文件的拓展名是.htm.html

因历史遗留问题，Win95\Win98系统的文件拓展名不能超过3字符，所以使用.htm

现在统一使用.html

关于浏览器的渲染引擎

 浏览器是网页显示、运行的平台。
 
 **渲染引擎是浏览器最核心的部分，一般称为“浏览器内核”** ，负责解析网页语法，渲染（显示）网页。
 
 不同浏览器内核有不同的解析、渲染规则（解析相同代码时的速度、性能、效果不同），所以同一网页在不 同内核浏览器中的渲染效果也可能不同。
 
 目前常用的浏览器渲染引擎主要有WebKit、Gecko、Blink和Trident等。

HTML介绍

HTML的基本概念

HTML: 超文本标记语言，是网页的基础结构，它是通过嵌入代码或标记来表明文本格式的国际标准。

什么是标记语言？

由无数个标记（标签、tag)组成。

是对某些内容进行特殊的标记，以供其他解释器识别处理。

比如使用标记的文本会被识别为“标题”进行加粗、文字放大显示。

由标签和内容组成的称为元素。

什么是超文本？

表示不仅仅可以插入普通的文本，还可以插入图片、音频、视频等内容。

还可以表示超链接，从一个网页跳转到另一个网页。

HTML标签的构成

 双标签元素（封闭类型标记）：
 
     格式：<标记>内容</标记>
 
     必须成对出现。
 
     包括`html`、`body`、`head`、`h2`、`p`、`a`等元素。
 
 单标签元素（非封闭类型标记）：
 
     格式：`<?/>` 或 `<?>`，不包含内容。
 
     包括`br`、`img`、`hr`、`meta`、`input`等元素。

HTML元素不区分大小写，但是推荐小写。

HTML元素相关

HTML文档: developer.mozilla.org/zh-CN/docs/…

完整的HTML结构

完整的HTML结构：

  <!DOCTYPE html>
  <html>
      <head>
          <title>我的网页</title>
      </head>
      <body>
          <h1>欢迎来到我的网页</h1>
      </body>
  </html>

HTML最上方的一段文本我们称之为文档类型声明，用于声明文档类型。

HTML文档声明，告诉浏览器当前页面是HTML5页面。

让浏览器用HTML5的标准去解析识别内容。

必须放在HTML文档的最前面，不能省略，省略了会出现兼容性问题。

HTML元素参考

HTML元素指的是从开始标签到结束标签的所有代码。

主根元素

<html>元素表示一个 HTML 文档的根（顶级元素），所以它也被称为“根元素”。

在CSS类中称为:root。

所有其他元素必须是此元素的后代。

W3C标准建议为html元素增加一个lang属性，作用是:

帮助语音合成工具确定要使用的发音。

帮助翻译工具确定要使用的翻译规则。

lang常用的规则：

lang=“en”表示这个HTML文档的语言是英文。

lang=“zh-CN”表示这个HTML文档的语言是中文。

文档元数据

<head>元素规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。

元数据，是描述数据的数据。

 可以理解成对整个页面的配置：
 
     一般至少包含如下2个设置。
 
         网页的标题：`title`元素。
 
         元素网页的编码：`meta`元素。
 
             `meta`可用于设置网页的字符编码，让浏览器更精准地显示每一个文字，不设或者设错会导致乱码。
 
             字符编码一般都使用`utf-8`，几乎涵盖了世界上所有的文字。

分区根元素

<body>元素里的内容将是在浏览器窗口中看到的东西，也就是网页的具体内容和结构。

大部分HTML元素都是在body中编写呈现的。

常用的元素

h元素: 从高到低代表六个不同级别的标题， <h1>-<h6> 。

p元素: 表示一个段落，多个段落之间会有一定的间隔。

img元素: 将一份图像嵌入文档，img是一个可替换元素。

 `img`有两个常见的属性：
 
     `src`**属性：表示源 ，是必须的**，它包含了你想嵌入的图片的文件路径。
 
     `alt`**属性**：不是强制性的，有两个作用。
 
         作用一：**图片加载不成功**（错误的地址或图片资源不存在），**就会显示这段文本**。
 
         作用二：屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义 (为 了提高网页的可访问性，建议为`<img>`标签添加`alt`属性，提供图像的描述信息)。
 
 某些其他属性目前已经不再使用，如`width、height、border`。

a元素（或称锚元素）: 定义超链接，用于打开新的URL。

 `a`元素有两个常见的属性：
 
     `href` **： 指定要打开的URL地址，也可以是一个本地地址。**
 
     `target` **：该属性指定在何处显示链接的资源。**
 
         `_self`：默认值，在当前窗口打开URL。
 
         `_blank`：在一个新的窗口中打开URL。
 
 **a元素-锚点链接: 跳转到网页中的具体位置。**
 
     锚点链接有两个重要步骤：
 
         1.要跳到的元素上定义一个`id`属性。
 
         2.定义a元素，并且a元素的`href`指向对应的id。
 
             `<p id="one">111</p>`
 
             `<a href="#one">段落1</a>`
 
 **a元素-图片链接: img元素跟a元素一起使用，可以实现图片链接。**
 
     实现思路：
 
         在a元素中不存放任何的文字，而是存放一个`img`元素，
 
         也就是说把`img`元素作为`a`元素的内容。
 
             `<!使用a标签包裹img标签，设置href属性指向图像文件 >`
 
             `<a href="path/to/image.jpg">`
 
             `<img src="path/to/image_thumbnail.jpg" alt="图像缩略图"> </a>`
 
 **a元素-其他URL地址**
 
     指向链接:zip压缩包（会下载压缩包）。
 
     指向其他协议地址:`mailto`链接（能够设置你电脑中邮件的默认发送信息）。
 
         `<a href="地址/xxx.zip" target="_blank">下载压缩包</a>`
 
         `<a href="mailto:123@qq.com" target="_blank">发邮件给123</a>`
 
 **a元素-假链接: 点击之后不需要跳转的链接**
 
     假链接格式 ：
 
         1.# 直接回到页面的顶部（`<a href="#">回顶</a>`）。
 
         2.javascript: 不会自动回页面的顶部（`<a href="#javascript">go</a>`）。

iframe元素: 可以实现在一个HTML文档中嵌入其他HTML文档。

其实际效果是将一个文档嵌入到另一个文档中，用户在浏览器中正常浏览父文档的同时，可以看到和与子文档交互。

 `frameborder`：
 
     用于规定是否显示边框：
 
         1：显示。
 
         0：不显示。
 
 `a`元素`target`的其他值：
 
     `_parent`： 在父窗口中打开URL。
 
     `_top`：在顶层窗口中打开URL。

特殊的元素

div元素：多个div元素包裹的内容会在不同的行显示。

 一般作为其他元素的父容器，把其他元素包住，代表一个整体 。
 
 用于把网页分割为多个独立的部分 。

span元素：多个span元素包裹的内容会在同一行显示。

 默认情况下，跟普通文本几乎没差别 。
 
 用于区分特殊文本和普通文本，比如用来显示一些关键字。

不常用的元素

strong元素：内容加粗、强调。

i元素：内容倾斜，可用来做字体图标（因为看起来像是icon的缩写）。

code元素：用于显示代码，可用来显示等宽字体。

br元素：换行元素（开发中已不使用）。

HTML全局属性

某些属性只能设置在特定的元素中：如img元素的src、a元素的href，

而一些在所有HTML都可以设置和拥有的属性，被称之为 “全局属性”

全局属性有很多：* developer.mozilla.org/zh-CN/docs/…*

常见的全局属性：

 `id`：定义唯一标识符，该标识符在整个文档中必须是唯一的，其目的是在链接（使用片段标识符），脚本或样式（使用 CSS）时标识元素。
 
 `class`：一个以空格分隔的元素的类名列表，它允许 CSS 和 Javascript 通过类选择器或者DOM方法来选择和访问特定的元素。
 
 `style`：给元素添加内联样式。
 
 `title`：包含表示与其所属元素相关信息的文本，这些信息通常可以作为提示呈现给用户，但不是必须的。