HTML页面制作基础知识总结

1. 超链接要点：
   a标签的target属性
   _blank 在新打开、未命名的窗口打开链接，
   _parent 在父窗口打开链接
   _self 当前窗口打开
   _top 目标将会清除所有被包含的frame框架

2. 锚点
   href="#duanluo" //锚点配合超链接的使用
   < a name=“duanluo”> //锚点的定义
   < a href=“01.html#duanluo”> //其他文本的锚点
   锚点必须先定义在使用

3. 列表细节：
   table 的行和列的合并，
   行：rowspan
   列：colspan
   具体语法，在当前 < td> 中 < td coslpan = “2”>合并2列
   < td rowspan= “2”>合并2行

4. CSS中背景图片设置：
   background-attachment:(scroll：背景随滚动条滚动/fixed:背景不随滚动条滚动)。

5. 伪类：
   伪类的分类
   伪类包含两种：
   状态伪类（状态发生改变）和结构性伪类（选择子元素）
   （结构性）伪类选择器
   ：first-child：选择元素的第一个子元素
   ：last-child：选择某个元素的最后一个子元素
   ：nth-child()：选择某个元素的一个或多个特定的子元素
   ：nth-last-child：选择某个元素的一个或多个特定的子元素，从这个子元素的最后一个子元素开始算
   ：first-of-type：选择一个上级元素下的第一个同类子元素

6. 选择器
   1、空格选择器也称作子孙（后代）选择器
   举例：div标签下的所有p标签被选中。注意，不论p标签位于那一层。
   div p{
   color:blue;
   }
   2、>选择器就是子选择器（不是子孙后代）
   举例：div标签下一层的p标签被选中
   div>p{
   color:red;
   }
   3、+选择器就是相邻兄弟选择器
   举例：div标签同一个层级的p标签被选中
   div+p{
   color:red;
   }
   4、[]属性选择器
   举例：p标签的属性class是p1的元素选中
   p[class=“p1”]{
   }

7. div设置

   1. overflow用于超出div部分处理。visible默认，不做裁剪，呈现在div外；hidden超出部分被隐藏；scoll无论是否超出范围都显示滚动条；auto按需显示滚动条。
   2. 使用top/left进行位置设置时必须加入position定位设置，否则坐标无效；
   3. css轮廓
      outline:dashed;虚线轮廓
      none不显示
      dotted点状轮廓
      solid实线
      double双线
      css边框
      boder-bottom：soild;下边框实线
      boder-left
      boder-right
      boder-top
      boder-bottom.

8. 盒子模型
   网页中的每个元素都可以看作一个盒子，盒子有外边距（margin）、边框（border）、内边距（padding）、内容（content）这4个属性。
   外边距（margin）：是元素与元素之间的距离，或者是元素外面留出的一段空白；
   内边距（padding）：元素里的内容与元素边框之间的距离；
   边框（border）：元素本身；
   内容（content）：元素中放置的东西，元素的宽和高指的是元素中内容的宽和高，并不是元素本身的宽和高

   padding内边距的距离产生自哪里呢？
   可以分别设置两个属性值来改变：
   box-sizing: content-box ; // 第一种方式是系统默认的方式，将不改变原来内容的高度和宽度的属性值，扩充边框来达到目的
   box-sizing: border-box : // 设置之后，边框的大小再在改变，压缩内容以保证内边距的大小。

9. 定位机制
   （标准）文档流、脱标流（float position:absolute）(脱离标准文档流)
   文档流特点：
   1 空白折叠现象（编辑区换行回车显示空格）
   2 高矮不齐，底边对齐
   3 自动换行，一行写满，换行写。
   4 将子元素设置为浮动之后，父元素在没有指定高度的情况下父元素的高度将不存在。

10.css定位
position： relative absolute static fixed分别对应相对，绝对，无定位，固定，默认是无定位。
相对定位 相对定位的偏移参考元素是元素本身。不会使元素脱离文档流。元素的初始位置占据的空间会被保留。
主要代码 position:relative;
相对位置的偏移 是相对于自己以前的位置进行的偏移
相对定位一般不作为元素单独显示 而是作为容器进行包含 配合其他子元素将相对定位做成父元素来使用
绝对定位 相对于已定位的最近的祖先元素，如果没有已定位的最近的祖先元素，那么他的位置就相对于最初的包含块（如 body）
主要代码 position：absolute；
绝对定位会产生浮动效果
绝对定位，会产生浮动的效果，破坏原有的文档流，不同区域之间可以实现重合，叠加。
固定定位 相对于浏览器窗口进行定位
主要代码 position：fixed
示例：演示div相对浏览器位置不改变的效果 移动滚动条位置不发生改变
相对定位与绝对定位
参照物：自己 最近的父级元素
不破坏文档流 破坏文档流
通常情况下 相对定位作为父一级单位 绝对定位作为子一级单位
相对定位可以不设置 top left 依然保留在原位置 供绝对定位有参照物
浮动与定位
浮动与绝对定位的组合 都会破坏文档流 破坏之后 绝对定位会忽略绝对定位所占用的位置 而浮动会绕过浮动所占用的位置
浮动与相对定位的组合 便兼具两者的特点，既可以采用浮动 又可以偏移

11. JS字符串操作：
    str.substr(a,b);从a位置开始截，截b个
    str.substring(a,b);从a位置开始截，截到b位置，但不包含b位
    str.indexOf(a);查找字符a在字符串str中第一次出现的位置
    str.indexOf(a,b);从第b位开始查找，字符a第一次出现的位置

    var arr[] = str.split(a);以字符a为介质，将字符串str分割，以数组的形式返回
    str.concat(a);在原字符串的后面追加字符a
    arr.concat(a,b,c);在原数组的基础上追加a,b,c三个元素
    str.replace(a,b);将字符串str中第一次出现的a替换成b

12. 内置函数：
    字符串函数：
    split(fn)利用字符串fn分割字符串，返回字符串数组
    concat(fn) 作用：在原字符串的后面添加字符串fn（fn可以是多个字符串），或在原数组的基础上为数组添加新的元素fn
    replace(要被替换的元素，替换元素) 作用：将第一次出现的“要被替换的元素”替换成“替换元素”
    日期函数：
    对象初始化：var d1=new Date();获取当前时间的对象 var d2=new Data(“2020-1-1 10:58:58”);设置时间对象
    函数：
    getMonth()获得月份（JS中月份的取值范围为0-11）
    getDate()获取几号
    getFullYear()获取年份
    getHours()获取小时
    getMinutes()获取分钟
    getSeconds()获取秒
    getTime()将日期转换为毫秒
    getDay()获得星期几，取值范围为0~6
    Math.round(参数) 对参数进行四舍五入取整
    n.toFixed(2) 对n进行四舍五入，并保留两位小数
    Math.min(参数1,参数2,…)求取n个参数的最小值（Math.max同理）
    Math.abs(参数)求绝对值

13. JS事件
    单击事件：οnclick=“执行函数1，执行函数2…”
    刷新页面就会显示函数功能的事件：οnlοad=“执行函数1，执行函数2，…”（当前页面显示前先执行onload中的内容）
    获取单选按钮的值：document.getElementsByName() 利用checked属性（若选中，则checked值为true）和value属性
    下拉菜单（三级联动）：通过在body中的onload事件
    函数：
    var yyyy=document.getElementById(“yyyy”);
    yyyy.options.add(new Option(“1”,“1”));（值value，显示的名字）
    获取某一下拉列表的长度：yyyy.length；
    设置某一下拉元素为默认值：yyyy.selectedIndex=n（要先获取该下拉表单的长度，n是默认值在下拉表单中的位置索引）
    删除下拉列表中的元素：dd.options.length=0;将该下拉列表的长度设置为0，效果是删除
    onchange事件配合select标签使用，当下拉表单中的元素发生改变时就会触发onchange事件
    删除下拉列表中的某一元素：dd.options.remove(n); n为要被删除的元素的位置索引。
    易错点：
    yyyy.options.add(new Option(i,i));(值，名字)，
    注意，第一个是options，首字母小写，后面是复数！！！
    第二个，添加new选项的时候，是“Option”，没有s，首字母大写！！！