标签:时间 如何 his not 查找 out ogr bsp 访问
一、基本文档结构
1.1 文档元素有4种,任何HTML文档都需要这些元素。
1.1.1 DOCTYPE元素
<!DOCTYPE html>
解析: 上述语句告诉浏览器: 1. 处理的是HTML文档。 2.用来标记文档内容的HTML所属的版本。该元素没有结束标签,放于文档开头即可。
1.1.2 html元素
<!DOCTYPE html> <html> ...此处省略内容和元素... </html>
1.1.3 head元素
<!DOCTYPE html> <html> <head> <title>test</title> </head> </html>
1.1.4 body元素
<!DOCTYPE html> <html> <head> <title>test</title> </head> <body> <p>我是第一个文档</p> </body> </html>
二、用元数据元素说明文档
2.1 元数据之title元素:设置文档标题
<!DOCTYPE html> <html> <head> <title>test</title> </head> <body> </body> </html>
2.2 元数据之:base元素:设置相对URL的解析基准
<!DOCTYPE html> <html> <head> <title>第一个文档</title> <base href="http://"> </head> <body> <a href="www.baidu.com">百度</a> <a href="http://sina.com">新浪</a> </body> </html>
解析:第一个a元素链接的目的地址是“www.baidu.com”,为相对URL,浏览器会吧相对URL与基准URL(这里是base元素中的URL)拼凑成完整的URL,即“http://www.baidu.com” 。 第二个a标签的URL是完整的URL,浏览器就不会把这个URL与基准URL拼接。
注意: 如果不用base元素,或不用其href属性设置一个基准URL,那么浏览器会将当前文档的URL认定为所有相对URL的解析基准。例子如下:
<!DOCTYPE html> <html> <head> <title>第一个文档</title> </head> <body> <a href="www.baidu.com">百度</a> </body> </html>
点击“百度”:
解析: 如图可知,上诉例子的文档URl为“localhost:8080/test/index.html”,在这里文档中的a元素的url为相对URL,故访问的时候会以当前文档URL作为基准URL,故相对URL和基准URL拼凑为“localhost:8080/test/www.baidu.com” 自然无法访问。
2.3 元数据之meta元素
用法1:搜索引擎优化(SEO)
name属性主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
meta标签的name属性语法格式是:
<meta name="参数"content="具体的参数值">。
其name的参数有:
A、Keywords(关键字)
说明:keywords用来告诉搜索引擎你网页的关键字是什么。
举例:<metaname="keywords"content="science,education,culture,politics,ecnomics,relationships,entertaiment,human">
B、description(网站内容描述)
说明:description用来告诉搜索引擎你的网站主要内容。
举例:<metaname="description"content="Thispageisaboutthemeaningofscience,education,culture.">
C、robots(机器人向导)
说明:robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。
content的参数有all,none,index,noindex,follow,nofollow。默认是all。
举例:<metaname="robots"content="none">
D、author(作者)
说明:标注网页的作者
举例:<metaname="author"content="root,root@xxxx.com">
用法2:声明字符编码。
<!DOCTYPE html> <html> <head> <title>第一个文档</title> <base href="http://"> <meta charset="ISO"> </head> <body> <a href="www.baidu.com">百度</a> </body> </html>
用法3:改写HTTP桥头字段的值。
<meta http-equiv="参数" content="值" />
<!DOCTYPE HTML> <html> <head> <title>测试文档</title> <meta http-equiv="refresh" content="5"> <meta http-equiv="content-type" content="text/html;charset=iso"> </head> <body> <p> 本页面5秒刷新一次</p> </body> </html>
解析: http-equiv属性还有一个参数, <meta http-equiv="default-style" content=" "/> 指定页面优先使用的样式表,对应的content属性值应与同一文档中某个style元素或link元素title属性值相同。
<meta http-equiv="refresh" content="5"> 设置刷新时间, <meta http-equiv="content-type" content="text/html;charset=iso"> 设置字符编码的另一种形式。
2.4 元数据之style元素
<!DOCTYPE html>
<html>
<head>
<title>测试元数据中的style属性</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<style type="text/css">
p{background-color: grey;
color:white;
padding:0px;
}
</style>
</head>
<body>
<p>我是一个段落</p>
</body>
</html>
解析: style元素可以出现在HTML文档中的各个部分,一个文档可以包含多个style元素,目前为止type属性的值总是“text/css”
<!doctype html> <html> <head> <title>测试style标签中的media属性</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <style type="text/css" media="print"> p{background-color: grey; color:white; padding:0px; } </style> <style type="text/css" media="screen"> p{background-color: white; color:red; padding:0px; } </style> </head> <body> <p>我是段落</p> </body> </html>
缩小页面(width<400px)
解析: 使用media属性可用来表明文档在什么情况下应该使用该元素中的定义的哪些样式。 上述例子,media="print" 表示将样式用于打印页面预览和打印页面时, media的属性还有如下:
<!doctype html> <html> <head> <title>测试style标签中的media属性</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <style type="text/css" media="screen AND (max-width:400px)"> p{background-color: grey; color:white; padding:0px; } </style> <style type="text/css" media="screen AND (min-width:400px)"> p{background-color: white; color:red; padding:0px; } </style> </head> <body> <p>我是段落</p> </body> </html>
全屏时(width大于400px)
解析: 本例中使用了AND来组合设备和特性条件,除了AND,还可以使用NOT和表示OR的逗号(,)。
width等特定通常会跟限定词min和max配合使用,若非特别指明,上述的特性都可以用min- 或 max- 修饰。值得注意的是min-width:400px 指的是最小长度400px即大于400px才会应用此样式。
标签:时间 如何 his not 查找 out ogr bsp 访问
原文地址:http://www.cnblogs.com/shyroke/p/6413769.html