由于课程重点在于学习后端知识，前端部分只要求在今后的工作学习中可以看懂、能做简单修改，故此部分不做详细笔记。
0 概述
我们看到的网页背后的本质是前端代码。
前端代码通过浏览器内核（如chrome内核）被解析、渲染为我们看到的展示在客户端的网页。
Web标准：
Web标准也称网页标准，大部分由W3C制定。
三个组成部分：
- HTML：负责网页的结构（页面元素与内容）；
- CSS: 负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）；
- JavaScript：负责网页的行为（交互效果）。
HTML：
超文本标记语言：
- 超文本：除了普通文字信息，还可以定义图片、视频等。
- 标记语言：由标签构成的语言：
- HTML标签都是预定义好的。如：<a>定义超链接、<img>定义图片；
- HTML代码直接在浏览器中运行，标签由浏览器解析。
CSS：
层叠样式表，用于控制的样式、表现。
1 HTML快速入门：
1.HTML结构标签：
<html>
<head>
<title>网页顶部标签页标题</title>
</head>
<body>
</body>
</html>2.特点：
- HTML标签不区分大小写；
- HTML标签属性值单双引号都可以
- HTML语法不严格
2 实现标题-排版
1.标题标签：
- 标签：
<h1>...</h1>(h1 -> h6 重要程度（表现为大小等）依次降低；
2.水平线标签：
<hr> 加一条水平线
3.图片标签:
<img src="..." width="..." height="...">- src: 图片资源路径（两种书写方式）
- 绝对路径：
- 绝对磁盘路径：C:\Users\Administrator\Desktop\HTML\img\news logo.png
- 绝对网络路径：https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news logo.png
- 相对路径：./ ：当前目录（可以省略）；../：上一级目录；/：下一级目录
- 绝对路径：
- width：宽度（px，像素；%，相对于父元素的百分比）。
- height：高度（px，像素；%，相对于父元素的百分比。
3 实现标题-样式
1. CSS引入方式：
xxx:xxx 指 属性名：属性值
· 行内样式：写在标签的style属性中（不推荐)
<h1 style="xxx: xxx; xxx: xxx;"> 标题</h1>· 内嵌样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中）
<style>
h1{
xxx:xxx;
xxx:xxx;
}
</style>· 外联样式：写在一个单独的xxx.css文件中，通过link标签在网页中引入
<link rel="stylesheet" href="xxx.css">2.颜色属性与表示：
color：设置文本内容颜色,如：
color:#00f;
颜色表示：
- 关键字：red，green…
- rgb表示法：rgb（255,0,0）…
- 十六进制：#ff0000…
3.<span>标签：
是一个会大量用到的无语义行内布局标签。
特点：一行可以显示多个（组合行内元素），宽度和高度默认由内容展开。
4.CSS选择器：
- 用来选取需要设置样式的元素（标签）
- id与class区别：id具有唯一性，class具有普遍性，所以一个页面同一个id只能使用一次，而class可以被无限制使用。
- 优先级：id选择器 > 类选择器 > 元素选择器
5. 字体大小属性与表示：
font-size:字体大小（px）
4 实现标题-超链接
超链接：
- 标签： <a>
- 属性：
- href：制定访问资源的url
- target：指定在何处打开资源链接：
- _self：默认值，在当前页面打开；
- _blank：在新页面中打开
- 可CSS属性：默认超链接为蓝色，有下划线
- text-decoration：规定添加到文本的修饰，none表示定义标准的文本（无特殊效果）；
- color：定义文本颜色；
- 例：
<a href="xxx" target="_blank" style="color: black; text-decoration: none;" >超链接文本</a>5 实现正文-排版
音频标签：<audio>
视频标签：<vedio>
换行标签：<br>
段落标签：<p>段落内容</p>
文本加粗标签：<b>加粗文本</b> 或 <strong>加粗文本</strong>
CSS样式：
- line-height：设置行高
- text-indent：定义第一个行内容的缩进（常用于<p>标签）
- text-align：规定元素中的文本的水平对齐方式
空格：
在HTML中输入多少个空格，实际只显示一个。可以使用空格占位符：
6 实现正文 布局（CSS盒子模型）：
盒子：
页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便进行页面布局。
盒子模型组成：
- content（内容区域）
- padding（内边距区域）
- border（边框区域）
- margin（外边距区域）
布局标签：
实际开发中，会大量频繁使用 div 与 span 这两个无语义布局标签。
<div></div>
<span></span>
特点：
- div：
- 一行只显示一个（独占一行）
- 宽度默认为父元素宽度，高度默认由内容撑开
- 可以设置宽高（width与height）
- span：
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高（width、height）
CSS属性：
例：
<style>
div{
width: 200px;/* 盒子的宽 */
height: 200px;/* 盒子的高 */
box-sizing: border-box;/*指定盒子的边际为border，即让上文设置的宽高为border的宽高*/
background-color: aqua;
padding: 20px;/* 上 右 下 左（顺时针）的顺序，若都一样，输一个值*/
border: 10px solid red;
margin: 0 auto;/* 若输入两个值，为 上下 左右。auto意思为剩下的左右平均*/
}
</style>注意:如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上-位置，如:padding-top、padding-left、padding-right .
7 表格标签：
以表格方式展示数据
<th>默认加粗居中
8 表单标签：
- 场景：在网页中主要负责数据采集功能，如 注册、登陆等数据采集。
- 标签：<form>
- 属性：
- action(默认为自己)：规定当提交表单时向何处发送表单数据，（服务端）URL
- method：规定用于发送表单数据的方式。GET（默认）、POST
- get（默认）：在url后面拼接表单数据，比如：xxxusername=Tom&age=12。url长度有限制
- post：在消息体（请求体）中传递。，参数无大小限制。
- 表单项：不同类型的input元素、下拉列表、文本域等。
- <input> ：定义表单项，通过type属性控制输入形式
- <select> ：定义下拉列表
- <textarea>：定义文本域
- 表单项必须有name属性才能提交
<input>:type:
<select>:
<textarea>:
例：
<form action="" method="post">
姓名:<input type="text" name="name"><br>
密码:<input type="password" name="password"><br>
性别:<label> <input type="radio" name="gender" value="1">男</label>
<label> <input type="radio" name="gender" value="0">女</label><br>
爱好:<label> <input type="checkbox" name="hobby" value="1">男</label>
<label> <input type="checkbox" name="hobby" value="0">女</label><br>
图像:<input type="file" name="image"> <br>
生日:<input type="date" name="birthday"><br>
时间: <input type="time" name="time"> <br>
日期时间: <input type="datetime-local" name="datetime"><br>
邮箱: <input type="email" name="email"> <br>
年龄: <input type="number" name="age"> <br>
学历: <select name="degree">
<option value="1">本科</option>
<option value="2">硕士</option>
</select> <br>
描述:<textarea name="description" cols="30" rows="10"></textarea><br>
<input type="hidden" name="id" value="1"> <br>
<!-- 表单常见按钮 -->
<input type="button" value="按钮">
<input type="reset" value="重置">
<input type="submit" value="提交">
<br>
</form>
