【HTML+CSS+JavaScript】01 HTML标签

HTML，CSS，JS 它们是网页三剑客，缺一不可。简单来说，它们三位一起构成了你看到和互动的每一个网页。可以这样理解它们的分工：

HTML（结构/骨架）
- 全称超文本标记语言，负责定义网页的内容和结构。比如哪是标题、哪是段落、图片放在哪、按钮叫什么。它就像盖房子的钢筋混凝土骨架，决定了房子里有哪些房间和承重墙。
CSS（样式/装修）
- 全称层叠样式表，负责控制网页的外观。颜色、字体、大小、间距、背景图、动画特效都归它管。就像给毛坯房做装修和软装，让房子变得好看、有风格。
JavaScript（行为/交互）
- 一种脚本语言，负责让网页"活"起来。点击按钮后弹窗、下拉菜单、地图拖动、数据实时刷新、表单检查等动态功能，都由它实现。它相当于房子里的水电、家电和智能系统，让住的人可以和房子互动。

举个简单的例子：

网页上有一个"点我"按钮：
- HTML 负责放一个 <button>点我</button> 标签；
- CSS 让它变成圆角、蓝色、有阴影；
- JavaScript 监听点击，被点后弹出一句"你好！"。

1. HTML

HTML(Hyper Text Markup Language)，超文本标记语言。

超文本：比文本要强大，通过链接和交互式方式来组织和呈现信息的文本形式。不仅仅有文本，还可能包含图片，音频等。

例如，记事本它就是单纯的文本，不能进行其他的操作，而 word 文档，不仅是文本，还可以对你编辑的文本进行字体颜色的修改，字体大小修改等，而且可以添加图片，视频等，它就是一个超文本。

标记语言：由标签构成的语言。

HTML的标签都是提前定义好的，使用不同的标签，表示不同的内容。
例如word 文档中，
如果选中文本，点击标题1，就会使用标题1的样式来显示文本，上述标题1就是⼀个"标签"。

编写HTML代码非常简单，你不需要任何特殊的软件，只需要一个文本编辑器（Sublime Text等）和一个浏览器。

也就是说，当使用文本编辑器写完HTML代码后，即**.html** 文件，通过浏览器打开后，浏览器就会解析和渲染HTML，即理解它的意思，然后在屏幕上画出来。

现在我们来手动写一个HTML页面：

首先新建一个HTML文件：

通过文本编辑器打开，输入以下的内容：

保存后关闭文本，双击该文件后，通过浏览器运行：

上面代码中的 <h1> <h2> <h3> 就是标签，学习 HTML 主要就是学标签。

1.1 认识 HTML 标签

HTML 代码是由 "标签" 构成的.

形如:

html 复制代码

<h1>我是一级标题</h1>

标签名(body) 放到 <> 中
大部分标签成对出现，<h1>为开始标签，</h1>为结束标签。
少数标签只有开始标签，称为 "单标签"。
开始标签和结束标签之间，写的是标签的内容。
开始标签中可能会带有 "属性"。id 属性相当于给这个标签设置了⼀个唯⼀的标识符(身份证号码).

html 复制代码

<h1 id="myId">我是一级标题</h1>

1.2 HTML 文件结构

html 复制代码

<!DOCTYPE html>
<html>
    <head>
	
    </head>
    <body>
	
    </body>
</html>

<!DOCTYPE html> --- 文档类型声明，必须写在第一行。它不是 HTML 标签，而是一条指令，告诉浏览器这是 HTML 文件。
<html> </html> ：根元素，整个页面的最外层容器，所有其他标签都放在它里面，该标签中可以带有一个 lang 属性，表示网页要用的语言，lang="zh-CN" 表示中文，lang="en" 表示英文
<head> </head> ：头部（元数据区），标签中写页⾯的属性，这里的内容不会直接显示在页面上，而是给浏览器和搜索引擎看的"配置信息"。里面常见的三个配置：
- <meta charset="UTF-8">：声明字符编码为 UTF-8，保证中文不会乱码。这个必须在 <head> 的最前面。
- <meta name="viewport" content="width=device-width, initial-scale=1.0">：视口设置，让页面在手机上也能自适应显示，不加的话手机端会布局错乱。
- <title>：定义浏览器标签页上的标题，也是搜索引擎结果中的标题，即标签中写的是页面的标题。
<body> </body>：主体（可见内容区），标签中写的是页⾯上显示的内容。你在网页上看到的所有东西------文字、图片、按钮、视频等------都必须放在 <body> 和 </body> 之间。这里的内容就是浏览器"画出来"的原料。

示例：

html 复制代码

<!DOCTYPE html>
<html charset="zh-CN">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>我的网页标题</title>
</head>
<body>
	<!-- 所有在浏览器中能看见的内容，都写在这里 -->
	<h1>这是一个标题！</h1>
</body>
</html>

思考：到这里我们知道了 HTML 文件的结构，即写一个 HTML代码的话要按照怎样的格式，但是在前一个例子中，我们并没有按照这个格式写，通过浏览器运行依然可以成功，这说明浏览器有很好的鲁棒性，鲁棒性指一个系统在面对错误、异常输入或意外干扰时，仍然能够保持正常运行、不至于崩溃的能力，可以通俗地理解为"容错能力"或"抗打击能力"。

例子：你写了 <h1>这是段落，但忘了写闭合的 </h1>。
鲁棒性的体现：浏览器不会弹出一个错误窗口告诉你"代码有误，无法显示"，更不会卡死。它会智能地猜测："你大概是想在这里结束段落"，然后照样把内容渲染出来。

1.3 标签的层次结构

父子关系
兄弟关系

例如以下的代码：

html 复制代码

<html>
    <head>
        <title>第⼀个⻚⾯</title>
    </head>
    <body>
        hello world
    </body>
</html>

head 和 body 是 html 的子标签，即head 和 body是兄弟关系，html 就是 head 和 body 的父标签，即父子关系。
title 是 head 的子标签，head 是 title 的父标签。

可以使用浏览器的开发者工具查看页面结构，F12 或者右键审查元素，开启开发者工具，切换到 Elements（元素）标签，就可以看到页面结构细节：

标签之间的这种结构关系，构成了⼀个 DOM树。

DOM 是 Document Object Mode (文档对象模型) 的缩写

整个页面称为Document，页面里面的内容，称为元素。

例如，B站的网页，这一整个页面就是一个文件，而页面的中的内容，例如热门、音乐等分类，视频等都是元素：

可以通过调试这个页面观察，在元素（Elements）面板中，你可以看到网页完整的 HTML 结构，也就是我们说的 DOM 树

1.4 HTML 开发工具

HTML 可以使用系统自带的记事本来编写，但是非常不方便，我们可以使用 VS Code 来编写。

示例：在 VS Code中创建文件 demo1.html：

直接输入**!**，按 Enter或 tab 键，此时能自动生成代码的主体框架：

保存以下的代码，然后通过浏览器运行，得到的是和使用文本编辑器编写一样的效果：

1.5 HTML 的常见标签

1.5.1 标题标签 h1~h6

有六个，从 h1 - h6，数字越大，则字体越小。

1.5.2 段落标签 p

在HTML中, 段落, 换行符, 空格都会失效，如果需要分成段落, 需要使用专门的标签

p 标签表示一个段落

注意：

p 标签描述的段落, 前⾯没有缩进. (未来 CSS 会学)
自动根据浏览器宽度来决定排版
- 例如以下这一段的字符串，放大缩小网页会自适应：
html 内容首尾处的换行，空格均无效
在 html 中文字之间输入的多个空格只相当于⼀个空格
html 中直接输入换行不会真的换行，而是相当于⼀个空格

如果需要让段落前面进行缩进，即可以表示连续的多个空格，可以使用 HTML的空格符：

  非断行空格，不会导致文本换行
&ensp; 半角空格，宽度等于当前字体尺寸的一半
&emsp; 全角空格，宽度等于当前字体尺寸
  窄空格，宽度小于一个字符

达到缩进效果：

问题：在 HTML 中，<，>，& 等是有特殊含义的，不能直接使用，且这些字符最终是不会显示在我们最终看到的网页上的，如果希望在网页上显示这些字符，就需要进行转义。示例转义字符：

1.5.3 换行标签 br

想要完成换行的话，也可以通过**<br/>**标签来实现。br 是 break 的缩写. 表示换行.

标签大多数是成对出现的，但是也有一些单标签，例如 br 标签，它不需要结束标签
br 标签不像 p 标签那样带有⼀个很大的空隙
<br/> 是规范写法. 不建议写成 <br>

观察 <br/> 标签和 <p> 标签的区别：

1.5.4 图片标签 img

img 标签必须带有 src 属性. 表示图片的路径。而 alt 属性的作用是当图片无法正常显示时，浏览器会在图片的位置显示这段文字，用来告诉用户"这张图片本该是什么内容或什么功能"。

html 复制代码

<img src="图片路径" alt=" ">

这个图片的路径可以是网络上图片的路径，或者是绝对路径，或者是相对路径。

例如，浏览器上找一张图片，即网络路径：

当图片地址写错时，alt 就会发挥它的作用，描述这张图片本该的内容或者功能：

使用绝对路径：

使用相对路径：

如果图片是在当前目录的上一级，那么相对路劲：

img 标签中，除了上述的两个属性，还有

width/height ：控制宽度高度，高度和宽度⼀般改⼀个就行，另外⼀个会等比例缩放，否则就会图片失衡。单位是 px，即像素
border：边框，参数是宽度的像素。但是⼀般使用 CSS 来设定

如图，在原图的基础上，根据宽度等比例缩小：

在原图的基础上，根据高度等比例缩小：

两个都设置，图片比例会失衡：

注意：

属性可以有多个, 不能写到标签之前
属性之间用空格分割, 可以是多个空格, 也可以是换行
属性之间不分先后顺序
属性使用 "键值对" 的格式来表示

1.5.5 超链接 a

href属性：必须具备，表示点击后会跳转到哪个页面。

target属性：打开方式，默认是 _self，如果是 _blank 则用新的标签页打开。

html 复制代码

<a href="目标地址">链接文字</a>

示例：

点击上述的链接文字就可以跳转：

如果想要用新的标签页打开，则加上 target 标签：

链接的几种形式：

外部链接；href 引用其他网站的地址
1. 像上述的例子就是一个外部链接
内部链接；网站内部页面之间的链接，写相对路径即可
1. 示例：写一个新的 html文件
2. 然后引用这个链接：
空链接：使用 # 在 href 中占位。空链接是为了借用 <a> 标签的样式和交互能力，但暂时不需要或不想让它跳转，常用于触发 JS 动作、开发占位或模拟按钮如以下的图，空链接不会跳转，跳转也是当前页面跳转，不会像上述的例子一样到一个新页面

也可以用超链接下载文件，例如下载这个压缩包：

1.5.6 表格标签

table 标签: 表示整个表格
tr: 表示表格的⼀行
td: 表示⼀个单元格/列（每一行中的单元格）
table 包含 tr , tr 包含 td

示例：描述上述画的这个表格

通过浏览器运行后，发现什么都没有，但是调试这个网页，查看 HTML结构，发现对于表格的描述是有的：

其实就是因为这个 2行×2列的空表格，没有给表格、单元格设置任何边框、背景色或内容。浏览器运行后其实已经渲染了这个表格，只是肉眼看不见。

表格标签有⼀些属性, 可以用于设置大小边框等，但是⼀般使用 CSS 方式来设置

align：是表格相对于周围元素的对齐方式，align="center" (不是内部元素的对齐方式)
border：表示边框。1 表示有边框(数字越大,边框越粗)，"" 表示没边框.
cellpadding: 内容距离边框的距离, 默认 1 像素
cellspacing: 单元格之间的距离. 默认为 2 像素
width / height: 设置尺寸
以上的这些属性都要放到 table 标签中
如果想要合并单元格：合并一行中的单元格使用 colspan ，合并多行中的一列单元格使用 rowspan ，都放在 td 标签中

设置表格的边框粗细以及高度和宽度：

可以往表格中添加内容：

如果有一个单元格没有添加内容，那么这个单元格就消失了：

如果想要让单元格/内容之间没有距离，可以将 cellspacing 属性的像素设置为0：

合并一行中的单元格：

如以下，合并了两个单元格，那么aaa就占了两个单元格的位置，bbb就变成了多余的了：

可以把 bbb注释掉：

合并一列单元格：

1.5.7 表单标签

表单是让用户输入信息的重要途径。例如，登录一个网页：

表单分成两个部分：

表单域：包含表单元素的区域，重点是 form 标签
表单控件：输入框，提交按钮等，重点是 input 标签

1）input 标签

各种输入控件，单行文本框，按钮，单选框，复选框。input 的属性：

type(必须有), 取值种类很多, button, checkbox, text, file, image, password, radio 等
name: 给 input 起了个名字. 尤其是对于单选按钮, 具有相同的 name 才能多选⼀
value: input 中的默认值
checked: 默认被选中. (用于单选按钮和多选按钮)

文本框 text：

单行文本。

还可以设置文本框的大小，使用 size 属性：

密码框 password：

单选框 radio：

一定要记得给 input 指定 name，只有是相同 name 的 input 才具有多选一的功能，即单选。

如果想要上述的单选框，除了点文字前面的⭕选中，点击文字也能选中，可以使用label 属性，需要配合 id 属性使用：

这次就可以通过文字 "男" 和 "女"也能够选中。

复选框/多选框 checkbox：

复选的话，由于是可以多选的，因此，指不指定 name 都也可以。

普通按钮 button：

可以这这样写：

这个 button 标签，当前点击了没有反应，需要搭配 JS 使用。

2）form 标签

描述了要把数据按照什么方式，提交到哪个页面中。（form需要结合后端代码）

html 复制代码

<form action="提交到哪里">
    [form 的内容]
</form>

提交按钮 submit：

提交按钮必须放到 form 标签内，点击后就会尝试给服务器发送请求。

我们要提交的表单，肯定是如下图中填写好的全部内容：

因此，我们需要将上述的代码全部放到 form 标签中进行提交操作，这里我们设置提交到之前写过的 test.html 文件中：

点击以下的提交按钮后，就会跳转到目标位置：

我们也可以设置提交的方式，例如 get，表示从服务器中获取资源，而 post 表示向服务器发送资源

这里，我们讲一下关于 http 的 url（网址），例如以下的一个网址：

但是，我们看到的是提交后，跳转到目标位置后，它的网址 ? 后面根本就只有一个 gender 信息，且它的值也是一个看不懂的 on：

其中，on 是未指定 value 的复选框/单选按钮被选中时，浏览器自动提交的默认值。如果你不想看到 on，可以在 HTML 中给 <input> 加上明确的 value 值。

而这里只看到了 gender，这是由于之前我们想要实现性别单选，因此给 input 设置了 name，这说明，想要在网址中显示出参数，就要设置 name。

点击提交后，我们看到网址中包含了我们的参数：

如果换成以下的这个形式的button标签，也是可以提交表单跳转的：

但是是以下这个形式的话就不可以，点击按钮的话是没有反应的：

原因：<button> 标签如果没有明确指定 type 属性，它的默认类型是 "submit"。

所以当把这个按钮放在 <form> 内部时，点击它会自动触发表单的提交，从而导致页面跳转。<input type="button"> 的默认类型就是 "button"，它只是一个普通按钮，没有任何内置的提交行为。它存在的意义是让开发者通过 JavaScript 绑定自定义的点击事件。

1.5.8 select 标签

下拉菜单。需要搭配 option 标签使用，在select 标签内部。

option 标签中定义 selected="selected"，表示默认选中。例如，表示默认选中软件工程：

1.5.9 textarea 标签

用于在 HTML 表单中创建一个多行纯文本输入区域，让用户可以输入和编辑较长的文本内容。

常用于留言板、评论框、地址输入、个人简介等需要输入多行文字的场合

其中的 rows 和 cols 属性设置行和列。在 textarea 文本域中，文本域中的内容,就是默认内容，即空白内容。这里空格是有效果的，有几个空格也会表示出来。

给它设置一个初始化大小：

1.5.10 无语义标签 div&span

div 标签, division 的缩写, 含义是分割。span 标签, 含义是跨度。

就是两个盒子，用于网页布局。

div 是独占⼀行的，是⼀个大盒子
span 不独占⼀行，是⼀个小盒子
它们的核心作用是为内容提供结构化的"盒子"，以便通过 CSS 控制样式、通过 JavaScript 操作内容或行为。
本身没有任何默认样式或语义（不像 <h1> 表示标题，<p> 表示段落），所以极其灵活，如果不借助 CSS/JS 时，它们对页面显示几乎没有影响（仅 <div> 会换行，<span> 不换行）

<div> 用来划分区块、布局大结构；<span> 用来微调一小段内容（比如文字）。两者本身没有视觉样式，主要用来配合 CSS 和 JavaScript 实现界面的设计和交互。

1.5.11 总结

HTML 标签：

块级标签：可以独占一行，h1~h6，p，div等
行级标签：不独占一行，a，input，span等

1.6 综合练习：用户注册

实现一个如以上图的用户注册界面。

根据图中的显示，用户名，手机号以及密码以及他们的文本框都是对齐的，我们可以通过一个 3行2列的表格来实现，而文本框中的内容，使用 input 标签的 placeholder 属性来实现：

使用浏览器打开：

然后使用 input 标签实现注册控件，a 标签实现登录链接，可以使用 div 标签将这些内容包裹起来，后续可以通过 CSS 让这个 <div> 内的元素水平排列、居中对齐、设置背景、间距等。

可以使用 span 标签包裹"已有账号？"这几个字，单独控制文本样式，可以对这个提示文字设置颜色、字体大小、鼠标样式等，而不影响旁边的链接 <a>。