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 依然保留在原位置 供绝对定位有参照物
浮动与定位
浮动与绝对定位的组合 都会破坏文档流 破坏之后 绝对定位会忽略绝对定位所占用的位置 而浮动会绕过浮动所占用的位置
浮动与相对定位的组合 便兼具两者的特点,既可以采用浮动 又可以偏移

  1. 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

  2. 内置函数:
    字符串函数:
    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(参数)求绝对值

  3. 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,首字母大写!!!

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值