HTML

• 行级元素

  标签分为行级元素与块级元素

  行级元素占据区域由其显示内容决定，如span，img(图片)，

  （链接标签）

  基本格式:

  用于跳转到其他网站，target="_blank"使其跳转时会打开新窗口 值是下划线blank，否则会在原窗口打开链接），strong（加粗文字），em（斜体文字）等

• 块级元素

  块级元素会换行显示，并占据整行区域，如div（布局标签），h，p，form（表单标签）等

• 属性

          属性写在开始标签中，格式是键值对的形式，属性名：键；引号里的：值

  表格标签

  基本格式:  ​//表头​ // tr行 ​ // th列​ ……​​​ // 表体 ​​ // td列​ ……​​​ ……​​ ……​

   //表头
  ​        //tr行
  ​       	 //th列
  ​          	    ……
  ​       
  ​     
  ​      //表体
  ​        
  ​             //td列
  ​         ……
  ​        
  ​        
  ​          ……
  ​        
  ​          ……
  ​      
  
       
  ……
  ……
  
    

  thead为表头，tbody为表体，tr为行，th为列名，td为列表中的数据

  表格样式:表头1 表头2 ……

  数据1 数据2 ……

   //带有选项的控件
  	男
      女
      其他
   

  布局标签

  	头部信息
  	导航栏
  	侧边栏
  	内容区域
  	底部信息
  	文章详情
  	页面分区

  br/：换行符

  hr/：水平分割线

  textarea：更大区域的输入控件

  scope 是 HTML 元素的一个属性，表示表头单元格的作用范围。该属性可以设置为以下值之

  • col：表示该表头单元格适用于一整列。

  • row：表示该表头单元格适用于一整行。

  • colgroup：表示该表头单元格适用于一个列组。

  • rowgroup：表示该表头单元格适用于一个行组。

    锚链接

    • 首先定义一个锚点：在标签中添加一个id属性；

    • 超链接到锚点:

      跳转

      span标签

      标签被用来组合文档中的（块）行内元素，标签不会自动换行，span没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

    • link标签

    • 链接外部样式表文件;

    • 设置网站icon：

      音乐标签

      • hidden设置为true时，隐藏音乐播放器，

        比audio标签多一块黑色的背景。

        跑马灯：页面自动滚动效果

        • ...

        • 中间的内容可以是文字、图片，也可以是由程序生成的文字或图片；

        • behavior设置滚动的方式
        • alternate表示在两端之间来回滚动
        • scroll表示一端滚动到另一端（会重复）
        • slide表示由一端滚动到另一端（不会重复）
        • direction设置滚动方向: down表示向下滚动，left向左，right向右，up向上
        • loop表示滚动的次数，-1时无限滚动
        • scrollamount设置滚动速度，值越大滚动速度越快

          高级标签

          meta标签

          • 编码格式，在meta标签里面设置charset，英语用ascll、ansi；日文、韩文用Unicode；中文的用gbk、gbk2312；台湾big5（繁体字符）；utf-8支持180到200个国家语言，所以用utf-8基本能解析所有国家语言；

          • 关键字：给搜索引擎看，主要用于SEO，(逗号使用英语格式的)；

          • 网页描述：在搜索的时候会出现的描述：

          • 网页重定向：

          • 过5秒之后跳转到设定的页面;

          • 告诉搜索引擎站点的作者：（不常用）；

          • （不常用，了解）：

          • all：文件将被检索，且页面上的链接可以被查询；

          • none：文件将不被检索，且页面上的链接不可以被查询；

          • index：文件将被检索；

          • noindex：文件将不被检索，但页面上的链接可以被查询；

          • follow：页面上的链接可以被查询；

          • nofollow：文件将不被检索，页面上的链接可以被查询。

            文本输入框

            • maxlength：设置输入的最大字符长度；

            • readonly：设置输入框为只读状态；

            • value：设置默认值；

            • placeholder：提示用户进行操作

            • disable：输入框没有激活；

            • name：给输入框设置名字，以便进行区分；

            • 密码输入框：输入的信息会变成暗文，文本输入框的所有属性对密码输入框都有效；

              单选框

              • 男 女

              • 一组单选按钮必须要设置同样的name，否则单选无效；

              • 通过checked来设置默认选中项；

                多选框

                喝酒
                抽烟
                烫头发

                多行文本框 

                • cols：控制输入字符的长度；

                • rows：控制输入的行数；

                  文件上传控件

                  按钮

                  • 提交按钮：可以实现信息提交;

                  • 普通按钮：不能提交，通常配合js使用；

                  • 图片按钮：可实现信息提交功能;

                  • 重置按钮：将信息重置到默认状态

                  • 将表单信息分组

                  • 将表单内一组的内容放到中，表单名称放到

                    中

                    
                    
                        
                    个人信息提交
                        用户名：
                        密码：
                        
                    
                    

                    表单的其它控件

                    1. 网址输入框：

                    会要求输入正确的网址格式，但是空也可以提交，以后会用js进行判断；

                    1. 日期控件：

                    2. 时间控件：

                    3. 邮件控件：

                    要求输入正确的邮件格式，但是空也可以提交；

                    1. 数字控件：

                    有一个上下的小三角，可以步进，每次调整的值的大小为2；

                    1. 滑块控件：

                    下拉列表

                    1. 普通下拉列表

                    
                      下拉列表选项1
                      下拉列表选项2
                      下拉列表选项2
                    

                    2. 分组下拉列表：

                    
                      
                          苏州
                          无锡
                          常州
                      
                      
                          杭州
                          温州
                          绍兴
                      
                    

                    概述详细信息标签

                    ​

                    简介

                    ​

                    • action:处理信息；

                    • method：有两个值可取，get和post。

                    • get：通过地址栏提供（传输）信息，安全性差；

                    • post：通过xxx来处理信息，安全性相对较高。

                    • multiple:设置多选；

                    • selected:设置默认选中项，如果不设置，默认选择第一个选项；

                      CSS语法结构

                      内联样式：只对当前的html元素有效

                      直接写到html上面的，没有选择器只是声明

                      内部样式：写在head标签里

                      使用style标签，里面有一个或多个CSS规则，内部样式仅对当前的页面有效

                      外联样式（常用）：把link标签放在head标签内

                      然后指定link标签的href属性来指定外部css文件路径 来引入外部样式表，引入的样式也仅对当前的html页面有效

                      JS

                      常量与变量

                      let : 变量，可多次赋值

                      const : 常量,只能赋一次值，但const声明的是数组或对象时 其内部元素可以被改变 不过不能完全更改

                      字符串与常量拼接的写法：

                      或者

                      结果

                      模板字符串

                      "my name is" + name

                      'my name is ${name}'

                      分割字符串

                      最小的分割的形式

                      大一点的分割形式

                      数组

                      const numbers = new Array(1,2,3,4,5);

                      const fruits = ["apple",10,true];

                      从0开始排序

                      在末尾添加新元素fruits.push("name");

                      在头部添加fruits.unshift("");

                      删除末尾元素fruits.pop();

                      // 数组的简单定义

                      const number = ["asd0",'dwad','dwadasufg',true,null,10];

                      console.log(number);

                      console.log(number[0]);

                      // 在末尾加上

                      number.push("NewAdd");

                      // 在头部加上

                      number.unshift("Fornt");

                      // 删除末尾的

                      number.pop();

                      // 判断数据是否为数组

                      console.log(Array.isArray('hello'));

                      console.log(Array.isArray(number));

                      // 得到索引

                      console.log(number.indexOf("asd0"));

                      对象