前端零基础教学开始第一天 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 + 斜杠 /&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 下拉菜单

出生日期 1991 1992 1993

<!--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">
复制代码

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

转载于:https://juejin.im/post/5c11dc01e51d455fa545189c