21、HTML 头部元素
文档的标题
<title>
标题定义文档的标题。
所有链接一个目标
如何使用 base 标签使页面中的所有标签在新窗口中打开。
文档描述
使用 <meta>
元素来描述文档。
文档关键词
使用 <meta>
元素来定义文档的关键词。
重定向用户
如何把用户重定向到新的网址。
HTML <head>
元素
<head>
元素是所有头部元素的容器。<head>
内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。
以下标签都可以添加到 head 部分:<title>、<base>、<link>、<meta>、<script> 以及 <style>。
HTML <title>
元素
<title>
标签定义文档的标题。
title 元素在所有 HTML/XHTML 文档中都是必需的。
title 元素能够:
定义浏览器工具栏中的标题
提供页面被添加到收藏夹时显示的标题
显示在搜索引擎结果中的页面标题
一个简化的 HTML 文档:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
HTML <base>
元素
<base>
标签为页面上的所有链接规定默认地址或默认目标(target):
<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>
HTML <link>
元素
<link>
标签定义文档与外部资源之间的关系。
<link>
标签最常用于连接样式表:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
HTML <style>
元素
<style>
标签用于为 HTML 文档定义样式信息。
您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式:
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
HTML <meta>
元素
元数据(metadata)是关于数据的信息。
<meta>
标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。
典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
<meta>
标签始终位于 head 元素中。
元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。
针对搜索引擎的关键词
一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。
下面的 meta 元素定义页面的描述:
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
下面的 meta 元素定义页面的关键词:
<meta name="keywords" content="HTML, CSS, XML" />
name 和 content 属性的作用是描述页面的内容。
HTML <script>
元素
<script>
标签用于定义客户端脚本,比如 JavaScript。
我们会在稍后的章节讲解 script 元素。
22、HTML 布局
使用
注释:
这个例子使用了四个
实例
<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
<div id="section">
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div id="footer">
Copyright W3School.com.cn
</div>
</body>
CSS:
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
使用表格的 HTML 布局
注释:<table>
元素不是作为布局工具而设计的。
<table>
元素的作用是显示表格化的数据。
使用 <table>
元素能够取得布局效果,因为能够通过 CSS 设置表格元素的样式:
实例
<body>
<table class="lamp">
<tr>
<th>
<img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px">
</th>
<td>
The table element was not designed to be a layout tool.
</td>
</tr>
</table>
</body
23、HTML 响应式 Web 设计
什么是响应式 Web 设计?
RWD 指的是响应式 Web 设计(Responsive Web Design)
RWD 能够以可变尺寸传递网页
RWD 对于平板和移动设备是必需的
创建您自己的响应式设计
创建响应式设计的一个方法,是自己来创建它:
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>W3School Demo</h1>
<h2>Resize this responsive page!</h2>
<br>
<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</body>
</html>
使用 Bootstrap
另一个创建响应式设计的方法,是使用现成的 CSS 框架。
Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。
Bootstrap 帮助您开发在任何尺寸都外观出众的站点:显示器、笔记本电脑、平板电脑或手机:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>W3School Demo</h1>
<p>Resize this responsive page!</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="col-md-4">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="col-md-4">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</div>
</div>
</body>
</html>
24、HTML 计算机代码元素
计算机代码
var person = {
firstName:"Bill",
lastName:"Gates",
age:50,
eyeColor:"blue"
}
HTML 计算机代码格式
通常,HTML 使用可变的字母尺寸,以及可变的字母间距。
在显示计算机代码示例时,并不需要如此。
<kbd>, <samp>,
以及 <code>
元素全都支持固定的字母尺寸和间距。
HTML 键盘格式
HTML <kbd>
元素定义键盘输入:
实例
<p>To open a file, select:</p>
<p><kbd>File | Open...</kbd></p>
HTML 样本格式
HTML <samp>
元素定义计算机输出示例:
实例
<samp>
demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>
HTML 代码格式
HTML <code>
元素定义编程代码示例:
实例
<code>
var person = { firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue" }
</code>
<code>
元素不保留多余的空格和折行:
实例
<p>Coding Example:</p>
<code>
var person = {
firstName:"Bill",
lastName:"Gates",
age:50,
eyeColor:"blue"
}
</code>
HTML <var>
元素定义数学变量:
实例
<p>Einstein wrote:</p>
<p><var>E = m c<sup>2</sup></var></p>
25、HTML5 语义元素
什么是语义元素?
语义元素清楚地向浏览器和开发者描述其意义。
非语义元素的例子:<div> 和 <span> -
无法提供关于其内容的信息。
语义元素的例子:<form>、<table> 以及 <img>
- 清晰地定义其内容。
HTML5 中新的语义元素
许多网站包含了指示导航、页眉以及页脚的 HTML 代码,例如这些:
HTML5 提供了定义页面不同部分的新语义元素:
HTML5 <section>
元素
<section>
元素定义文档中的节。
根据 W3C 的 HTML 文献:“节(section)是有主题的内容组,通常具有标题”。
可以将网站首页划分为简介、内容、联系信息等节。
实例
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
HTML5 <article>
元素
<article>
元素规定独立的自包含内容。
文档有其自身的意义,并且可以独立于网站其他内容进行阅读。
<article>
元素的应用场景:
论坛
博客
新闻
实例
<article>
<h1>What Does WWF Do?</h1>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
嵌套语义元素
在 HTML5 标准中,<article>
元素定义完整的相关元素自包含块。
<section>
元素被定义为相关元素块。
我们能够使用该定义来决定如何嵌套元素吗?不,我们不能!
在因特网上,您会发现 <section>
元素包含 <article>
元素的 HTML 页面,还有 <article>
元素包含 <sections>
元素的页面。
您还会发现 <section>
元素包含 <section>
元素,同时 <article>
元素包含 <article>
元素。
HTML5 <header>
元素
<header>
元素为文档或节规定页眉。
<header>
元素应该被用作介绍性内容的容器。
一个文档中可以有多个 <header>
元素。
下例为一篇文章定义了页眉:
实例
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
HTML5 <footer>
元素
<footer>
元素为文档或节规定页脚。
<footer>
元素应该提供有关其包含元素的信息。
页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。
您可以在一个文档中使用多个 <footer>
元素。
实例
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:someone@example.com">
someone@example.com</a>.</p>
</footer>
亲自试一试
HTML5 <nav>
元素
<nav>
元素定义导航链接集合。
<nav>
元素旨在定义大型的导航链接块。不过,并非文档中所有链接都应该位于 <nav>
元素中!
实例
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
亲自试一试
HTML5 <aside>
元素
<aside>
元素页面主内容之外的某些内容(比如侧栏)。
aside 内容应该与周围内容相关。
实例
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
HTML5 <figure>
和 <figcaption>
元素
在书籍和报纸中,与图片搭配的标题很常见。
标题(caption)的作用是为图片添加可见的解释。
通过 HTML5,图片和标题能够被组合在 <figure>
元素中:
实例
<figure>
<img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>
<img>
元素定义图像,<figcaption>
元素定义标题。