当前位置：首页 > news >正文

认识HTML

news 2025/9/4 14:05:21

一、开发环境准备

1. 开发环境准备

在哪里写代码？在哪里看效果？

编辑器：VSCode
浏览器：Chrome

2. VS Code 基本使用

打开文件夹（任意文件夹 →拖拽至 VS Code 空白位置即可）
安装插件

- 扩展 → 搜索插件 → 安装 → 重启 VS Code
- 汉化菜单插件：Chinese
- 打开网页插件：open in browser

缩放代码字号

- 放大：Ctrl + 加号
- 缩小：Ctrl +减号

保存：ctrl + s

3. 设置默认浏览器

控制面板(查看方式:小图标) -- 默认程序 -- 设置默认程序 -- web浏览器: 谷歌

二、HTML初体验

1. HTML定义和语法

HTML 超文本标记语言——HyperTextMarkup Language。

超文本：超越文本的存在，不仅仅包含文本，还包含图片、视频、音频、链接

语法：

注意点：

标签成对出现，中间包裹内容
<>里面放英文字母（标签名）
结束标签比开始标签多 /

拓展：

双标签：成对出现的标签
单标签：只有开始标签，没有结束标签

小练习1：

<img src="pic.png">
<p>《悯农》</p>
<p>锄禾日当午，汗滴禾下土</p>
<p>谁知盘中餐，粒粒皆辛苦</p>
每个不同的内容呈现 → 需要不同的标记 →  就是不同的标签

小练习2：

2. 页面骨架

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

<!-- 指定浏览器按照什么类型解析下面的代码 -->
<!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></body></html>

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

3. 标签关系

作用：明确代码的书写位置

父子关系（嵌套关系）

兄弟关系（并列关系）

思考：

图中高亮区域的两个元素什么关系？
方框元素和内部元素什么关系？

4. 注释

HTML 注释：，注释不会显示在浏览器中。

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

三、HTML标签

1. 标题标签

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

标签名：h1 ~ h6（双标签）

显示特点：

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

2. 段落标签

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

标签名：p（双标签）

显示特点：

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

3. 文本格式化标签

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

strong、em、ins、del 标签自带强调含义（语义）。

小练习1：新闻展示

相关文本：

莫拉塔破门拉波尔特建功西班牙3-0塞尔维亚晋级8强

来源：央视网 | 2024-10-16 07:46:28

央视网消息：北京时间10月16日，欧国联A联赛第4轮，西班牙主场对阵塞尔维亚。上半场，拉波尔特头槌闪击破门。易边再战，莫拉塔失点后建功，巴埃纳任意球直接破门，帕夫洛维奇直红被罚下。最终西班牙3-0塞尔维亚继续领跑D组，晋级欧国联8强！

小练习2：新闻展示

https://baijiahao.baidu.com/s?id=1806225453543487650&wfr=spider&for=pc

相关文本：

潘展乐破世界纪录夺冠中国“飞鱼”碧波扬威

中国青年网 2024-08-02 06:02

当地时间7月31日，法国巴黎拉德芳斯体育馆，巴黎奥运会游泳项目男子100米自由泳决赛，中国选手潘展乐在获胜后庆祝。潘展乐以46秒40的成绩夺得冠军，并打破世界纪录，为中国游泳队拿下首金。中青报·中青网记者李隽辉/摄

4. 图像标签

作用：在网页中插入图片。

<img src="图片的 URL">

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

5. 相对路径

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

相对路径：从当前文件位置出发查找目标文件

./ 表示当前文件所在文件夹目录

../ 表示当前文件的上一级文件夹目录

6. 超链接

作用：页面跳转

标签名：a（双标签）

属性：

设置跳转地址：href="跳转地址"
新窗口跳转：target="_blank"

<a href="http://www.baidu.com">跳转到百度</a>
<a href="./02-文本相关标签.html">跳转到本地文件</a>
<a href="#">不知道跳转地址，使用空链接</a>

7. 表单标签

input：表单
button：按钮
selectoption: 下拉菜单

标签名：input（单标签）

属性：

type=""，属性值不同，表单功能不同
placeholder：提示文本
name：表单名称

type属性值如下：

type 属性值	说明
text	文本框
password	密码框
radio	单选框
checkbox	复选框（多选框）

<!-- <br> 换行标签  -->
<!-- 文本框 text -->
用户：<input type="text" placeholder="请输入用户名"> <br><br><!-- 密码框 password -->
密码：<input type="password" placeholder="请输入密码"> <br><br><!-- 单选框 radio （name可以分组）-->
性别：
<input type="radio" name="gender">男
<input type="radio" name="gender">女  <br><br>班级：
<input type="radio" name="classroom">一班
<input type="radio" name="classroom">二班
<input type="radio" name="classroom">三班  <br><br>
<!-- 复选框 checkbox -->
爱好：
<input type="checkbox" name="hobby">唱歌
<input type="checkbox" name="hobby">爬山
<input type="checkbox" name="hobby">游泳 <br><br><input type="checkbox"> 是否同意许可 <br><br><!-- 多行文本输入 -->
个人简介：
<textarea rows="5" cols="30"></textarea> <br><br>
<!-- 按钮 -->
<button>提交</button>
<button>重置</button>

8. 列表标签

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

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

注意事项：

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

四、综合作业

4.1 作业1

综合练习1

综合练习2

📎参考效果.zip 📎images.zip

实现页面A和B的同时，完成跳转效果

综合练习3

百度热搜
各地贯彻十九届六中全会精神纪实热490万
英特尔就涉疆言论道歉 赵立坚回应热489万
六中全会重磅决议释放哪些重要信息热477万
6天连杀3人凶手曾春亮被执行死刑463万
西安疫情为何外溢6地457万
举报前婆婆吃空饷女子争儿子抚养权新448万
“六毒俱全”女县长曾插手3亿项目439万
孙海洋夫妇接到孙卓拍下团聚照424万
女孩抢救时房东来短信:是你该道歉410万
东莞一7岁学生确诊:曾6次核酸阴性新407万