目录
一、Web开发介绍
1.什么是Web？
2.初识Web前端
二、HTML快速入门
1.什么是HTML、CSS？
2、案例练习
3.小结
三、VS Code开发工具
四、基础标签&样式（HTML）
2、实现标题--样式1（新闻标题的颜色）
3、实现标题--样式2（发布时间的样式）
4、实现标题--超链接
5、实现正文--排版
6、实现正文--布局
7、表格标签
8、表单标签
9、表单项标签
一、Web开发介绍
1.什么是Web？
（1) Web网站的工作流程
现在主流的开发模式：
早期开发模式：
（2）Web开发课程安排
2.初识Web前端
（1）Web标准
（2）Web前端开发课程安排
（3）小结
二、HTML快速入门
1.什么是HTML、CSS？
2、案例练习
<html><head><title>HTML 快速入门</title></head><body><h1>Hello HTML</h1><img src="1.jpg"/></body>
</html>3.小结
三、VS Code开发工具
四、基础标签&样式（HTML）
1、实现标题-排版
(1)示例代码
<!-- 文档类型为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>体操世界冠军：吴柳芳！被怼擦边却获大众支持，粉丝猛涨破600万</title>
</head>
<body><!-- img标签：src：图片资源路径width：宽度(px,像素；%，相对于父元素的百分比)height：高度（px，像素；%，相对于父元素的百分比）<img src="img/吴柳芳.jpg" width="80%">路径书写方式：绝对路径：绝对磁盘路径：<img src="C:\Users\OMEN\Desktop\HTML\img\吴柳芳.jpg">绝对网络路径：<img src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1v9RBo.img?w=534&h=689&m=6&x=341&y=232&s=209&d=209"> 相对路径：./：当前目录，可省略../上一级目录--><h1>体操世界冠军：吴柳芳！被怼擦边却获大众支持，粉丝猛涨破600万</h1><img src="img/吴柳芳.jpg" width="20%" height="20%"><hr>2024年12月3日<hr></body>
</html>
（2）小结
2、实现标题--样式1（新闻标题的颜色）
（1）示例代码
吴柳芳.html
<!-- 文档类型为HTML -->
<!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>体操世界冠军：吴柳芳！被怼擦边却获大众支持，粉丝猛涨破600万</title><!-- 方式二：内嵌样式 --><!-- <style>h1{color: red;}</style> --><!-- 方式三：外联样式 --><link rel="stylesheet" href="css/news.css">
</head>
<body><!-- 方式一：行内样式 --><!-- <h1 style="color: darkorange;">体操世界冠军：吴柳芳！被怼擦边却获大众支持，粉丝猛涨破600万</h1> --><h1>体操世界冠军：吴柳芳！被怼擦边却获大众支持，粉丝猛涨破600万</h1><img src="img/吴柳芳.jpg" width="20%" height="20%"><hr>2024年12月3日<hr></body>
</html>news.css
h1{color: red;
}效果图：
（2）颜色表示形式
h1{/* color: red;color: rgb(0, 0, 255); */color: #00f;
}
（3）小结
标签不用背，需要哪个就去官方文档中查哪个
3、实现标题--样式2（发布时间的样式）
（1）示例代码
<!-- 文档类型为HTML -->
<!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>体操世界冠军：吴柳芳！被怼擦边却获大众支持，粉丝猛涨破600万</title><!-- 方式二：内嵌样式 --><style>h1{color: #F5F5F5;}/* span{color: #676767;} */.cls{color:#676767;}body {background-color: #242424;}</style><!-- 方式三：外联样式 --><!-- <link rel="stylesheet" href="css/news.css"> -->
</head>
<body><!-- 方式一：行内样式 --><!-- <h1 style="color: darkorange;">体操世界冠军：吴柳芳！被怼擦边却获大众支持，粉丝猛涨破600万</h1> --><h1>体操世界冠军：吴柳芳！被怼擦边却获大众支持，粉丝猛涨破600万</h1><img src="img/吴柳芳.jpg" width="10%" height="10%"><hr><span class="cls">2024年12月3日 19:36</span> <span>msn报道</span><hr></body>
</html>效果图：
（2）CSS选择器
（3）小结
4、实现标题--超链接
（1）代码
<!-- 文档类型为HTML -->
<!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>体操世界冠军：吴柳芳！被怼擦边却获大众支持，粉丝猛涨破600万</title><!-- 方式二：内嵌样式 --><style>h1{color: #F5F5F5;}/* span{color: #676767;} */time{color:#676767;}body {background-color: #242424;}a{color:#F5F5F5;text-decoration: none;}</style><!-- 方式三：外联样式 --><!-- <link rel="stylesheet" href="css/news.css"> -->
</head>
<body><!-- 方式一：行内样式 --><!-- <h1 style="color: darkorange;">体操世界冠军：吴柳芳！被怼擦边却获大众支持，粉丝猛涨破600万</h1> --><h1>体操世界冠军：吴柳芳！被怼擦边却获大众支持，粉丝猛涨破600万</h1><img src="img/吴柳芳.jpg" width="2%" height="2%"><a href="https://www.douyin.com/user/MS4wLjABAAAAmwXpX0yLvQT76vqZt6GBiMF_x9Pdt_80jJDht4Ezfpw?from_tab_name=" target="_self">吴柳芳个人抖音主页</a> >正文<hr><span id="time">2024年12月3日 19:36</span> <span>msn报道</span><hr></body>
</html>效果：
超链接：
5、实现正文--排版
代码
<!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>体操世界冠军：吴柳芳！被怼擦边却获大众支持，粉丝猛涨破600万</title><style>h1{color: #F5F5F5;}#time{color:#676767;}body {background-color: #242424;}a{color:#F5F5F5;text-decoration: none;}p{text-indent: 35px;/* 首行缩进 */line-height: 40px;/* 行高 */color: #F4F4F4;}#plast{text-align: right;/* 对齐方式 */}/* 以下添加新样式规则，让正文里的图片、视频等也居中 */img,video {display: block;margin: 0 auto;}</style></head>
<body><h1>体操世界冠军：吴柳芳！被怼擦边却获大众支持，粉丝猛涨破600万</h1><img src="img/吴柳芳.jpg" width="2%" height="2%"><a href="https://www.douyin.com/user/MS4wLjABAAAAmwXpX0yLvQT76vqZt6GBiMF_x9Pdt_80jJDht4Ezfpw?from_tab_name=" target="_self">吴柳芳个人抖音主页</a> > 正文<hr><span id="time">2024年12月3日 19:36</span> <span>MSN报道</span><hr><!-- 正文 --><!-- 视频 --><video src="video/吴柳芳.mp4" controls width="200px"></video><p><strong>MSN消息</strong>吴柳芳作为体操世界冠军，因为伤病影响未能踏上体操最高领奖台，无缘在奥运会摘金。所以，她的名字也并未被大众熟知。然而，随之奥运冠军管晨辰怒怼其擦边，走进大众的视野中。不过，出人意料的是大众并没有像管晨辰那样去指责吴柳芳，或者说反而是大部分网友支持吴柳芳，这究竟是为什么呢？</p><img src="img/吴柳芳1.jpg" width="20%" height="20%"><p>吴柳芳，前中国国家女子体操队队员，目前已经退役。曾经获得09年体操世界杯捷克站高低杠冠军、10年体操世界杯多哈站平衡木冠军、体操世界杯法国站平衡木冠军、体操世界杯根特站高低杠冠军。2011年体操世界杯根特站平衡木冠军 ，2012年亚洲体操锦标赛女团冠军、亚洲体操锦标赛女子高低杠冠军，2013年天津东亚运动会女团冠军。此后，因伤退役淡出大众视野。</p><p id="plast">责任编辑：付深麟</p></body>
</html>效果图：
（2）小结
6、实现正文--布局
（1）盒子模型
（2）示例程序
效果：
（3）小结
7、表格标签
（1）示例代码
（2）小结
8、表单标签
（1）示例代码
效果：
检查模式：
（2）小结
9、表单项标签
（1）示例代码
效果：
小结：
