引言：我所教授的前端知识适用于纯小白，零基础。以后未来发展方向是前端领域，需要系统学习的人，从零到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 + 斜杠 /
  &nbsp 是空格 符号 因为在html5 里面无论增加多少空格只会显示一个所以需要使用&nbsp   按住 shift + 7 可以打出来
&lt; 小于号 
&gt; 大于号
&yen; 人民币
## 文件夹路径： 上一级 ../   下一级 /  非常重要路径问题 新手容易犯的错很多在路径上
div  span 是没有语义的 我们网页布局主要的2个盒子 想必听过 css + div 
div就是 divsion 的缩写
div 独占一行 
span  跨度范围
标签语义化： 合适的地方给一个最为合理的标签

hr 是水平线标签

P 是段落标签

br 是换行

Strong 与 b 是文字加粗

em 与 i 文字倾斜

Del 与 s 是删除线

Ins 与 u 是下划线

Sup 是上标使用如下 5 ²

sub 是下标使用如下 5 ₂

 图片标签  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的表单提交重要

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">
	<!-- 多选框 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 下拉菜单

出生日期

<!--option是下拉菜单选项 -->
<select name="" id="">
	<option value=""> 1991</option> 
	<option value=""> 1992</option> 
	<option value=""> 1993</option> 
</select>

文件上传控件

file就是文件的意思上传信息：

<input type="file">

label标签提升用户使用

用于绑定一个表单元素，当点击label 标签的时候，被绑定的表单元素就会获得输入焦点包裹的 input，在点击请输入后会在input 里面有提示是把请输入绑定在了 input 上面

第一种用法

请输入

 <label> 
	<!-- 第一种方法 -->
	请输入<input type="text" name="" value="这个是label标签">
</label>

第二种方法

通过for把 input 的id 绑定在了一起点击姓名

姓名：没有生效需要浏览器试验！

<label for="user">姓名：</label> <input type="text" id="user">

按钮系列重要

<!-- 普通按钮 -->
<!-- 普通按钮 配合js 使用  -->
<button>普通按钮</button>	<br>
<input type="button" value="普通按钮"> <br>

<!-- 图片按钮 -->
<!-- 图片按钮可以 提交 src 图片来源 -->
<input type="image"  src=""> <br>

<!-- 重置按钮 -->
<!-- 重置按钮 可以 恢复到默认状态  -->
<input type="reset">

当初自学第一天与第二天课程