HTML 核心

HTML 核心

第一个网页 index-1

Emmet插件：自动生成HTML代码片段

注释

注释为代码的阅读者提供帮助，注释不参与运行

再HTML中，注释使用格式如下书写：

、、、html

、、、

元素

其他的叫法：标签、标记

、、、html
渡一教育

、、、

整体：element (元素)

元素 = 起始标记 （begin tag）+ 结束标记 （end tag）+ 元素内容 + 元素属性

属性 = 属性名 + 属性值

属性的分类：

• 局部属性：某些元素特有的属性
• 全局属性：所有元素通用

、、、html

、、、

有些元素没有结束标记，这样的元素叫做：空元素

空元素的两种写法：

1. 、、、、、、
2. 、、、、、、

元素的嵌套

元素不能相互嵌套

父元素、子元素、祖先元素、后代元素、兄弟元素（拥有同一个父元素的两个元素）

标准的文档结构

HTML：页面、HTML文档

、、、html

、、、

文档声明，告诉浏览器，当前文档使用的HTML标准是HTML5。

不写文档声明，将导致浏览器进入怪异渲染模式。

、、、html

、、、

根元素，一个页面最多只能有一个，并且该元素是所有其他元素的父元素或者祖先元素。

lang属性：language，全属性，表示该元素内部使用的文字是使用哪一种自然语言书写而成的。

、、、html

、、、

文档头，文档头内部的内容，不会显示在页面上。

、、、html

、、、

文档的元数据：附加信息。

charset：指定网页内容编码。

计算机中，低压电（0~2 V）0，高压电（2~5 V）1，表示2，使用10

换而言之，计算机中，只能存储数字

文字和数字进行对应

比如：a —— 97，A —— 64

相当于字典，该字典叫做字符编码表

UTF-8 是 Uniccode 编码的一个版本

、、、html

、、、

网页标题

、、、html

、、、

文档体，页面上所有要参与显示的元素，都应该放置到文档体上。

、、、html

、、、

告诉浏览器你使用的IE的edge浏览器内核

、、、html

、、、

适配客户端设备宽高。

语义化 index-2

什么是语义化

1. 每一个HTML元素都有具体的含义

a元素：超链接

p元素：段落

h1元素：一级标题

2. 所有元素与展示效果无关

元素展示页面种的效果，应该由CSS决定。

因为浏览器中带有默认的CSS样式，所以每个元素有一些默认的样式。

重要：选择什么元素，取决于内容的含义，而不是显示出的效果

为什么需要语义化？

1. 为了搜索引擎优化（SEO）

搜索引擎：百度、搜搜、Bing、Google

每隔一段时间，搜索引擎会从整个互联网中，抓取页面源代码

2. 为了让浏览器理解网页

阅读模式、语言模式…

文本元素 index-3

HTML5中支持的元素：HTML5元素周期表

h1 ~ h6

hKaTeX parse error: Expected '}', got 'EOF' at end of input: *6>{级标题} h1 ~ h6元素的快捷写法

p

段落，parageraphs

lorem，乱数假文，没有任何实际含义的文字
p6lorem ,表示 每个段落里面有 默认 个单词
p6lorem5 ,表示 每个段落里面有5个单词
p*6lorem100 ,表示 每个段落里面有100个单词

span 【无语义】

没有语义，仅用于样式的设计

以前：某些元素在显示时会独占一行（块级元素display:block;），而某些元素不会（行级元素display:inline;）
到了HTML5，已经弃用这种方法。曾至高出现在4.01，现在为更复杂的“内容类别”。

pre

预格式化文本元素

空白折叠：在源代码中的连续空白字符（空格、换行、制表），在页面显示时，会被折叠为一个字符。

**例外：**在per元素中的内容不会出现空白折叠

在per元素内部出现的内容会按源代码格式显示到页面上。

该元素通常用于在网页中显示一些代码。

per元素功能的本质：它有一个默认的CSS属性。

显示代码时，通常外面套code元素，code表示显示的代码区域

实体字符 index-4

实体字符，HTML Entity

实体字符通常用于在页面中显示一些特殊符号。

• 写法

1. &单词
2. &数字

• 小于符号

<

• 大于符号

>

• 空格字符

 

• 版权符号 ©

©

• & 符号

↦

• 1/5

⅕

a元素 超链接 index-5

href属性

hyper reference:通常表示跳转地址

1. 普通链接
2. 锚链接

id属性：全局属性，表示元素在文档中的唯一编号。

3. 功能链接

点击后，触发某个功能

• 执行JS代码，javascript:
• 发送邮件，mailto：

要求用户计算机上安装的有邮件发送软件：exchange

• 拨号，tel

要求用户计算机上安装的有拨号软件，或使用的是移动端访问

target属性

表示跳转窗口的位置。

target的取值：

• _self（翻译：自我）:在当前页面窗口打开，不写即是默认值
• _blank（翻译：空白）:在新窗口中打开

路径的写法

站内资源和站外资源

站内资源：当前网站的资源

站外资源：非当前网站的资源

绝对路径、相对路径

站外资源：绝对路径

站内资源：相对路径

1. 绝对路径

绝对路径的书写格式：

url地址：

、、、
协议名://主机名:端口号/路径

schea://host:port/path
、、、

https://baijiahao.baidu.com/s

协议名：http、https、file（本地文件）

主机名：域名、IP地址

端口号：如果协议是http协议，默认端口号是80；如果是https协议，默认端口号为：443

当跳转目标和当前页面的协议相同时，可以省略协议。

2. 相对路径

以./开头，./表示资源所在目录

可以书写…/表示返回上一级目录

相对路径中./可以省略

图片元素 index-6

img元素

image缩写，空元素

src属性：source

alt属性：当图片资源失效时，将使用该属性的文字代替图片

和a元素连用

和map元素

map：地图

map的子元素：area

坐标原点在图片左上角 向右是X增加 向下是Y增加

衡量坐标时，为了避免衡量误差，需要使用专业的衡量工具：

ps、pxcook、cutpro、、、

和figure元素

指代、定义，通常用于把图片、图片标题、描述包裹起来

子元素：figcaption（标题）

多媒体元素 index-7

video 视频

audio 音频

video

controls ：控制控件的显示，取值只能为controls

某些属性，只有两种状态：1. 不写 2. 取值为属性名，这种属性叫布尔属性

布尔属性，再HTML5中，可以不用书写属性值

autoplay：布尔属性，自动播放。

有些浏览器的安全组件是不允许视频自动播放的

muted:布尔属性，静音播放

loop：布尔属性，循环播放。

audio

用法和视频完全一致

兼容性

1. 旧版本的浏览器不支持这两个元素
2. 不同的浏览器支持的音频格式可能不一致

MP4、webm

列表元素 index-8

要从含以上选择元素

有序列表

ol：odered list

li：list item

type属性

• a 表示小写英文字母编号
• A 表示大写英文字母编号
• i 表示小写罗马数字编号
• I 表示大写罗马数字编号
• 1 表示数字编号（默认）

这个属性在 HTML4中弃用，但是在 HTML5 中被重新引入。除非列表中序号很重要（比如，在法律或者技术文件中条目通常被需要所引用），否则请使用 CSS list-style-type 属性替代。

无序列表

把ol改成ul

ul:unordered list

无序列表常用于制作菜单 或 新闻列表。

定义列表 index-9

通常用于一些术语的定义

dl：definition list

dt：definition title

dd：definition description

容器元素 ！

容器元素：该元素代表一块区域，内部用于放置其他元素

div元素 index-10.1

没有语义

语义化容器元素 H5 ！！！

header：通常用于表示页头，也可以用于表示文章的头部

footer：通常用于表示页脚，也可以用于表示文章的尾部

article：通常表示整篇文章

section：通常用于表示文章的章节

aside：通常用于表达附加信息（侧边栏）

元素包含关系

曾经：块级元素可以包含行级元素，反之不可以，a元素除外

元素的包含关系由元素的内容类别决定。

例如，查看h1元素中是否可以包含p元素

总结：

1. 容器元素中可以包含任何元素
2. a元素中几乎可以包含任何元素
3. 某些元素有固定的元素（ul>li,ol>li,dl>dt>dd）
4. 标题元素和段落元素不能相互嵌套，并且不能包含容器元素