网页架构基础补充

网页架构基础补充


1. base

大型网站中比较常用,更改默认地址和打开方式,设置基地址
<head> <base href="./images/"/> </head>
<body> <img src="a.png"/> </body>

  • 使用多个base标签,只有最先定义的能生效

2.css

CSS: Cascading Style Sheets的缩写,中文翻译 层叠样式表

  • 网页上使用CSS的三种形式
    优先级: 内联式>嵌入式>外联式

3.script

定义脚本语言,主要包括javascript,VBScript,ecmascript等几种脚本语言
可定义在head 或 body 里

  • 遵循原则
    • 按顺序载入
    • 载入即执行
      • head 中 window.onload = function(){}
        是防止脚本操作时,内容还没有被定义
    • 执行时会阻塞后续内容
      • 最好是保证全部HTML网页DOM树载入后,再执行脚本
        自定义脚本可放在body最后 或 在head中用onload
  • 推迟脚本执行 defer

    <script id="script-defer" type="text/javascript" defer></script>
    <script>
    alert(document.getElementById("script-defer").defer);
    </script>

    应用在脚本定义在标签前等 也可运用在外部脚本

  • 异步执行脚本 async
    • 一旦规定脚本可用,则会异步执行
    • 仅适用于外部脚本,适用src属性时
    • defer的关联 定义一个在body前的脚本
      • async 脚本相当于页面其他部分异步执行,即页面继续解析时,脚本将被执行
      • defer 脚本将在页面完成解析时执行
      • 不定义async 和 defer 在解析页面之前,立即以阻塞方式读取并执行脚本

4.noscript

用于判断是否支持脚本语言功能,如果不支持脚本语言,浏览器将noscript标签中的内容显示出来
<noscript>Sorry,your browser does not support jacascript!</noscript>

5.标签添加id,name,class属性

  • id
    • identity 身份标识 唯一的
  • name

    主要定义表单域内的标签

    • 服务器端只接收表单内具有name属性的元素
    • 分组根据相同的name属性来实现 radio check
  • class

    类与CSS,JavaScript组合使用,更简洁

6.标签添加title属性

提示信息文本, 常与* abbr,a*连用

7.添加网页注释

HTML网页中 <!-- -->
JS脚本,CSS中 \\ 和 /* */

8.测试浏览器对HTML5属性的支持

  • 用in方法

    • 循环遍历
    • 用来判断某个属性属于某个对象,可以是对象的直接属性,也可以是通过prototype继承的属性。

    <script type="text/javascript">
    var prop = ["id","name","value","type"];
    for(var i in prop){
    if(isSupport(prop[i])){
    document.getElementById("div").innerHTML += “层标签支持”+prop[i]+"属性"+"<br>";
    }else{...}
    }
    function isSupport(prop){
    return prop in document.createElement('div');
    }
    </script>

  • 判断HTML5的支持主要使用Web Worker属性
    typeof() 判定Worker属性是否定义 定义则支持

    <script type="text/javascript">
    if(typeof(Worker)!=="undefined"){
    alert("该浏览器支持HTML5属性");
    }else{...}
    </script>

  • 三大类
    文字标志 图形组合 现实存在
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值