HTML学习笔记

博主：夏梦
发布时间：2024 年 03 月 06 日
254 次浏览
暂无评论
5499字数
分类：学习笔记

记录学习HTML时所记笔记

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-687d10e9bbc164732d1f19d1df0dbf2954" aria-expanded="true"><div class="accordion-toggle"><span style="">1、第一个网页</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-687d10e9bbc164732d1f19d1df0dbf2954" class="collapse collapse-content"><p></p>

# 1、第一个网页

Emment插件:自动生成HTML代码片段

## 注释

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

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

```html

```

## 元素

> 其他叫法：标签、标记

```html
<span class="external-link"><a class="no-external-link" href="http://www.duyiedu.com" target="_blank"><i data-feather="external-link"></i> 渡一教育 </a></span>
    <title>Document</title>
```

整体：element （元素）

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

属性 = 属性名 + 属性值

属性的分类：

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

```html
<meta charset = "UTF-8">
```

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

空元素的两种写法：

1. ```<meta charset="UTF-8">```
2. ```<meta charset="UTF-8"/>```

## 元素的嵌套

元素不能相互嵌套

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

## 标准的文档结构

HTML:页面、HTML文档

```html
<!DOCTYPE html>
```

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

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

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

```html
<html lang="en">
    </html>
```

HTML5版本中没有强制要求书写该元素

lang属性:languge,全局属性，表示该元素内部使用的文字是使用那一种自然语言书写而成的。

**文档头**:文档头内部的内容，不会显示到页面上

```html
<head>

</head>
```

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

```html
<meta>
```

**charset**：指定网页内容编码

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

计算机中，只能存储数字

文字和数字进行对应

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

该字典叫做字符编码表， GB2312，GBK

张 —— GB2312 —— 10000 —— GBK —— ？？

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

网页标题

```html
<title>这是我的第一个网页</title>
```

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

```html
<body>
</body>
```

# 2、语义化

## 什么是语义化

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

a元素：超链接
p元素：段落
h1元素：一级标题

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

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

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

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

## 为什么需要语义化?

1、为了搜索引擎优化(seo)

- **搜索引擎:** 百度、 搜狗、 搜搜、 Bing（微软）、 Google
- 每隔一段时间，搜索引擎会从整个互联网，抓取页面源代码

2、微软的IE浏览器，会忽略没有语义化的HTML标签

3、 为了让浏览器理解网页

阅读模式、语音模式
<p></p></div></div></div>

# 3、文本元素

HTML5中支持的元素：HTML5元素周期表https://www.xuanfengge.com/funny/html5/element/

## h元素(标题元素)

h元素表示的是标题元素: head

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

h元素是标题元素，它本身没有实际意义，只是用于设置标题样式

h元素是块级元素，它独占一行

h元素可以嵌套，但是不能嵌套h1~h6

h元素可以嵌套p元素

## p元素

段落 : paragraphs

段落元素，表示一段文本

p元素是块级元素，它独占一行

## VScode使用技巧

lorem, 乱数假文,没有任何实际含义的文字。
</div>

## span 【无语义】

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

以前: 某些元素在显示时会独占一行(块级元素),而某些元素不会(行级元素)
到了HTML5, 已经弃用这种说法

</div>

## pre

**预格式化文本元素**

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

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

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

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

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

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

```html
<code>
    <pre>
         (︿︿︿)
        {/ o o /}
         ( (oo) )
          ︶︶︶  
    </pre>
</code>
```

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-2771218bc57ffd04fd2a857566384add7" aria-expanded="true"><div class="accordion-toggle"><span style="">4、HTML实体</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-2771218bc57ffd04fd2a857566384add7" class="collapse collapse-content"><p></p>

# 4、HTML实体

实体字符，HTML Entity

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

书写方式：

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

常见的实体字符：

- 小于符号 (<)

```
&lt;
```

- 大于符号(>)

```
&gt;
```

- 空格符号( )

```
&nbsp;
```

- 版权符号

```
&copy;
```

- &符号

```
&amp;
```

# 5、a元素

超链接

## href属性

hyper reference（引用）：通常表示跳转地址

1. 普通链接
2. 锚链接

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

3. 功能链接

点击后，触发功能

- 执行JS代码，JavaScript：
- 发送邮件

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

- 拨号，tel：

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

## target属性

表示跳转窗口位置。

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-801d670d74fb7b7b19faa8e37df6bb0d95" aria-expanded="true"><div class="accordion-toggle"><span style="">6、路径的写法</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-801d670d74fb7b7b19faa8e37df6bb0d95" class="collapse collapse-content"><p></p>

# 6、路径的写法

## 站内资源和站外资源

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

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

## 绝对路径和相对路径推荐写法

站外资源：绝对路径

站内资源：相对路径

**1. 绝对路径**

绝对路径的书写格式：

url地址：

```
协议名：//主机名：端口名/路径

scham：//host:port/path
```

协议名：http、https、file

主机名：域名、ip地址

**端口号：**

> 如果协议是http协议，默认端口号是80；
> 如果协议是https协议，默认端口号为443。
> 当跳转目标和当前页面的协议相同时，可以省略协议

**2. 相对路径**

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

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

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

# 7、图片元素

## img元素

image缩写,空元素

src属性：soure

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

## 和a元素联用

## 和map元素

map：地图

map的子元素：area

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

ps、pxcook、cutpro（袁进老师开发）

## 和figure元素

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

子元素：figcaption

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-c1c09f954c603ed0e6d1c28099273b9e34" aria-expanded="true"><div class="accordion-toggle"><span style="">8、多媒体元素</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-c1c09f954c603ed0e6d1c28099273b9e34" class="collapse collapse-content"><p></p>

# 8、多媒体元素

video 视频

audio 音频

## video

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

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

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

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

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

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

## audio

和视频完全一样

## 兼容性

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

mp4、webm

# 9、列表元素

## 有序列表

ol：ordered list

type属性：

编号类型:

- 'a' 表示小写字母编号；
- 'A' 表示大写字母编号；
- 'i' 表示小写罗马数字编号；
- 'I' 表示大写罗马数字编号；
- '1' 表示数字编号（默认值）

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

</div>

reversed属性：布尔属性，倒序

li：list item

## 无序列表  （用得最多）

把ol改成ul

ul：unordered list

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

## 定义列表

通常用于一些术语的定义

- dl：definition list  (定义列表)
- dt：definition title    (定义标题)
- dd：definition description  (定义描述)

# 10、容器元素

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

## div元素

没有语义

# 语义化容器元素

- **header：通常用于表示页头，也可以用于表示文章的头部**
- **footer:通常用于表示页脚，也可以用于表示文章的尾部**
- **article:通常用于表示整篇文章**
- **section:通常用于表示文章的章节**
- **aside:通常用于表示侧边栏**
- **nav:通常用于表达页面导航**

<p></p></div></div></div>
<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-2e6a950aba53d9c72a1ccebe4528636d41" aria-expanded="true"><div class="accordion-toggle"><span style="">11、元素的包含关系</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-2e6a950aba53d9c72a1ccebe4528636d41" class="collapse collapse-content"><p></p>

## 11、元素包含关系

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

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

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

总结：

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

最后修改：2024 年 03 月 06 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

HTML学习笔记

夏梦 • 2024 年 03 月 06 日

记录学习HTML时所记笔记

# 1、第一个网页

Emment插件:自动生成HTML代码片段

## 注释

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

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

```html

```

## 元素

> 其他叫法：标签、标记

整体：element （元素）

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

属性 = 属性名 + 属性值

属性的分类：

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

```html
<meta charset = "UTF-8">
```

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

空元素的两种写法：

1. ```<meta charset="UTF-8">```
2. ```<meta charset="UTF-8"/>```

## 元素的嵌套

元素不能相互嵌套

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

## 标准的文档结构

HTML:页面、HTML文档

```html
<!DOCTYPE html>
```

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

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

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

```html
<html lang="en">
    </html>
```

HTML5版本中没有强制要求书写该元素

lang属性:languge,全局属性，表示该元素内部使用的文字是使用那一种自然语言书写而成的。

**文档头**:文档头内部的内容，不会显示到页面上

```html
<head>

</head>
```

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

```html
<meta>
```

**charset**：指定网页内容编码

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

计算机中，只能存储数字

文字和数字进行对应

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

该字典叫做字符编码表， GB2312，GBK

张 —— GB2312 —— 10000 —— GBK —— ？？

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

网页标题

```html
<title>这是我的第一个网页</title>
```

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

```html
<body>
</body>
```

# 2、语义化

## 什么是语义化

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

a元素：超链接
p元素：段落
h1元素：一级标题

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

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

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

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

## 为什么需要语义化?

1、为了搜索引擎优化(seo)

- **搜索引擎:** 百度、 搜狗、 搜搜、 Bing（微软）、 Google
- 每隔一段时间，搜索引擎会从整个互联网，抓取页面源代码

2、微软的IE浏览器，会忽略没有语义化的HTML标签

3、 为了让浏览器理解网页

阅读模式、语音模式
<p></p></div></div></div>

# 3、文本元素

HTML5中支持的元素：HTML5元素周期表https://www.xuanfengge.com/funny/html5/element/

## h元素(标题元素)

h元素表示的是标题元素: head

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

h元素是标题元素，它本身没有实际意义，只是用于设置标题样式

h元素是块级元素，它独占一行

h元素可以嵌套，但是不能嵌套h1~h6

h元素可以嵌套p元素

## p元素

段落 : paragraphs

段落元素，表示一段文本

p元素是块级元素，它独占一行

## VScode使用技巧

lorem, 乱数假文,没有任何实际含义的文字。
</div>

## span 【无语义】

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

以前: 某些元素在显示时会独占一行(块级元素),而某些元素不会(行级元素)
到了HTML5, 已经弃用这种说法

</div>

## pre

**预格式化文本元素**

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

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

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

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

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

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

```html
<code>
    <pre>
         (︿︿︿)
        {/ o o /}
         ( (oo) )
          ︶︶︶  
    </pre>
</code>
```

# 4、HTML实体

实体字符，HTML Entity

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

书写方式：

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

常见的实体字符：

- 小于符号 (<)

```
&lt;
```

- 大于符号(>)

```
&gt;
```

- 空格符号( )

```
&nbsp;
```

- 版权符号

```
&copy;
```

- &符号

```
&amp;
```

# 5、a元素

超链接

## href属性

hyper reference（引用）：通常表示跳转地址

1. 普通链接
2. 锚链接

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

3. 功能链接

点击后，触发功能

- 执行JS代码，JavaScript：
- 发送邮件

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

- 拨号，tel：

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

## target属性

表示跳转窗口位置。

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

# 6、路径的写法

## 站内资源和站外资源

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

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

## 绝对路径和相对路径推荐写法

站外资源：绝对路径

站内资源：相对路径

**1. 绝对路径**

绝对路径的书写格式：

url地址：

```
协议名：//主机名：端口名/路径

scham：//host:port/path
```

协议名：http、https、file

主机名：域名、ip地址

**端口号：**

> 如果协议是http协议，默认端口号是80；
> 如果协议是https协议，默认端口号为443。
> 当跳转目标和当前页面的协议相同时，可以省略协议

**2. 相对路径**

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

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

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

# 7、图片元素

## img元素

image缩写,空元素

src属性：soure

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

## 和a元素联用

## 和map元素

map：地图

map的子元素：area

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

ps、pxcook、cutpro（袁进老师开发）

## 和figure元素

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

子元素：figcaption

# 8、多媒体元素

video 视频

audio 音频

## video

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

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

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

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

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

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

## audio

和视频完全一样

## 兼容性

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

mp4、webm

# 9、列表元素

## 有序列表

ol：ordered list

type属性：

编号类型:

- 'a' 表示小写字母编号；
- 'A' 表示大写字母编号；
- 'i' 表示小写罗马数字编号；
- 'I' 表示大写罗马数字编号；
- '1' 表示数字编号（默认值）

</div>

reversed属性：布尔属性，倒序

li：list item

## 无序列表  （用得最多）

把ol改成ul

ul：unordered list

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

## 定义列表

通常用于一些术语的定义

- dl：definition list  (定义列表)
- dt：definition title    (定义标题)
- dd：definition description  (定义描述)

# 10、容器元素

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

## div元素

没有语义

# 语义化容器元素

<p></p></div></div></div>
<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-2e6a950aba53d9c72a1ccebe4528636d41" aria-expanded="true"><div class="accordion-toggle"><span style="">11、元素的包含关系</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-2e6a950aba53d9c72a1ccebe4528636d41" class="collapse collapse-content"><p></p>

## 11、元素包含关系

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

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

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

总结：

HTML学习笔记

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

激活软件，小心病毒！！！(附常用开源KMS工具)

i茅台自动申购教程

Handsome美化记录

元素的包含关系

Pro部署教程

CSS学习笔记——CSS选择器、盒模型添加样式（一）

手把手教你ESXi封装网卡驱动

Windows 10更新版本号KB5034203和KB5034763黑屏原因

VMware vSphere (VMware vSphere ESXi和 VMware vCenter Server) 下载、OEM 的说明

Handsome美化记录

HTML学习笔记

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

HTML学习笔记

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款