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>: 用来修饰文字的，没有任何特定的样式，比如一段话中某个词需要修改样式