HTML快速入门
基础流程：
1. 新建文本文件，后缀名改为.html
2. 编写HTML结构内容
3. 在<body>中填写内容
代码：
<head>代表头,<body>代表体
<html>
<head>
<title> HTML快速入门</title>
</head>
<body>
<h1>Hello HTML</h1>
<img src="1.jpg"/>
</body>
</html>
实现效果：
特点：
- HTML标签不区分大小写： <Html>和<html>等效
- HTML标签属性值单双引号都可以： "1.jpg" 和 '1.jpg'
- HTML语法松散
HTML-新浪新闻-标题-排版
图片标签<img>：
- src：指定图像的url（绝对路径 / 相对路径）
- width：图像的宽度（像素 / 相对于父元素的百分比）
- height：图像的高度（像素 / 相对于父元素的百分比）
例： <img src="img/news_logo.png"> 新浪政务 > 正文 </img>
路径书写方式：
绝对路径：
1. 绝对磁盘路径：本地 E:\javaweb\html\img
2. 绝对网络路径：图床
相对路径：
./ ：当前目录， ./可以省略
../：上一级目录
width 和 height 的单位：
px：像素 （只设置宽度或高度时，另一个会等比例缩放）
<img src="img/news_logo.png" width="300px" height="300px"> 新浪政务 > 正文 </img>
%：相对于父元素的百分比
<img src="img/news_logo.png" width="80%" > 新浪政务 > 正文 </img>
标题标签<h1> - <h6>
<h1>底气 新思想夯实大国粮仓</h1>水平线标签 <hr>
<hr>
2023年03月02日 21:50 网络
<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="img/news_logo.png"> 新浪政务 > 正文 </img>
<h1>焦点访谈：底气 新思想夯实大国粮仓</h1>
<hr>
2023年03月02日 21:50 网络
<hr>
</body>
</html>HTML-新浪新闻-标题-样式
CSS样式控制
CSS引入方式：
1. 行内样式：写在标签的style属性中（不推荐）
<h1 style="xxx: xxx; xxx: xxx;">中国新闻网</h1> （属性名：属性值）
2. 内嵌样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中）
<style>
h1 {
xxx: xxx;
xxx: xxx;
}
</style>
3. 外联样式：写在一个单独的.css文件中（需要通过linke标签在网页中引入）
h1 {
xxx: xxx;
xxx: xxx;
}
<link rel="stylesheet" href="css/news.css">
方式一：行内样式
<h1 style="color: red;">焦点访谈：底气 新思想夯实大国粮仓</h1>方式二：内嵌样式
<!-- 文档类型为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>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<img src="img/news_logo.png"> 新浪政务 > 正文 </img>
<h1>焦点访谈：底气 新思想夯实大国粮仓</h1>
<hr>
2023年03月02日 21:50 网络
<hr>
</body>
</html>方式三：外联样式
在当前html同级目录下 创建一个css文件夹，里面保存一个news.css文件：
h1 {
color: green;
}通过link引入：
<link rel="stylesheet" href="./css/news.css">代码和效果：
<!-- 文档类型为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>
<link rel="stylesheet" href="./css/news.css">
</head>
<body>
<img src="img/news_logo.png"> 新浪政务 > 正文 </img>
<h1>焦点访谈：底气 新思想夯实大国粮仓</h1>
<hr>
2023年03月02日 21:50 网络
<hr>
</body>
</html>颜色表示形式：
1. 关键字： 预定义的颜色名 red、green、blue
2. rgb表示法：红绿蓝三原色，每项取值范围：0-255 rgb(0,0,0)、rgb(255,255,255)
3. 十六进制表示法：#开头，将数字转换成十六进制表示 #000000、#ff0000
<style>
h1 {
color: red;
color: rgb(255,0,0);
color: #ff0000;
}
</style>新闻标题颜色修改
<!-- 文档类型为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>
<style>
h1 {
color: #4D4F53;
}
</style>
</head>
<body>
<img src="img/news_logo.png"> 新浪 > 正文 </img>
<h1>焦点访谈：底气 新思想夯实大国粮仓</h1>
<hr>
2023年03月02日 21:50 网络
<hr>
</body>
</html>
CSS选择器
CSS选择器：用来选取需要设置样式的元素
优先级：ID选择器 > 类选择器 > 元素选择器
1. 元素选择器： 元素名称 { color: red; }
例：
h1 {
color:red;
}
<h1> Hello CSS </h1>
2. id选择器（id是唯一的）： #id属性值 { color: red; }
例：
#hid {
color: red;
}
<h1 id="hid"> CSS id Selector </h1>
3. 类选择器： .class属性值 { color: red; }
例：
.cls {
color: red;
}
<h1 class="cls"> CSS class Selector</h1>
新闻发布时间
时间 和 网络 在一块，需要用一个没有语义的标签，把时间包裹起来，<span>
<span>2023年03月02日 21:50</span> <span>网络</span>
元素选择器
<!-- 文档类型为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>
<style>
h1 {
color: #4D4F53;
}
/* 元素选择器 */
span {
color: #968d92;
}
</style>
</head>
<body>
<img src="img/news_logo.png"> 新浪政务 > 正文 </img>
<h1>焦点访谈：底气 新思想夯实大国粮仓</h1>
<hr>
<span>2023年03月02日 21:50</span> <span>网络</span>
<hr>
</body>
</html>类选择器
<!-- 文档类型为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>
<style>
h1 {
color: #4D4F53;
}
/* 类选择器 */
.cls {
color: #968D92;
}
</style>
</head>
<body>
<img src="img/news_logo.png"> 新浪政务 > 正文 </img>
<h1>焦点访谈：底气 新思想夯实大国粮仓</h1>
<hr>
<span class="cls">2023年03月02日 21:50</span> <span>网络</span>
<hr>
</body>
</html>
id选择器
<!-- 文档类型为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>
<style>
h1 {
color: #4D4F53;
}
/* ID选择器 */
#time {
color: #968D92;
}
</style>
</head>
<body>
<img src="img/news_logo.png"> 新浪政务 > 正文 </img>
<h1>焦点访谈：底气 新思想夯实大国粮仓</h1>
<hr>
<span id="time">2023年03月02日 21:50</span> <span>网络</span>
<hr>
</body>
</html>HTML-新浪新闻-标题-超链接
超链接
标签： <a href="..." target="...">央视网</a>
属性：
1. href：指定资源访问的url
2. target：指定在何处打开资源链接
_self：默认值，在当前页面打开
_blank：在空白页面打开
代码：
<!-- 文档类型为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>
<style>
h1 {
color: #4D4F53;
}
/* ID选择器 */
#time {
color: #968D92;
font-size: 13px;
}
</style>
</head>
<body>
<img src="img/news_logo.png"> <a href="https://gov.sina.com.cn/" target="_self">新浪政务</a> > 正文 </img>
<h1>焦点访谈：底气 新思想夯实大国粮仓</h1>
<hr>
<span id="time">2023年03月02日 21:50</span> <span> <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">网络</a> </span>
<hr>
</body>
</html>通过CSS样式对 超链接的效果 进行设置
text-decoration：文本装饰的属性
<!-- 文档类型为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>
<style>
h1 {
color: #4D4F53;
}
/* ID选择器 */
#time {
color: #968D92;
font-size: 13px;
}
a {
color: black;
text-decoration: none; /* 设置文本为一个标准的文本 */
}
</style>
</head>
<body>
<img src="img/news_logo.png"> <a href="https://gov.sina.com.cn/" target="_self">新浪政务</a> > 正文 </img>
<h1>焦点访谈：底气 新思想夯实大国粮仓</h1>
<hr>
<span id="time">2023年03月02日 21:50</span> <span> <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">网络</a> </span>
<hr>
</body>
</html>HTML-新浪新闻-正文-排版
视频标签：<video>
- src：规定视频的url
- controls：显示播放控件（开始/暂停/音量调节）
- width：播放器的宽度
- height：播放器的高度
音频标签：<audio>
- src：规定音频的url
- controls：显示播放控件
段落标签：<p>
文本加粗标签：<b> / <strong>
为了让段落中实现首行缩进，通过p元素选择器来为所有的段落标签 加上首行缩进：
p {
text-indent: 35px; /* 设置首行缩进 */
line-height: 40px; /* 设置行高 */
}将 央视网消息 加粗展示：
1. <b>： <b>央视网消息</b>
2. <strong> ： <strong>央视网消息</strong>
让责任编辑靠右对齐：
#plast {
text-align: right; /* 对齐方式 */
}
<p id="plast">
责任编辑：王树淼 SN242
</p>
最终代码：
<!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: #968D92;
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"> <a href="https://gov.sina.com.cn/" target="_self">新浪政务</a> > 正文 </img>
<h1>焦点访谈：底气 新思想夯实大国粮仓</h1>
<hr>
<span id="time">2023年03月02日 21:50</span> <span> <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a></span>
<hr>
<!-- 正文 -->
<!-- 视频 -->
<video src="video/1.mp4" controls="controls" width="950px"></video>
<!-- 音频 -->
<!-- <audio src="audio/1.mp3" controls></audio> -->
<p>
<b>央视网消息</b>（焦点访谈）呢？
</p>
<p>
人勤春来早，春耕农事忙。
</p>
<img src="img/1.jpg">
<p>
今年，亿斤。
</p>
<img src="img/2.jpg">
<p>
基础。
</p>
<p id="plast">
责任编辑：王树淼 SN242
</p>
</body>
</html>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; /* 内边距，上 右 下 左 */ /* 当上右下左都一样，可以简写为20px */
border: 10px solid red; /* 边框，宽度 线条类型 颜色 */
margin: 30px 30px 30px 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
</div>
</body>
</html>设置了 box-sizing: border-box; 表示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>
h1 {
color: #4D4F53;
}
#time {
color: #968D92;
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;/* 指定两个值：上边距和下边距为0，左边距和右边距为auto。 auto为浏览器自动计算 */
}
</style>
</head>
<body>
<div id="center">
<img src="img/news_logo.png"> <a href="https://gov.sina.com.cn/" target="_self">新浪政务</a> > 正文 </img>
<h1>焦点访谈：底气 新思想夯实大国粮仓</h1>
<hr>
<span id="time">2023年03月02日 21:50</span> <span> <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">网络</a></span>
<hr>
<!-- 正文 -->
<!-- 视频 -->
<video src="video/1.mp4" controls="controls" width="950px"></video>
<!-- 音频 -->
<!-- <audio src="audio/1.mp3" controls></audio> -->
<p>
<b>央视网消息</b>（焦点访谈）
</p>
<p>
人勤春来早，春耕农事忙。
</p>
<img src="img/1.jpg">
<p>
今年，亿斤。
</p>
<img src="img/2.jpg">
<p>
基础。
</p>
<p id="plast">
责任编辑：王树淼 SN242
</p>
</div>
</body>
</html>HTML-表格标签
场景：在网页中以表格（行、列）形式整齐展示数据，如：班级表。
标签：
1. <table>：定义表格整体，可以包裹多个<tr>
- border：规定表格边框的宽度
- width：规定表格的宽度
- cellspacing：规定单元之间的空间。
2. <tr>：表格的行，可以包裹多个<td>
3. <td>：表格单元格（普通），可以包裹内容， 如果是表头单元格，可以替换为<th>
代码：
<!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>
属性：
- action：规定当提交表单时向何处发送表单数据，URL，如果不指定，则默认提交到当前页面
- method：规定用于发送表单数据的方式。
- GET（默认值）
- POST：在消息体（请求体）中传递的，参数大小无限制的
method中，如果以get方式请求，会在URL后面拼接表单数据，比如： ?username=Tom&age=12
method中，如果以post方式请求： 在检查里面，找到网络，然后点击负载，可以看到数据
表单项：不同类型的 input 元素、下拉列表、文本域等。 表单项必须有name属性才能提交。
- <input>：定义表单项，通过type属性控制输入形式
- <select>：定义下拉列表
- <textarea>：定义文本域
代码：
<!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>
<form action="" method="get">
用户名: <input type="text" name="username">
年龄: <input type="text" name="age">
<input type="submit" value="提交">
</form>
</body>
</html>
HTML表单项标签
<input>：表单项，通过type属性控制输入形式。
radio为单选项，如果选的是男，提交表单的时候是value中的值1。要为但选项，必须保证name属性一致。 加了label之后，点击label内的任何一个区域，都可以选中。
性别: <label> </label><input type="radio" name="gender" value="1"> 男 </label>
<label><input type="radio" name="gender" value="2"> 女 </label> <br><br>checkbox：复选框
爱好: <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>file：上传文件
图像: <input type="file" name="image"> <br><br>date：选择年月日。 time：选择时间。 datetime-local：选择年月日+时间
生日: <input type="date" name="birthday"> <br><br>
时间: <input type="time" name="time"> <br><br>
日期时间: <input type="datetime-local" name="datetime"> <br><br>email：邮箱
邮箱: <input type="email" name="email"> <br><br>number：数字 只能输入数字。
年龄: <input type="number" name="age"> <br><br><select>：定义下拉列表，<option>定义列表项， value是当选择对应属性时，表单提交的值。
学历: <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>：文本域。cols指定一行输入多少字符，rows代表文本域输入多少行
描述: <textarea name="description" cols="30" rows="10"></textarea> <br><br>完整代码：
<!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>效果及对应代码：
提交结果：
