Java Web 1HTML快速入门
目录
一、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）示例代码
效果：
小结：
