1. HTML文档
下面全面介绍几个HTML常见的文档,你肯定会有新的认识。
1. base元素
用来设定一个基准URL,让HTML文档中的相对连接在此基础上进行解析。
例如base定义:
<base href="http://www.auszby.com/test/" />
链接:
<ahref="content/test1.html">test1</a>
其完整地址为:http://www.auszby.com/test/content/test1.html
2. meta元素
用名值定义元数据
<meta name="author" content="Aus">
给出几个常见的预定义元素类型
application name:当前页所属WEB应用程序名称
author:当前页作者名
description:当前也说明
generator:用来生成当前页HTML的软件名称
keywords:一批以逗号分开的字符串,用来描述页面内容
robots:用它来告诉搜索引擎入会对待该文档
robots有三个大多数搜索引擎都认识的值:noindex(不需要索引本页),noarchive(不要将本页存档或缓存),nofollow(不要顺着本页的搜索引擎继续搜索下去)。
H5中新增的属性charset用于指定编码字符集。
<metacharset="utf-8">
还有一个用途:改写HTTP标头字段的值。如
<metahttp-equiv="refresh" content="5;http//www.baidu.com">
该例子告诉浏览器5秒以后抽重新载入指定的url(www.baidu.com)中。
下表列出常见的http-equiv属性允许的值:
属性值 | 说明 |
refresh | 以秒为单位制定一个时间间隔,在此时间过去之后将重服务器重新载入当前页面。也可另行制定载入的URL。 |
default-style | 指定页面优先使用的样式表对应的content值应与同一文档中某个style元素或者link元素的title属性值相同。 |
content-type | 另一种声明HTML页面所用字符编码的方式如 <meta http-equiv="content-type" content="text/html charset=UTF-8"> |
3. style元素
用来定义文档内前的css样式,其有以下几个属性:
type=“text/css”浏览器支持的样式只有这一种。
scoped指定样式作用范围,使用该属性的话,定义的样式只作用于该元素的父元素和所有兄弟元素。不使用该元素的话,文档中任何地方定义的style都将应用于整个页面。
media属性,不同设备应用不同的样式。
下表列出常见的规定设备值
设备 | 说明 |
All | 将样式应用于所有设备(默认值) |
aural | 语音合成器 |
braille | 盲文设备 |
handheld | 手持设备 |
projection | 摄影机 |
| 打印预览和打印页面时 |
screen | 计算机显示其屏幕 |
tty | 电传打字机等等宽设备 |
tv | 电视 |
看个例子:
<style media="screen" type="text/css">
a {
color:red;
}
</style>
<style media="print" type="text/css">
a {
color:blue;
}
</style>
上述例子中,电脑屏幕显示a链接为红色,当打印该网页时a为蓝色。
此外还可以使用AND NOT ,来组和设备的特殊条件例如
<style media="screen AND (max-width:500px)" type="text/css">
div#test {
background-color: red;
}
</style>
<style media="screen AND (min-width:500px)" type="text/css">
div#test {
background-color: blue;
}
</style>
当屏幕的最大宽度小于等于500时,显示红色背景,当屏幕宽度大于等于500时背景显示蓝色
下面列出常见的media属性使用特性:
特征 | 说明 | 实例 |
Width height | 指定浏览器宽度与高度 | width:200px |
Device-height Device-width | 指定整个设备的高度与宽度 | Min-device-height:100px |
Resolution | 指定设备的像素密度 | Max-resolution:600dpi |
Orientation | 指定设备的较长边朝向:portrait和landscape | Orientation:portrait |
Aspect-ratio Device-aspect-ratio | 指定浏览器窗口或整个设备的像素宽高比。值为像素宽度与像素高度的比值 | Min-aspect-ratio:16/9 |
Color monochrome | 指定彩色或黑白设备商的每个像素占用的二进制数 | Min-monochrome:2 |
Color-index | 只等设备所能显示的颜色数目 | Max-color-index:256 |
Scan | 指电视的扫描模式,支持的值有:progressive和interlace | Scan:interlace |
Grid | 指定设备的类型支持的值有0和1 | Grid:0 |
4. link元素
link元素用来在文档和外部资源之间建立联系
link元素的一些局部属性:
href:指定link元素指向的资源的url
hreflang:所关联资源指定的语言
media所关联资源使用哪种设备
rel说明文档的所关联资源的关系类型
sizes指定图标大小
type指定所关联的资源的MIME类型如text/css,image/x-icon
常见的link的用途
载入样式表:
<link rel="stylesheet"type="text/css" href="css/style.css">
载入网站icon标识
<link rel="shortcut icon" type="image/x-icon " href="icon/logo.icon">
预先获取资源
<link rel="prefetch" href="/pages.html">
5. script元素noscript元素
script元素用来在页面加入脚本,分为在文档中定义脚本和引入外部文件两种。常用脚本类型javascript。
下面是一些script的局部属性:
src:指定外部脚本的url
defer/async:设定脚本的执行方式
charset:说明脚本的字符编码
常见用法:
script写在body中。
Script写在head中。
Script引入外部脚本。
一般来说,浏览器解析文档,遇到script元素,转而解析script元素对应的文档,解析之后再继续解析文档,所以一般将script元素放在文档最后,以提升效率。
脚本的控制:defer告诉浏览器要等页面载入和解析完毕之后才能加载脚本
<script defersrc="date.js"></script>
defer只能处理外部脚本文件,内嵌脚本文件则不起作用。
上述代码顶替在head中跟定义在本当最后作用一样。
async使用后,浏览器将继续解析文档中的其他元素,包括其他script元素,与此同时,异步加载和执行脚本,用法如下
<script asyncsrc="date.js"></script>
noscript元素用来向禁用了javascript或浏览器不支持javascript的用户显示一些内容。