web前端
前端开发也叫web前端开发，它指的是基于web的互联网产品的页面(也可叫做界面)开发及功能开发。
1.认识HTML
HTML是Hyper Text Markup Language（超文本标记语言）的缩写，是构成web页面的基本元素，是一种规范，一种标准。
HTML不是一种编程语言，而是一种描述性语言，通过标识符来标识网页中内容的显示方式，例如图片的显示尺寸、文字的大小、颜色、字体等。
浏览器能够对这些标记进行解释，按照要修显示出文字、图像、动画、媒体等网页内容。
HTML5是HTML的一个版面，该版本新增与优化了很多内容。现如今，几乎所有世面流行的浏览器都能很好的支持HTML5。
2.网页基础知识
2.1 HTML模板的基本含义
<!DOCTYPE html> <!--规定了浏览器文档使用哪种规范，以前需要在后面写上很长一串规范地址，现
今HTML5规范无须额外指定-->
<html lang="zh-cn"> <!--所有网页最大的结构 网页中所有的标签存放在html标签中-->
<head> <!--网页的头部 告诉浏览器一些相关的信息-->
<meta charset="UTF-8"> <!--表示网页编码格式 推荐UTF-8国际编码，常用的还有
gbk国标-->
<title>Title</title> <!--网页标题-->
</head>
<body> <!--网页的主体 我们所看的网页结构 都是在body中的-->
</body>
</html>
2.2 标签知识
- 由
<>包裹的关键词称为标签
- 标签分为单标签和双标签
-
<> 之间除了标签名外，还可以有属性="值" 的各种属性设置
2.3 HTML的lang属性
-
lang 放在<html lang="en"></html>中
- 主要用于决定浏览器是否自动弹出翻译框
- 常用的值：
en 代表英文网页，不管你写的内容是否是英文，打开该网页，浏览器都会弹出提示翻译框
- 常用值
zh-cn 代表网页是一个中文网页，浏览器打开该网页，不会弹出翻译提示框
2.4 结构与样式
- 结构：body中书写的内容会展示在浏览器可视区中，每个标签都有默认的样式
- 样式：通过编写css代码可以改变各个内容的样式
2.5 前端代码书写规范
- 标签、属性名以及相关符号均在英文半角状态下的小写
- id、class必须以字母开头
- 所有双标签必须闭合
- 根据层次结构对标签进行tab缩进
- 属性值必须带引号，单双引号都可以
3.认识标签
3.1 块级标签
div 标签用于将文档划分为独立的、不同的部分，从而构成一个完整的网页。网页的主体骨架一般由div 搭建，每一个单独的div模块中也可继续搭建局部的div骨架。
h1~h6标签用于标识网页内容的标题，标签中的文字会默认出现不同程度的加粗与增大。
在一个网页中h1 标签最好是有且仅有一个，这样有利于SEO优化，其他h标签可以根据需要出现多次。
p标签中通常用来放置一段文字。
注意：p标签中不可以放div 标签（任意块标签），这样会导致在浏览器中p标签被分成两个
ul 标签用于展示无序的列表内容，规范上，其子标签必须是li
<!--举例：展示新闻信息-->
<ul>
<li>今日全省气温高达37.5摄氏度</li>
<li>EDG战队获得全球总决赛冠军</li>
<li>你好皮卡丘</li>
<li>你好唐老鸭</li>
</ul>
ul 列表前默认有实心原点符号，可以通过修改type 属性来改变这个符号。但是更推荐通过CSS来对其进行修改，这样更符合结构与样式分离的理念。
语法：<ul type="value">
属性值：
disc 实心圆(默认值)。
circle 空心圆。
square 实心方块
ol 标签用于展示有序的列表， **规范上，其子标签必须是li **
<ol>
<li>打开冰箱门</li>
<li>将大象放进冰箱</li>
<li>关上冰箱门</li>
</ol>
ol 列表前默认有实心原点符号，可以通过修改type 属性来改变这个符号。但是更推荐通过CSS来对其进行修改，这样更符合结构与样式分离的理念。
语法：<ol type="value">
属性值value：
| 值 |
描述 |
| 1 |
默认值，数字有序列表。1，2，3，4 |
| a |
按字母顺序排列的有序列表。a、b、c、d |
| A |
按字母顺序排列的有序列表。A、B、C、D |
| i |
罗马字母，小写。i，ii， iii，iv |
| I |
罗马字母，大写。I，II，III，IV |
3.2 行内标签
span标签用于包裹文字，视觉上不会产生任何变化，但我们可以配合css添加特殊的样式，
例如：
<p>
让span包裹的文字
<span style="color:green">变绿色</span>
</p>
a 标签最常用于形成一个可点击的超链接:
<a href="https://www.baidu.com">点我跳转到百度</a>
通过target 属性可以指定打开链接的位置
语法：
<a href="https://www.baidu.com" target="_blank">点我跳转到百度</a>
| 值 |
描述 |
| _blank |
新标签页打开 |
| _new |
新标签页打开，但所有的new指挥打开一个新标签页 |
| _self |
默认，在当前标签页打开 |
img 标签用于在网页中引入一张图片
<img
src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
src：指定图片路径
width/height：指定img显示的大小
文字加粗，b标签仅为视觉上的加粗，strong标签还能够被搜索引擎检索
文字斜体，i 标签仅为视觉上的斜体，em 还能够被搜索引擎检索
文本换行
横线分割
3.3 特殊字符
在HTML书写某些特殊字符的时候，可能会遇到问题，比如要在网页里面显示字符 <> ，就有可能和我们的标签冲突，所以有些特殊字符需要用对应代替的写法（字符实体）表示：
-
<> 用 < 和>代替
- 连续空格会被忽略，如果需要使用多个连续空格使用
代替
更多符号请参考：HTML 实体符号参考手册
4.表单
4.1 form标签
form 标签是以恶搞用于存储单元素的区域；
form 知识一个大的区域，里面提供数据输入和采集的是很多表单控件元素完成的。
<form action="地址" method="get" target="_blank">
<!-- 各种表单控件元素 -->
</form>
| 属性 |
描述 |
| action |
表单提交时，往哪个地址提交 |
| methon |
表单提交数据的方式，一般有get和post两种 |
| target |
提交数据后，后端返回新页面在哪里打开，取值和 a 标签里的target一样 |
| entype |
设置编码格式 |
4.2 表单控件
表单控件的作用是采集用户的数据然后提交到后端，所以所有的控件必须有name及value属性，并且除了单选和多选之外，所有的控件name都不能相同。
input元素是单个标签，它的标签属性type 的不同，可以使它的意义不同：
<!-- case 1 : 单行文本输入框 value属性为输入的内容，所以可以不写 -->
<input type="text" name="名字" placeholder="这里可以写提示文字" />
<!-- case 2 : 单行密码输入框 value属性为输入的内容，所以可以不写 -->
<input type="password" name="名字" />
<!-- case 3 : 单选按钮，一组选项name必须相同，value必须不同（value值随便定义），一般需要后面写文字辅助选择 -->
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
<input type="radio" name="Country" value="0" />中国
<input type="radio" name="Country" value="1" />美国
<input type="radio" name="Country" value="2" />日本
<input type="radio" name="Country" value="3" />其他
<!-- case 4 : 多项选择 name建议相同，传值时是所有选中项的value集合 -->
<input type="checkbox" name="hobby" value="游戏" />游戏
<input type="checkbox" name="hobby" value="学习" />学习
<input type="checkbox" name="hobby" value="看剧" />看剧
<input type="checkbox" name="hobby" value="锻炼" />锻炼
<input type="checkbox" name="hobby" value="旅游" />旅游
<!-- case 5 : 重置按钮，点击重置所有表单中所有的控件，按钮文字默认"重置"，可以定义value
改变文字显示 -->
<input type="reset" />
<!-- case 6 : 空按钮，没有任何功能的空按钮，需要设置value值以供显示，一般用于js添加功能
事件 -->
<input type="button" value="按钮" /> <!--或者--> <button>按钮</button>
<!-- case 7 : 上传文件 -->
<input type="file" name="f" />
<!-- case 8 : 隐藏不显示的表单控件，用来传递附带的不需要向用户展示的信息 -->
<input type="button" name="hide" value="0" />
<!-- case 9 : 提交，点击之后提交该表单form的数据，默认value是"提交" -->
<input type="submit" />
<input type="number" />
<!-- 数字输入框 min 数字的最小值 max 数字最大值 step倍数-->
<input type="range" />
<!-- 数字滑块 min 数字的最小值 max 数字最大值 step倍数-->
<input type="time" /> 时间
<input type="date" /> 年月日
<input type="month" /> 年月
<input type="week" /> 年周
<input type="color" /> 颜色
辅助input进行选择
当我们进行单选或者多选时，必须点击input本身才可以选择，因为后面的文字知识一个视觉的辅助作用。但当我们通过给文字加上label标签然后将文字和input关联起来，点击文字，也可进行勾选。
label的 for 属性与 input 的 id 属性对应，例如：
<input type="radio" name="sex" value="1" id="sex1" /><label for="sex1">男</label>
<input type="radio" name="sex" value="2" id="sex2" /><label for="sex2">女</label>
默认选择：cheched 标签属性，单选或者多选时，可以指定初始默认已被选中的项。
禁止使用：disabled 标签属性。规定input禁止使用
select 和 option 配合实现下拉选框：
<!-- name规定给select value规定给option并且不能相同 -->
<select name="subject">
<option value="none">---请选择学科---</option>
<option value="1">语文</option>
<option value="2">数学</option>
<option value="3">英语</option>
<option value="4">生物</option>
<option value="5">物理</option>
<option value="6">化学</option>
<option value="0">体育</option>
</select>
| 标签属性 |
描述 |
| size |
设置给select，规定select下拉时最多能显示几个 |
| selected |
设置给option，规定默认显示哪几个option |
fieldset 和 legend 配合将多个表单控件根据需要分组；
fieldset 分组，legend 定义组标题
<form action="" medthod="" name="">
<fieldset>
<legend>注册信息</legend>
用户名：<input type="text" name="user" />
密 码：<input type="text" name="pwd" />
</fieldset>
<fieldset>
<legend>个人信息</legend>
姓名：<input type="text" name="name" />
年龄：<input type="text" name="age" />
性别：<input type="radio" name="sex" value="0" />男<input type="radio"
name="sex" value="1" />女
</fieldset>
</form>
5.表格
table 标签定义一个表格，内部配合一些表格标签定义表格内容。
目前，使用table的情况比较少。
5.1 简单的表格
一般我们在使用表格时，需要用的标签有：table、tr、th、td
| 标签 |
描述 |
| tr |
定义表格的行，内容都是写在行里面 |
| th |
定义在行里面，字体会加粗，代表一列的标题 |
| td |
定义在行里面，代表每一项 |
<table>
<tr>
<th>学历</th>
<th>职业</th>
<th>薪酬</th>
</tr>
<tr>
<td>大山</td>
<td>大海</td>
<td>沙漠</td>
</tr>
<tr>
<td>男</td>
<td>女</td>
<td>男</td>
</tr>
<tr>
<td>18</td>
<td>20</td>
<td>19</td>
</tr>
</table>
5.2边框和边距
给table加上标签属性border 以使每个单元格都加上边框。该属性接收数字值，该值只能改变tabel的边框宽度，不能改变里面项目的边框宽度；
- border-collapse:collapse;
给table加上CSS样式 border-collapse:collapse; 以使相邻单元格的边框合并，美化样式；
给table加上标签属性cellpadding以使每个单元格都加上padding，这个属性会受CSS样式的影响；
给table加上标签属性cellspacing以使每个单元格之间加上间隙，这个效果可以用CSS属性 border-spacing 代替
给td/th加上标签属性align可以设置文字对齐方式，类似于text-align的效果。
5.3其他样式
在使用table时，我们也可以使用CSS样式来协助控制整个table的展示，例如宽高，文字大小剧中加粗等都是需要用到的。除了border外，建议其他样式都使用CSS控制。
5.4 单元格合并
rowspan属性规定单元格纵跨的行数（纵向合并）
<td rowspan="2"></td>
colspan属性规定单元格横跨的列数（横向合并）
<td colspan="2"></td>
