2020年12月15日 今天是大风大雪冲刷过后的第一天，经历过前段累计半个月的基础班的时间后，总算是有条不紊的步入了就业班，可以说过了基础班之后的就业班才是前端学习真正的开始，其实大学时因为是软件专业出身，所以对这个行业到底是个什么情况还是有所了解的，来这的契机还要从一个玩的很好的朋友毕业后来这说起，从他跟我说毕业后还是打算来继续学习编程时提到了黑马，当时就对黑马染起了兴趣，但是当时并没有很强烈的来学前端的想法，但是想从事编程的想法还是很明确，真正想来学前端应该还是从我朋友从这分享自己的学习情况，隔段时间都能知道他学了啥，感触最深的一句话就是学校教的部分前端知识在这一个月不到就能学完，当时就心想有这么厉害吗这里，还是说大学真的压根就没教我们什么，抱着这种怀疑的心态大概过了几个月后，我朋友他毕业了，在长沙出来找前端的工作找了个将近八千的，我心想当时学校推荐实习时有的编程岗位还没这么多薪资，一出来在长沙就有着将近八九千这可不是个什么小数字，这要是跑稍大点的城市还不得过一万多，作为刚开始的起点着实不算低了，于是我也重燃起了想继续学前端的心思，结果就是现在跑这来了，可以说编程我不讨厌，大学时也觉得算很有趣的，并不像其他人觉得很枯燥无味，所以我觉得我还是应该做我感兴趣的事，人生身不由己的事已经够多了，那么至少在自己从事的工作上能选择自己爱做感兴趣的又有什么不好呢，可以说这算是我最后的小倔强吧，因为学前端只是我目前阶段要实现的第一件事，后面还有很多要实现的事要去做，如果第一件事都没胆量去尝试着做下，那么接下来那还能有什么期待呢，可以说我大学时期学的软件知识还是有他的作用的，现在学起来感觉理解的还算快，剩下的就是理解后自己多去做案例和课后作业以及举一反三了，所以说大学时期三四年的编程还是发挥了它的微乎其微的作用的嘛，编程最重要的我觉得还是要养成编程的思维，不能从正常思维去看待编程，这是我大学时期觉得收获最大的感触了。
接下来我就来分享一些我自己平时记录的一些笔记吧。
html02锚点链接a标签，href = ‘#id的名字’   
​
任意标签都可以，只需要有一个 id
​
并且 href的值和id的值保持一致，存在联系就可以定位

既跳转又能够定位的方法

<a href="02.锚点.html#zj">跳转到02页面上，看看周骏是哪位同学</a>

表格

缺点：不流行、加载速度和加载顺序都有一些小问题。在实际工作中并不怎么用

优点：能够很整体的显示数据，当你有大量数据的时候，可以使用表格来显示，能够根据数据的长度，自动分配表格的宽度

<!-- 表格的嵌套关系比较复杂 -->
    <!-- table 是表格的主体 -->
    <!-- tr 表格的行 -->
    <!-- td 表格的单元格 -->
    <!-- th 表格的表头 加粗、剧中-->
    <!-- 表格的属性 -->
    <!-- border 表格的边框 -->
    <!-- align 控制整个表格位置，而不是控制表格内部内容的位置  left right center -->
    <!-- 如果你想单独的控制某一个内容的位置，请把align的center属性写到当前想居中的元素身上 -->
    <!-- cellpadding 内容和单元格之间的间距 -->
    <!-- cellspacing 单元格和表格之间的间距 -->
    <!-- 一般cellpadding和cellspacing 都为0，能够让表格的线变成一根 -->
    <!-- 拓展 -->
    <!-- tbody也是一种语义标签  表格的主体 -->
    <!-- thead也是一种语义标签  表格的头部 -->
    <!-- tfoot也是一种语义标签  表格的底部 -->
    <!-- caption 整个表格的一个标题 -->
    <!-- 跨行跨列 难点 -->
    <!-- rowspan = 2，说明 跨行 跨两行 合并行 -->
    <!-- colspan = 2，说明 跨列 跨两列 合并列 -->
    <!-- rowspan="2" colspan="2" 可以组合在一起使用 --><table cellpadding='0' cellspacing='0' border="1" align="center" width='1000'>
        <thead>
            <caption>亡者农药</caption>
        </thead>
        <!-- 表格外面的头部 -->
        <tbody>
            <!-- th 是表格主体 的头部 -->
            <tr>
                <th>人物名称</th>
                <th>攻击力</th>
                <th>防御力</th>
                <th>性别</th>
            </tr>
            <tr>
                <td>鲁班7号之皮肤---------电玩小子</td>
                <td>90</td>
                <td>0</td>
                <td>无</td>
            </tr>
            <tr>
                <td align="center">盖伦</td>
                <td colspan='2'>80</td>
                <!-- <td>70</td> -->
                <td rowspan='2'>男</td>
            </tr>
            <tr>
                <td>赵云</td>
                <td>90</td>
                <td>50</td>
                <!-- <td>男</td> -->
            </tr>
            <tr>
                <td>关羽</td>
                <td rowspan="2" colspan="2">100</td>
                <!-- <td>100</td> -->
                <td>男</td>
            </tr>
            <tr>
                <td>张飞</td>
                <!-- <td>100</td> -->
                <!-- <td>100</td> -->
                <td>男</td>
            </tr>
        </tbody>
        <tfoot></tfoot>
    </table>

列表

当页面出现一些类似的页面结构，我们就可以考虑使用列表（无序列表）

无序列表（重要）ul和li的关系一定是嵌套的，中间不能够穿插其他元素标签
<ul>
        <!-- <ul>错误写法</ul> -->
        <li>
            <ul>
                <li>两层嵌套</li>
            </ul>
        </li>
        <li>
            <!-- <li>这种不允许，必须保证ul里面只有li标签</li> -->
        </li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>有序列表（了解）<ol>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>
自定义列表（了解） dl 大列表  大佬 一个
    dt 表头    带头 很多个
    dd 表格    弟弟 很多个的N倍
​
    <dl>
        <dt>带头大哥</dt>
        <dd>弟弟</dd>
        <dd>弟弟</dd>
        <dd>弟弟</dd>
        <dd>弟弟</dd>
        <dd>弟弟</dd>
        <dd>弟弟</dd>
    </dl>
    <dl>
        <dt>带头大哥</dt>
        <dd>弟弟</dd>
        <dd>弟弟</dd>
        <dd>弟弟</dd>
        <dd>弟弟</dd>
        <dd>弟弟</dd>
        <dd>弟弟</dd>
    </dl>
表单

表单的主要功能和使用场景

收集用户信息和用户操作

表单分成3个大的组成部分

• 表单域----把所有表单控件和提示信息包裹起来的地方
• 表单控件---让用户可以操作的一些元素，点击和输入
• 提示信息----提示用户操作的内容
  
  

表单控件

<!-- form 的双标签就是表单域，里面专门放表单控件和提示信息的 -->

  <!-- action 提交的地址----雷布斯的电脑（服务器） -->

  <!-- method 提交的方式----我用什么方式提交到雷布斯的电脑里 -->

  <!-- name 就是告诉 我本次提交到雷布斯电脑里面的数据是干什么的 -->

  <!-- 比如 我现在想注册 那么我就把name属性里面的值变成register -->

  <!-- 比如 我现在想登录 那么我就把name属性里面的值变成login -->

  <!-- name的作用就是为了区分，到底本次提交最终是需要干什么 -->

  <!-- 比如 -->

  <!-- 雷布斯的电脑 -->

手机号码：1213123123123 name=login

  手机号码：1232342423123 name=buy

  手机号码：1232342423123 name=register

<form action="" method="" name="">
        <!-- input就是就最基本的表单控件，最好是到form表单域中，因为后期input在form中会有其他额外的功能 -->
        <!-- 文本类最主要的两个标签 -->
        <!-- text：普通文本输入框 -->
        <input type="text">
        <!-- password：密码文本输入框 -->
        <input type="password">
        <!-- type不一样  同样的表单，由不一样的type控制能够行程不同的表单控件 -->
    </form>

<!-- input type为 radio的时候，表单控件显示为单选按钮，多选一 -->

  <!-- input type为 checkbox 的时候，表单控件显示为多选，多选 -->

  <!-- 表单的所有value都是最终给后台提交内容的值 -->

  <!-- name 能够让表单元素变成一组 -->

  <!-- 页面中的提示信息都是给用户看的，而表单里面的value值确是给后台程序员看的 -->

  <!-- 5老板 -->

  <!-- 一定要理清楚value 、name 、type -->

表单域---form标签

5楼会员卡申请    <form name="shengqinghuiyuan5">        姓名: <input name="username" type="text" value="请输入您的姓名"> <br>          手机号码： <input name="phone" type="text"  value="请输入您的手机号码"> <br>          qq <input name="qq" type="text"> <br>        会员卡密码： <input name="pw" type="password" value="请输入您的密码"> <br>          性别：<input type="radio" name="sex">男 <input type="radio" name="sex">女 <br>        尺寸：<input type="radio" name="size">117 <input type="radio" name="size">118 <br>        你喜欢的类型： <br>        <input type="checkbox" name="love" value="可爱">可爱的          <input type="checkbox" name="love" value="性感">性感的         <input type="checkbox" name="love" value="御姐">御姐的         <input type="checkbox" name="love" value="空姐">空姐的         <input type="checkbox" name="love" value="老师">老师的        <input type="checkbox" name="love" value="生活老师">生活老师的  <br>        你喜欢的水果： <br>        <input type="checkbox" name="fruit">黄瓜          <input type="checkbox" name="fruit">丝瓜         <input type="checkbox" name="fruit">香蕉          <input type="checkbox" name="fruit">胡萝卜    </form>
表单按钮<input type="text" value="用户姓名" name="username"><input type="text" value="用户手机号码" name="phone"><!-- input type name value  --><!-- submit能够提交表单内的所有带有name属性的值到后台 --><!-- reset 能够把表单内的所有数据重置 --><!-- button 是一个表单的按钮，但是不具备任何技能，通过js --><!-- file 上传文件 --><input type="submit"><input type="reset"><input type="button" value="➕1"><input type="file">
label 标签<form name="shengqinghuiyuan5"><label>姓名: <input name="username" type="text" value="请输入您的姓名"> <br></label>你喜欢的水果： <br><!-- 第一种使用方式 --><input type="checkbox" name="fruit" id="f1"><label for="f1">黄瓜</label><input type="checkbox" name="fruit" id="f2"><label for="f2">丝瓜</label>   <input type="checkbox" name="fruit" id="f3"><label for="f3">香蕉</label><!-- 第二种使用方式 --><label><input type="checkbox" name="fruit">胡萝卜</label></form><!-- label 标签是专门来提升用户体验的 --><!-- label标签类似于锚点,有一个for的属性，对应input的id，让他们存在联系 -->html5。01浏览器如果控制这些特殊浏览器苹果   webkit     -webkit-ie        trident     -ms-火狐   Gecko     -moz-谷歌、欧朋   bink   -o-
我们要学习的这个html是一个标记语言超文本标记语言超文本 图片、视频、音频、链接规范：所有的标签都被一对尖括号包裹

web标准的组成部分结构 html表现 css行为 js  ctrl的坤坤   
骨架结构<html>    <head>        <title>标题--前端33期</title>    </head>    <body>        网页能够让用户看到的一个主体--前端33期    </body></html>备注：html 是包裹整个网页的标签head 是一个 用来解释后面所有代码安装什么方式来执行title 是网页的标题 能在打开网页的时候就看到body  网页能够让用户看到的一个主体
h标题标签h 标题标签会默认加粗，并且一行显示h标签只能是从h1-h6，从大到小权重 h标签具备一定的权重，而且也是h1的权重最高，其他依次递减h1标签权重最高，一般在一个网页中只能存在一个h1，但是其他的无所谓，一般情况都会包裹一个logo
p段落标签独立一排显示，上下有间距
br换行标签强行对文本换行，单标签
语义标签每一个标签都有自己的意思（可能有些标签长的非常像）合理使用语义标签，能够让页面机构更加清晰
文本格式标签strong加粗em倾斜del删除线ins下划线

我们推荐使用前者，因为语义更加强烈

没有语义的标签div 和p 、h标签相似 都是独占一排---------------块级元素span 和 ins strong 类似 ，都是可以一排显示------行内元素、内联元素div和span标签非常的重要，也是我们常用的标签div和span 是一个没有具体语义的标签，当你不知道这个盒子是干什么的时候，可以使用
图片标签<!-- 图片标签 单标签 --><div>这是一个div</div><p>这是一个div</p><img height="300px" src="cxy.jpg" title="这是一张程序员做梦的样子" alt="如果你的图片没有加载出来，那么我来告诉你，这是你以后做梦时候的程序员" /><!-- 因为图片标签是一个单标签，所以我们要给图片设置方式，那么就直接写在图片标签身上 --><!-- src 图片地址（必填项） --><!-- alt 图片没有加载的时候的说明文字 --><!-- title 描述图片的文字--><!-- 注意事项： --><!-- 引号的使用，单双都可以，必须成双成对 --><!-- 图片标签身上的属性顺序是无所谓，没有先后之分 --><!-- 图片可以设置宽高，但是如果你同时设置了宽和高，可能会造成图片拉伸 -->
根目录每一个最外层项目的文件夹叫做根目录同级目录 （文件和被使用的图片在同一个同一层）直接使用图片名字即可

相对路径同级 直接在 src      里面写图片名字找到里层图片  在src  文件夹/图片名字找到外层图片  在src    ../图片名字在获取图片的时候，跟当前是有关系的

绝对路径本地绝对路径网络上的绝对路径在获取图片的时候，跟当前文件在哪里没有关系这是我自己提前学习记录的一些javascript的笔记 [size=1em]输入输出语句alert(msg) 浏览器弹出警示框 输出展示给用户
consloe.log(msg) 浏览器控制台输出信息
prompt(info)浏览器弹出输入框，用户可以输入变量赋值var temp;
var a = 3;
var b = 1;
temp=a;
a=b;
b=temp;
需要赋值的变量在前，值在后
把右给左数据类型Number数字型包括整型和浮点型值，如21和0.21  
Boolean布尔值如ture,flase等于1和0
string字符串类型如带引号的
Undefined 声明了变量但没给值
Null 声明了变量但为空值数字进制八进制在js中前面加0
十六进制前面加0xISNAN()ISNAN用来判断是不是数字，并且返回一个值，数字返回值为false ，不是数字则返回truetypeof

判断变量的数据类型  typeof()

转换字符串的方法1、变量.tostring()
2、string(变量)
3、变量+字符串转换成数字型和浮点型parseInt(字符串)
parseFloat(字符串)前置自增减和后置自增减++num 前置自增 先自增再返回值
num++ 后置自增 先返回值再自增
单独使用时效果一样比较运算符返回值都为boolean类型 为true或false>大于号 用来判断>= 大于等于< 小于<= 小于等于== 判断(会转换值的类型) 值等于就行!= 不等于=== 全等于 判断值和数值类型是否完全一样逻辑运算符&&与 a>b&&a>c 有一方为flase则为false||或 有一方为true则为true!非 取反值逻辑中断与值1&&值2 如果值1为真则返回值2 输出值2如果值1为false则返回值1如果有空值或者否定的为假 其余是真的 0 '' null undefined NaN逻辑中断或值1&&值2 如果值1为真则返回值1如果值1为false则返回值2赋值运算符= 右值赋左a += b 等于a=a+b-=减等于 *=乘等于 /=除等于 %=余等于运算符优先级小括号>一元运算符>算数运算符>关系运算符>相等运算符>逻辑运算符>赋值运算符>逗号运算符顺序：小括号（ ）         一元运算符++ -- ！         算数运算符 先*/%后+ -         关系运算符 > >= < <=         相等运算符 == != === !==         逻辑运算符 先&&后||         赋值运算符 =         逗号运算符 ，         一元里面逻辑非优先级很高if语句if语法结构if(条件表达式)｛        //执行语句｝如果if里面的条件表达式结果为真则执行大括号里的语句如果为否则则跳过大括号里的语句，执行if后面的代码if else语句if(条件表达式)｛        执行语句1｝ else{        语句2}如果表达式结果为真则执行语句1，如果为否则执行语句2if else if语句if(条件表达式1)｛        语句1｝else if(条件表达式2)｛        语句2｝ else{        最后的语句}如果满足条件表达式1 则执行语句1 执行完毕后退出整个if分支语句如果不满足条件表达式1则执行表达式2 执行完毕后退出整个if分支语句，然后以此类推如果所有表达式都不成立则执行else三元表达式条件表达式？ 表达式1 ： 表达式2var num =10num>5? '是的' ：'不是的';switch分支语句switch(表达式){        case  value1:                  执行语句1;                  break;    case  value2:                  执行语句2;                  break;     ....     default:         执行最后的语句}利用表达式的值和case后面的选项值相匹配，如果匹配上，就执行该case里面的语句 如果都没有匹配上，那么执行default里面的语句for循环for(初始化变量; 条件表达式; 操作表达式){                   循环体}初始化变量是用var声明一个普通变量,通常用于作为计数器使用条件表达式 就是用来决定每一次循环是否继续执行 就是终止的条件操作表达式 是每次循环最后执行的代码 经常用于我们计数器变量进行更新（递增或递减）fo(var a=1; a<100; a++){                console.log('你好')}执行顺序 第一轮 var a=1-->a<100-->你好-->a++      从第二轮往后开始直到结束 a++-->a<100-->你好-->a++-->a<100-->你好  循环直至a>=100时结束双重for循环for(外层的初始化变量; 外层的条件表达式; 外层的操作表达式;){   for(里层的初始化变量; 里层的条件表达式; 里层的操作表达式;)                执行语句;}里面的循环可以看成是外层循环的语句外层循环一次，里面的循环执行全部while循环先初始化变量while(条件表达式//num<100)｛         执行语句//console.log()         操作表达式//num++｝do while循环do{        循环体} while(条件表达式)do while 先执行一次循环体 后判断条件 条件如果不满足则结束循环 满足则继续循环现在才是真正的开始，从进入就业班到毕业也就短短六个月时间，时光如梭说不定一眨眼就到明年出去找工作的时间了，学习的时候就得好好学习，现在每天多付出的一些时间到了毕业找工作后和进入公司工作后都不会辜负你，十年磨一剑，台上一分钟台下十年功，水滴石穿，铁杵成针无不是都在诉说的坚持终会有收获，所以奋斗吧，少年！从现在开始为自己未来的蓝图划出这第一步，既然来到了黑马那就好好学习，望未来我们都能收获最美好的彼此。

2020年12月15日 今天是大风大雪冲刷过后的第一天，经历过前段累计半个月的基础班的时间后，总算是有条不紊的步入了就业班，可以说过了基础班之后的就业班才是前端学习真正的开始，其实大学时因为是软件专业出身，所以对这个行业到底是个什么情况还是有所了解的，来这的契机还要从一个玩的很好的朋友毕业后来这说起，从他跟我说毕业后还是打算来继续学习编程时提到了黑马，当时就对黑马染起了兴趣，但是当时并没有很强烈的来学前端的想法，但是想从事编程的想法还是很明确，真正想来学前端应该还是从我朋友从这分享自己的学习情况，隔段时间都能知道他学了啥，感触最深的一句话就是学校教的部分前端知识在这一个月不到就能学完，当时就心想有这么厉害吗这里，还是说大学真的压根就没教我们什么，抱着这种怀疑的心态大概过了几个月后，我朋友他毕业了，在长沙出来找前端的工作找了个将近八千的，我心想当时学校推荐实习时有的编程岗位还没这么多薪资，一出来在长沙就有着将近八九千这可不是个什么小数字，这要是跑稍大点的城市还不得过一万多，作为刚开始的起点着实不算低了，于是我也重燃起了想继续学前端的心思，结果就是现在跑这来了，可以说编程我不讨厌，大学时也觉得算很有趣的，并不像其他人觉得很枯燥无味，所以我觉得我还是应该做我感兴趣的事，人生身不由己的事已经够多了，那么至少在自己从事的工作上能选择自己爱做感兴趣的又有什么不好呢，可以说这算是我最后的小倔强吧，因为学前端只是我目前阶段要实现的第一件事，后面还有很多要实现的事要去做，如果第一件事都没胆量去尝试着做下，那么接下来那还能有什么期待呢，可以说我大学时期学的软件知识还是有他的作用的，现在学起来感觉理解的还算快，剩下的就是理解后自己多去做案例和课后作业以及举一反三了，所以说大学时期三四年的编程还是发挥了它的微乎其微的作用的嘛，编程最重要的我觉得还是要养成编程的思维，不能从正常思维去看待编程，这是我大学时期觉得收获最大的感触了。
接下来我就来分享一些我自己平时记录的一些笔记吧。
html02锚点链接a标签，href = ‘#id的名字’   
​
任意标签都可以，只需要有一个 id
​
并且 href的值和id的值保持一致，存在联系就可以定位

既跳转又能够定位的方法

<a href="02.锚点.html#zj">跳转到02页面上，看看周骏是哪位同学</a>

表格

缺点：不流行、加载速度和加载顺序都有一些小问题。在实际工作中并不怎么用

优点：能够很整体的显示数据，当你有大量数据的时候，可以使用表格来显示，能够根据数据的长度，自动分配表格的宽度

<!-- 表格的嵌套关系比较复杂 -->
    <!-- table 是表格的主体 -->
    <!-- tr 表格的行 -->
    <!-- td 表格的单元格 -->
    <!-- th 表格的表头 加粗、剧中-->
    <!-- 表格的属性 -->
    <!-- border 表格的边框 -->
    <!-- align 控制整个表格位置，而不是控制表格内部内容的位置  left right center -->
    <!-- 如果你想单独的控制某一个内容的位置，请把align的center属性写到当前想居中的元素身上 -->
    <!-- cellpadding 内容和单元格之间的间距 -->
    <!-- cellspacing 单元格和表格之间的间距 -->
    <!-- 一般cellpadding和cellspacing 都为0，能够让表格的线变成一根 -->
    <!-- 拓展 -->
    <!-- tbody也是一种语义标签  表格的主体 -->
    <!-- thead也是一种语义标签  表格的头部 -->
    <!-- tfoot也是一种语义标签  表格的底部 -->
    <!-- caption 整个表格的一个标题 -->
    <!-- 跨行跨列 难点 -->
    <!-- rowspan = 2，说明 跨行 跨两行 合并行 -->
    <!-- colspan = 2，说明 跨列 跨两列 合并列 -->
    <!-- rowspan="2" colspan="2" 可以组合在一起使用 --><table cellpadding='0' cellspacing='0' border="1" align="center" width='1000'>
        <thead>
            <caption>亡者农药</caption>
        </thead>
        <!-- 表格外面的头部 -->
        <tbody>
            <!-- th 是表格主体 的头部 -->
            <tr>
                <th>人物名称</th>
                <th>攻击力</th>
                <th>防御力</th>
                <th>性别</th>
            </tr>
            <tr>
                <td>鲁班7号之皮肤---------电玩小子</td>
                <td>90</td>
                <td>0</td>
                <td>无</td>
            </tr>
            <tr>
                <td align="center">盖伦</td>
                <td colspan='2'>80</td>
                <!-- <td>70</td> -->
                <td rowspan='2'>男</td>
            </tr>
            <tr>
                <td>赵云</td>
                <td>90</td>
                <td>50</td>
                <!-- <td>男</td> -->
            </tr>
            <tr>
                <td>关羽</td>
                <td rowspan="2" colspan="2">100</td>
                <!-- <td>100</td> -->
                <td>男</td>
            </tr>
            <tr>
                <td>张飞</td>
                <!-- <td>100</td> -->
                <!-- <td>100</td> -->
                <td>男</td>
            </tr>
        </tbody>
        <tfoot></tfoot>
    </table>

列表

当页面出现一些类似的页面结构，我们就可以考虑使用列表（无序列表）

无序列表（重要）ul和li的关系一定是嵌套的，中间不能够穿插其他元素标签
<ul>
        <!-- <ul>错误写法</ul> -->
        <li>
            <ul>
                <li>两层嵌套</li>
            </ul>
        </li>
        <li>
            <!-- <li>这种不允许，必须保证ul里面只有li标签</li> -->
        </li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>有序列表（了解）<ol>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>
自定义列表（了解） dl 大列表  大佬 一个
    dt 表头    带头 很多个
    dd 表格    弟弟 很多个的N倍
​
    <dl>
        <dt>带头大哥</dt>
        <dd>弟弟</dd>
        <dd>弟弟</dd>
        <dd>弟弟</dd>
        <dd>弟弟</dd>
        <dd>弟弟</dd>
        <dd>弟弟</dd>
    </dl>
    <dl>
        <dt>带头大哥</dt>
        <dd>弟弟</dd>
        <dd>弟弟</dd>
        <dd>弟弟</dd>
        <dd>弟弟</dd>
        <dd>弟弟</dd>
        <dd>弟弟</dd>
    </dl>
表单

表单的主要功能和使用场景

收集用户信息和用户操作

表单分成3个大的组成部分

• 表单域----把所有表单控件和提示信息包裹起来的地方
• 表单控件---让用户可以操作的一些元素，点击和输入
• 提示信息----提示用户操作的内容
  
  

表单控件

<!-- form 的双标签就是表单域，里面专门放表单控件和提示信息的 -->

  <!-- action 提交的地址----雷布斯的电脑（服务器） -->

  <!-- method 提交的方式----我用什么方式提交到雷布斯的电脑里 -->

  <!-- name 就是告诉 我本次提交到雷布斯电脑里面的数据是干什么的 -->

  <!-- 比如 我现在想注册 那么我就把name属性里面的值变成register -->

  <!-- 比如 我现在想登录 那么我就把name属性里面的值变成login -->

  <!-- name的作用就是为了区分，到底本次提交最终是需要干什么 -->

  <!-- 比如 -->

  <!-- 雷布斯的电脑 -->

手机号码：1213123123123 name=login

  手机号码：1232342423123 name=buy

  手机号码：1232342423123 name=register

<form action="" method="" name="">
        <!-- input就是就最基本的表单控件，最好是到form表单域中，因为后期input在form中会有其他额外的功能 -->
        <!-- 文本类最主要的两个标签 -->
        <!-- text：普通文本输入框 -->
        <input type="text">
        <!-- password：密码文本输入框 -->
        <input type="password">
        <!-- type不一样  同样的表单，由不一样的type控制能够行程不同的表单控件 -->
    </form>

<!-- input type为 radio的时候，表单控件显示为单选按钮，多选一 -->

  <!-- input type为 checkbox 的时候，表单控件显示为多选，多选 -->

  <!-- 表单的所有value都是最终给后台提交内容的值 -->

  <!-- name 能够让表单元素变成一组 -->

  <!-- 页面中的提示信息都是给用户看的，而表单里面的value值确是给后台程序员看的 -->

  <!-- 5老板 -->

  <!-- 一定要理清楚value 、name 、type -->

表单域---form标签

5楼会员卡申请    <form name="shengqinghuiyuan5">        姓名: <input name="username" type="text" value="请输入您的姓名"> <br>          手机号码： <input name="phone" type="text"  value="请输入您的手机号码"> <br>          qq <input name="qq" type="text"> <br>        会员卡密码： <input name="pw" type="password" value="请输入您的密码"> <br>          性别：<input type="radio" name="sex">男 <input type="radio" name="sex">女 <br>        尺寸：<input type="radio" name="size">117 <input type="radio" name="size">118 <br>        你喜欢的类型： <br>        <input type="checkbox" name="love" value="可爱">可爱的          <input type="checkbox" name="love" value="性感">性感的         <input type="checkbox" name="love" value="御姐">御姐的         <input type="checkbox" name="love" value="空姐">空姐的         <input type="checkbox" name="love" value="老师">老师的        <input type="checkbox" name="love" value="生活老师">生活老师的  <br>        你喜欢的水果： <br>        <input type="checkbox" name="fruit">黄瓜          <input type="checkbox" name="fruit">丝瓜         <input type="checkbox" name="fruit">香蕉          <input type="checkbox" name="fruit">胡萝卜    </form>
表单按钮<input type="text" value="用户姓名" name="username"><input type="text" value="用户手机号码" name="phone"><!-- input type name value  --><!-- submit能够提交表单内的所有带有name属性的值到后台 --><!-- reset 能够把表单内的所有数据重置 --><!-- button 是一个表单的按钮，但是不具备任何技能，通过js --><!-- file 上传文件 --><input type="submit"><input type="reset"><input type="button" value="➕1"><input type="file">
label 标签<form name="shengqinghuiyuan5"><label>姓名: <input name="username" type="text" value="请输入您的姓名"> <br></label>你喜欢的水果： <br><!-- 第一种使用方式 --><input type="checkbox" name="fruit" id="f1"><label for="f1">黄瓜</label><input type="checkbox" name="fruit" id="f2"><label for="f2">丝瓜</label>   <input type="checkbox" name="fruit" id="f3"><label for="f3">香蕉</label><!-- 第二种使用方式 --><label><input type="checkbox" name="fruit">胡萝卜</label></form><!-- label 标签是专门来提升用户体验的 --><!-- label标签类似于锚点,有一个for的属性，对应input的id，让他们存在联系 -->html5。01浏览器如果控制这些特殊浏览器苹果   webkit     -webkit-ie        trident     -ms-火狐   Gecko     -moz-谷歌、欧朋   bink   -o-
我们要学习的这个html是一个标记语言超文本标记语言超文本 图片、视频、音频、链接规范：所有的标签都被一对尖括号包裹

web标准的组成部分结构 html表现 css行为 js  ctrl的坤坤   
骨架结构<html>    <head>        <title>标题--前端33期</title>    </head>    <body>        网页能够让用户看到的一个主体--前端33期    </body></html>备注：html 是包裹整个网页的标签head 是一个 用来解释后面所有代码安装什么方式来执行title 是网页的标题 能在打开网页的时候就看到body  网页能够让用户看到的一个主体
h标题标签h 标题标签会默认加粗，并且一行显示h标签只能是从h1-h6，从大到小权重 h标签具备一定的权重，而且也是h1的权重最高，其他依次递减h1标签权重最高，一般在一个网页中只能存在一个h1，但是其他的无所谓，一般情况都会包裹一个logo
p段落标签独立一排显示，上下有间距
br换行标签强行对文本换行，单标签
语义标签每一个标签都有自己的意思（可能有些标签长的非常像）合理使用语义标签，能够让页面机构更加清晰
文本格式标签strong加粗em倾斜del删除线ins下划线

我们推荐使用前者，因为语义更加强烈

没有语义的标签div 和p 、h标签相似 都是独占一排---------------块级元素span 和 ins strong 类似 ，都是可以一排显示------行内元素、内联元素div和span标签非常的重要，也是我们常用的标签div和span 是一个没有具体语义的标签，当你不知道这个盒子是干什么的时候，可以使用
图片标签<!-- 图片标签 单标签 --><div>这是一个div</div><p>这是一个div</p><img height="300px" src="cxy.jpg" title="这是一张程序员做梦的样子" alt="如果你的图片没有加载出来，那么我来告诉你，这是你以后做梦时候的程序员" /><!-- 因为图片标签是一个单标签，所以我们要给图片设置方式，那么就直接写在图片标签身上 --><!-- src 图片地址（必填项） --><!-- alt 图片没有加载的时候的说明文字 --><!-- title 描述图片的文字--><!-- 注意事项： --><!-- 引号的使用，单双都可以，必须成双成对 --><!-- 图片标签身上的属性顺序是无所谓，没有先后之分 --><!-- 图片可以设置宽高，但是如果你同时设置了宽和高，可能会造成图片拉伸 -->
根目录每一个最外层项目的文件夹叫做根目录同级目录 （文件和被使用的图片在同一个同一层）直接使用图片名字即可

相对路径同级 直接在 src      里面写图片名字找到里层图片  在src  文件夹/图片名字找到外层图片  在src    ../图片名字在获取图片的时候，跟当前是有关系的

绝对路径本地绝对路径网络上的绝对路径在获取图片的时候，跟当前文件在哪里没有关系这是我自己提前学习记录的一些javascript的笔记 [size=1em]输入输出语句alert(msg) 浏览器弹出警示框 输出展示给用户
consloe.log(msg) 浏览器控制台输出信息
prompt(info)浏览器弹出输入框，用户可以输入变量赋值var temp;
var a = 3;
var b = 1;
temp=a;
a=b;
b=temp;
需要赋值的变量在前，值在后
把右给左数据类型Number数字型包括整型和浮点型值，如21和0.21  
Boolean布尔值如ture,flase等于1和0
string字符串类型如带引号的
Undefined 声明了变量但没给值
Null 声明了变量但为空值数字进制八进制在js中前面加0
十六进制前面加0xISNAN()ISNAN用来判断是不是数字，并且返回一个值，数字返回值为false ，不是数字则返回truetypeof

判断变量的数据类型  typeof()

转换字符串的方法1、变量.tostring()
2、string(变量)
3、变量+字符串转换成数字型和浮点型parseInt(字符串)
parseFloat(字符串)前置自增减和后置自增减++num 前置自增 先自增再返回值
num++ 后置自增 先返回值再自增
单独使用时效果一样比较运算符返回值都为boolean类型 为true或false>大于号 用来判断>= 大于等于< 小于<= 小于等于== 判断(会转换值的类型) 值等于就行!= 不等于=== 全等于 判断值和数值类型是否完全一样逻辑运算符&&与 a>b&&a>c 有一方为flase则为false||或 有一方为true则为true!非 取反值逻辑中断与值1&&值2 如果值1为真则返回值2 输出值2如果值1为false则返回值1如果有空值或者否定的为假 其余是真的 0 '' null undefined NaN逻辑中断或值1&&值2 如果值1为真则返回值1如果值1为false则返回值2赋值运算符= 右值赋左a += b 等于a=a+b-=减等于 *=乘等于 /=除等于 %=余等于运算符优先级小括号>一元运算符>算数运算符>关系运算符>相等运算符>逻辑运算符>赋值运算符>逗号运算符顺序：小括号（ ）         一元运算符++ -- ！         算数运算符 先*/%后+ -         关系运算符 > >= < <=         相等运算符 == != === !==         逻辑运算符 先&&后||         赋值运算符 =         逗号运算符 ，         一元里面逻辑非优先级很高if语句if语法结构if(条件表达式)｛        //执行语句｝如果if里面的条件表达式结果为真则执行大括号里的语句如果为否则则跳过大括号里的语句，执行if后面的代码if else语句if(条件表达式)｛        执行语句1｝ else{        语句2}如果表达式结果为真则执行语句1，如果为否则执行语句2if else if语句if(条件表达式1)｛        语句1｝else if(条件表达式2)｛        语句2｝ else{        最后的语句}如果满足条件表达式1 则执行语句1 执行完毕后退出整个if分支语句如果不满足条件表达式1则执行表达式2 执行完毕后退出整个if分支语句，然后以此类推如果所有表达式都不成立则执行else三元表达式条件表达式？ 表达式1 ： 表达式2var num =10num>5? '是的' ：'不是的';switch分支语句switch(表达式){        case  value1:                  执行语句1;                  break;    case  value2:                  执行语句2;                  break;     ....     default:         执行最后的语句}利用表达式的值和case后面的选项值相匹配，如果匹配上，就执行该case里面的语句 如果都没有匹配上，那么执行default里面的语句for循环for(初始化变量; 条件表达式; 操作表达式){                   循环体}初始化变量是用var声明一个普通变量,通常用于作为计数器使用条件表达式 就是用来决定每一次循环是否继续执行 就是终止的条件操作表达式 是每次循环最后执行的代码 经常用于我们计数器变量进行更新（递增或递减）fo(var a=1; a<100; a++){                console.log('你好')}执行顺序 第一轮 var a=1-->a<100-->你好-->a++      从第二轮往后开始直到结束 a++-->a<100-->你好-->a++-->a<100-->你好  循环直至a>=100时结束双重for循环for(外层的初始化变量; 外层的条件表达式; 外层的操作表达式;){   for(里层的初始化变量; 里层的条件表达式; 里层的操作表达式;)                执行语句;}里面的循环可以看成是外层循环的语句外层循环一次，里面的循环执行全部while循环先初始化变量while(条件表达式//num<100)｛         执行语句//console.log()         操作表达式//num++｝do while循环do{        循环体} while(条件表达式)do while 先执行一次循环体 后判断条件 条件如果不满足则结束循环 满足则继续循环现在才是真正的开始，从进入就业班到毕业也就短短六个月时间，时光如梭说不定一眨眼就到明年出去找工作的时间了，学习的时候就得好好学习，现在每天多付出的一些时间到了毕业找工作后和进入公司工作后都不会辜负你，十年磨一剑，台上一分钟台下十年功，水滴石穿，铁杵成针无不是都在诉说的坚持终会有收获，所以奋斗吧，少年！从现在开始为自己未来的蓝图划出这第一步，既然来到了黑马那就好好学习，望未来我们都能收获最美好的彼此。