# 前端常用的基础性语言
html: 搭建整个网页（骨架，一堆的标签）
css: 修饰网页，网页漂亮（样式）
JavaScript:使网页发生行为（逻辑）
jquery 库
write less, do more
js库
bootstrap 前端框架
整合:html+css+js
Vue React 其他框架
HTML的历史发展过程
HTML是什么？
HyperText Makeup Language 超文本标记语言
# Html常用标签
标签样式展示: <a>文本内容 </a>
a 超链接标签 anchor 锚点 = <a>
href 属性
title 悬浮在超链接文字标题描述
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>超链接跳转邮箱</title> 5 </head> 6 <body> 7 <p id="top"></p> 8 <a href="https://www.baidu.com" title="点击一下，了解更多" target="_blank">百度一下</a> 9 10 </body> 11 </html>
# 让a标签新开一个网页
target="_self"(默认值)
1 <a href="https://www.baidu.com" title="点击一下，了解更多" target="_blank">百度一下</a>
# 当前网页进行跳转至顶部
id 属性 一个网页里面id是唯一且可以自定义的
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>超链接跳转测试</title> 5 </head> 6 <body> 7 <p id="top"></p> 8 <a href="https://www.baidu.com" title="点击一下，了解更多" target="_blank">百度一下</a> 9 <p>我是信息xxxx</p> 10 <p>我是信息xxxx</p> 11 <p>我是信息xxxx</p> 12 <p>我是信息xxxx</p> 13 <p>我是信息xxxx</p> 14 <p>我是信息xxxx</p> 15 <p>我是信息xxxx</p> 16 <p>我是信息xxxx</p> 17 <p>我是信息xxxx</p> 18 <p>我是信息xxxx</p> 19 <p>我是信息xxxx</p> 20 <p>我是信息xxxx</p> 21 <p>我是信息xxxx</p> 22 <p>我是信息xxxx</p> 23 <p>我是信息xxxx</p> 24 <p>我是信息xxxx</p> 25 <p>我是信息xxxx</p> 26 <p>我是信息xxxx</p> 27 <p>我是信息xxxx</p> 28 <p>我是信息xxxx</p> 29 <p>我是信息xxxx</p> 30 <p>我是信息xxxx</p> 31 <p>我是信息xxxx</p> 32 <p>我是信息xxxx</p> 33 <p>我是信息xxxx</p> 34 <p>我是信息xxxx</p> 35 <p>我是信息xxxx</p> 36 <p>我是信息xxxx</p> 37 <p>我是信息xxxx</p> 38 <p>我是信息xxxx</p> 39 <p>我是信息xxxx</p> 40 <p>我是信息xxxx</p> 41 <p>我是信息xxxx</p> 42 <p>我是信息xxxx</p> 43 <p>我是信息xxxx</p> 44 <p>我是信息xxxx</p> 45 <p>我是信息xxxx</p> 46 <p>我是信息xxxx</p> 47 <p>我是信息xxxx</p> 48 <p>我是信息xxxx</p> 49 <p>我是信息xxxx</p> 50 <p>我是信息xxxx</p> 51 <p>我是信息xxxx</p> 52 <p>我是信息xxxx</p> 53 <p>我是信息xxxx</p> 54 <p>我是信息xxxx</p> 55 <p>我是信息xxxx</p> 56 <p>我是信息xxxx</p> 57 <p>我是信息xxxx</p> 58 <p>我是信息xxxx</p> 59 <p>我是信息xxxx</p> 60 <p>我是信息xxxx</p> 61 <p>我是信息xxxx</p> 62 <p>我是信息xxxx</p> 63 <p>我是信息xxxx</p> 64 <p>我是信息xxxx</p> 65 <p>我是信息xxxx</p> 66 <p>我是信息xxxx</p> 67 <p>我是信息xxxx</p> 68 <p>我是信息xxxx</p> 69 <p>我是信息xxxx</p> 70 <p>我是信息xxxx</p> 71 <p>我是信息xxxx</p> 72 <p>我是信息xxxx</p> 73 <p>我是信息xxxx</p> 74 <p>我是信息xxxx</p> 75 <a href="#top">回到顶部</a> 76 </body> 77 </html>
# a标签跳转邮箱
href="mailto:xxx@xx.com"
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>超链接跳转邮箱</title> 5 </head> 6 <body> 7 <p id="top"></p> 8 <a href="https://www.baidu.com" title="点击一下，了解更多" target="_blank">百度一下</a> 9 <a href="mailto:hopelove16@163.com">联系我们</a> 10 11 </body> 12 </html>
标题标签
h1~h6(从大到小)
<p>段落 </p>
<strong>加粗</strong> <em>斜体</em>
ul/ol/dl/li(列表)
e.g. unordered list(无序列表) = ul
1 <ul> 2 3 <li>无序列表1 </li> 4 5 <li> 无序列表2 </li> 6 7 <li> 无序列表3 </li> 8 9 </ul>
e.g. ordered list(有序列表) = ol
1 <ol> 2 3 <li> 有序列表1 </li> 4 5 <li> 有序列表2 </li> 6 7 <li> 有序列表3 </li> 8 9 </ol>
e.g. definition list (定义列表) = dl definition title = dt definition description
PS: 定义列表通常有标题，并且一组的标签是 <dl> <dt> <dd>
1 <dl> 2 3 <dt>自定义列表标题</dt> 4 5 <dd> 自定义列表1 </dd> 6 7 <dd> 自定义列表2 </dd> 8 9 <dd> 自定义列表3 </dd> 10 11 </dl>
table(表格) table row(表行) = <tr> table head(表头) = <th> table data(表格描述） = <td>
1 <table> 2 <tr> 3 <th>姓名</th> 4 <th>性别</th> 5 <th>年龄</th> 6 </tr> 7 <tr> 8 <td>张三</td> 9 <td>男</td> 10 <td>18</td> 11 </tr> 12 <tr> 13 <td>李四</td> 14 <td>女</td> 15 <td>22</td> 16 </tr> 17 <tr> 18 <td>王老五</td> 19 <td>男</td> 20 <td>70</td> 21 </tr> 22 </table>
# 改进有边框版
border 边框 值为1（表示有边框）
cellspacing 间隙 值为0
1 <table border="1" cellspacing="0"> 2 <tr> 3 <th>姓名</th> 4 <th>性别</th> 5 <th>年龄</th> 6 </tr> 7 <tr> 8 <td>张三</td> 9 <td>男</td> 10 <td>18</td> 11 </tr> 12 <tr> 13 <td>李四</td> 14 <td>女</td> 15 <td>22</td> 16 </tr> 17 <tr> 18 <td>王老五</td> 19 <td>男</td> 20 <td>70</td> 21 </tr> 22 </table>
# 增加表格标题
caption 表格标题； 放在第一个tr标签上面
1 <table border="1" cellspacing="0"> 2 <caption>表格清单</caption> 3 <tr> 4 <th>姓名</th> 5 <th>性别</th> 6 <th>年龄</th> 7 </tr> 8 <tr> 9 <td>张三</td> 10 <td>男</td> 11 <td>18</td> 12 </tr> 13 <tr> 14 <td>李四</td> 15 <td>女</td> 16 <td>22</td> 17 </tr> 18 <tr> 19 <td>王老五</td> 20 <td>男</td> 21 <td>70</td> 22 </tr> 23 </table>
# 表格横向合并和纵向合并
colspan 横向合并：合并的列数（在<th>上操作）
rowspan 纵向合并：合并的行数（在<td>上操作）
1 <table border="1" cellspacing="0"> 2 <caption>表格清单</caption> 3 <tr> 4 <th>姓名</th> 5 <th>性别</th> 6 <th colspan="2">年龄和职业</th> 7 </tr> 8 <tr> 9 <td>张三</td> 10 <td>男</td> 11 <td>18</td> 12 <td>工程师</td> 13 </tr> 14 <tr> 15 <td>李四</td> 16 <td>女</td> 17 <td>22</td> 18 <td>工程师</td> 19 </tr> 20 <tr> 21 <td>王老五</td> 22 <td>男</td> 23 <td rowspan="3">70</td> 24 <td>工程师</td> 25 </tr> 26 </tr> 27 <tr> 28 <td>NPC</td> 29 <td>男</td> 30 31 <td>工程师</td> 32 </tr> 33 </tr> 34 <tr> 35 <td>GM</td> 36 <td>男</td> 37 38 <td>工程师</td> 39 </tr> 40 </table>
form（表单）
input(输入框)
type="text"（默认） 明文
type="password" 密文
placeholder="框中提示信息,e.g.请输入用户名；请输入密码"
action 提交
method="get"(默认) 、"post"
input=“submit”， value="显示的按钮文字"(默认为提交)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>form标签</title> 5 </head> 6 <body> 7 <!-- 默认的action的method为"get" --> 8 <form action="https://www.baidu.com" method="post"> 9 <!-- 默认input的type属性为"text" --> 10 <input type="text" placeholder="请输入用户名"> 11 <input type="password" placeholder="请输入密码"> 12 <input type="submit" > 13 <input type="submit" value="立即注册"> 14 <input type="submit" value="忘记密码"> 15 </form> 16 </body> 17 </html>
# 美化版输入框及单选框
input type="radio" 单选框
checked="checked" 默认选中
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>form标签</title> 5 </head> 6 <body> 7 <!-- 默认的action的method为"get" --> 8 <form action="https://www.baidu.com" method="post"> 9 <!-- 默认input的type属性为"text" --> 10 <p> <input type="text" placeholder="请输入用户名"></p> 11 <p> <input type="password" placeholder="请输入密码"></p> 12 <p> <input type="submit" > 13 <input type="submit" value="立即注册"> 14 </p> 15 16 <p><input type="submit" value="忘记密码"></p> 17 <p>帅哥:<input type="radio" name="sex" checked="checked"></p> 18 <p>美女:<input type="radio" name="sex"></p> 19 20 </form> 21 </body> 22 </html>
# form表单中的按钮和普通按钮
<input type="reset" value="重置"> 用于清空textare标签里面的内容
<botton>按钮</botton> # 脱离<from>标签，单独存在
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>表单重置按钮和普通按钮</title> 5 </head> 6 <body> 7 <form> 8 <textarea rows="15" cols="15"></textarea> 9 <p><input type="reset" value="重置"></p> 10 </form> 11 <button>普通按钮</button> 12 </body> 13 </html>
# 复选框和下拉框单选和多选
<input type="checkbox"
<select>
option selected=selected"
multiple=
</select>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>form标签</title> 5 </head> 6 <body> 7 <form> 8 前端学习<input type="checkbox"> 9 Python<input type="checkbox"> 10 Java<input type="checkbox"> 11 Go<input type="checkbox"> 12 默认选中<input type="checkbox" checked="checked"> 13 C#<input type="checkbox"> 14 <h2>下拉框单选</h2> 15 <p><select> 16 <option>内容1</option> 17 <option>内容2</option> 18 <option>内容3</option> 19 <option selected="selected">默认选中</option> 20 <h2>下拉框多选</h2> 21 </select> 22 <h2>下拉框多选</h2> 23 <p><select multiple="multiple"> 24 <option>内容1</option> 25 <option>内容2</option> 26 <option>内容3</option> 27 <option selected="selected">默认选中</option> 28 <h2>下拉框多选</h2> 29 </select> 30 </p> 31 </form> 32 </body> 33 </html>
textarea(多行文本输入框）
<textarea> </textarea>
rows="xx" 行数
cols=“xx” 列数
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>form标签</title> 5 </head> 6 <body> 7 <form> 8 前端学习<input type="checkbox"> 9 Python<input type="checkbox"> 10 Java<input type="checkbox"> 11 Go<input type="checkbox"> 12 默认选中<input type="checkbox" checked="checked"> 13 C#<input type="checkbox"> 14 <h2>下拉框单选</h2> 15 <p><select> 16 <option>内容1</option> 17 <option>内容2</option> 18 <option>内容3</option> 19 <option selected="selected">默认选中</option> 20 <h2>下拉框多选</h2> 21 </select> 22 <h2>下拉框多选</h2> 23 <p><select multiple="multiple"> 24 <option>内容1</option> 25 <option>内容2</option> 26 <option>内容3</option> 27 <option selected="selected">默认选中</option> 28 29 </select> 30 </p> 31 <h2>文本输入框支持多行输入</h2> 32 <p> 33 <textarea rows="10" cols="10" ></textarea> 34 </p> 35 </form> 36 </body> 37 </html>
# 特殊标签（单闭合标签）
<br> OR <br /> 换行标签
<hr>（分割线）OR </br>（换行）
<img> (图像标签）
src 路径(同级路径直接写文件名)
相对路径：
./1.png
../1.png
.../1.png
绝对路径:
file:///xx/xx/x.png
file:///c:/xx/x.png
1 <img src="1.jpg">
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>图片标签</title> 5 </head> 6 <body> 7 <h2>图片1 absolute path 相对路径</h2> 8 <img src="images/1.jpg"> 9 <h2>图片2 relative path 绝对路径</h2> 10 <img src="file:///D:/Users/loki/Documents/Loki_front_end/images/1.jpg"> 11 </body> 12 </html>
# 设置img 高宽度
width 宽度
height 高度
alt 当图像资源失败的时候，一个提示
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>图片标签</title> 5 </head> 6 <body> 7 <h2>图片1 absolute path 绝对路径</h2> 8 <img src="images/1.jpg"> 9 <h2>图片2 relative path 相对路径</h2> 10 <img src="file:///D:/Users/loki/Documents/Loki_front_end/images/1.jpg"> 11 <h3>调用网络地址的图片并设置宽高</h3> 12 <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" width="150" height="150" alt="什么都没有" > 13 </body> 14 </html>
label标签的应用
for: <label for="xxx"> </label> # label下面使用的属性
id: <input type="text OR password" id="xxx"> # input下面使用的属性
<!DOCTYPE html> <html> <head> <title>label标签的应用</title> </head> <body> <h3>常规input文字版</h3> <p>用户名：<input type="text" ></p> <p>密码：<input type="password" ></p> <h3>label改进版本的</h3> <h4>可以双击"用户名"和"密码"观察不同效果</h4> <p> <label for="user">用户名：(2）</label> <input type="text" id="user"> <label for="pwd">密码：(2)</label> <input type="password" id="pwd"> </p> </body> </html>
div/span(网站排版布局划分)
division（区域） = div # 可以嵌套，区域划分，还可以包含大部分标签和文本
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Div标签</title> 5 </head> 6 <body> 7 <div> 8 张三 9 <div> 10 张三儿子 11 <div> 12 张三孙子 13 <div>张三曾孙</div> 14 </div> 15 </div> 16 </div> 17 <div>李四</div> 18 <div>王老五</div> 19 </body> 20 </html>
顶部栏
导航栏：有logo的区域，叫导航栏
内容区域
底部区域：网站信息，联系我们，关于我们
HTML结构
sublime3： 快捷键! + table键(需要安装emmet)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>网站标题</title> 6 </head> 7 <body> 8 9 </body> 10 </html>
PS: (在不同浏览器上显示不同，可以做为一个空格用)
空白折叠现象：在一个段落中间如果有空格、换行、和缩进、那么在浏览器中会折叠成一个空格显示。
作业： 对某大型网站用标签进行一次整站分析
1 <!-- 草稿内容 2 顶部栏目 3 left ： 4 图片logo * 1 5 6 right： 7 8 form input *2 9 a *2 10 图片logo *1 11 12 导航栏： 13 a * 7 14 15 底部栏： 16 友情链接 * a 5 17 left： 18 图片logo * form img * 1 19 a * 9 20 版权信息 p*1 21 咨询投诉热线 p*1 22 --> 23 24 <!DOCTYPE html> 25 <html> 26 <head> 27 <title>某科技公司网站基础分析模拟</title> 28 </head> 29 <body> 30 <p id="top"></p> 31 <div> 32 <!-- 顶部栏目left --> 33 < 34 <form> 35 <img src="logo.jpg" href="https://xxx"> 36 </form> 37 </div> 38 39 <div> 40 <!-- 顶部栏目right --> 41 <form action="https://www.baidu.com" method="post"> 42 <input type="text" placeholder="请输入关键字"> 43 <input type="submit" value="搜索"> 44 <a href="http://xxx">新浪微博</a> 45 <a href="https://xxx">付款中心</a> 46 </form> 47 </div> 48 <div> 49 <!-- 导航栏 --> 50 <a href="http://xxx">首页</a> 51 <dl> 52 <dt><a href="http://xxx">走进XX</a></dt> 53 <dd><a href="http://xxx">xx简介</a></dd> 54 <dd><a href="http://xxx">大事记</a></dd> 55 <dd><a href="http://xxx">xx理念</a></dd> 56 <dd><a href="http://xxx">xx荣耀</a></dd> 57 <dd><a href="http://xxx">分部发展</a></dd> 58 </dl> 59 <a href="http://xxx">xx文化</a> 60 <a href="http://xxx">产品服务</a> 61 <a href="http://xxx">网站建设</a> 62 <a href="http://xxx">新闻资讯</a> 63 <a href="http://xxx">人力资源</a> 64 </div> 65 <div> 66 <!--内容区--> 67 <p><em>我是斜体内容！</em></p> 68 <p>我是内容！</p> 69 <p>我是内容！</p> 70 <p>我是内容！</p> 71 <p>我是内容！</p> 72 <p>我是内容！</p> 73 <p>我是内容！</p> 74 <p>我是内容！</p> 75 <p>我是内容！</p> 76 <p>我是内容！</p> 77 <p>我是内容！</p> 78 <p>我是内容！</p> 79 <p>我是内容！</p> 80 <p>我是内容！</p> 81 <p>我是内容！</p> 82 <p>我是内容！</p> 83 <p>我是内容！</p> 84 <p>我是内容！</p> 85 <p>我是内容！</p> 86 <p><em>我是斜体内容！</em></p> 87 </div> 88 <div> 89 <!-- 底部栏 --> 90 <a href="http://xxx">友情链接1</a> 91 <a href="http://xxx">友情链接2</a> 92 <a href="http://xxx">友情链接3</a> 93 <a href="http://xxx">友情链接4</a> 94 <a href="http://xxx">友情链接5</a> 95 96 </div> 97 <div> 98 <!-- 底部栏left --> 99 <form> 100 <img src="xxxjpg" href="https://xxx"> 101 </form> 102 </div> 103 <div> 104 <!-- 底部栏right --> 105 <a href="https://xxx">首页 |</a> 106 <a href="https://xxx">xx文化 |</a> 107 <a href="https://xxx">爱心公益 |</a> 108 <a href="https://xxx">公司资质 |</a> 109 <a href="https://xxx">授权代理证书 |</a> 110 <a href="https://xxx">招聘职位 |</a> 111 <a href="https://xxx">付款中心 |</a> 112 <a href="https://xxx">联系我们 |</a> 113 <a href="https://xxx">员工身份验证</a> 114 115 </div> 116 <div> 117 <!-- 版权信息 --> 118 <p>成都xxx有限公司©版权所有2002-2020 地址：xxxx</p> 119 <p>咨询及投诉热线：000-00000 邮编：61xxxx <a href="mailto:xxx@xxx.com">电子邮箱: xxx@xxx.com</a> <a href="https://beian.miit.gov.cn/">蜀ICPxxxxxxxx号</a></p> 120 <form> 121 <p><img src="xxx.jpg">工商网监</p> 122 <p><img src="xxx.jpg">传公网安备51xxxxxxxxxxxx号</p> 123 </form> 124 </div> 125 126 <div> 127 <a href="#top"><strong>返回顶部</strong></a> 128 </div> 129 </body> 130 </html>
附录：
HTML注释：
<!--这是单行注释-->
<!--
这是多行注释
这是多行注释
这是多行注释
-->
JS/jQuery注释：
//这是单行注释
/*
这是多行注释
这是多行注释
这是多行注释
*/
css注释：
/*这是单行注释*/
/*
这是多行注释
这是多行注释
这是多行注释
*/