一、简介
1、发展史
（1）web1.0 时代
产物：网页制作
那时的网页主要是静态网页，即没有与用户交互，仅仅是提供信息浏览的网页。如QQ日志、博文等。
网页制作三剑客：Dreamweaver+Fireworks+Flash
（2）web2.0 时代
产物：前端开发
有了静态网页和动态网页。
动态网页即指用户不仅可以浏览网页，还可以与服务器进行交互。如新浪微博。
现在的网站开发无论是开发难度，还是开发方式上，都更接近传统的网站后台开发，所以现在不再叫“网页制作”，而是叫“web前端开发”。
2、web前端能做什么
公司官网（在PC通过浏览器来访问公司网站）
移动端网页（在手机上浏览公司信息、小游戏等）
移动端APP（例如：淘宝、去哪儿旅游、携程等）
微信小程序（随用随装，不占用手机空间）
3、前端开发的3个组成部分：
结构（HTML）、表现（CSS）、行为（JavaScript）
网页现在的标准是W3C
4、HTML及其作用
（1）什么是HTML？
Hyper Text Markup Language（超文本标记语言）
HTML是一门描述性语言。
是一种用于创建网页的标记语言。
（2）作用
搭建网站框架。
5、CSS及其作用
（1）什么是CSS？
层叠样式表
（2）作用
给网站内容添加不同的表现形式，是网站样式美观。
6、JavaScript及其作用
JavaScript是一门脚本语言。
用于定义网站上的对象的行为。
二、HTML
1.HTML简介
HTML是一个网页的主体和基础。
标记语言是一种将文本（Text）以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的计算机文字编码。
与文本相关的其他信息（包括例如文本的结构和表示信息等）与原来的文本结合在一起，但是使用标记（markup）进行标识。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title>第一个文档</title> </head> <body> 我们的文档 </body> </html>
如上面代码中的带尖括号的html,head,meta等就叫做标签，用来描述文本的作用。这些标签互相嵌套构成了文本结构。
写好的HTML文件最终都会运行在浏览器上，由浏览器来解析。
2.开发环境
常用开发工具：Hbuild、Sublime Text、Dreamweare、PyCharm等。
HTML文件的后缀名为： .htm 或 .html
3.HTML标签规范
（1）在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来，如`<html>`、`<p>`都是标签。
（2）HTML中的标签通常都是成对出现的，分为开始标签和结束标签，结束标签比开始标签多了一个`/`，如`<p>标签内容</p>`和`<div>标签内容</div>`。开始标签和结束标签之间的就是标签的内容。
（3）标签之间是可以嵌套的
（4）HTML标签不区分大小写，`<h1>`和`<H1>`是一样的，但是我们通常建议使用小写
（5）不是所有标签都支持互相嵌套。
4.HTML文档结构
<!-- 声明文档类型，标记该文档为html文件 --> <!DOCTYPE HTML> <!-- 页面根节点 --> <html> <head> <!-- 声明头部的元信息，对文档规定编码格式 --> <meta charset="utf-8"/> <title>文档标题</title> </head> <body> 文档主体 </body> </html>
（1）<!DOCTYPE HTML>是文档声明，必须写在HTML文档的第一行，位于<html>标签之前，表明该文档是HTML5文档。
（2）<html></html> 称为根标签，所有的网页标签都在<html></html>中。
（3）<head></head> 标签用于定义文档的头部，它是所有头部元素的容器。常见的头部元素有<title>、<script>、<style>、<link>和<meta>等标签。
（4）在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在<body>标签中的内容最终会在浏览器中显示出来。
HTML文档包含了HTML标签及文本内容。
5.HTML注释
快捷键：ctrl+?
注释格式：
<!--这里是注释的内容-->
注意：注释不支持嵌套，注释不能写在HTML标签中。
6.head 标签
head标签描述了文档的各种属性和信息，包括文档标题、编码方式及URL等信息，这些信息大部分是用来提供索引，辨认或其他方面的应用的。
下标签可以用在head标签中：
<head lang='en'> <title>标题信息</title> <meta charset='utf-8'> <link> <style type='text/css'></style> <script type='text/javascript'></script> </head>
1.1. title标签
定义文档的标题，显示在浏览器标签页的标题栏。可以将其看作一个网页的标题。
主要用来告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出当前网页的主题。
格式：<title>标题</title>
创建一个带有我们自定义标题内容的网页：
<!DOCTYPE HTML> <html> <head> <title>第一个文档</title> </head> <body> </body> </html>
将上面内容存储为一个HTML文件，在浏览器中打开即可。
1.2. meta标签
提供有关页面的元信息、针对搜索引擎和更新频度的描述和关键词。
标签位于文档头部，可以定义文档的编码类型等信息。
所提供的信息用户不可见。
meta标签共有两个属性：http-equiv，name
1.2.1. http-equiv属性
用来向浏览器传达信息，帮助浏览器正确的显示网页内容，属性值为content
（1）重定向 2秒后跳转到对应网址：
<meta http-equiv="refresh" content="2;URL=http://www.baidu.com">
（2）指定文档内容类型和编码类型
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
（3）告诉浏览器以最高级模式渲染当前网页
<meta http-equiv="x-ua-compatible" content="IE=edge">
1.2.2. name属性
主要用于网页的关键字和描述，是写给搜索引擎看的，关键字之间用“,”隔开，与之对应的属性值为content。content中的内容主要是便于搜索引擎查找信息和分类信息。为了SEO优化
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <meta name="description" content="豆瓣">
1.3. link标签
（1）定义网站图标：
<link rel="icon" href="./fav.ico">
（2）引入外部样式：
<link rel="stylesheet" type="text/css" href="./mystyle.css">
1.4. style标签
定义内部样式
<style type="text/css"></style>
1.5. script标签
定义JavaScript代码或引入JavaScript文件
<script type="text/javascript"></script>
<script src="myscript.js"></script>
7.body标签
想要在网页上展示的内容就要放在body中。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>诗歌</title> </head> <body> <div class="诗歌"> <h3>海燕</h3> <p>在茫茫的大海上，</p> <p>狂风卷集着乌云。</p> <p>在乌云和大海之间，，</p> <p><i>海燕</i>像黑色的闪电，</p> <p>在高傲地飞翔。</p><hr> </div> </body> </html>
7.1. 标题标签 h1-h6
用于定义标题。块级元素
<!DOCTYPE HTML> <html> <head lang='en'> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>标题标签</title> </head> <body> <h1>一级标题</h1><h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> </body> </html>
7.2. 文本样式标签
主要用来对HTML页面中的文本进行修饰。
文本样式标签主要用来对HTML页面中的文本进行修饰，比如加粗、斜体、线条样式等... 1. `<b></b>`：加粗 2. `<i></i>`：斜体 3. `<u></u>`：下划线 4. `<s></s>`：删除线 5. `<sup></sup>`：上标 6. `<sub></sub>`：下标 现在如果想在一段文字中特别强调某几个字，这时候就可以用到`<em>`或`<strong>`标签。 这两个标签都是表示强调，但是两者在强调的语气上有区别:`<em>`表示强调，`<strong>`表示更强烈的强调。 在浏览器中`<em>`默认会用斜体表示，`<strong>`会用粗体来表示。两个标签相比，我们通常会推荐大家使用`<strong>`表示强调
7.3. 段落标签p
paragraph缩写，用于定义段落
是一个块级元素
<p>在茫茫的大海上，</p> <p>狂风卷集着乌云。</p> <p>在乌云和大海之间，</p>
7.4. 超链接标签a
anchor缩写。是一个链接点。
a为行内元素
作用：将当前位置的页面、文本或图片链接到其他页面、文本或者图片
（1）跳转到其他页面：
<a href="http://www.baidu.com" target="_blank" title="百度">百度</a>
target参数： _self ，默认值，在当前网站打开链接的资源地址； _blank 在新的网站打开链接的资源地址
title：鼠标悬停时显示的标题
（2）下载文件：
<a href="a.zip">下载包</a>
（3）跳转到邮箱：
<a href="mailto:[email protected]">联系我们</a>
（4）返回页面顶部：
<a href="#">跳转到顶部</a>
（5）跳转到指定id：
<a href="#p1">跳转到p1</a>
（6）触发<a>默认动作时，执行一段JavaScript代码：
<a href="javascript:alert(1)">内容</a>
（7）触发<a>时无任何操作：
<a href="javascript:;">内容</a>
7.5. 列表标签ul，ol
ul：unordered lists，无序列表
ol：ordered lists，有序列表
列表标签是块级元素
通常跟li标签一起用，每条li表示列表的内容
<!-- 无序列表 type可以定义无序列表的样式--> <ul type="circle"> <li>我的账户</li> <li>我的订单</li> <li>我的优惠券</li> <li>我的收藏</li> <li>退出</li> </ul> <!-- 有序列表 type可以定义有序列表的样式 --> <ol type="a"> <li>我的账户</li> <li>我的订单</li> <li>我的优惠券</li> <li>我的收藏</li> <li>退出</li> </ol>
（1）ul标签的属性：
type：列表标识的类型，值如下：
disc：实心圆(默认值)
circle：空心圆
square：实心矩形
none：不显示标识
（2）ol标签的属性：
type：列表标识的类型，值：
1：数字
a：小写字母
A：大写字母
i：小写罗马字符
I：大写罗马字符
起始编号 ，默认为1
7.6. 盒子标签div
division缩写，定义文档的分区，可以将文档分为独立的、不同的部分
是一个块级元素
<body> <div class="诗歌"> <h1>海燕</h1> <h2>海燕</h2> <h3>海燕</h3> <h4>海燕</h4> <h5>海燕</h5> <h6>海燕</h6> <p>在茫茫的大海上，</p> <p>狂风卷集着乌云。</p> <p>在乌云和大海之间，</p> <p><i>海燕</i>像黑色的闪电，</p> <p>在高傲地飞翔。</p><hr> </div> <div class="链接"> <a href="http://www.baidu.com" target="_blank" title="百度">百度</a> </div> </body>
每个<div></div>区域表示独立的一块，中间还可以嵌套<div></div>
7.7. 图片标签<img/>
用于向网页中插入图片
是一个行内块元素
语法：<img src="图片地址" alt="图片加载失败时显示的内容" title = "提示信息" />
<!-- 图片标签<img/> --> <div class="图片"> <img src="./picture1.png" alt="图片加载失败" style="width: 300px;height: 240px"> </div>
（1）src设置的图片地址可以是本地的地址也可以是一个网络地址。
（2）图片的格式可以是png、jpg和gif。
（3）alt属性的值会在图片加载失败时显示在网页上。
（4）还可以为图片设置宽度(width)和高度(height)，不设置就显示图片默认的宽度和高度
（5）与行内元素在一行内显示
7.8. span标签
span标签可以单独摘出某块内容，结合css设置相应的样式
是行内元素
<span>hello world</span> <span>the student is learning</span>
7.9. 换行标签<br>
用来将内容换行，其在HTML网页上的效果相当于我们平时使用word编辑文档时使用回车换行。
7.10. 分割线<hr>
用来在HTML页面中创建水平分隔线，通常用来分隔内容.
7.11. 特殊符号
注意：浏览器在显示的时候会移除源代码中多余的空格和空行，所有连续的空格或空行都会被算作一个空格。HTML代码中的所有连续的空行（空格）也被显示为一个空格。
常用特殊字符：
内容 代码 空格 > > < < & & ¥ ¥ 版权 © 注册 ®
特殊字符对照表：http://tool.chinaz.com/Tools/HtmlChar.aspx
7.12. 表格标签table
<table>：定义表格
<thead>：表格头
<tbody>：表格主体
<tr>：行
<th>：表格头里的单元格，默认加粗居中，常与<tr>结合使用定义表格头
<td>：表格主体里的单元格，即表格数据（table data），数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等
<tfoot>表格底部
表格行和列合并：
rowspan 合并行(竖着合并)
colspan 合并列(横着合并)
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <table border="1" cellspacing="0"> <!-- 表格头 --> <thead> <tr> <!-- thead里面使用th --> <th>时间</th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> </thead> <!-- 表格主体 --> <tbody> <tr> <!-- tbody里面使用td --> <td rowspan="3">上午</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>化学</td> <td>物理</td> </tr> <tr> <td>化学</td> <td>物理</td> <td>语文</td> <td>数学</td> <td>英语</td> </tr> <tr> <td>物理</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>化学</td> </tr> <tr> <td rowspan="2">下午</td> <td>数学</td> <td>英语</td> <td>数学</td> <td>英语</td> <td>化学</td> </tr> <tr> <td>英语</td> <td>数学</td> <td>英语</td> <td>物理</td> <td>语文</td> </tr> </tbody> <!-- 表底部 --> <tfoot> <tr> <!-- tfoot里面使用td --> <td colspan="6">课程表</td> </tr> </tfoot> </table> </body> </html>
7.13. 表单标签form
表单是一个包含表单元素的区域
表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、输入框(input)、单选框
作用：表单用于显示、输入信息，并将信息提交给服务器
语法：
<form>允许出现表单控件</form>
常见属性：
https://www.luffycity.com/python-book/assets/chapter9/html/form.png
表单控件分类：
https://www.luffycity.com/python-book/assets/chapter9/html/form_sort.png
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单控件</title> </head> <body> <div class="form"> <!-- form标签是块级元素，form表单是被提交的 --> <form action="http://www.baidu.com" method="get"> <p> <!-- lable标签是行内元素 --> <label for="user">用户名：</label> <!-- input标签是行内块元素 --> <input type="text" name="username" id="user" placeholder="请输入用户名"> </p> <p> <!-- lable标签是行内元素 --> <label for="password">密码： </label> <!-- input标签是行内块元素 --> <input type="text" name="password" id="password" placeholder="请输入密码"> </p> <p> <!-- 单选框checked会被默认选中。如何使选项产生互斥效果：name值相同 --> 用户性别： <input type="radio" name="sex" value="男" checked="">男 <input type="radio" name="sex" value="女">女 </p> <p> <!-- 复选框 --> 用户爱好： <input type="checkbox" name="checkfav" value="吃">吃 <input type="checkbox" name="checkfav" value="喝">喝 <input type="checkbox" name="checkfav" value="玩">玩 <input type="checkbox" name="checkfav" value="乐">乐 </p> <p> <!-- 上传文件 此时method必须设置为post,enctype必须为multipart/form-data --> <input type="file" name="textfile"> </p> <p> <!-- 文本域 --> 自我评价： <textarea cols="20" rows="5" name="txt" placeholder="请作自我评价"></textarea> </p> <p> <!-- 下拉列表 --> 户籍地址： <select name="sel" size="3" multiple=""> <option value="深圳" selected="">深圳</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="湖南">湖南</option> </select> </p> <p> <!-- 定义一个普通的按钮 --> <input type="button" name="btn" value="普通按钮" disabled="disabled"> <!-- disabled：禁用按钮 --> <!-- 提交form表单：submit --> <input type="submit" name="btn" value="提交"> </p> <p> <!-- 重置按钮 --> <input type="reset" name=""> </p> </form> <!-- button标签 --> <button type="button">按钮</button> </div> </body> </html>
8.HTML标签属性
HTML标签可以设置属性，属性一般以键值对的方式写在开始标签中。
<div id="i1">这是一个div标签</div> <p class='p1 p2 p3'>这是一个段落标签</p> <a href="http://www.luffycity.com">这是一个链接</a> <input type='button' onclick='addclick()'></input>
id就div标签的属性
注意：
（1）HTML标签除一些特定属性外可以设置自定义属性，一个标签可以设置多个属性用空格分隔，多个属性不区分先后顺序。
（2）属性值要用引号包裹起来，通常使用双引号也可以单引号。
（3）属性和属性值不区分大小写，但是推荐使用小写。
9.HTML标签分类
HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。
9.1. 块级元素：
<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>
特点：display:block;
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。独占一行
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
9.2. 行内元素：
<a> <span> <br> <i> <em> <strong> <label>
特点：display:inline;
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
9.3. 行内块元素：
<img> <input>
特点：display:inline-block;
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置
10.HTML标签嵌套
（1）块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素。
正确：<div><div></div><h1></h1><p><p></div>
正确：<a href=”#”><span></span></a>
错误：<span><div></div></span>
（2）块级元素不能放在p标签里面，比如
错误：<p><ol><li></li></ol></p>
错误：<p><div></div></p>
（3）有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：h1、h2、h3、h4、h5、h6、p
（4）li元素可以嵌入ul，ol，div等标签