HTML基础

Posted 2021-06-05 麦小秋

1、一个网页

Vscode插件，快速生成html页面，操作，！+ tab键

HTML注释：
<!-- 注释内容 -->

2、元素介绍

其他说法：标签

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

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


## 元素的嵌套

元素不能相互嵌套

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

 3、文本元素

## h

标题：head

h1~h6：表示1级标题~6级标题

## p

段落，paragraphs

> lorem，乱数假文，没有任何实际含义的文字

## span【无语义】

没有语义，仅用于设置样式

## pre

预格式化文本元素

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

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

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

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

pre元素功能的本质：它有一个默认的css属性

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

4、HTML实体

# HTML实体

实体字符， HTML Entity

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

1. &单词;
2. &#数字;


- 小于符号

<

- 大于符号

>

- 空格符号

 

- 版权符号

©

- &符号

&

5、a元素

# a元素

超链接

## href属性

hyper reference：通常表示跳转地址

1. 普通链接
2. 锚链接

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

3. 功能链接

点击后，触发某个功能

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

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

- 拨号，tel:

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

## target属性

表示跳转窗口位置。

target的取值：

- _self：在当前页面窗口中打开，默认值
- _blank: 在新窗口中打开

6、img元素

# 图片元素

## img元素

image缩写，空元素

src属性：source

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

## 和a元素联用

## 和map元素

map：地图

map的子元素：area

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

ps、pxcook、cutpro（本人开发）

## 和figure元素

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

子元素：figcaption

7、多媒体元素

# 多媒体元素

video 视频

audio 音频

## video

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

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

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

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

muted: 布尔属性，静音播放。

loop: 布尔属性，循环播放

## audio

和视频完全一致


## 兼容性

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

mp4、webm

8、列表元素

# 列表元素

## 有序列表

ol: ordered list

li：list item 

## 无序列表

把ol改成ul

ul：unordered list

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

## 定义列表

通常用于一些术语的定义

dl: definition list

dt: definition title

dd: definition description

9、容器元素

# 容器元素

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

## div元素

没有语义

## 语义化容器元素

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

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

article: 通常用于表示整篇文章

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

aside: 通常用于表示侧边栏

10、容器元素

# 容器元素

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

## div元素

没有语义

## 语义化容器元素

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

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

article: 通常用于表示整篇文章

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

aside: 通常用于表示侧边栏

11、元素包含

# 元素包含关系

以前：块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外

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

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

总结：

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

12、路径

# 路径的写法

## 站内资源和站外资源

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

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

## 绝对路径和相对路径

站外资源：绝对路径

站内资源：相对路径

1. 绝对路径

绝对路径的书写格式：

url地址：

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

schema://host:port/path
```

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

2. 相对路径

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

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

相对路径中：./可以省略