网页架构基础补充
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(){}
是防止脚本操作时,内容还没有被定义
- head 中
- 执行时会阻塞后续内容
- 最好是保证全部HTML网页DOM树载入后,再执行脚本
自定义脚本可放在body最后 或 在head中用onload
- 最好是保证全部HTML网页DOM树载入后,再执行脚本
推迟脚本执行 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>
9.网站logo
- 三大类
文字标志 图形组合 现实存在