Web前端笔记（1）
1. web前端三大核心技术：
HTML: 结构
CSS: 样式
JavaScript: 行为
HTML基本结构与属性：
html超文本标记语言，标准通用标记下的一个应用，是网页制作的必备的编程语言。
html标签含义：http://www.html5star.com/manual/html5label-meaning/
标记也叫做标签，分为但标签和双标签
---------------------------------------------------------------------------------------------------------------
html初始代码：
每一个html文件都需要添加初始代码，需要符合html文件的规范写法，初始代码如下：
<!DOCTYPE html> <!--文档类型声明-->
<html lang="en"> <!--html文件的最外层标签-->
<head> <!--head文档的头部-->
<meta charset="UTF-8"> <!--元信息，辅助信息,如编码信息-->
<title>标题</title> <!--title 设置网页的标题-->
</head>
<body> <!--body-->
</body>
</html>html语义化：
根据网页中内容的结构，选择合适的html标签进行编写
好处：
1. 在没有CSS的情形下，页面也能呈现出好的内容结构
2. 有利于SEO(搜索引擎优化)，让搜索引擎爬虫更好的理解网页
3. 方便其他设备解析
4. 便于团队开发与维护
2. 常用标签的使用：
标题与段落：
<h1></h1> 标题分为六级，分别为h1~h6
<p></p> 为段落
基本使用：（标题段落结构）
<!DOCTYPE html> <!--文档类型声明-->
<html lang="en"> <!--html文件的最外层标签-->
<head> <!--head文档的头部-->
<meta charset="UTF-8"> <!--元信息，辅助信息,如编码信息-->
<title>标题</title> <!--title 设置网页的标题-->
</head>
<body>
<h1>SEO职业</h1> <!--标题，只能出现h1-->
<p>
SEO职业是顺应时代发展的，是为了自然的提高网站在搜索引擎的排名结果，从而吸引更多的潜在
客户来浏览网站，目的是增加网站访问量，提升企业的销售业绩，获得效益。
</p>
<h2>职能</h2>
<p>
通过了解各类搜索引擎如何抓取互联网页面、如何进行索引以及如何确定其对某一特定关键词的搜索结
果排名等技术，来对网页内容进行相关的优化，使其符合用户浏览习惯，所以不少商业网站都希望透
过各种形式来干扰搜索引擎的排序。当中尤以各种依靠广告维生的网站为甚。SEO技术被很多目光短
浅的人，用一些SEO作弊的不正当手段，牺牲用户体验，一味迎合搜索引擎的缺陷，来提高排名，这
种SEO方法是不可取的，最终也会受到用户的唾弃。
</p>
<h2>类型</h2>
<p>
一般的SEO需求分为两种：目标关键词在百度、谷歌等搜索引擎排名前十（即首页），此类企业的目标
客户数量有限，且十分精准，目标关键词在5万以下；另外一种客户的目标关键词以十万、百万、千万
计算，如门户站，资讯类站，此类客户需要将海量关键词优化在搜索引擎的首页、前五、前三和第一名。
</p>
<h2>思维</h2>
<p>
SEO应该称为SEO流量技术或者SEO流量艺术，目的就是流量，更多有转化率的流量，自然我们都清楚需要
大量的长尾词，而这些大量的长尾词如何挖掘，如何建立长尾词词库，如何做好内容建设，这些问题需要
SEO主管去分配好工作内容，当然还要借助于一些软件或程序。比如：企业站本身内容比较少，收录也就
几十条，如何做大量的长尾词，处理这些问题先从用户的角度考虑，用户需要什么样的内容，什么样的
服务。从某个方面讲，SEO技术确实要缩水，优化的痕迹不能过于明显，新站尤其如此，所以SEO思维最重
要。
</p>
</body>
</html>
<!--注释代码-->
文本修饰标签：
<strong></strong> : 表示强调，会对文本进行加粗
<em></em>: 表示强调，会对文本进行斜体
<sup>：上标文本
<sub>: 下标文本
<del>: 删除文本
<ins>: 插入文本， 和删除文本配合使用
<!DOCTYPE html> <!--文档类型声明-->
<html lang="en"> <!--html文件的最外层标签-->
<head> <!--head文档的头部-->
<meta charset="UTF-8"> <!--元信息，辅助信息,如编码信息-->
<title>标题</title> <!--title 设置网页的标题-->
</head>
<body>
<h1>SEO职业</h1> <!--标题，只能出现h1-->
<p>
SEO职业是为了<strong>强调</strong>自然的提高网站在搜索引擎的排名结果，
目的是增<em>再次强调</em>加网站访问量，提升企业的销售业绩，获得效益。
</p>
<p>
x<sub>1</sub> + x<sub>2</sub> = 1
</p>
<p>
x<sup>1</sup> + x<sup>2</sup> = 1
</p>
<p>
促销: 原件<del>300</del>, 现价: <ins>150</ins>
</p>
</body>
</html>
<!--注释代码-->
图片标签与属性：
<img> 标签
属性包括：
src: 图片的地址
alt：当图片出现问题的时候显示一段文字
title：提示信息
width,height：控制图片的尺寸（建议写到img里面）
引入文件的地址路径：
1.相对路径
2.绝对路径
相对于当前文件，.表示当前路径， .. 表示上一级路径
<body>
<img src="../picture/map.jpg" alt="陕西省地图" title="陕西省西安市" width="60" height="80">
</body>跳转链接：
<a> : 实现跳转链接
属性：href target
href: 链接的地址
target: 跳转的时候是否开启新的标签
<base>: 改变链接的默认行为，需要添加到html文件的头部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<base target="_blank">
</head>
<body>
<a href="http://study.163.com/">网易云课堂</a>
<a href="http://study.163.com/" target="_blank">
<img src="../picture/map.jpg" alt="网易云课堂" title="访问网易云" width="300", height="200">
</a>
</body>
</html>
跳转锚点：
在当前页面进行跳转，跳转锚点，是在页面的目录中，通过点击跳转到页面的某个位置。（如百度百科）
方法1
<a>，结合标题的id进行跳转：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<a href="#html">HTML</a> <!-- #id 进行相应的映射 -->
<a href="#css">CSS</a>
<a href="#javascript">JavaScript</a>
<h2 id="html">HTML超文本标记语言</h2> <!--设置id 进行跳转锚点-->
<p>模拟html介绍内容 content</p>
<p>模拟html介绍内容 content</p>
<p>模拟html介绍内容 content</p>
<p>模拟html介绍内容 content</p>
<p>模拟html介绍内容 content</p>
<p>模拟html介绍内容 content</p>
<p>模拟html介绍内容 content</p>
<p>模拟html介绍内容 content</p>
<p>模拟html介绍内容 content</p>
<p>模拟html介绍内容 content</p>
<p>模拟html介绍内容 content</p>
<h2 id="css">CSS样式</h2>
<p>模拟CSS介绍内容 content</p>
<p>模拟CSS介绍内容 content</p>
<p>模拟CSS介绍内容 content</p>
<p>模拟CSS介绍内容 content</p>
<p>模拟CSS介绍内容 content</p>
<p>模拟CSS介绍内容 content</p>
<p>模拟CSS介绍内容 content</p>
<p>模拟CSS介绍内容 content</p>
<p>模拟CSS介绍内容 content</p>
<h2 id="javascript">JavaScript语言</h2>
<p>模拟JavaScript介绍内容 content</p>
<p>模拟JavaScript介绍内容 content</p>
<p>模拟JavaScript介绍内容 content</p>
<p>模拟JavaScript介绍内容 content</p>
<p>模拟JavaScript介绍内容 content</p>
<p>模拟JavaScript介绍内容 content</p>
<p>模拟JavaScript介绍内容 content</p>
<p>模拟JavaScript介绍内容 content</p>
<p>模拟JavaScript介绍内容 content</p>
</body>
</html>
方法2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<a href="#html">HTML</a> <!-- #name 进行相应的映射 -->
<a href="#css">CSS</a>
<a href="#javascript">JavaScript</a>
<a name="top"></a>
<a name="html"></a> <!--利用name进行映射-->
<h2>HTML超文本标记语言</h2>
<p>模拟html介绍内容 content</p>
<p>模拟html介绍内容 content</p>
<p>模拟html介绍内容 content</p>
<p>模拟html介绍内容 content</p>
<p>模拟html介绍内容 content</p>
<p>模拟html介绍内容 content</p>
<p>模拟html介绍内容 content</p>
<p>模拟html介绍内容 content</p>
<p>模拟html介绍内容 content</p>
<p>模拟html介绍内容 content</p>
<p>模拟html介绍内容 content</p>
<a name="css"></a>
<h2>CSS样式</h2>
<p>模拟CSS介绍内容 content</p>
<p>模拟CSS介绍内容 content</p>
<p>模拟CSS介绍内容 content</p>
<p>模拟CSS介绍内容 content</p>
<p>模拟CSS介绍内容 content</p>
<p>模拟CSS介绍内容 content</p>
<p>模拟CSS介绍内容 content</p>
<p>模拟CSS介绍内容 content</p>
<p>模拟CSS介绍内容 content</p>
<a name="javascript"></a>
<h2>JavaScript语言</h2>
<p>模拟JavaScript介绍内容 content</p>
<p>模拟JavaScript介绍内容 content</p>
<p>模拟JavaScript介绍内容 content</p>
<p>模拟JavaScript介绍内容 content</p>
<p>模拟JavaScript介绍内容 content</p>
<p>模拟JavaScript介绍内容 content</p>
<p>模拟JavaScript介绍内容 content</p>
<p>模拟JavaScript介绍内容 content</p>
<p>模拟JavaScript介绍内容 content</p>
<p>
<a href="#top"><strong>返回顶部</strong></a>
</p>
</body>
</html>
特殊符号：
输入法无法输入的符号，如注册商标符，版权符等。
https://blog.csdn.net/sunbocong/article/details/81032758
HTML中的列表：
1.无序列表
<ul>: 列表最外层容器， type属性：控制列表前面的控制样式
<li>: 表示列表项
必须组合出现，且他们之间不能有其他标签，但是<li>内部是可以有标签的
2.有序列表
<ol>:列表最外层 type属性 1 a A i I
<li>: 列表项
3.定义列表
<dl> 定义列表,相当于一个容器 <ul><ol>
<dt>定义专业术语或者名词
<dd> 对名词进行解释和描述
4.嵌套列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<!--无序列表-->
<ul type="square"> <!--type的值 disc默认 circle空心圆 square实心方块 其他的值可查文档-->
<li><a href="#"><strong>第一项</strong></a></li>
<li><a href="#"><em>第二项</em></a></li>
<li>第三项</li>
</ul>
<!-- 有序列表 -->
<ol type="A">
<li>第一项</li>
<li>第二项</li>
</ol>
<!-- 定义列表 -->
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
<dt>JavaScript</dt>
<dd>网页脚本语言</dd>
</dl>
<!--嵌套列表-->
<ul>
<li>甘肃省</li>
<ul>
<li>兰州市</li>
<li>天水市</li>
<li>酒泉市</li>
</ul>
<li>陕西省</li>
<ul>
<li>西安市</li>
<li>商洛市</li>
</ul>
</ul>
</body>
</html>
表格标签：
<table>: 表格的最外层容器
<th>：定义表格行
<tr>：定义表头
<td>：定义表格单元
<caption>： 定义表格标题
语义化标签：
<tHead>,<tBody>,<tFood>,用于设置表格的头尾，或者一些表格中数据的统计情况
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<!--表格-->
<table>
<caption>天气预报图</caption>
<thead>
<tr> <!--表格的一行-->
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</thead>
<tBody>
<tr>
<td>2019-1-12</td>
<td><img src="../picture/sun.gif"></td>
<td>天气晴朗，适合出行</td>
</tr>
<tr>
<td>2019-2-19</td>
<td><img src="../picture/rain.gif"></td>
<td>不适合出行</td>
</tr>
</tBody>
<tfoot>
</tfoot>
</table>
</body>
</html>
运行结果：
表格属性：
border: 表格边框
cellpadding: 单元格之间的空间
cellspacing: 单元格之间的空间
rowspan: 合并行 (类似于excel的合并单元格)
colspan: 合并列
align: 左右对齐方式
valign: 垂直对齐方式
添加边框和调整单元格大小之后：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<!--表格-->
<table border="1" cellpadding="10" cellspacing="3">
<caption>天气预报图</caption>
<thead>
<tr> <!--表格的一行-->
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</thead>
<tBody>
<tr>
<td>2019-1-12</td>
<td><img src="../picture/sun.gif"></td>
<td>天气晴朗，适合出行</td>
</tr>
<tr>
<td>2019-2-19</td>
<td><img src="../picture/rain.gif"></td>
<td>不适合出行</td>
</tr>
</tBody>
<tfoot>
</tfoot>
</table>
</body>
</html>
合并行与列之后：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<!--表格-->
<table border="1" cellpadding="10" cellspacing="3">
<caption>天气预报图</caption>
<thead>
<tr align="center" valign="center"> <!--表格的一行-->
<th colspan="2">日期</th>
<!--<th>日期</th>-->
<th>天气情况</th>
<th>出行情况</th>
</tr>
</thead>
<tBody>
<tr align="center" valign="center">
<td rowspan="2">2019-1-12</td>
<td>白天</td>
<td><img src="../picture/sun.gif"></td>
<td>天气晴朗，适合出行</td>
</tr>
<tr align="center" valign="center">
<!-- <td>2019-1-12</td>-->
<td>夜间</td>
<td><img src="../picture/sun.gif"></td>
<td>天气晴朗，适合出行</td>
</tr>
<tr align="center" valign="center">
<td rowspan="2">2019-2-19</td>
<td>白天</td>
<td><img src="../picture/rain.gif"></td>
<td>不适合出行</td>
</tr>
<tr align="center" valign="center">
<!--<td>2019-2-19</td>-->
<td>夜间</td>
<td><img src="../picture/rain.gif"></td>
<td>不适合出行</td>
</tr>
</tBody>
<tfoot>
</tfoot>
</table>
</body>
</html>
合并后的效果：
练习制作一个表格：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<table border="1" cellspacing="3" cellpadding="5">
<caption>课程价格表(详细)</caption>
<!--table head-->
<thead>
<tr align="center" valign="center">
<th>班次名称</th>
<th>科目</th>
<th>授课内容</th>
<th>增值服务</th>
<th>课时</th>
<th>价格</th>
<th>试听</th>
<th>购买</th>
</tr>
</thead>
<!--table body-->
<tbody>
<tr align="center" valign="center">
<td rowspan="3">真题精解班</td>
<td>行测.申论</td>
<td>全科历年真题精解</td>
<td rowspan="3">课后赠两套模拟卷，24小时以内答疑</td>
<td>48</td>
<td>1200￥</td>
<td><img src="../picture/rain.gif" alt=""></td>
<td><img src="../picture/rain.gif" alt=""></td>
</tr>
<tr align="center" valign="center">
<!--<td>真题精解班</td>-->
<td>行测</td>
<td>行测历年真题精解</td>
<!--<td>课后赠两套模拟卷，24小时以内答疑</td>-->
<td>32</td>
<td>980￥</td>
<td><img src="../picture/rain.gif" alt=""></td>
<td><img src="../picture/rain.gif" alt=""></td>
</tr>
<tr align="center" valign="center">
<!--<td>真题精解班</td>-->
<td>申论</td>
<td>申论历年真题精解</td>
<!--<td>课后赠两套模拟卷，24小时以内答疑</td>-->
<td>16</td>
<td>580￥</td>
<td><img src="../picture/rain.gif" alt=""></td>
<td><img src="../picture/rain.gif" alt=""></td>
</tr>
<tr align="center" valign="center">
<td rowspan="3">高分技巧班</td>
<td>行测.申论</td>
<td>全科技巧强化</td>
<td rowspan="3">入学试卷测评，24小时以内答疑</td>
<td>32</td>
<td>980￥</td>
<td><img src="../picture/sun.gif" alt=""></td>
<td><img src="../picture/sun.gif" alt=""></td>
</tr>
<tr align="center" valign="center">
<!--<td>真题精解班</td>-->
<td>行测</td>
<td>行测速解技巧强化</td>
<!--<td>课后赠两套模拟卷，24小时以内答疑</td>-->
<td>18</td>
<td>680￥</td>
<td><img src="../picture/sun.gif" alt=""></td>
<td><img src="../picture/sun.gif" alt=""></td>
</tr>
<tr align="center" valign="center">
<!--<td>真题精解班</td>-->
<td>申论</td>
<td>申论速解技巧强化</td>
<!--<td>课后赠两套模拟卷，24小时以内答疑</td>-->
<td>14</td>
<td>580￥</td>
<td><img src="../picture/sun.gif" alt=""></td>
<td><img src="../picture/sun.gif" alt=""></td>
</tr>
</tbody>
<!--table foot-->
<tfoot>
</tfoot>
</table>
</body>
</html>
制作效果：
表单：
<form>: 表单最外层的容器 action属性表示提交表单信息的地址
<input>: 输入信息，根据不同的type值，展示不同的控件，如输入框，密码框以及复选框
input标签的type属性的属性值如下表所示：
其他的表单标签：
1. <textarea>: 多行文本框， 主要属性cols, rows控制大小
2. <select> <option>：下拉菜单
3. label：辅助表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<h2>输入框</h2>
<input type="text" placeholder="电话/邮箱"> <!--占位符-->
<h2>密码框</h2>
<input type="password" placeholder="请输入密码">
<h2>复选框</h2>
<input type="checkbox" checked>red <!--默认选中-->
<input type="checkbox" checked>green
<input type="checkbox" disabled>black <!--禁用-->
<h2>单选框</h2>
<input type="radio" name="gender" checked>male <!--需要添加name属性，name属性可以将单选框编为一组-->
<input type="radio" name="gender">female
<h2>上传文件</h2>
<input type="file">
<h2>提交按钮与重置按钮</h2>
<input type="submit">
<input type="reset">
<h2>多行文本框</h2>
<textarea cols="30" rows="10" placeholder="请输入描述文字"></textarea>
<h2>下拉菜单</h2>
<select> <!--属性size multiple-->
<option selected disabled>请选择</option>
<option>北京</option>
<option>上海</option> <!--selected默认选中-->
<option>杭州</option>
</select>
<!--label标签 辅助表单-->
<!--label的for属性和input的id属性对应，input标签和label标签具有映射关系了-->
<!--即使点击汉字也可以选中单选框-->
<h2>具有label的单选框</h2>
<input type="radio" name="gender" id="male"><label for="male">男</label>
<input type="radio" name="gender" id="female"><label for="female">女</label>
</form>
</body>
</html>表单设计：表单与表格组合实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--表格与表单嵌套-->
<form action="">
<table border="2" cellpadding="4" cellspacing="5">
<thead>
</thead>
<tbody>
<tr align="center" valign="center">
<td rowspan="4">总体信息</td>
<td colspan="2">用户注册</td>
</tr>
<tr align="center" valign="center">
<td>用户名：</td>
<td><input type="text" placeholder="请输入用户名"></td>
</tr>
<tr align="center" valign="center">
<td>密码：</td>
<td><input type="password" placeholder="请输入密码"></td>
</tr>
<tr align="center" valign="center">
<td colspan="2">
<input type="submit">
<input type="reset">
</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</form>
</body>
</html>效果如下所示：
<div>: 表示分区的意思，<div>标签用来划分一个区域，相当于一块区域的容器，可以容纳段落，表格，标题，图像等各种元素，<div>可以进行多层嵌套，将网页分割成独立的，不同的部分，实现网页的规划和布局。
<span>: 用来修饰文字的，没有任何特定的样式，比如一段话中某个词需要修改样式
