8.1 Java Web（HTML P1-P14）
HTML（Hyper Text Markup Language）：超文本标记语言
超文本：超越了文本的限制，除了文字信息，还可以定义图片、音频、视频等内容
标记语言：由标签构成的语言，HTML标签都是预定义好的，例如使用<a>展示超链接，使用<img>展示图片，使用<video>展示视频；HTML代码直接在浏览器中运行，HTML标签由浏览器解析
CSS（Cascading Style Sheet）：层叠样式表，用于控制页面的样式（表现）
HTML结构标签
HTML标签不区分大小写，属性值单双引号都可以，语法较松散
HTML实现标题
排版
图片标签：<img>
src：指定图像的url（绝对路径/相对路径）
width：图像的宽度（像素px/相对于父元素的百分比%）
height：图像的高度（像素/相对于父元素的百分比）
标题标签：<h1> - <h6>
水平线标签：<hr>
<!-- 文档类型是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>焦点访谈</title>
</head>
<body><!-- img标签:src： 图片资源路径width：宽度(px, 像素; % , 相对父元素的百分比)height：高度 --><img src="./img/news_logo.png" > 新浪政务 > 正文<h1>焦点访谈</h1><hr>2023年03月02日 21：50 央视网<hr>
</body>
</html>
样式
CSS引入方式：
行内样式：写在标签的style属性中（不推荐）
内嵌样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中）
外联样式：写在一个单独的.css文件中（需要通过link标签在网页中引入）
颜色的表示形式：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点访谈</title><!-- 方式二：内嵌样式 --><style>h1 {/* color: red; *//* color: rgb(255, 0, 0); *//* color: #ff0000; */color: #4D4F53;}</style> <!-- 方式三：外联样式 --><!-- <link rel="stylesheet" href="./css/news.css"> --></head>
<body><img src="./img/news_logo.png" > 新浪政务 > 正文<!-- 方式一：行内样式 --><!-- <h1 style="color: red;">焦点访谈</h1> --><h1>焦点访谈</h1><hr>2023年03月02日 21：50 央视网<hr>
</body>
</html><span>标签：
<span>是一个在开发网页时大量会用到的没有语义的布局标签，一行可以显示多个，宽度和高度默认由内容撑开
CSS选择器：
元素选择器：标签名{...}
ID选择器：#id属性值{...}
类选择器：.class属性值{...}
优先级：id选择器>类选择器>元素选择器
CSS属性：
color：设置文本颜色
font-size：字体大小
text-decoration：规定添加到文本的修饰，none表示定义标准的文本（无下划线）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点访谈</title><style>h1 {color: #4D4F53;}/* 元素选择器 *//*span{color: #979797;} *//* 类选择器 *//* .cls{color: #979797;} *//* ID选择器 */#time{color: #979797;font-size: 13px;}</style> </head>
<body><img src="./img/news_logo.png" > 新浪政务 > 正文<h1>焦点访谈</h1><hr><span class="cls" id="time">2023年03月02日 21：50</span> <span> 央视网</span><hr>
</body>
</html> 
超链接
标签：<a href = "..." target = "...">央视网</a>
属性：href：指定资源访问的url
target：指定在何处打开资源链接
_self：默认值，在当前页面打开
_blank：在空白页面打开
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点访谈</title><style>h1 {color: #4D4F53;}#time{color: #979797;font-size: 13px;}a{color: black;text-decoration: none;}</style> </head>
<body><img src="./img/news_logo.png" > 新浪政务 > 正文<h1>焦点访谈</h1><hr><span id="time">2023年03月02日 21：50</span> <span> <a href="https://k.sina.cn/media_m_1575470.html" target="_blank">央视网</a></span><hr>
</body>
</html>HTML实现正文
正文排版
视频标签：<video>
src：规定视频的url
controls：显示播放控件
width：播放器的宽度
height：播放器的高度
音频标签：<audio>
src：规定音频的url
controls：显示播放控件
段落标签：<p>
文本加粗标签：<b>/<strong>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点访谈</title><style>h1 {color: #4D4F53;}#time{color: #979797;font-size: 13px;}a{color: black;text-decoration: none;}p{text-indent: 35px; /*设置首行缩进 */line-height: 40px; /*设置行高*/}#plast{text-align: right; /* 对齐方式 */}</style> </head>
<body><img src="./img/news_logo.png" > 新浪政务 > 正文<h1>焦点访谈</h1><hr><span id="time">2023年03月02日 21：50</span> <span> <a href="https://k.sina.cn/media_m_1575470.html" target="_blank">央视网</a></span><hr><!-- 正文 --><!-- 视频 --><video src="./video/1.mp4" controls width="950px"></video><!-- 音频 --><!-- <audio src="./audio/1.mp3" controls></audio> --><p><b>央视网消息</b> （焦点访谈）：始终把解决粮食安全问题作为治国理政的头等大事，重农抓粮一系列政策举措有力有效，我国粮食产量站稳1.3万亿斤台阶，实现谷物基本自给、口粮绝对安全。我们把饭碗牢牢端在自己手中，为保障经济社会发展提供了坚实支撑，为应对各种风险挑战赢得了主动。连续八年1.3万亿斤，这个沉甸甸的数据是如何取得的呢？</p><br><p>人勤春来早，春耕农事忙。立春之后，由南到北，我国春耕春管工作陆续展开，春天的田野处处生机盎然。</p><img src="./img/1.jpg"><p>今年，我国启动了新一轮千亿斤粮食产能提升行动，这是一个新的起点。2015年以来，我国粮食产量连续8年稳定在1.3万亿斤以上，人均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿斤，粮食产量提高了1500亿斤。</p><img src="./img/2.jpg"><p>中国式现代化一个重要的中国特色是人口规模巨大的现代化。我们粮食生产的发展，意味着我们要立足国内，解决14亿多人吃饭的问题。仓廪实，天下安。保障粮食安全是一个永恒的课题，任何时候都不能放松。亿万中国人民辛勤耕耘、不懈奋斗，我们就一定能够牢牢守住粮食安全这一“国之大者”，把中国人的饭碗牢牢端在自己手中，夯实中国式现代化基础。</p><p id="plast">责任编辑：王树淼 SN242</p>
</body>
</html>
页面布局
盒子：页面中所有的元素（标签），都可以看作是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便进行页面布局
盒子模型组成：内容区域（content），内边距区域（padding），边框区域（border），外边距区域（margin）
布局标签：实际开发网页中，会大量频繁使用div和span两个没有语义的布局标签
标签：<div> <span>
div标签：一行只显示一个（独占一行）
宽度默认是父元素的宽度，高度默认由内容撑开
可以设置宽高（width，height）
span标签：一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高（width，height）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子模型</title><style>div{width: 200px;height: 200px;box-sizing: border-box; /* 指定width height为盒子的高宽 */background-color: aquamarine; /* 背景色 */padding: 20px 20px 20px 20px; /* 内边距：上 右 下 左 */border: 10px solid red; /* 边框： 宽度 线条类型 颜色 */margin: 30px; /* 外边距：上 右 下 左 都一样可简写*/}</style>
</head><body><div>A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点访谈</title><style>h1 {color: #4D4F53;}#time{color: #979797;font-size: 13px;}a{color: black;text-decoration: none;}p{text-indent: 35px; /*设置首行缩进 */line-height: 40px; /*设置行高*/}#plast{text-align: right; /* 对齐方式 */}#center{width: 65%;/* margin: 0% 17.5% 0% 17.5%; */margin: 0 auto;}</style> </head>
<body><div id="center"><img src="./img/news_logo.png" > 新浪政务 > 正文<h1>焦点访谈</h1><hr><span id="time">2023年03月02日 21：50</span> <span> <a href="https://k.sina.cn/media_m_1575470.html" target="_blank">央视网</a></span><hr><!-- 正文 --><!-- 视频 --><video src="./video/1.mp4" controls width="950px"></video><!-- 音频 --><!-- <audio src="./audio/1.mp3" controls></audio> --><p><b>央视网消息</b> （焦点访谈）：始终把解决粮食安全问题作为治国理政的头等大事，重农抓粮一系列政策举措有力有效，我国粮食产量站稳1.3万亿斤台阶，实现谷物基本自给、口粮绝对安全。我们把饭碗牢牢端在自己手中，为保障经济社会发展提供了坚实支撑，为应对各种风险挑战赢得了主动。连续八年1.3万亿斤，这个沉甸甸的数据是如何取得的呢？</p><br><p>人勤春来早，春耕农事忙。立春之后，由南到北，我国春耕春管工作陆续展开，春天的田野处处生机盎然。</p><img src="./img/1.jpg"><p>今年，我国启动了新一轮千亿斤粮食产能提升行动，这是一个新的起点。2015年以来，我国粮食产量连续8年稳定在1.3万亿斤以上，人均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿斤，粮食产量提高了1500亿斤。</p><img src="./img/2.jpg"><p>中国式现代化一个重要的中国特色是人口规模巨大的现代化。我们粮食生产的发展，意味着我们要立足国内，解决14亿多人吃饭的问题。仓廪实，天下安。保障粮食安全是一个永恒的课题，任何时候都不能放松。亿万中国人民辛勤耕耘、不懈奋斗，我们就一定能够牢牢守住粮食安全这一“国之大者”，把中国人的饭碗牢牢端在自己手中，夯实中国式现代化基础。</p><p id="plast">责任编辑：王树淼 SN242</p></div></body>
</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>HTML-表格</title><style>td {text-align: center; /* 单元格内容居中展示 */}</style>
</head>
<body><table border="1px" cellspacing="0" width="600px"><tr><th>序号</th><th>品牌Logo</th><th>品牌名称</th><th>企业名称</th></tr><tr><td>1</td><td> <img src="img/huawei.jpg" width="100px"> </td><td>华为</td><td>华为技术有限公司</td></tr><tr><td>2</td><td> <img src="img/alibaba.jpg" width="100px"> </td><td>阿里</td><td>阿里巴巴集团控股有限公司</td></tr></table></body>
</html> 
HTML——表单标签
场景：在网页中主要负责数据采集功能，如注册，登录等数据采集
标签：<form>
表单项：不同类型的input元素，下拉列表，文本域等
<input>：定义表单项，通过type属性控制输入形式
<select>：定义下拉列表
<textarea>：定义文本域
属性：
action：规定当提交表单时向何处发送表单数据，URL
method：规定用于发送表单数据的方式，GET，POST
<!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>HTML-表单</title>
</head>
<body><!-- form表单属性: action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面method: 表单的提交方式 .get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . 默认值post: 在消息体(请求体)中传递的, 参数大小无限制的.--> <form action="" method="post">用户名: <input type="text" name="username">年龄: <input type="text" name="age"><input type="submit" value="提交"></form></body>
</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>HTML-表单项标签</title>
</head>
<body><!-- value: 表单项提交的值 -->
<form action="" method="post">姓名: <input type="text" name="name"> <br><br>密码: <input type="password" name="password"> <br><br> 性别: <label><input type="radio" name="gender" value="1"> 男</label><label><input type="radio" name="gender" value="2"> 女 </label> <br><br>爱好: <label><input type="checkbox" name="hobby" value="java"> java </label><label><input type="checkbox" name="hobby" value="game"> game </label><label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>图像: <input type="file" name="image"> <br><br>生日: <input type="date" name="birthday"> <br><br>时间: <input type="time" name="time"> <br><br>日期时间: <input type="datetime-local" name="datetime"> <br><br>邮箱: <input type="email" name="email"> <br><br>年龄: <input type="number" name="age"> <br><br>学历: <select name="degree"><option value="">----------- 请选择 -----------</option><option value="1">大专</option><option value="2">本科</option><option value="3">硕士</option><option value="4">博士</option></select> <br><br>描述: <textarea name="description" cols="30" rows="10"></textarea> <br><br><input type="hidden" name="id" value="1"><!-- 表单常见按钮 --><input type="button" value="按钮"><input type="reset" value="重置"> <input type="submit" value="提交"> <br>
</form></body>
</html>