文章目录

1. 元素(标签，标记)
- 1.1 定义
- 1.2 双标签和单标签
- 1.3 标签关系
2. HTML语义化
- 2.1 每一个HTML元素都应该有具体的含义
- 2.2 所有元素与展示效果无关
3. 为什么需要语义化
- 3.1 为了搜索引擎优化(SEO):mag:
- 3.2 为了让浏览器理解网页
4. 标准文档结构
- 4.1 大致骨架:skull:
- 4.2 根元素<**html**>
- 4.3 文档头<**head**>(不会显示到页面内容上)
- 4.4 内容<**body**>
5. vscode的使用
- 5.1 基本步骤
- 5.2 文档声明`<!DOCTYPE html>`
- 5.3 lang属性
- 5.4 字符集charset

1. 元素(标签，标记)

1.1 定义

网页是由网页元素组成，而元素通过html标签（标记）描述出来的，比如下面这个就是其中一个元素：

<title>我的元素</title>

上面这句整体叫做：元素(element)。
这个元素组成：双标签元素组成：起始标签 + (元素属性)+ 元素内容 + 结束标签。

而标签是由<>扩起来的关键词，如<html>、<a>，而标签又分为单标签和双标签。

1.2 双标签和单标签

标签一般成对出现，我们称之为双标签，如<html>和</html>，前者是起始标签，后者是结束标签。

但也存在单标签，也就是只有一个标签，如<br/>。

1.3 标签关系

包含关系
```
<html><head></head>
</html>
```

<html>是父标签，<head>是子标签。

注意，文档间的包含（嵌套）关系有一定的规则，由于规则比较复杂，这里不详细说明。

如果想要了解哪个元素可以嵌套哪些元素，可以直接在浏览器输入 mdn+对应元素名 进行查找。

并列关系
```
<head></head>
<body></body>
```

<head>和<body>是兄弟标签。

为了符合 web 标准和将 HTML 语义化的思想贯彻到底，我们应该将大部分的元素属性在 css 中体现，而 html 中使用语义化的标签。

下面我们就来说一说什么是语义化。

2. HTML语义化

2.1 每一个HTML元素都应该有具体的含义

元素	语义
a	超链接
p	段落
h1~h6	一到六级标题
div	无语义

2.2 所有元素与展示效果无关

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

因为浏览器带有默认的 CSS 样式，所以每个元素有一些默认样式，所以很多时候我们需要先清除一些特殊元素的样式。

3. 为什么需要语义化

3.1 为了搜索引擎优化(SEO)

【攻破html系列——第二天】网页结构相关推荐

【攻破css系列——第二天】字体属性和文字属性
文章目录 1. 字体属性 1.1 定义 1.2 字体类型 1.2.1 定义 1.2.2 语法 1.2.3 使用实例 1.3 字体大小 1.3.1 定义 1.3.2 语法 1.3.3 使用实例 1.4 ...
Metronic干货系列-介绍和目录结构
Metronic干货系列 Metronic干货系列-介绍和目录结构 Metronic干货系列-首页(未更新) Metronic干货系列-核心文件js(未更新) Metronic干货系列-核心文件css ...
结构化元素、网页结构和iframe内联框架
1.结构化元素 <header> //表示网页的头部 <footer> //表示网页的尾部 <section> //表示网页的独立区域 <article> ...
目前网页制作的基本语言html,第二讲网页制作基本语言HTML”.ppt
第二讲网页制作基本语言HTML" 2. 内嵌音频播放插件通过内嵌音频播放插件可以在浏览器中出现控制面板,也可作为背景音乐.其格式为: [例2-27] 3. IE中的背景音乐可以插入背景音 ...
C语言系列：6、结构
C语言系列:6.结构文章目录 C语言系列:6.结构 1. 结构的基本知识 2. 结构和函数 3. 结构数组 4. 指向结构的指针 5. 自引用结构 6. 表查找 7. 类型定义 8. 联合 9. 位 ...
第二章全局变量结构（一）
文章目录第二章全局变量结构(一) 全局变量的逻辑结构全局命名约定和限制示例全局名称及其用法全局节点和下标简介全局变量下标全局变量节点全局变量排序规则全局变量引用的最大长度第二章全 ...
python 爬取TripAdvisor评论（曾经可以爬下来，但是似乎网页结构改了，爬不下来了）
TripAdvisor 的爬虫python实现 (曾经可以爬下来,但是似乎网页结构改了,爬不下来了) 这次爬虫分两个大步骤,第一,以评论ID为索引的评论内容文本,所以第一个步骤是按照不同的筛选方法获取 ...
第二章网页前端基础与HTTP协议
第二章网页前端基础与HTTP协议爬虫需要遵循网络传输协议才能与服务器进行通信,当与服务器建立通信后,爬虫才能获取网页内容,从而获取想要爬取的内容.获取到的网页内容通常为HTML(HyperText ...
html页面信息属于结构化数据,网页结构化数据的信息提取方法与流程
本发明属于网络信息处理领域,尤其涉及一种网页结构化数据的信息提取方法. 背景技术: 互联网的迅速发展带来了信息的爆炸式增长,Web己经发展为一个巨大的信息仓库,成为日益重要和最具潜力的全球信息传递与共 ...

【攻破html系列——第二天】网页结构

文章目录

1. 元素(标签，标记)

1.1 定义

1.2 双标签和单标签

1.3 标签关系

2. HTML语义化

2.1 每一个HTML元素都应该有具体的含义

2.2 所有元素与展示效果无关

3. 为什么需要语义化

3.1 为了搜索引擎优化(SEO)

【攻破html系列——第二天】网页结构相关推荐

最新文章

热门文章

【攻破html系列——第二天】网页结构

文章目录

1. 元素(标签，标记)

1.1 定义

1.2 双标签和单标签

1.3 标签关系

2. HTML语义化

2.1 每一个HTML元素都应该有具体的含义

2.2 所有元素与展示效果无关

3. 为什么需要语义化

3.1 为了搜索引擎优化(SEO) insertAdIfNeeded();

【攻破html系列——第二天】网页结构相关推荐

最新文章

热门文章

3.1 为了搜索引擎优化(SEO)