HTML 网页结构

标签与元素

基础标签:

<h1> to <h6>  定义 HTML 标题
<p>	      定义一个段落
<br>	      定义简单的折行。
<hr>	      定义水平线。
<!--...-->    定义一个注释

文本标签:

del  定义被删除文本。
i    定义斜体文本
ins  定义被插入文本
sub  下标文字
sup  上标文字
u    下划线文本

表单标签:
```
form
input
```

常见元素:

iframe 嵌套外部网页
img    展示图像
area   标签定义图像映射内部的区域: https://www.runoob.com/try/try.php?filename=tryhtml_areamap
a      链接标签
ul     定义一个无序列表
ol     定义一个有序列表
li     定义一个列表项

表格:

table  标签定义 HTML 表格, 一个 HTML 表格包括 <table> 元素，一个或多个 <tr>、<th> 以及 <td> 元素。
tr     元素定义表格行，
th     元素定义表头，
td     元素定义表格单元

容器元素

div    标签定义 HTML 文档中的一个分隔区块或者一个区域部分, 标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化
span   用于对文档中的行内元素进行组合 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式

而HTML 元素是指一个具体的标签实例, 比如下面的 HTML 元素，为 h 标签
```
<h1>这是个标题</h1>
```

元素语法

<tag att1=v1 attr2=v2>内容</tag>

每种标签都有自己的一组属性, 属性分为2类:

全局属性: 所有标签都有的属性
- id 定义元素的唯一id
- class 为html元素定义一个或多个类名（classname）(类名从样式文件引入)
- style 规定元素的行内样式（inline style）
- title 描述了元素的额外信息 (作为工具条使用)
- 更多属性请参考: HTML 全局属性
标签属性: 每种标签肯能还有一些该标签才特有的一些属性
- href 需要有引用的属性的标签才有这个属性, 比如链接(a标签) 和图片(img标签)

元素id

标识该元素的唯一身份, 并且可以在其他地方引用

比如，通过a标题跳转到指定的位置:

<p>
<a href="#C4">查看章节 4</a>
</p>

<h2>章节 1</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 2</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 3</h2>
<p>这边显示该章节的内容……</p>

<h2><a id="C4">章节 4</a></h2>
<p>这边显示该章节的内容……</p>

id 也是 JS 操作元素的重要依据之一:

document.getElementById('C4')
<a id="C4">章节 4</a>

元素的样式

通过元素的style 属性可以控制该元素的样式
比如我们可以把p 元素里面的这段话的字体加大, 演示改为红色
```
<p style="color:red;font-size:20px;">这边显示该章节的内容……</p>
```
语法的格式: key: value; 分号分开的就是一个样式条目, 我们可以为一个元素添加很多样式

脚本

有了元素和样式，我们的页面还是一个静态页面, 比如页面加载完成后，我要动态修改里面的元素怎么办?, 这就需要用到我们前面学的 JS 脚本了

<script> 标签用于定义客户端脚本，比如 JavaScript
<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件

比如下面:

// 通过src 网络引入
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

// 通过本地文件引入
<script>
  import axios from 'axios';
</script>

JavaScript 最常用于图片操作、表单验证以及内容动态更新

<script>
c4 = document.getElementById('C4')
// <a id="C4">章节 4</a>
c4.innerText
// '章节 4'
c4.innerText = '章节 5'
// '章节 5'
</script>

HTML 入门

HTML 网页结构

标签与元素

元素语法

元素id

元素的样式

脚本