前端零基础教学开始第一天 01 -day
引言： 我所教授的前端知识适用于纯小白，零基础。以后未来发展方向是前端领域，需要系统学习的人，从零到1的人 转载需备注地址---- 我是（我想静静）一个要把代码写出艺术感的人！ 写代码的男人很帅气！
## 学习注意： 加星 都是重点
1、web 标准是什么？ 三个东西 1、 结构 2、表现 3、行为
```
DOCTYPE html 是什么 是声明文档类型 现在是HTML5
<!DOCTYPE html>
Lang 是语言信息
<html lang=“en">
head 头
<head>
head 里面的所有东西 都是给浏览器看的
meta 元信息 charset 是 字符集 utf-8 字符集编码
<meta charset=“UTF-8">
title 标题
<title>Document</title>
</head>
<body>
body 是给用户看的主体，所有给用户看的都在body 里面
</body>
</html>
```
谨记 ：用户只会关心 body 里面的内容
## 标签的学习 ：
标题标签
```
<h1> -<h6> h1 标签最好只写一次
```
```
<!-- 决定了页面所有的a标签 超链接打开方式 -->
<base target="_blank">
<!----> 这是注释 -->
本人Mac电脑是 command + 斜杠 /
  是空格 符号 因为在html5 里面无论增加多少空格只会显示一个所以需要使用  按住 shift + 7 可以打出来
< 小于号
> 大于号
¥ 人民币
## 文件夹路径： 上一级 ../ 下一级 / 非常重要路径问题 新手容易犯的错很多在路径上
div span 是没有语义的 我们网页布局主要的2个盒子 想必听过 css + div
div就是 divsion 的缩写
div 独占一行
span 跨度范围
标签语义化： 合适的地方给一个最为合理的标签
```
hr 是水平线标签
P 是段落标签
br 是换行
Strong 与 b 是文字加粗
em 与 i 文字倾斜
Del 与 s 是删除线
Ins 与 u 是下划线
Sup 是 上标 使用如下 5 <sup> 2 </sup>
sub 是 下标 使用如下 5 <sub> 2 </sub>
```
图片标签 src 图片的来源 title 提示文本 alt 替换文本，在图标不显示时候显示 width 宽
height 高 border 边框
<img src="" title="" alt="" width="" height="" border="">
```
```
href 链接的路径 title 提示文本 target="_blank" 打开的方式_blacnk是在新窗口打开，原窗口不关闭
<a href="" title="" target="_blank"></a>
<a href="#"> 空连接</a>
```
```
<!-- 增加锚点 -->
<a href="#bottom">去底部</a>
<p id="top">
据东北新闻网报道 记者从有关部门获悉，加拿大公民迈克尔，英文名：Spavor Michael Peter Todd，因涉嫌从事危害中国国家安全的活动，于2018年12月10日，被辽宁省丹东市国家安全局依法审查。目前，案件正在审理中。
另据环球网消息，迈克尔的公司此前刚刚将一些游客和冰球运动员送往朝鲜。他本人也因帮助前NBA球星罗德曼访问朝鲜而闻名。
据东北新闻网报道 记者从有关部门获悉，加拿大公民迈克尔，英文名：Spavor Michael Peter
</p>
<p>据东北新闻网报道 记者从有关部门获悉，加拿大公民迈克尔，英文名：Spavor Michael Peter Todd，因涉嫌从事危害中国国家安全的活动，于2018年12月10日，被辽宁省丹东市国家安全局依法审查。目前，案件正在审理中。
另据环球网消息，迈克尔的公司此前刚刚将一些游客和冰球运动员送往朝鲜。他本人也因帮助前NBA球星罗德曼访问朝鲜而闻名。
</p>
<p>据东北新闻网报道 记者从有关部门获悉，加拿大公民迈克尔，英文名：Spavor Michael Peter Todd，因涉嫌从事危害中国国家安全的活动，于2018年12月10日，被辽宁省丹东市国家安全局依法审查。目前，案件正在审理中。
另据环球网消息，迈克尔的公司此前刚刚将一些游客和冰球运动员送往朝鲜。他本人也因帮助前NBA球星罗德曼访问朝鲜而闻名。</p>
<p id="bottom">
据东北新闻网报道 记者从有关部门获悉，加拿大公民迈克尔，英文名：Spavor Michael Peter Todd，因涉嫌从事危害中国国家安全的活动，于2018年12月10日，被辽宁省丹东市国家安全局依法审查。目前，案件正在审理中。
另据环球网消息，迈克尔的公司此前刚刚将一些游客和冰球运动员送往朝鲜。他本人也因帮助前NBA球星罗德曼访问朝鲜而闻名。
</p>
<a href="#top">去顶部</a>
```
## 关于编辑器Sublime 的使用
！+tab 基本机构
标签加单词 自动补全
com + shift + D 快速复制一行
com + shift + k 快速删除一行
com + shift + 上箭头 上移动
com + shift + 下箭头 下移动
com + 鼠标左键单机 集体编辑
com + f 快速 查找
com + l 快速选中
com + B + k 快速 隐藏侧边栏
## 关于列表 : 一共三种
1、无序列表 ul 无序列表没有顺序之分
2、有序列表
3、自定义列表
** ** ul 里面 只能嵌套 li li里面可以容纳嵌套任意标签 p div 等等
```
<ul> <!-- 无序列表 -->
<li></li> <!-- li 就是列表项 -->
<li></li>
</ul>
```
```
<!-- 有序列表 工作中使用较少 -->
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
```
```
<!--自定义列表 多用于底部展示 footer -->
<dl>
<dt>**自定义列表的标题**</dt>
<dd>解释项</dd>
<dd>解释项</dd>
<dd>解释项</dd>
</dl>
```
## table表格
表格常用处理，显示表格式数据
```
<!-- 表格 -->
cellspacing ="默认是两个2 可以改成0就会没有边线，设置单元格与单元格边框之间的空白间距"
cellpadding ="可以给表格加 cellpadding 表格内容距离边框的距离"
align="" 设置表格在网页中的水平对齐方式 有 left center right
align对齐方式，可以给table 和tr 加 给 table 加就是整个表格对齐方式，给tr加就是 内容 对齐的方式
th是表头
caption 表格的标题与表格是一体的，必须紧随table 之后增加，只能有一个居中在表格之上
表格如果去掉宽，高有一定的默认距离
table tr td 用来创建表格的基本标签
td 里面可以嵌套任意标签
table>tr*5>td*3 表格的快速简写方式 table 里面包含 tr 有5个 tr里面有td td有三个
<table width="" height="" border="" cellspacing="2" cellpadding="10">
<caption>表格的标题</caption>
<!-- tr 是行 -->
<tr>
<th>有语义化</th>给SEO 用的
</tr>
<tr>
<!-- td 是单元格 -->
<td></td>
<td></td>
</tr>
</table>
```
```
增加 thead 与 tbody 都是为了seo 搜索 tfoot 有兼容问题
<table>
<thead> 表格头部 thead
<tr>
<td></td>
</tr>
</thead>
<tbody> 表格 身体 tbody
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td>tfoot 多数是不使用的因为 有浏览器兼容问题</td>
</tr>
</tfoot>
</table>
```
## table 表格 合并单元格
<!-- 跨行合并 rowspan 垂直合并 也叫跨行合并 -->
<!-- 跨列合并 colspan 水平合并也叫跨列合并 -->
合并单元格的思想 ： 将多个内容合并的时候，就会有多余的东西，把他删除，列如把3个td 合并成一个，那就多余了2个 需要删除
公式 ： 删除的个数 = 合并的个数 -1
```
<table width="800" height="400" cellspacing="0" border="1" align="center" >
<!-- 跨行合并 rowspan 垂直合并 -->
<!-- 跨列合并 colspan 水平合并-->
<tr>
<td colspan="4"></td>
注意：在colspan之后 后面的3个 td 都要删除掉
<!--<td></td>-->
<!--<td></td>-->
<!--<td></td>-->
</tr>
<tr>
<td rwospan="2"></td> 跨行合并 需要删除下面tr 里面相同部位的td
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<!--<td></td>-->
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<!--<td></td>-->
<td></td>
<td></td>
<td></td>
</tr>
</table>
```
## form input的表单提交 重要
<!-- 表单域 form 收集信息 -->
method 一共两种 方法 get 和post
get 提交的方式会在 浏览器地址栏显示
post 不会显示
action 作用就是 收集的信息交给谁处理
method 信息提交的方法
下面是演示代码
```
<form action="1.php" method="get" >
姓名：<input type="text" name="userName"> <br>
密码：<input type="password" name="pwd"> <br>
<input type="submit" name="">
</form>
```
method 一共两种 方法 get 和post
```
<form action="2.php" method="post" >
姓名：<input type="text" name="userName"> <br>
密码：<input type="password" name="pwd"> <br>
<input type="submit" name="">
</form>
```
```
<form action="1.php" method="post">
<!--
单行文本输入框
name 表单的名字 ，这样后台可以通过这个name属性找到这个表单，页面中的表单很多，name 主要作用就是用于区别不同的表单
value 就是表单内的默认值
maxlength 最长字符数是 6 限制用户输入 固定的就是6
size 可以输入的字符长度
-->
昵称： <input type="text" name="userName" value="默认值" maxlength="6" size="30"> <br>
密码： <input type="password" name="pwd">
</form>
```
## 单选框
<form action="1.php" method="post">
<!-- 性别单选按钮 如果想要实现单选效果，必须把 name 里面的值设置为相同的 -->
<!-- 添加默认选中选项 checked = "checked" -->
男 <input type="radio" name="gender" >
女 <input type="radio" name="gender" checked="checked">
</form>
```
<form action="1.php" method="post">
<!-- 性别单选按钮 如果想要实现单选效果，必须把 name 里面的值设置为相同的 -->
<!-- 添加默认选中选项 checked = "checked" -->
男 <input type="radio" name="gender" >
女 <input type="radio" name="gender" checked="checked">
</form>
```
## 复选框 也叫多选框
<form action="1.php" method="post">
<!-- 多选框 checkbox 也可以添加 默认选中 checked -->
爱好： <input type="checkbox" name=""> 吸烟
<input type="checkbox" name="">喝酒
<input type="checkbox" name="" checked="checked">烫头
</form>
```
<form action="1.php" method="post">
<!-- 多选框 checkbox 也可以添加 默认选中 checked -->
爱好： <input type="checkbox" name=""> 吸烟
<input type="checkbox" name="">喝酒
<input type="checkbox" name="" checked="checked">烫头
</form>
```
## 文本域 多用于评论 textarea 控件可以轻松的创建多行文本输入框
cols 每行中可以输入的字符数
rows 显示的行数
```
<textarea name="" cols="30" rows="10">
</textarea>
```
## select 下拉菜单
出生日期
<select name="" id="">
<option value=""> 1991</option>
<option value=""> 1992</option>
<option value=""> 1993</option>
</select>
```
<!--option是下拉菜单选项 -->
<select name="" id="">
<option value=""> 1991</option>
<option value=""> 1992</option>
<option value=""> 1993</option>
</select>
```
## 文件上传控件
file就是文件的意思
上传信息 ： <input type="file">
```
<input type="file">
```
## label标签提升用户使用
用于绑定一个表单元素，当点击label 标签的时候，被绑定的表单元素就会获得输入焦点
包裹的 input， 在点击 请输入后会在input 里面有提示 是把请输入绑定在了 input 上面
第一种用法
<label>
<!-- 第一种方法 -->
请输入<input type="text" name="" value="这个是label标签">
</label>
```
<label>
<!-- 第一种方法 -->
请输入<input type="text" name="" value="这个是label标签">
</label>
```
第二种方法
通过for把 input 的id 绑定在了一起点击姓名
<label for="user">姓名：</label> <input type="text" id="user" value="这是第二种用法"> 没有生效需要浏览器试验！
```
<label for="user">姓名：</label> <input type="text" id="user">
```
## 按钮系列 重要
<form action="1.php" method="post">
<!-- 提交按钮 -->
<!-- 提交按钮 可以通过value进行更改 -->
<input type="submit" value="立即注册"><br>
<!-- 普通按钮 -->
<!-- 普通按钮 配合js 使用 -->
<button>普通按钮</button> <br>
<input type="button" value="普通按钮"> <br>
<input type="image" src=""> <br>
<input type="reset">
</form>
<form action="1.php" method="post">
<!-- 提交按钮 -->
<!-- 提交按钮 可以通过value进行更改 -->
<input type="submit" value="立即注册">
<!-- 普通按钮 -->
<!-- 普通按钮 配合js 使用 -->
<button>普通按钮</button> <br>
<input type="button" value="普通按钮"> <br>
<!-- 图片按钮 -->
<!-- 图片按钮可以 提交 src 图片来源 -->
<input type="image" src=""> <br>
<!-- 重置按钮 -->
<!-- 重置按钮 可以 恢复到默认状态 -->
<input type="reset">
</form>
当初自学第一天与第二天课程
