[持续更新]HTML5学习笔记（三）

本文链接：https://blog.csdn.net/u014267351/article/details/48162255

1. HTML文档

下面全面介绍几个HTML常见的文档，你肯定会有新的认识。

1. base元素

用来设定一个基准URL，让HTML文档中的相对连接在此基础上进行解析。

例如base定义：

链接：

<ahref="content/test1.html">test1</a>

其完整地址为：http://www.auszby.com/test/content/test1.html

2. meta元素

用名值定义元数据

给出几个常见的预定义元素类型

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	摄影机
print	打印预览和打印页面时
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