一、HTML5样式
<body>
<div>
<div class="main">
<p>12354468789</p>
</div>
</div>
</body>
元素可以分成两大类:块级元素
(block)
和行内元素(inline)
<head>
的子元素一般有下面七个
<meta>:// 设置网页的元数据。
<link>:// 连接外部样式表。
<title>:// 设置网页标题。
<style>:// 放置内嵌的样式表。
<script>:// 引入脚本。
<noscript>:// 浏览器不支持脚本时,所要显示的内容。
<base>:// 设置网页内部相对 URL 的计算基准。
- 例子中,第一个标签表示网页采用 UTF-8 格式编码,第二个标签表示网页在手机端可以自动缩放。
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
</head>
1.<meta>
标签有五个属性,下面依次介绍。
(1)charset 属性 <meta>标签的charset属性
用来指定网页的编码方式。
(2) name 属性,content 属性 name 属性表示元数据的名字,content属性表示元数据的值。
- 下面代码包含了三个元数据:
description
是网页内容的描述,keywords
是网页内容的关键字,author
是网页作者。并且元数据有很多种,大部分涉及浏览器内部工作机制,或者特定的使用场景。
<head>
<meta name="description" content="HTML 语言入门">
<meta name="keywords" content="HTML,教程">
<meta name="author" content="张三">
// 下面的就是涉及一些浏览器内部的工作机制,或场景
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="application-name" content="Application Name">
<meta name="generator" content="program">
<meta name="subject" content="your document's subject">
<meta name="referrer" content="no-referrer">
</head>
3)http-equiv 属性,content 属性
- 标签的http-equiv属性用来覆盖HTTP回应的头信息字段,content属性是对应的字段内容。这两个属性与 HTTP 协议相关。
- meat标签的http-equiv属性语法格式是:<meta http-equiv=“参数” content="参数变量值"> ;
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
上面代码可以覆盖 HTTP 回应的Content-Security-Policy字段。
- http-equiv属性主要有以下几种参数:
1、Expires(期限) 可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。
<meta http-equiv="expires" content="Wed, 20 Jun 2007 22:33:00 GMT">
注意:必须使用GMT的时间格式
2、Pragma(cache模式) 是用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出。
<meta http-equiv="Pragma" content="no-cache">
注意:这样的设定,访问者将无法脱机浏览
3、Refresh(刷新) 自动刷新并指向新页面。
<meta http-equiv="Refresh" content="2;URL=http://www.net.cn/">
注意:其中的 2 是指停留 2 秒钟后自动沙刷新到 URL 网址
4、Set-Cookie(cookie设定) 如果网页过期,那么存盘的cookie将被删除。
<meta http-equiv="Set-Cookie" content="cookievalue=xxx;expires=Wednesday, 20-Jun-2007 22:33:00 GMT; path=/">
注意:必须使用 GTM 的时间格式
5、Window-target(显示窗口的设定) 强制页面在当前窗口以独立页面显示。
<meta http-equiv="Window-target" content="_top">
注意:用来防止别人在框架里调用自己的页面
6、content-Type(显示字符集的设定) 设定页面使用的字符集。
<meta http-equiv="content-Type" content="text/html; charset=gb2312">
7、Pics-label(网页等级评定)
<meta http-equiv="Pics-label" contect="">
说明:在IE的internet选项中有一项内容设置,可以防止浏览一些受限制的网站,而网站的限制级别就是通过meta属性来设置的。
8、Page_Enter、Page_Exit 设定进入页面时的特殊效果
<meta http-equiv="Page-Exit" contect="revealTrans(duration=1.0,transtion= 12)">
Duration
的值为网页动态过渡的时间,单位为秒。
Transition
是过渡方式,它的值为0到23,分别对应24种过渡方式。如下表:
值 | 过渡方式 | 值 | 过渡方式 |
---|---|---|---|
0 | 盒状收缩 | 1 | 盒状放射 |
2 | 圆形收缩 | 3 | 圆形放射 |
4 | 由下往上 | 5 | 由上往下 |
6 | 从左至右 | 7 | 从右至左 |
8 | 垂直百叶窗 | 9 | 水平百叶窗 |
10 | 水平格状百叶窗 | 11 | 垂直格状百叶窗 |
12 | 随意溶解 | 13 | 从左右两端向中间展开 |
14 | 从中间向左右两端展开 | 15 | 从上下两端向中间展开 |
16 | 从中间向上下两端展开 | 17 | 从右上角向左下角展开 |
18 | 从右下角向左上角展开 | 19 | 从左上角向右下角展开 |
20 | 从左下角向右上角展开 | 21 | 水平线状展开 |
22 | 垂直线状展开 | 23 | 随机产生一种过渡方式 |
9、清除缓存(再访问这个网站要重新下载!)
<meta http-equiv="cache-control" content="no-cache">
10、设定网页的到期时间
<meta http-equiv="expires" content="0">
11.关键字,给搜索引擎用的
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
12.页面描述 在 content 中描述本页面所写的内容
<meta http-equiv="description" content="This is my page">