认识HTML
认识HTML
一、开发环境准备
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：新闻展示
相关文本：
潘展乐破世界纪录夺冠 中国“飞鱼”碧波扬威
中国青年网 2024-08-02 06:02
当地时间7月31日，法国巴黎拉德芳斯体育馆，巴黎奥运会游泳项目男子100米自由泳决赛，中国选手潘展乐在获胜后庆祝。潘展乐以46秒40的成绩夺得冠军，并打破世界纪录，为中国游泳队拿下首金。中青报·中青网记者 李隽辉/摄
4. 图像标签
作用：在网页中插入图片。
<img src="图片的 URL">src用于指定图像的位置和名称，是 的必须属性。
5. 相对路径
路径指的是查找文件时，从起点到终点经历的路线。
相对路径：从当前文件位置出发查找目标文件
./ 表示当前文件所在文件夹目录
../ 表示当前文件的上一级文件夹目录
6. 超链接
作用：页面跳转
标签名：a（双标签）
属性：
- 设置跳转地址：
href="跳转地址" - 新窗口跳转：
target="_blank"
<a href="http://www.baidu.com">跳转到百度</a>
<a href="./02-文本相关标签.html">跳转到本地文件</a>
<a href="#">不知道跳转地址，使用空链接</a>7. 表单标签
input：表单button：按钮select``option: 下拉菜单
标签名：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
实现页面A和B的同时，完成跳转效果
综合练习3
百度热搜
各地贯彻十九届六中全会精神纪实热490万
英特尔就涉疆言论道歉 赵立坚回应热489万
六中全会重磅决议释放哪些重要信息热477万
6天连杀3人凶手曾春亮被执行死刑463万
西安疫情为何外溢6地457万
举报前婆婆吃空饷女子争儿子抚养权新448万
“六毒俱全”女县长曾插手3亿项目439万
孙海洋夫妇接到孙卓拍下团聚照424万
女孩抢救时房东来短信:是你该道歉410万
东莞一7岁学生确诊:曾6次核酸阴性新407万4.2 作业2
4.3 作业3
