前端

任何一个网页都由一下三部分组成：

结构层

HTML 代码：这是网页的基础架构，使用各种 HTML 标签来定义网页中的不同元素及其相互关系，如<html>、<body>、<head>、<h1>、<p>、<img>等，就像人体的骨骼一样，支撑起整个网页的内容展示和布局框架。
语义化标签：如<article>、<section>、<nav>、<footer>等，这些标签不仅定义了网页元素的外观，还赋予了它们特定的语义含义，有助于搜索引擎理解网页内容，提高网页的可访问性和搜索引擎优化效果。

表现层

CSS 样式：控制网页元素外观，包括字体、颜色等，实现内容与表现分离，便于维护和多样设计。
图片和多媒体：丰富网页内容，增强视觉听觉效果，吸引用户注意力并传递信息。
图标字体：特殊字体格式，可灵活调整大小、颜色和位置，为网页增添视觉元素和交互性。

行为层

JavaScript 脚本：主要用于实现网页的动态效果和交互功能，如响应用户的点击、鼠标移动、键盘输入等操作，实现菜单的展开和收缩、图片的轮播、表单的验证、数据的异步加载等功能，为网页注入了活力和交互性，让用户能够与网页进行互动。
事件处理：是 JavaScript 与网页元素交互的重要方式，通过监听网页元素上的各种事件，如click、mouseover、keydown等，然后执行相应的 JavaScript 函数来实现特定的交互逻辑，使网页能够根据用户的操作做出实时响应。

HTML

模板

网页有一个基本的模板

<!-- 文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- 字符集为UTF-8 -->
        <meta charset="UTF-8">
        <!-- 设置浏览器的兼容性 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>页面标题</title>
    </head>

    <body>
        <!-- 网页的内容 -->
        <!-- 在body中定义文字不区分大小写，一般全部小写 -->
    </body>
</html>

前面提到，html代码是由一个一个的标签组成，这些标签分别定义不同的组件。我们想要在网页中添加组件，只需要写出它所对应的标签即可

基础标签

标签	描述	使用案例
`<h1>`~`<h6>`	定义标题，h1为一级标题	`<h1>这是一个标题</h1>`
`<p>`	定义一个段落	`<p>这是一个段落。</p>`
`<a>`	超链接	`<a href="https://www.runoob.com">这是个链接</a>`
`<br>`	折行
`<hr>`	水平线

图片音频

<img>：用于显示图片。
<audio>：用于播放音频，支持 MP3、WAV、OGG 等格式。
<video>：用于播放视频，支持 MP4、WebM、OGG 等格式。

常用属性

src：表示图像、音频或视频的 URL（统一资源定位符）。
height：设置元素的高度，单位可以是 px（像素）或者 %（占用父元素的百分比）。
width：设置元素的宽度，单位可以是 px（像素）或者 %（占用父元素的百分比）。只设置一个属性时，另一个会等比缩放。
controls：为 <audio> 和 <video> 元素添加播放控件。

超链接

<a> 标签在 HTML 中用于创建超链接，通过它可以链接到其他网页、文件、位置或资源。

属性

href：指定链接的目标资源地址。如：href="http://example.com"。
target ：用于设置打开目标资源的方式，有以下取值：
- _self：默认值，表示在当前页面打开目标资源。
- _blank：表示在新的空白页面打开目标资源。

表格

标签	描述
`<table>`	定义表格
`<tr>`	定义表格中的行
`<td>`	定义表格中的单元格
`<th>`	定义表格中的表头单元格

标签属性<table> 标签属性

属性	描述
`border`	规定表格边框的宽度
`width`	规定表格的宽度
`cellspacing`	规定单元格之间的空白

<tr> 标签属性

属性	描述
`align`	定义表格行的内容对齐方式

<td> 标签属性

属性	描述
`rowspan`	规定单元格可横跨的行数
`colspan`	规定单元格可横跨的列数

课表案例：

<table border="1" cellspacing="0" width="500">
	<tr align="center">
		<th colspan="2">节次</th>
		<th>星期一</th>
		<th>星期二</th>
		<th>星期三</th>
		<th>星期四</th>
		<th>星期五</th>
	</tr>
	<tr align="center">
		<th rowspan="2">上午</th>
		<td>1</td>
		<td> </td>
		<td>数电</td>
		<td>软件</td>
		<td> </td>
		<td>传感器</td>
	</tr>
	<tr align="center">
		<td>2</td>
		<td>单片机</td>
		<td>毛概</td>
		<td>单片机</td>
		<td>概率论</td>
		<td>概率论</td>
	</tr>
	<tr align="center">
		<th rowspan="2">下午</th>
		<td>1</td>
		<td>体育</td>
		<td> </td>
		<td>毛概</td>
		<td>数电</td>
		<td>国家安全</td>
	</tr>
	<tr align="center">
		<td>2</td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>

表单

表单由 <form> 标签定义。
表单项（元素）包括不同类型的 <input> 元素、下拉列表、文本域等。

相关标签及描述

标签	描述
`<form>`	用于定义表单。
`<input>`	定义表单项，通过 `type` 属性控制输入形式，如文本输入、密码输入、复选框等。
`<label>`	为表单项定义标注，可提高表单的可用性和可访问性。
`<select>`	定义下拉列表。
`<option>`	定义下拉列表的列表项，需在 `<select>` 标签内使用。
`<textarea>`	定义文本域，用于输入多行文本内容。

<form> 属性

action：指定表单发送数据的 URL 地址。如果不指定该属性，则表单数据会提交到当前页面。
method：规定表单发送数据的方式，有以下两种取值：
- get：将表单数据拼接在 URL 后面进行发送，由于 URL 长度有限制，所以数据大小限制约为 4KB 。
- post：将数据放到 HTTP 请求消息体中进行发送，数据大小理论上无限制。

注意事项 表单项必须设置 name 属性，这样在表单提交时，对应的数据才能被发送出去。

示例

<form action="#" method="post">
    <input type="text" name="username">
    <input type="submit">
</form>

表单元素

标签	描述
`<input>`	表单项，通过 `type` 属性控制输入形式
`<select>`	定义下拉列表，需配合 `<option>` 标签定义列表项
`<textarea>`	定义文本域

`<input>` 的 `type` 属性取值及描述

`type` 取值	描述
`text`	默认值，定义单行的输入字段
`password`	定义密码字段，输入内容会被隐藏显示
`radio`	定义单项按钮，用于从多个选项中选择一个
`checkbox`	定义复选框，可同时选择多个选项
`file`	定义文件上传按钮，允许用户选择本地文件进行上传
`hidden`	定义隐藏的输入字段，该字段不会显示在页面上，但会随表单一起提交
`submit`	定义提交按钮，点击后将表单数据发送到服务器
`reset`	定义重置按钮，点击后清除表单中的所有数据
`button`	定义可点击按钮，需配合 JavaScript 实现特定功能

优化表单交互的技巧

放大选择区域：使用 <label> 标签关联表单项，通过 for 属性与表单项的 id 对应，这样点击 <label> 内的文字也能选择对应的选项。例如：<label for="username">男</label> 。
设置互斥关系：若要让两个单选框选项互为互斥关系，需将它们的 name 属性设置为一致。例如：<input type="radio" name="sex"> 。
明确提交数据：在开发中，为确保提交的数据有明确意义，必须为表单项增加 value 属性。例如：<input type="radio" name='sex' value='1'> 。

`<select>` 标签示例

<select name="city">
    <option>北京</option>
    <option>上海</option>
    <option>河北</option>
</select>

上述代码创建了一个下拉列表，用户可以从 “北京”“上海”“河北” 中选择一个选项，选择后对应的值会随表单提交。

列表及列表链接

列表类型及标签

有序列表：使用 <ol> 标签定义，其中的每个列表项用 <li> 标签表示，列表项会按照一定顺序（默认是数字顺序）排列显示。
无序列表：使用 <ul> 标签定义，同样通过 <li> 标签表示列表项，列表项以项目符号（默认是圆点）的形式显示，无顺序之分。

示例代码

有序列表示例：

<ol>
    <li>咖啡</li>
    <li>牛奶</li>
</ol>

在上述有序列表中，浏览器会自动为列表项添加序号，显示为 “1. 咖啡” 和 “2. 牛奶”。

无序列表示例：

<ul>
    <li>咖啡</li>
    <li>牛奶</li>
</ul>

此无序列表中，列表项前面会显示默认的圆点项目符号，即 “. 咖啡” 和 “. 牛奶” 。

`<ol>` 标签的 `type` 属性

<ol> 标签的 type 属性用于设置项目符号的类型，常见取值如下：

1（默认值）：使用数字（1, 2, 3...）作为项目符号。
A：使用大写英文字母（A, B, C...）作为项目符号。
a：使用小写英文字母（a, b, c...）作为项目符号。
I：使用大写罗马数字（I, II, III...）作为项目符号。
i：使用小写罗马数字（i, ii, iii...）作为项目符号。

列表与链接结合

可以在列表项 <li> 标签内使用 <a> 标签来创建列表链接，例如：

<ul>
    <li><a href="https://www.example1.com">链接1</a></li>
    <li><a href="https://www.example2.com">链接2</a></li>
</ul>

这样用户点击列表项中的链接，就可以跳转到相应的页面。