<! DOCTYPE>

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

<! DOCTYPE html>

  • HTML 文档声明，告诉浏览器当前页面是 HTML5 页面；
  • 让浏览器用 HTML5 的标准去解析识别内容；
  • 必须放在 HTML 文档的最前面，不能省略，省略了会出现兼容性问题；

html

表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素

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

  • 帮助语音合成工具确定要使用的发音;
  • 帮助翻译工具确定要使用的翻译规则;

常用的规则：

  • lang=“en” 表示这个 HTML 文档的语言是英文；
  • lang=“zh-CN” 表示这个 HTML 文档的语言是中文；

规定文档相关的配置信息（也称之为元数据），
包括文档的标题， 引用的文档样式和脚本等

title

设置网页的标题

meta

  • 可以用于设置网页的字符编码，让浏览器更精准地显示每一个文字，不设置或者设置错误会导致乱码
  • 一般都使用utf-8编码，涵盖了世界上几乎所有的文字

外部资源链接元素，规范了文档与外部资源的关系

通常是在head元素中

常见的属性：

body

就是网页的具体内容和结构, 在浏览器窗口中看到的东西

h

head 的缩写, 表示文字的标题

有 <h1>~<h6> 六个不同级别的标题

思考: 浏览器如何区分不同的元素? 呈现不同的效果?

浏览器内核会给不同的元素添加不同的 CSS 样式
即可以用任何元素添加自定义的 CSS 样式实现任意样式,
<div> 非常多见的原因

p

paragraph 的缩写, 表示文本的一个段落

p 元素多个段落之间会有一定的间距

img

image 的缩写, 是图像、图像的意思

是一个可替换元素（ replaced element ）

可替换元素:
浏览器会根据 src 属性进行网络请求, 将请求的资源替换到 img 的位置

img 有两个常见的属性：

  • src 属性： source 单词的缩写，表示源
    是必须的，它包含了你想嵌入的图片的文件路径。
  • alt 属性：不是强制性的，有两个作用
    • 作用一：当图片加载不成功（错误的地址或者图片资源不存在），那么会显示这段文本；
    • 作用二： 屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义；

属性 src :

  • 网络图片：一个 URL 地址；
    网络图片的设置非常简单，给一个地址即可；
  • 本地图片：本地电脑上的图片，后续会和 html 一起部署到服务；

本地图片的路径有两种方式：

  • 方式一： 绝对路径（几乎不用）；
    从电脑的根目录开始一直找到资源的路径；
  • 方式二： 相对路径（常用）；
    • 相当于当前文件的一个路径；
    • . 代表当前文件夹（1 个.），可以省略
    • .. 代表上级文件夹（2 个.）

对于网页来说，不管什么操作系统（Windows、 Mac、 Linux），路径分隔符都是 /，而不是 \

a

anchor, 锚的简称

定义超链接，用于打开新的 URL

有两个常见的属性：

  • href： Hypertext Reference 的简称
    指定要打开的 URL 地址；
    也可以是一个本地地址；
  • target： 该属性指定在何处显示链接的资源。
    • _self：默认值，在当前窗口打开 URL；
    • _blank：在一个新的窗口中打开 URL；

锚点链接可以实现：跳转到网页中的具体位置

  • 在要跳到的元素上定义一个 id 属性；
  • 定义 a 元素，并且 a 元素的 href 指向对应的 id；

图片链接: 图片也是可以点击进行跳转

  • a元素中不存放文字，而是存放一个img元素；

资源链接: 点击可以下载对应资源
邮件链接: 点击可发送邮件

iframe

用于在一个 HTML 文档中嵌入其他 HTML 文档

frameborder 属性

  • 用于规定是否显示边框
    • 1：显示
    • 0：不显示 (默认值)

网页可禁止嵌套 (比如百度)
在响应头设置同源策略

a 元素 target 的其他值:

  • _parent：在父窗口中打开 URL
  • _top：在顶层窗口中打开 URL

div 和 span

  • div 元素： division，分开、分配的意思；
  • span 元素：跨域、涵盖的意思；

产生的历史

  • 网页的发展早期是没有 css，这个时候我们必须通过语义化元素来告知浏览器一段文字如何显示；
  • 后来出现了 css，结构和样式需要分离，这个时候 html 只需要负责结构即可；
  • 比如 h1 元素可以是一段普通的文本+CSS 修饰样式；
  • 这个时候就出现了 div、 span 来编写 HTML 结构所有的结构，样式都交给 css 来处理；

理论上来说：

  • 页面可以没有 div、 span；
  • 也可以全部都是div、 span；

两者区别

div元素和span元素都是“纯粹的” 容器，也可以把他们理解成“盒子” ，它们都是用来包裹内容的；

  • div: 多个 div 元素包裹的内容会在不同的行显示
    • 一般作为其他元素的父容器，把其他元素包住，代表一个整体
    • 用于把网页分割为多个独立的部分
  • span: 多个 span 元素包裹的内容会在同一行显示；
    • 默认情况下，跟普通文本几乎没差别
    • 用于区分特殊文本和普通文本，比如用来显示一些关键字

div 是块级元素, 独占整行
对浏览器来说, 会自动给 div 添加 css 属性
display: block
实现整行效果, 而 span 没有

不常用元素

strong

内容加粗、强调；

  • 通常加粗会使用 css 样式来完成；

i

内容倾斜；

  • 通常斜体会使用 css 样式来完成；

code

用于显示代码

  • 偶尔会使用用来显示等宽字体；

br

换行元素

  • 开发中已经不使用；