[持续更新]HTML5学习笔记(三)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u014267351/article/details/48162255

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

摄影机

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

 

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的用户显示一些内容。

展开阅读全文

没有更多推荐了,返回首页