前端基础入门-高级

君子善假于物也

已于 2025-03-25 11:16:13 修改

阅读量1k

点赞数 29

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端

于 2025-03-06 17:46:15 首次发布

本文链接：https://blog.youkuaiyun.com/m0_59690068/article/details/146072612

前端专栏收录该内容

2 篇文章

订阅专栏

1.下载VScode

2.下载两个插件

3.创建文件

1.点击文件-打开文件夹（自己要存放代码的地方）

2.先在自己盘里面创建test文件夹--直接拖到vscode里面就可以了

1.下载VScode

这一步直接下就可以了

2.下载两个插件

Chinese这个插件就是让我们的软件从英文变成汉字，open in browser这个插件就是看我们在浏览器里面看我们代码的效果嘛，然后我们就可以进行调试嘛。Chinese这个要重启我们的vscode

3.创建文件

1.点击文件-打开文件夹（自己要存放代码的地方）

2.先在自己盘里面创建test文件夹--直接拖到vscode里面就可以了

然后里面新建文件就可以了，后缀名为.html

4.-HTML骨架

html：整个网页
head：网页头部，用来存放给浏览器看的信息，例如 CSS
title：网页标题
body：网页主体，用来存放给用户看的信息，例如图片、文字

<html>
  <head>
    <title>网页标题</title>
  </head>
  <body>
    网页主体
  </body>
</html>

提示

VS Code 可以快速生成骨架：在 HTML 文件（.html）中，!（英文）配合 Enter / Tab 键

具体架构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

我们直接在网页主体里面编写代码

5.标签的写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <strong>文字内容</strong>
    <!-- <strong></strong> 给文字加粗-->
    <hr>
    <!-- <hr>下划线 -->
    <br>换行
    <br>换行
</body>
</html>

Alt+B 在浏览器中看效果

6-注释

概念：注释是对代码的解释和说明，能够提高程序的可读性，方便理解、查找代码。

注释不会再浏览器中显示。

在 VS Code 中，添加 / 删除注释的快捷键：Ctrl + /

<!-- 我是 HTML 注释 -->

7-标题标签

一般用在新闻标题、文章标题、网页区域名称、产品名称等等。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>一级标题</h1>
  <h2>二级标题</h2>
  <h3>三级标题</h3>
  <h4>四级标题</h4>
  <h5>五级标题</h5>
  <h6>六级标题</h6>
</body>
</html>

显示特点：

文字加粗
字号逐渐减小
独占一行（换行）

经验

h1 标签在一个网页中只能用一次，用来放新闻标题或网页的 logo

h2 ~ h6 没有使用次数的限制

8-段落标签

一般用在新闻段落、文章段落、产品描述信息等等。

<p>段落</p>

显示特点：

独占一行
段落之间存在间隙

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
</body>
</html>

9-换行和水平线

换行：br
水平线：hr
<br>
<hr>

10-文本格式化标签

作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <strong>strong 加粗</strong>
  <b>b 加粗</b>
  <em>em 倾斜</em>
  <i>i 倾斜</i>
  <ins>ins 下划线</ins>
  <u>u 下划线</u>
  <del>del 删除线</del>
  <s>s 删除线</s>
</body>
</html>

11-图像标签

作用：在网页中插入图片

<img  src="图片的 URL">

src用于指定图像的位置和名称，是 <img> 的必须属性。

图像属性：

属性语法：

属性名="属性值"
属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序

12-路径

概念：路径指的是查找文件时，从起点到终点经历的路线。

路径分类：

相对路径：从当前文件位置出发查找目标文件
绝对路径：从盘符出发查找目标文件
- Windows 电脑从盘符出发
- Mac 电脑从根目录出发

相对路径：

查找方式：从当前文件位置出发查找目标文件

特殊符号：

/ 表示进入某个文件夹里面 → 文件夹名/
. 表示当前文件所在文件夹 → ./
.. 表示当前文件的上一级文件夹 → ../

绝对路径：

查找方式：Windows 电脑从盘符出发；Mac 电脑从根目录（/）出发

<img  src="C:\images\mao.jpg">

提示

Windows 默认是 \ ，其他系统是 /，建议统一写为 /

特殊的绝对路径 → 文件的在线网址：https://www.itheima.com/images/logo.png "，应用场景：网页底部友情链接

13-超链接标签

作用：点击跳转到其他页面。

<a href="https://www.baidu.com">跳转到百度</a>

href 属性值是跳转地址，是超链接的必须属性。

超链接默认是在当前窗口跳转页面，添加 target="_blank" 实现新窗口打开页面。

拓展：开发初期，不确定跳转地址，则 href 属性值写为 #，表示空链接，页面不会跳转，在当前页面刷新一次。

<a href="https://www.baidu.com/">跳转到百度</a>

<!-- 跳转到本地文件：相对路径查找 --> 
<!-- target="_blank" 新窗口跳转页面 --> 
<a href="./01-标签的写法.html" target="_blank">跳转到01-标签的写法</a>

<!-- 开发初期，不知道超链接的跳转地址，href属性值写#，表示空链接，不会跳转 -->
<a href="#">空链接</a>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>超链接</title>
</head>
<body>
  <a href="https://www.baidu.com/">跳转到百度</a>
  
  <!-- 跳转到本地文件：相对路径查找 --> 
  <!-- target="_blank" 新窗口跳转页面 --> 
  <a href="./01-标签的写法.html" target="_blank">跳转到01-标签的写法</a>

  <!-- 开发初期，不知道超链接的跳转地址，href属性值写#，表示空链接，不会跳转 -->
  <a href="#">空链接</a>
</body>
</html>

14.音频

<audio src="音频的 URL"></audio>

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>音频</title>
</head>
<body>
  <!-- 在 HTML5 里面，如果属性名和属性值完全一样，可以简写为一个单词 -->
  <audio src="./media/music.mp3" controls loop autoplay></audio>
</body>
</html>

15.视频

<video src="视频的 URL"></video>

常用属性

<!-- 在浏览器中，想要自动播放，必须有 muted 属性 -->
<video src="./media/vue.mp4" controls loop muted autoplay></video>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>视频</title>
</head>
<body>
  <!-- 在浏览器中，想要自动播放，必须有 muted 属性 -->
  <video src="./media/vue.mp4" controls loop muted autoplay></video>
</body>
</html>

16.无序列表

无序列表：

作用：布局排列整齐的不需要规定顺序的区域。

标签：ul 嵌套 li，ul 是无序列表，li 是列表条目。

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

注意事项：

ul 标签里面只能包裹 li 标签
li 标签里面可以包裹任何内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>无序列表</title>
</head>
<body>
  <ul>
    <li>列表条目1</li>
    <li>列表条目2</li>
    <li>列表条目3</li>
  </ul>
</body>
</html>

效果：

17.有序列表

作用：布局排列整齐的需要规定顺序的区域。

标签：ol 嵌套 li，ol 是有序列表，li 是列表条目。

<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>

注意事项：

ol 标签里面只能包裹 li 标签
li 标签里面可以包裹任何内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>有序列表</title>
</head>
<body>
  <ol>
    <li>步骤1</li>
    <li>步骤2</li>
    <li>步骤3</li>
  </ol>
</body>
</html>

效果：

18.定义列表

标签：dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述 / 详情。

<dl>
  <dt>列表标题</dt>
  <dd>列表描述 / 详情</dd>
   ……
</dl>

注意事项：

dl 里面只能包含dt 和 dd

dt 和 dd 里面可以包含任何内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>定义列表</title>
</head>
<body>
  <dl>
    <dt>服务中心</dt>
    <dd>申请售后</dd>
    <dd>售后政策</dd>
    <dt>线下门店</dt>
    <dd>小米</dd>
  </dl>
</body>
</html>

19.表格

网页中的表格与 Excel 表格类似，用来展示数据。

基本使用：

标签：table 嵌套 tr，tr 嵌套 td / th。

提示：在网页中，表格默认没有边框线，使用 border 属性可以为表格添加边框线。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表格-基本使用</title>
</head>
<body>
  <table border="1">
    <tr>
      <th>姓名</th>
      <th>语文</th>
      <th>数学</th>
      <th>总分</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>99</td>
      <td>100</td>
      <td>199</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>98</td>
      <td>100</td>
      <td>198</td>
    </tr>
    <tr>
      <td>总结</td>
      <td>全市第一</td>
      <td>全市第一</td>
      <td>全市第一</td>
    </tr>
  </table>
</body>
</html>

20.表格结构标签

作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰。

提示：表格结构标签可以省略。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表格结构标签</title>
</head>
<body>
  <table border="1">
    <thead>
      <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
        <th>总分</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>99</td>
        <td>100</td>
        <td>199</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>98</td>
        <td>100</td>
        <td>198</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>总结</td>
        <td>全市第一</td>
        <td>全市第一</td>
        <td>全市第一</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>

21.合并单元格

作用：将多个单元格合并成一个单元格，以合并同类信息。

合并单元格的步骤：

明确合并的目标
保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）
- 跨行合并，保留最上单元格，添加属性 rowspan
- 跨列合并，保留最左单元格，添加属性 colspan
删除其他单元格

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>合并单元格</title>
</head>
<body>
  <table border="1">
    <thead>
      <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
        <th>总分</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>99</td>
        <td rowspan="2">100</td> <!-- 合并行 -->
        <td>199</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>98</td>
        <!-- <td>100</td> -->
        <td>198</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>总结</td>
        <td colspan="3">全市第一</td><!-- 合并列 -->
        <!-- <td>全市第一</td>
        <td>全市第一</td> -->
      </tr>
    </tfoot>
  </table>
</body>
</html>

22.表单-input基本使用

表单：

作用：收集用户信息。

使用场景：

登录页面
注册页面
搜索区域

input 标签：

input 标签 type 属性值不同，则功能不同。

<input type="..." >

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>input基本使用</title>
</head>
<body>
  <!-- 特点：输入什么就显示什么 -->
  文本框：<input type="text">
  <br><br>
  <!-- 特点：输入什么都是以 点 的形式显示 -->
  密码框：<input type="password">
  <br><br>
  单选框：<input type="radio">
  <br><br>
  多选框：<input type="checkbox">
  <br><br>
  上传文件：<input type="file">
</body>
</html>

23.input 标签占位文本

占位文本：提示信息，文本框和密码框都可以使用。

<input type="..." placeholder="提示信息">

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>input占位文本</title>
</head>
<body>
  文本框：<input type="text" placeholder="请输入用户名">
  <br><br>
  密码框：<input type="password" placeholder="请输入密码">
</body>
</html>

24.单选框

常用属性：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>单选框</title>
</head>
<body>
  性别：
  <input type="radio" name="gender"> 男
  <input type="radio" name="gender" checked> 女
</body>
</html>

提示：name 属性值自定义。

25.上传文件

默认情况下，文件上传表单控件只能上传一个文件，添加 multiple 属性可以实现文件多选功能。

<input type="file" multiple>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>上传多个文件</title>
</head>
<body>
  上传文件：<input type="file" multiple>
</body>
</html>

26.多选框

多选框也叫复选框，默认选中：checked。

input type="checkbox" checked> 敲前端代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>多选框</title>
</head>
<body>
  兴趣爱好：
  <input type="checkbox"> 敲代码
  <input type="checkbox" checked> 敲前端代码
  <input type="checkbox" checked> 敲前端 HTML 代码
</body>
</html>

27.下拉菜单

标签：select 嵌套 option，select 是下拉菜单整体，option是下拉菜单的每一项。

<select>
  <option>北京</option>
  <option>上海</option>
  <option>广州</option>
  <option>深圳</option>
  <option selected>武汉</option>
</select>

默认显示第一项，selected 属性实现默认选中功能。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>下拉菜单</title>
</head>
<body>
  城市：
  <select>
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option>深圳</option>
    <option selected>武汉</option>
  </select>
</body>
</html>

28.文本域

作用：多行输入文本的表单控件。

<textarea>默认提示文字</textarea>

注意点：

实际开发中，使用 CSS 设置文本域的尺寸
实际开发中，一般禁用右下角的拖拽功能

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文本域</title>
</head>
<body>
  <!-- 工作中，使用 CSS 禁用右下角的拖拽功能；使用 CSS 设置尺寸 -->
  <textarea>请输入评论</textarea>
</body>
</html>

其他：

在HTML中，<textarea>标签中的内容会被当作默认值显示，用户需要先删除这些默认内容才能输入自己的内容。为了避免这种情况，可以使用placeholder属性来代替默认值。placeholder会在用户未输入内容时显示提示信息，当用户开始输入时，提示信息会自动消失。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文本域</title>
</head>
<body>
  <!-- 工作中，使用 CSS 禁用右下角的拖拽功能；使用 CSS 设置尺寸 -->
  <textarea placeholder="请输入评论"></textarea>
</body>
</html>

29.label 标签

作用：网页中，某个标签的说明文本。

写法一
- label 标签只包裹内容，不包裹表单控件
- 设置 label 标签的 for 属性值和表单控件的 id 属性值相同

<input type="radio" id="man">
<label for="man">男</label>

写法二：使用 label 标签包裹文字和表单控件，不需要属性

<label><input type="radio"> 女</label>

提示：支持 label 标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>label标签</title>
</head>
<body>
  性别：
  <input type="radio" name="gender" id="man">
   <label for="man">男</label>
  <label><input type="radio" name="gender"> 女</label>
</body>
</html>

30.按钮

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>按钮</title>
</head>
<body>
  <!-- form 表单区域 -->
  <!-- action="" 发送数据的地址 -->
  <form action="">
    用户名：<input type="text">
    <br><br>
    密码：<input type="password">
    <br><br>

    <!-- 如果省略 type 属性，功能是 提交 -->
    <button type="submit">提交</button>
    <!-- submit 提交按钮，点击后可以提交数据到后台（默认功能） -->
    <button type="reset">重置</button>
    <!-- 重置按钮，点击后将表单控件恢复默认值 -->
    <button type="button">普通按钮</button>
    <!-- 普通按钮，默认没有功能，一般配合JavaScript使用 -->
  </form>
  <!-- 提示：按钮需配合form标签（表单区域）才能实现对应的功能 -->
</body>
</html>

31.无语义的布局标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>无语义的布局标签div 和 span</title>
</head>
<body>
  <!-- 
作用：布局网页（划分网页区域，摆放内容）
* div：独占一行
* span：不换行 -->

  <!-- div：大盒子 -->
  <div>div 标签，独占一行</div>
  <div>这是 div 标签</div>
  <!-- span：小盒子 -->
  <span>span标签，不换行</span>
  <span>这是 span 标签</span>
</body>
</html>

32.有语义的布局标签

33.字符实体

34.综合案例一-体育新闻列表

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>体育新闻</title>
</head>
<body>
  <ul>
    <li>
      <img src="./images/1.jpg" alt="">
      <h3>主帅安东尼奥回西班牙休假 国青抵达海口进行隔离</h3>
    </li>
    <li>
      <img src="./images/2.jpg" alt="">
      <h3>梅州主帅：申花有强有力的教练组 球员体能水平高</h3>
    </li>
    <li>
      <img src="./images/3.jpg" alt="">
      <h3>马德兴:00后球员将首登亚洲舞台 调整心态才务实</h3>
    </li>
  </ul>
</body>
</html>

35.综合案例二-注册信息

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>注册信息</title>
</head>
<body>
  <h1>注册信息</h1>
  <form action="">
    <!-- 表单控件 -->
    <!-- 个人信息 -->
    <h2>个人信息</h2>
    <label>姓名：</label><input type="text" placeholder="请输入真实姓名">
    <br><br>
    <label>密码：</label><input type="password" placeholder="请输入密码">
    <br><br>
    <label>确认密码：</label><input type="password" placeholder="请输入确认密码">
    <br><br>
    <label>性别：</label>
    <label><input type="radio" name="gender"> 男</label>
    <label><input type="radio" name="gender" checked> 女</label>
    <br><br>
    <label>居住城市：</label>
    <select>
      <option>北京</option>
      <option>上海</option>
      <option>广州</option>
      <option>深圳</option>
      <option>武汉</option>
    </select>
    <!-- 教育经历 -->
    <h2>教育经历</h2>
    <label>最高学历：</label>
    <select>
      <option>博士</option>
      <option>硕士</option>
      <option>本科</option>
      <option>大专</option>
    </select>
    <br><br>
    <label>学校名称：</label><input type="text">
    <br><br>
    <label>所学专业：</label><input type="text">
    <br><br>
    <label>在校时间：</label>
    <select>
      <option>2015</option>
      <option>2016</option>
      <option>2017</option>
      <option>2018</option>
    </select>
    --
    <select>
      <option>2019</option>
      <option>2020</option>
      <option>2021</option>
      <option>2022</option>
    </select>
    <!-- 工作经历 -->
    <h2>工作经历</h2>
    <label>公司名称：</label><input type="text">
    <br><br>
    <label>工作描述：</label>
    <br>
    <textarea></textarea>
    <br><br>
    <!-- 协议 和 按钮 -->
    <input type="checkbox"><label>已阅读并同意以下协议：</label>
    <ul>
      <li><a href="#">《用户服务协议》</a></li>
      <li><a href="#">《隐私政策》</a></li>
    </ul>
    <br><br>
    <button>免费注册</button>
    <button type="reset">重新填写</button>
  </form>
</body>
</html>

*额外介绍

我们的打！号出来的基本框架是这样的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

然后加了一行这个：

<meta http-equiv="X-UA-Compatible" content="IE=edge"> 是一个HTML的元标签（meta tag），主要用于指定网页在Internet Explorer（IE）浏览器中的兼容性模式。

作用：

IE=edge：
- 表示要求IE浏览器以最高版本的渲染引擎来渲染网页。
- 这意味着IE会尽量使用其最新的功能和标准来显示网页，而不是以兼容旧版本IE的方式渲染。
- 例如，如果IE浏览器的版本是IE11，那么网页会以IE11的渲染引擎来显示。
兼容性问题：
- IE浏览器在历史上有多个版本（如IE6、IE7、IE8等），每个版本的渲染引擎和功能都不相同。
- 如果不指定X-UA-Compatible，IE可能会默认使用较低版本的渲染模式来兼容旧网页，这可能导致网页在现代浏览器中显示异常。
应用场景：
- 这个标签通常用于需要兼容IE浏览器的网页开发中，尤其是在企业级应用中，用户可能仍在使用较旧的IE版本。
- 通过设置IE=edge，可以确保网页在IE浏览器中尽可能以最佳方式显示。

36.CSS初体验

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 文档的呈现（美化内容）。

书写位置：title 标签下方添加 style 双标签，style 标签里面书写 CSS 代码。

就是美化我们的页面嘛。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>初识 CSS</title>
  <style>
    /* CSS 代码 */
    /* 选择器 { CSS 属性} */
    /* 属性名和属性值成对出现 → 键值对 */
    p {
      /* 文字颜色 */
      color: red;
      /* 字号 */
      font-size: 30px;
    }
  </style>
</head>
<body>
  <p>体验 CSS</p>
</body>
</html>

37.CSS引入方式

内部样式表：学习使用
- CSS 代码写在 style 标签里面
外部样式表：开发使用
- CSS 代码写在单独的 CSS 文件中（.css）
- 在 HTML 使用 link 标签引入

<link rel="stylesheet" href="./my.css">

行内样式：配合 JavaScript 使用
- CSS 写在标签的 style 属性值里

<div style="color: red; font-size:20px;">这是 div 标签</div>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 引入方式</title>
  <!-- link 引入外部样式表； rel：关系，样式表 -->
  <link rel="stylesheet" href="./css/my.css">
</head>
<body>
  <p>这是 p 标签</p>
  <!-- 行内，style=" CSS" -->
  <div style="color: green; font-size: 30px;">这是 div 标签</div>
</body>
</html>

/* 这个文件放 CSS 代码 */
/* 选择器 { CSS 属性 } */
p {
  color: red;
}

38.标签选择器

标签选择器：使用**标签名**作为选择器 → 选中**同名标签设置相同的样式**。

例如：p, h1, div, a, img......

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>标签选择器</title>
  <style>
    /* 标签选择器：使用**标签名**作为选择器 → 选中**同名标签设置相同的样式**。
    例如：p, h1, div, a, img...... */
    /* 特点：选中同名标签设置相同的样式，无法差异化同名标签的样式 */
    p {
      color: red;
      /* 设置文字颜色为红色
       */
    }
  </style>
</head>
<body>
  <p>这是 p 标签</p>
  <p>1111</p>
  <p>2222</p>
</body>
</html>

也可以把样式style单独写一个css文件引入进来。

39.类选择器

作用：查找标签，差异化设置标签的显示效果。

步骤：

定义类选择器 → .类名
使用类选择器 → 标签添加 class="类名"

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>类选择器</title>
  <style>
    /* 定义 */
    .red {
      color: red;
    }

    .size {
      font-size: 50px;
    }
  </style>
</head>
<body>
  <!-- 使用 -->
  <!-- 一个类选择器可以给多个标签使用 -->
  <p class="red">111111</p>
  <p>222222</p>
  <!-- 一个标签可以使用多个类名，class属性值写多个类名，类名用空格隔开 -->
  <div class="red size">div 标签</div>
</body>
</html>

注意：

类名自定义，不要用纯数字或中文，尽量用英文命名
一个类选择器可以供多个标签使用
一个标签可以使用多个类名，类名之间用空格隔开

开发习惯：类名见名知意，多个单词可以用 - 连接，例如：news-hd。

40.id选择器

作用：查找标签，差异化设置标签的显示效果。

场景：id 选择器一般配合 JavaScript 使用，很少用来设置 CSS 样式

步骤：

定义 id 选择器 → #id名
使用 id 选择器 → 标签添加 id= "id名"

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>id选择器</title>
  <style>
    /* 定义 */
    #red {
      color: red;
    }
  </style>
</head>
<body>
  <!-- 使用 -->
  <div id="red">div 标签</div>
</body>
</html>

规则：同一个 id 选择器在一个页面只能使用一次。

41.通配符选择器

作用：查找页面所有标签，设置相同样式。

通配符选择器： *，不需要调用，浏览器自动查找页面所有标签，设置相同的样式

* {
color: red;
}

经验：通配符选择器可以用于清除标签的默认样式，例如：标签默认的外边距、内边距。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>通配符选择器</title>
  <style>
    * {
      color: red;
    }
  </style>
</head>
<body>
  <p>p 标签</p>
  <div>div 标签</div>
  <h1>h1 标签</h1>
  <ul>
    <li>li</li>
    <li>li</li>
    <li>li</li>
  </ul>
  <strong>strong</strong>
</body>
</html>

42.盒子尺寸和背景色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>画盒子</title>
  <style>
    .red {
      /* 宽度 */
      width: 100px;
      /* 高度 */
      height: 100px;
      /* 背景色 */
      background-color: brown;
    }

    .orange {
      width: 200px;
      height: 200px;
      background-color: orange;
    }
  </style>
</head>
<body>
  <div class="red">div1</div>
  <div class="orange">div2</div>
</body>
</html>

43.字体大小

字体大小

属性名：font-size
属性值：文字尺寸，PC 端网页最常用的单位 px

p {
  font-size: 30px;
}

经验：谷歌浏览器默认字号是16px。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>字体大小</title>
  <style>
    /* 经验：谷歌浏览器文字有默认大小 16px */
    p {
      /* font-size 属性必须有单位，否则属性不生效 */
      font-size: 30px;
    }
  </style>
</head>
<body>
  <p>测试字体大小</p>
  <div>测试默认字体大小</div>
</body>
</html>

44.字体样式（是否倾斜）

作用：清除文字默认的倾斜效果

属性名：font-style

属性值

正常（不倾斜）：normal
倾斜：italic

45.行高

作用：设置多行文本的间距

属性名：line-height

属性值

数字 + px
数字（当前标签font-size属性值的倍数）

line-height: 30px;


/* 当前标签字体大小为16px */
line-height: 2;

46.单行文字垂直居中

垂直居中技巧：行高属性值等于盒子高度属性值

注意：该技巧适用于单行文字垂直居中效果

div {
  height: 100px;
  background-color: skyblue;

  /* 注意：只能是单行文字垂直居中 */
  line-height: 100px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>垂直居中</title>
  <style>
    div {
      height: 100px;
      background-color: skyblue;

      /* 注意：只能是单行文字垂直居中 */
      line-height: 100px;
    }
  </style>
</head>
<body>
  <div>文字</div>
</body>
</html>

47.font复合属性

使用场景：设置网页文字公共样式

复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。

font: 是否倾斜是否加粗字号/行高字体（必须按顺序书写）

div {
  font: italic 700 30px/2 楷体;
}

注意：字号和字体值必须书写，否则 font 属性不生效。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>font 属性</title>
  <style>
    /* 文字倾斜、文字加粗、字体大小是30px、行高2倍、楷体 */ 
    div {
      /* font: italic 700 30px/2 楷体; */

      /* font 属性必须写字号和字体，否则 属性不生效 */
      font: 30px 楷体;
      /* font: italic 700 30px/2; */
    }
  </style>
</head>
<body>
  <div>测试 font 属性</div>
</body>
</html>

48.文本缩进

属性名：text-indent

属性值：

数字 + px
数字 + em（推荐：1em = 当前标签的字号大小）

p {
  text-indent: 2em;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文本缩进</title>
  <style>
    p {
      text-indent: 2em;
      font-size: 30px;
    }
  </style>
</head>
<body>
  <p>今年受成本驱动、需求拉动以及全球粮价上涨等各种因素叠加影响，我国粮食价格整体上扬，小麦、玉米、大豆价格高位波动，水稻价格运行平稳，优质优价特征明显，农民择机择时售粮，实现种粮收益最大化。但种粮成本持续攀升成为影响农民增收的“拦路虎”。这是因为，在去年高粮价的刺激下，今年土地租金以及化肥、农药、柴油等农资价格大幅上涨，种粮成本随之增加。加之今年粮食生产遭遇去年北方罕见秋雨秋汛、今年“南旱北涝”等极端天气，虽然没有带来灾害性后果，但一些农户为抗灾付出更多生产成本，种粮农户收益空间进一步收窄。</p>
</body>
</html>

49.文本对齐方式

作用：控制内容水平对齐方式

属性名：text-align

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文本对齐方式</title>
  <style>
    h1 {
      /* 本质：居中的是文字内容，不是标签 */
      /* text-align: left; */
      text-align: center;
      /* text-align: right; */
    }
  </style>
</head>
<body>
  <h1>标题文字</h1>
</body>
</html>