前端：即网站前台部分，运行在PC端、移动端等浏览器上展现给用户浏览的网页和界面
HTML：页面结构，可以把它看成一个文档，定义展示页面的内容结构
CSS：页面表现，元素大小、颜色、位置、隐藏或显示，部分动画效果
JavaScript：页面行为，部分动画效果、页面与用户的交互、页面功能
一、HTML
超文本标记语言，是网页制作必备的编成语言。超文本就是页面包括图片、链接、音乐、程序等非文字原色
1.HTML页面结构
头部分：提供关于网页的信息
主体部分：提供网页的具体内容
<!DOCTYPE html> <html lang="zh-CN"> <head> <!--头部信息，不会在页面显示--> <meta charset="utf-8"> <title></title> </head> <body> <!--主体部分，页面中显示内容--> <h1>第一个网页</h1> </body> </html>
1）文档声明：
DOCTYPE声明该html文件使用的html版本
HTML5：
<!DOCTYPE html>
HTML4.01版本：
<!DOCTYPE html PUBLIC “-//w3c//DTD HTMK 4.01//EN”
"http://www.w3.org/TR/html4/strict.dtd">
2）页面头部
第二行<html>标签和最后一行</html>定义html文档的整体，<html>标签中的lang定义页面语言（en为英文，zh-CN为中文），<head>标签和<body>标签是它的第一层子元素。
<head>标签里面负责对页面进行一个设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和JavaScript文件等。设置的内容不会显示在网页上，标题的内容会显示在标题栏。
3）页面内容
<body>:元素定义文档的主题，也就是页面显示的内容
body元素包括文档的所有内容（如文本、超链接、图片、表格等）
2.常见的HTML标签
1.注释
注释不会显示在浏览器中
格式：
-
<!--注释的内容，一行-->
-
<p>注释的内容，一个段落</p>
2.标题标签
<h1>-<h6>可定义标题，其中<h6>定义最小标题
格式：<h1>这是标题 h1</h1>
3.换行标签
格式：只加一个<br>
4.水平分割线
格式：只加一个<hr>
6.段落标签
格式：<p>这是一个段落，可换行</p>
7.块标签
表示一块内容，div标签可以把文档分割为独立的、不同的部分。
格式：<div>这是一个分块</div>
8.span标签
行内块元素，表示行中小段内容，没有具体的语义。
格式：<span style="color:red">我在span标签里</span>
9.含样式和语义的行内标签
<i> : 行内元素，字体斜体
<em>:行内元素，语义为强调内容，表示非常重要(倾斜效果）
<b>:行内元素，字体加粗
<stong>:行内元素，语义为强调内容，表示非常重要(效果加粗）
10.图片标签
img标签：向网页中嵌入一幅图像
img标签有两个必须的属性：src属性、alt属性
格式：<img src="F:桌面桌面壁纸愿望瓶1366x768.jpg" alt='许愿瓶'>
- alt:规定图像的代替文本（必须）
- src:规定图像的URL（必须）
- heigth:规定图像的高度
- 规定图像的宽度
11.链接音乐文件
格式：<audio src="" controls="controls"></audio>
12.链接视频
格式：<video src="F:视频其他VID_20200524_091803.mp4" width="500px" height="400px" controls="controls"></video>
13.超链接标签
作用：用于从一张页面链接到另一张页面
最重要的元素属性是href属性，它指示链接的目标
格式：<a href="http://www.baidu.com">点击链接跳转到百度</a>
14.link标签
放在头部，链接到一个外部样式，即链接外部的CSS文件
15.列表
有序列表：在网页上定义一个有编号的内容列表可以用<ol>/<li>配合使用
<ol> <li>列表文字11</li> <li>列表文字22</li> <li>列表文字33</li> </ol>
再网页上生成列表，每条项目上会按1、2、3编号（实际开发中比较少用）
无序列表：在网页上定义一个有编号的内容列表可以用<ul> <li>配合使用
<ul> <li>列表文字11</li> <li>列表文字22</li> <li>列表文字33</li> </ul>
16.表格
table标签定义html表格
简单的html表格由table元素及一个或多个tr th td元素组成
tr：定义表格行
th：定义表头
td：定义表格单元
标签实例代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>测试标题标签</title> 6 </head> 7 8 <body> 9 <!--2.标题标签--> 10 <h1>这是标题 h1</h1> 11 <h2>这是标题 h2</h2> 12 <h3>这是标题 h3</h3> 13 <h4>这是标题 h4</h4> 14 <h5>这是标题 h5</h5> 15 <h6>这是标题 h6</h6> 16 17 <!--3.换行标签：br--> 18 <p>这是第一行<br>这是第二行</p> 19 20 <!--4.水平分割线：hr--> 21 <h1>关于防控疫情的通知</h1> 22 <hr> 23 <p>众志成城，打好防疫攻坚战</p> 24 25 <!--7.分块标签--> 26 <div style="height:50px; 200px; background:red"> 27 这是一个div标签</div> 28 29 <!--8.span标签--> 30 <p> 31 这是一段包含了span标签的话<br> 32 <span style="color:red">我在span标签里</span> 33 </p> 34 35 <!--9.含样式和语义的行内标签--> 36 <i>这是字体倾斜,i标签</i><br> 37 <em>这是强调内容,em标签，</em><br> 38 <b>这是字体加粗，b标签</b><br> 39 <strong>这是强调内容，strong标签</strong><br> 40 41 <!--10.img标签--> 42 <img src="F:桌面桌面壁纸愿望瓶1366x768.jpg" alt='许愿瓶'> 43 44 <!--11.音乐标签--> 45 <audio src="" controls="controls"></audio><br> 46 47 <!--12.视频标签--> 48 <video src=".VID_20200524_091803.mp4" width="300px" height="200px" controls="controls"></video><br> 49 50 <!--13.超链接标签--> 51 <a href="http://www.baidu.com">点击链接跳转到百度</a> 52 53 <!--14.列表-有序列表--> 54 <ol> 55 <li>列表文字11</li> 56 <li>列表文字22</li> 57 <li>列表文字33</li> 58 </ol> 59 <!--14.列表-无序列表--> 60 <ul> 61 <li>列表文字AA</li> 62 <li>列表文字BB</li> 63 <li>列表文字CC</li> 64 </ul> 65 66 <!--15.表格--> 67 <table border="1"> 68 <tr> 69 <th>姓名</th> 70 <th>年龄</th> 71 <th>性别</th> 72 </tr> 73 <tr> 74 <td>小样儿</td> 75 <td>18</td> 76 <td>女</td> 77 </tr> 78 <tr> 79 <td>张伟</td> 80 <td>20</td> 81 <td>男</td> 82 </tr> 83 <tr> 84 <td>王明</td> 85 <td>33</td> 86 <td>男</td> 87 </tr> 88 </table> 89 90 </body> 91 </html>
3.html表单
1.form标签
form标签用于为用户输入创建HTML表单，表单能够包含input元素，比如文本字段、复选框、单选框、提交按钮等。
form标签属性：
-
action:定义表单中数据提交地址
-
method:定义表单提交的方式（常见有get和post）
form表单包含的元素：
-
<label>标签：为表单元素定义文字标注
-
<input>标签：定义通用的表单元素
-
<textarea>标签：定义多行文本输入框
-
<select>标签：定义下拉表单元素
-
<option>标签：与select标签配合使用，定义下拉表单元素中的选项
2.input标签
value属性：定义表单元素的值
name属性：定义表单元素的名称，此名称是提交数据时的键名
<form> 账号：<input type="text" name="username" id="user"> 密码：<input type="password" name="password" id="pw"> </form>
type属性：
-
text：单行文本输入框
-
password：密码输入框
-
radio：单选框
-
checkbox：复选框
-
file：上传文件
-
submit：提交按钮
-
button：普通按钮
-
reset：重置按钮
-
image：图片作为提交按钮，用src属性定义图片地址
-
hidden：定义一个隐藏的表单域，用来存储值
3.label标签
label标签，在点击账号文本时，光标会自动定位到后面的输入框
4.textarea标签
文本域标签，格式：<textarea name="desc" id="" cols="20" rows="10"></textarea>
5.select标签
下拉框标签，和option标签同时使用
格式：
<select name="" id="2"> <option value="HB">长沙</option> <option value="SD">武汉</option> <option value="SX">西安</option> <option value="HuB">太原</option> </select><br>
6.option标签
定义下拉框列表中的一个选项（一个条目）
浏览器将option标签中内容作select标签的菜单或是滚动列表中的一个元素显示。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单实例代码</title> </head> <body> <form action="" method="get"> 账号：<input type="text" name="username"> <br> 密码：<input type="password" name="pwd"> <br> <input type="submit"> </form> <h1>注册表单</h1> <form action=""> <!--label标签，在点击账号文本时，光标会自动定位到后面的输入框--> <label for="user">账号：</label> <input type="text" id="user" name="username" placeholder="请输入账号"><br> 密码：<input type="password" name="pwd" placeholder="请输入密码"><br> 确认密码：<input type="password" name="pwd"><br> 选择性别： <input type="radio" name="gender">男 <input type="radio" name="gender">女 <br> 选择技能： <input type="checkbox" name='skill'>Python <input type="checkbox" name='skill'>Java <input type="checkbox" name='skill'>C++ <input type="checkbox" name='skill'>PHP <br> 省份： <select name="" id="1"> <option value="HB">河北省</option> <option value="SD">山东省</option> <option value="SX">山西省</option> <option value="HuB">湖北省</option> </select> 城市： <select name="" id="2"> <option value="HB">长沙</option> <option value="SD">武汉</option> <option value="SX">西安</option> <option value="HuB">太原</option> </select><br> 个人介绍： <textarea name="desc" id="" cols="20" rows="10"></textarea> 上传头像： <input type="file"><br> <!--提交按钮，提交表单--> <input type="submit"> <!--普通按钮，触发其他点击事件--> <input type="button" value="普通按钮"> <!--重置按钮--> <input type="reset" value="重置按钮"> </form> </body> </html>
4.内联框架iframe
iframe元素会创建包含另外一个文档的内联框架
如：将百度页面的内容链接到当前页面
<iframe src="http://www.baidu.com" height="200" width="400">
前端开源框架：
https://element.eleme.cn/#/zh-CN/component
学习资料：
https://www.w3school.com.cn/js/index.asp