转自:微点阅读 https://www.weidianyuedu.com
HTML页面基本结构
之前介绍了HTML的编码规范,良好编码规范可以让我们的代码更加的易于维护,而今天要说的基本结构,则是能够让我们的页面正确的进行页面显示和SEO,正确的HTML格式加上良好的编码规范才是一个成熟合格的项目。
HTML页面基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<head>
<body></body>
</html>
HTML的页面结构非常简单,整体分为两部分,第一部分为DOCTYPE模块,第二部分为html模块。
DOCTYPE模块
文档声明,位于页面的首行,告知浏览器使用哪种HTML版本规范方式解析网页,使网页能正常显示。
html模块
告诉页面这是一个html文档。
在<html>部分中,又分为两小部分,第一部分为head模块,第二部分为body模块。
head模块
如果用人体的结构来类比的话,这部分属于网页的头部,这部分中描述了HTML文件的各种属性和信息,如网页的标题,字符编码,是否启用缓存,引用的外部脚本和样式等等。在这head标签里写的内容不会在网页的正文内容中显示出来。
body模块
HTML的主体,网页的文本、超链接、图像、表格、视频等所有在网页上显示的内容都写在这里。
title标签
在head标签中title标签表示网页的标题。meta标签-提供有关页面的元信息,比如针对搜索引擎的关键字、缓存时间、启用浏览器内核等等,meta标签有两个主要属性name和http-equiv。
meta标签name属性
主要用于描述网页,比如定义网页的关键词,关键内容、标注作者、版权等。
格式:
<meta name="属性值" content="描述内容"/>
常用name属性值keywords——用于告诉搜索引擎网页的关键字。description——用于告诉搜索引擎网站的主要内容。robots——用来告诉爬虫哪些页面需要索引,哪些页面不需要索引。author——用于标注网页的作者信息。generator——用于标注网页是用什么IDE做的。copyright——用于标注版权信息。renderer——用于指定双核浏览器默认以什么方式进行页面渲染content="webkit"为webkit内核,content="ie-comp"为IE兼容模式,content="ie-stand"为IE标准模式。
meta标签http-equiv属性主要用于设置网页的字符集,缓存机制等。格式:
<meta http-equiv="属性值" content="参数"/>
常用http-equiv属性值content-type——设定网页字符集。X-UA-Compatible——用于告知浏览器以什么种版本来渲染页面。cache-control——设置浏览器如何缓存某个响应以及缓存多长时间。Set-Cookie——设置cookie设定。
HTML页面跳转的5种方法
下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件。
1) html的实现
1
2
3
4
5
6
<head>
<!-- 以下方式只是刷新不跳转到其他页面 -->
<meta http-equiv="refresh" content="10">
<!-- 以下方式定时转到其他页面 -->
<meta http-equiv="refresh" content="5;url=hello.html">
</head>
优点:简单
缺点:Struts Tiles中无法使用
2) javascript的实现
1
2
3
4
5
6
<script language="javascript" type="text/javascript">
// 以下方式直接跳转
window.location.href="hello.html";
// 以下方式定时跳转
setTimeout("javascript:location.href="hello.html"", 5000);
</script>
优点:灵活,可以结合更多的其他功能
缺点:受到不同浏览器的影响
3) 结合了倒数的javascript实现(IE)
1
2
3
4
5
6
7
8
9
<span id="totalSecond">5</span>
<script language="javascript" type="text/javascript">
var second = totalSecond.innerText;
setInterval("redirect()", 1000);
function redirect(){
totalSecond.innerText=--second;
if(second<0) location.href="hello.html";
}
</script>
优点:更人性化
缺点:firefox不支持(firefox不支持span、div等的innerText属性)
3") 结合了倒数的javascript实现(firefox)
1
2
3
4
5
6
7
8
9
<script language="javascript" type="text/javascript">
var second = document.getElementById("totalSecond").textContent;
setInterval("redirect()", 1000);
function redirect()
{
document.getElementById("totalSecond").textContent = --second;
if (second < 0) location.href = "hello.html";
}
</script>
4) 解决Firefox不支持innerText的问题
1
2
3
4
5
6
7
8
<span id="totalSecond">5</span>
<script language="javascript" type="text/javascript">
if(navigator.appName.indexOf("Explorer") > -1){
document.getElementById("totalSecond").innerText = "my text innerText";
} else{
document.getElementById("totalSecond").textContent = "my text textContent";
}
</script>
5) 整合3)和3")
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<span id="totalSecond">5</span>
<script language="javascript" type="text/javascript">
var second = document.getElementById("totalSecond").textContent;
if (navigator.appName.indexOf("Explorer") > -1) {
second = document.getElementById("totalSecond").innerText;
} else {
second = document.getElementById("totalSecond").textContent;
}
setInterval("redirect()", 1000);
function redirect() {
if (second < 0) {
location.href = "hello.html";
} else {
if (navigator.appName.indexOf("Explorer") > -1) {
document.getElementById("totalSecond").innerText = second--;
} else {
document.getElementById("totalSecond").textContent = second--;
}
}
}
</script>