HTML5学习手册

2019-08-27 07:09:26来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

HTML5学习手册

目录

  • HTML 简介
    • HTML 简介
      • 什么是 HTML?
      • HTML 标签
      • HTML 文档 = 网页
    • 基本的 HTML 标签 - 四个实例
      • HTML 标题
      • HTML 段落
      • HTML 链接
      • HTML 图像
    • HTML 元素
      • HTML 文档是由 HTML 元素定义的。
      • HTML 元素
      • HTML 元素语法
      • 嵌套的 HTML 元素
      • HTML 实例解释
      • 不要忘记结束标签
      • 空的 HTML 元素
      • HTML 提示:使用小写标签
    • HTML 属性
      • HTML 属性
      • 属性实例
    • HTML 标题
      • HTML 标题
      • HTML 水平线
      • HTML 注释
      • HTML 提示 - 如何查看源代码
    • HTML 段落
      • HTML 折行
      • HTML 输出 - 有用的提示
    • HTML 文本格式化
      • 文本格式化
      • 预格式文本
      • “计算机输出”标签
      • 地址
      • 缩写和首字母缩写
      • 文字方向
      • 块引用
      • 删除字效果和插入字效果
    • HTML 编辑器
      • 使用 Notepad 或 TextEdit 来编写 HTML
    • HTML CS
      • 如何使用样式
    • HTML 链接
      • HTML 超链接(链接)
      • HTML 链接语法
      • HTML 链接 - target 属性
      • HTML 链接 - name 属性
      • 基本的注意事项 - 有用的提示:
      • 实例
    • HTML 图像
      • 图像标签(<img>)和源属性(src
      • 替换文本属性(Alt)
      • 基本的注意事项 - 有用的提示:
      • 实例
    • HTML 表格
      • 表格
      • 表格和边框属性
      • 表格的表头
      • 表格中的空单元格
      • 实例
    • HTML 列表
      • 无序列表
      • 有序列表
      • 定义列表
    • HTML 块
      • HTML <div><span>
      • HTML 块元素
      • HTML 内联元素
      • HTML <div> 元素
      • HTML <span> 元素
      • HTML 分组标签
    • HTML 布局
      • 网站布局
      • HTML 布局 - 使用 <div> 元素
      • HTML 布局 - 使用表格
      • HTML 布局 - 有用的提示
    • HTML 表单和输入
      • HTML 表单用于搜集不同类型的用户输入。
      • 输入
      • 表单的动作属性(Action)和确认按钮
      • 举例
    • HTML 框架
      • 框架
      • 框架标签(Frame)
      • 基本的注意事项 - 有用的提示:
      • 实例
    • HTML Iframe
      • iframe 用于在网页内显示网页。
      • 添加 iframe 的语法
      • Iframe - 设置高度和宽度
      • Iframe - 删除边框
      • 使用 iframe 作为链接的目标
    • HTML 背景
      • 基本的注意事项 - 有用的提示:
    • HTML 颜色
    • 颜色名
  • HTML 高级教程
    • HTML 文档类型
    • HTML 头部元素
      • HTML <head> 元素
    • HTML 脚本
    • HTML 字符实体
    • HTML 统一资源定位器&编码
      • URL - Uniform Resource Locator
      • URL 编码
    • HTML Web 服务器
      • 托管自己的网站
      • 使用因特网服务提供商(ISP)
      • 选择 ISP 时的注意事项
  • HTML 媒体
    • HTML 媒体
      • 什么是多媒体?
      • 浏览器支持
      • 多媒体格式
      • 视频格式
      • 声音格式
      • 使用哪种格式?
    • HTML Object 元素
      • <object> 的作用是支持 HTML 助手(插件)。
      • HTML 助手(插件)
      • 在 HTML 中播放视频的最好方式?
      • 使用 QuickTime 来播放 Wave 音频
      • 使用 QuickTime 来播放 MP4 视频
      • 使用 Flash 来播放 SWF 视频
      • 使用 Windows Media Player 来播放 WMV 影片
    • HTML 音频
      • 问题以及解决方法
      • 使用插件
      • 使用 <embed>元素
      • 使用 <object> 元素
      • 使用 HTML5 <audio> 元素
      • 最好的 HTML 解决方法
      • 向网站添加音频的最简单方法
      • 雅虎媒体播放器
      • 使用超链接
      • 内联的声音
    • HTML 视频
      • 问题以及解决方法
      • 使用 <embed> 标签
      • 使用 <object> 标签
      • 使用 <video>标签
      • 最好的 HTML 解决方法
      • 优酷解决方案
      • 使用超链接
      • 关于内联视频的一段注释
  • HTML 5 教程
    • HTML5 简介
      • 什么是 HTML5?
      • HTML5 是如何起步的?
      • 新特性
      • 浏览器支持
    • HTML5 视频
      • Web 上的视频
      • 视频格式
      • 如何工作
      • Internet Explorer
      • <video> 标签的属性
    • HTML 5 Video + DOM
      • HTML5 <video> - 方法、属性以及事件
    • HTML 5 音频
      • Web 上的音频
      • 音频格式
      • 如何工作
      • Internet Explorer
      • <audio>标签的属性
    • HTML 拖放
      • 拖放
      • 浏览器支持
      • HTML5 拖放实例
    • HTML5 画布
      • 什么是 Canvas?
      • 创建 Canvas 元素
      • 通过 JavaScript 来绘制
      • 理解坐标
    • HTML5 SVG
      • 什么是SVG?
      • SVG 的优势
      • 浏览器支持
      • 把 SVG 直接嵌入 HTML 页面
    • HTML5 Canvas vs SVG
      • SVG
      • Canvas
      • Canvas 与 SVG 的比较不同之处
    • HTML5 地理定位
      • 定位用户的位置
      • 浏览器支持
      • HTML5 - 使用地理定位
      • 处理错误和拒绝
      • 在地图中显示结果
      • 给定位置的信息
      • getCurrentPosition() 方法 - 返回数据
      • Geolocation 对象 - 其他有趣的方法
    • HTML 5 Web 存储
      • 在客户端存储数据
      • localStorage 方法
      • sessionStorage 方法
    • HTML 5 应用程序缓存
      • 什么是应用程序缓存(Application Cache)?
      • 浏览器支持
      • HTML5 Cache Manifest 实例
      • Cache Manifest 基础
      • Manifest 文件
      • 更新缓存
      • 关于应用程序缓存的注释
    • HTML5 Web Workers
      • 什么是 Web Worker?
      • 浏览器支持
      • HTML5 Web Workers 实例
      • Web Workers 和 DOM
    • HTML 5 服务器发送事件
      • Server-Sent 事件 - 单向消息传递
      • 浏览器支持
      • 接收 Server-Sent 事件通知
      • 检测 Server-Sent 事件支持
      • 服务器端代码实例
  • HTML5 表单
    • HTML5 输入类型
      • HTML5 新的 Input 类型
      • 浏览器支持
      • Input 类型 - search
    • HTML5 表单元素
      • HTML5 的新的表单元素:
      • 浏览器支持
      • datalist 元素
      • keygen 元素
      • output 元素
    • HTML5 表单属性
      • HTML5 的新的表单属性
      • 浏览器支持
      • autocomplete 属性
      • autofocus 属性
      • form 属性
      • 表单重写属性
      • height 和 width 属性
      • list 属性
      • min、max 和 step 属性
      • multiple 属性
      • novalidate 属性
      • pattern 属性
      • placeholder 属性
      • required 属性
  • HTML 参考手册
  • HTML5 参考手册

HTML 简介

HTML 简介


<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

什么是 HTML?


  • HTML 是用来描述网页的一种语言。
  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言,而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

HTML 标签


  • HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
  • HTML 标签是由尖括号包围的关键词,比如
  • HTML 标签通常是成对出现的,比如 <b></b>
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签

HTML 文档 = 网页


  • HTML 文档描述网页
  • HTML 文档包含 HTML 标签和纯文本
  • HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容:

<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

例子解释

<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题
<p> 与 </p> 之间的文本被显示为段落

基本的 HTML 标签 - 四个实例


HTML 标题


HTML 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的。

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

HTML 段落


HTML 段落是通过 <p>标签进行定义的。

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML 链接


HTML 链接是通过<a> 标签进行定义的。

<a href="http://www.w3school.com.cn">This is a link</a>

注释:在 href 属性中指定链接的地址,href是Hypertext Reference的缩写。

HTML 图像


HTML 图像是通过 <img>标签进行定义的。

<img src="w3school.jpg" width="104" height="142" />

注释:图像的名称和尺寸是以属性的形式提供的。

HTML 元素


HTML 文档是由 HTML 元素定义的。


HTML 元素


HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。

注释:开始标签常被称为开放标签(opening tag),结束标签常称为闭合标签(closing tag)。

HTML 元素语法


  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容(empty content)
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)
  • 大多数 HTML 元素可拥有属性

嵌套的 HTML 元素


  • 大多数 HTML 元素可以嵌套(可以包含其他 HTML 元素)。
  • HTML 文档由嵌套的 HTML 元素构成。

HTML 文档实例

<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>

上面的例子包含三个 HTML 元素

HTML 实例解释


<p>This is my first paragraph.</p>

<p> 元素:
这个<p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p>,以及一个结束标签 </p>
元素内容是:This is my first paragraph。

<body>
<p>This is my first paragraph.</p>
</body>

<body> 元素:
<body> 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 <body>,以及一个结束标签 </body>
元素内容是另一个 HTML 元素(p 元素)。

<html> 元素:
<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>

<html>元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 <html>,以及一个结束标签</html>
元素内容是另一个 HTML 元素(body 元素)。

不要忘记结束标签


即使您忘记了使用结束标签,大多数浏览器也会正确地显示 HTML:

<p>This is a paragraph
<p>This is a paragraph?

上面的例子在大多数浏览器中都没问题,但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。

注释:未来的 HTML 版本不允许省略结束标签。

空的 HTML 元素


没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素(<br> 标签定义换行)。
在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。
在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的,但使用 <br />其实是更长远的保障。

HTML 提示:使用小写标签


HTML 标签对大小写不敏感:<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

HTML 属性


属性为 HTML 元素提供附加信息。


HTML 属性


  • HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
  • 属性总是以名称/值对的形式出现,比如:name="value"。
  • n属性总是在 HTML 元素的开始标签中规定。

属性实例


HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定:

<a href="http://www.w3school.com.cn">This is a link</a>
<html>

<body>

<h1 align="center">This is heading 1</h1>
<p>上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。</p>
</body>
</html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
</head>

<body bgcolor="yellow">
<h2>请看: 改变了颜色的背景。</h2>
</body>

</html>

HTML 提示:使用小写属性,属性和属性值对大小写不敏感。

始终为属性值加引号

  • 属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。
  • 在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:
name='Bill "HelloWorld" Gates'

完整的 HTML 参考手册

HTML 标准属性参考手册

HTML 标题


在 HTML 文档中,标题很重要。


HTML 标题


标题(Heading)是通过 <h1> - <h6> 等标签进行定义的。
<h1> 定义最大的标题。<h6> 定义最小的标题。

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

注释:浏览器会自动地在标题的前后添加空行。
注释:默认情况下,HTML 会自动地在块级元素前后添加一个额外的空行,比如段落、标题元素前后。

标题很重要

请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。

HTML 水平线

<hr />

  • <hr /> 标签在 HTML 页面中创建水平线。
  • hr元素可用于分隔内容。

提示:使用水平线 (<hr>标签) 来分隔文章中的小节是一个办法(但并不是唯一的办法)。

HTML 注释


<!-- This is a comment -->

注释:开始括号之后(左边的括号)需要紧跟一个叹号,结束括号之前(右边的括号)不需要。

HTML 提示 - 如何查看源代码


右键 --> “查看源文件”(IE)||“查看页面源代码”(Firefox)|| 检查元素(Safari)

HTML 段落


  • 段落是通过 <p> 标签定义的。
<p>This is a paragraph</p>
<p>This is another paragraph</p>

注释:浏览器会自动地在段落的前后添加空行。(<p> 是块级元素)
提示:使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br />标签代替它!但是不要用 <br /> 标签去创建列表

  • 不要忘记结束标签
  • 即使忘了使用结束标签,大多数浏览器也会正确地将 HTML 显示出来:
<p>This is a paragraph
<p>This is another paragraph?

上面的例子在大多数浏览器中都没问题,但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误。

注释:在未来的 HTML 版本中,不允许省略结束标签。
提示:通过结束标签来关闭 HTML 是一种经得起未来考验的 HTML 编写方法。清楚地标记某个元素在何处开始,并在何处结束,不论对您还是对浏览器来说,都会使代码更容易理解。

HTML 折行


如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <br />标签:

<p>This is<br />a para<br />graph with line breaks</p>
<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义,因此它没有结束标签。
您也许发现 <br> 与 <br /> 很相似。
在 XHTML、XML 以及未来的 HTML 版本中,不允许使用没有结束标签(闭合标签)的 HTML 元素。
即使 <br> 在所有浏览器中的显示都没有问题,使用 <br /> 也是更长远的保障。

HTML 输出 - 有用的提示


我们无法确定 HTML 被显示的确切效果。屏幕的大小,以及对窗口的调整都可能导致不同的结果。
对于 HTML,您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。

HTML 文本格式化


  • HTML 可定义很多供格式化输出的元素,比如粗体和斜体字。
    下面有很多例子,您可以亲自试试:
    ___

文本格式化


<html>
<body>
<b>This text is bold</b>
<br />
<strong>This text is strong</strong>
<br />
<big>This text is big</big>
<br />
<em>This text is emphasized</em>
<br />
<i>This text is italic</i>
<br />
<small>This text is small</small>
<br />
This text contains
<sub>subscript</sub>
<br />
This text contains
<sup>superscript</sup>
</body>
</html>

预格式文本


<html>

<body>

<pre>
这是
预格式文本。
它保留了      空格
和换行。
</pre>

<p>pre 标签很适合显示计算机代码:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>

</body>
</html>

“计算机输出”标签


<html>

<body>

<code>Computer code</code>
<br />
<kbd>Keyboard input</kbd>
<br />
<tt>Teletype text</tt>
<br />
<samp>Sample text</samp>
<br />
<var>Computer variable</var>
<br />

<p>
<b>注释:</b>这些标签常用于显示计算机/编程代码。
</p>

</body>
</html>

地址


<!DOCTYPE html>
<html>
<body>

<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

</body>
</html>

缩写和首字母缩写


<html>

<body>

<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>

<p>在某些浏览器中,当您把鼠标移至缩略词语上时,title 可用于展示表达的完整版本。</p>
<p>仅对于 IE 5 中的 acronym 元素有效。</p>
<p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>
</body>
</html>

文字方向


<html>

<body>

<p>
如果您的浏览器支持 bi-directional override (bdo),下一行会从右向左输出 (rtl);
</p>

<bdo dir="rtl">
Here is some Hebrew text
</bdo>

</body>
</html>

块引用


<html>

<body>

这是长的引用:
<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>

这是短的引用:
<q>
这是短的引用。
</q>

<p>
使用 blockquote 元素的话,浏览器会插入换行和外边距,而 q 元素不会有任何特殊的呈现。
</p>

</body>
</html>

删除字效果和插入字效果


<html>

<body>

<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>
<p>大多数浏览器会改写为删除文本和下划线文本。</p>
<p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>
</body>
</html>

文本格式化标签

计算机输出”标签

引用、引用和术语定义

HTML 编辑器


使用 Notepad 或 TextEdit 来编写 HTML

可以使用专业的 HTML 编辑器来编辑 HTML:

  • Adobe Dreamweaver
  • Microsoft Expression Web
  • CoffeeCup HTML Editor

不过,我们同时推荐使用文本编辑器来学习 HTML,比如 Notepad (PC) 或 TextEdit (Mac)。我们相信,使用一款简单的文本编辑器是学习 HTML 的好方法。
通过记事本,依照以下四步来创建您的第一张网页。

当您保存 HTML 文件时,既可以使用 .htm 也可以使用 .html 扩展名


HTML CS


通过使用 HTML4.0,所有的格式化代码均可移出 HTML 文档,然后移入一个独立的样式表。


  • HTML中的样式

本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化。

<html>

<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>

<body>
<h1>header 1</h1>
<p>A paragraph.</p>
</body>

</html>
  • 没有下划线的链接

本例演示如何使用样式属性做一个没有下划线的链接。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
</head>

<body>

<a href="www.baidu.com" style="text-decoration:none">
这是一个链接!
</a>

</body>

</html>

  • 链接到一个外部样式表

本例演示如何<link>标签链接到一个外部样式表。

<html>

<head>
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
</head>

<body>
<h1>我通过外部样式表进行格式化。</h1>
<p>我也一样!</p>
</body>

</html>

如何使用样式


当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表:


1.外部样式表

当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

2.内部样式表

当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

<head>

<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

3.内联样式

当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

HTML 链接


HTML 使用超级链接与网络上的另一个文档相连。
几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。


HTML 超链接(链接)


超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。
我们通过使用 <a> 标签在 HTML 中创建链接。
有两种使用 <a> 标签的方式:
1.通过使用 href 属性 - 创建指向另一个文档的链接
2.通过使用 name 属性 - 创建文档内的书签

HTML 链接语法


链接的 HTML 代码很简单。它类似这样:

<a href="url">Link text</a>
  • href 属性规定链接的目标。
  • 开始标签和结束标签之间的文字被作为超级链接来显示。
<a href="http://www.w3school.com.cn/">Visit W3School</a>

上面这行代码显示为:Visit W3School
点击这个超链接会把用户带到 W3School 的首页。

提示:"链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

HTML 链接 - target 属性


使用 Target 属性,你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档:

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

HTML 链接 - name 属性


name 属性规定锚(anchor)的名称。
您可以使用 name 属性创建 HTML 页面中的书签。
书签不会以任何特殊方式显示,它对读者是不可见的。
当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

命名锚的语法:

<a name="label">锚(显示在页面上的文本)</a>

提示:锚的名称可以是任何你喜欢的名字。
提示:您可以使用 id 属性来替代 name 属性,命名锚同样有效。

实例

1.首先,我们在 HTML 文档中对锚进行命名(创建一个书签):

<a name="tips">基本的注意事项 - 有用的提示</a>

2.然后,我们在同一个文档中创建指向该锚的链接:

<a href="#tips">有用的提示</a>

3.您也可以在其他页面中创建指向该锚的链接:

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

在上面的代码中,我们将 # 符号和锚名称添加到 URL 的末端,就可以直接链接到 tips 这个命名锚了。

有用的提示

具体效果就是点击“有用的提示”跳转到相应位置,如同书签

基本的注意事项 - 有用的提示:


注释:请始终将正斜杠添加到子文件夹。假如这样书写链接:href="http://www.w3school.com.cn/html"
,就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href="http://www.w3school.com.cn/html/"

提示:命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚,然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科,您会发现其中几乎每个词条都采用这样的导航方式。

提示:假如浏览器找不到已定义的命名锚,那么就会定位到文档的顶端。不会有错误发生。

实例


  • 创建超级链接
<html>
<body>
<p>
<p><a href="http://www.baidu.com/">打开百度</a> 百度</p>
</body>
</html>
  • 将图像作为链接
<html>
<body>
<p>
您也可以使用图像来作链接:
<a href="http://scimg.jb51.net/allimg/160518/14-16051Q51020515.jpg">
<img border="0" src="http://scimg.jb51.net/allimg/160518/14-16051PZ1525c.jpg" />
</a>
</p>
</body>
</html>
  • 在新的浏览器窗口打开链接
<html>
<body>
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
<p>如果把链接的 target 属性设置为 "_blank",该链接会在新窗口中打开。
</p>
</body>
</html>
  • 链接到同一个页面的不同位置
<html>
<body>

<p>被锁在框架中了吗?</p> 
<a href="/index.html"
target="_top">请点击这里!</a> 

</body>
</html>
  • 创建电子邮件链接
<html>
<body>
<p>
这是另一个 mailto 链接:
<a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件!</a>
</p>
<p>
<b>注意:</b>应该使用 %20 来替换单词之间的空格,这样浏览器就可以正确地显示文本了。
</p>
</body>
</html>


<html>

<body>

<p>
这是邮件链接:
<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
</p>

<p>
<b>注意:</b>应该使用 %20 来替换单词之间的空格,这样浏览器就可以正确地显示文本了。
</p>

</body>
</html>

HTML 图像


图像标签(<img>)和源属性(src


在 HTML 中,图像由 <img> 标签定义。
<img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。
要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址。
定义图像的语法是:
<img src="url" />
  • URL 指存储图像的位置。如果名为 "boat.gif" 的图像位于 www.w3school.com.cn 的 images 目录中,那么其 URL 为 http://www.w3school.com.cn/images/boat.gif
  • 浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间,那么浏览器会首先显示第一个段落,然后显示图片,最后显示第二段。

替换文本属性(Alt)


  • alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
<img src="boat.gif" alt="Big Boat">

在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。

基本的注意事项 - 有用的提示:


假如某个 HTML 文件包含十个图像,那么为了正确显示这个页面,需要加载 11 个文件。加载图片是需要时间的,所以我们的建议是:慎用图片。

实例


  • 插入图像
<!DOCTYPE HTML>
<html>

<body>

<p>
一幅图像:
<img src="/i/eg_mouse.jpg" width="128" height="128" />
</p>

<p>
一幅动画图像:
<img src="/i/eg_cute.gif" width="50" height="50" />
</p>
<p>请注意,插入动画图像的语法与插入普通图像的语法没有区别。</p>
</body>
</html>
  • 从不同的位置插入图片
来自另一个文件夹的图像:
<img src="/i/ct_netscape.jpg" />
来自 W3School.com.cn 的图像:
<img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" />
  • 背景图片
<html>

<body background="/i/eg_background.jpg">

<h3>图像背景</h3>
<p>gif 和 jpg 文件均可用作 HTML 背景。</p>
<p>如果图像小于页面,图像会进行重复。</p>
</body>
</html>
  • 排列图片
<html>

<body>

<h2>未设置对齐方式的图像:</h2>
<p>图像 <img src ="/i/eg_cute.gif"> 在文本中</p>
<h2>已设置对齐方式的图像:</h2>
<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>
<p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p>
<p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p>
<p>请注意,bottom 对齐方式是默认的对齐方式。</p>
</body>
</html>

  • 浮动图像
<html>

<body>

<p>
<img src ="/i/eg_cute.gif" align ="left"> 
带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
</p>

<p>
<img src ="/i/eg_cute.gif" align ="right"> 
带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
</p>

</body>
</html>

  • 调整图像尺寸
<img src="/i/eg_mouse.jpg" width="50" height="50">

- 为图片显示替换文本

?```html
<p>仅支持文本的浏览器无法显示图像,仅仅能够显示在图像的 "alt" 属性中指定的文本。在这里,"alt" 的文本是“向左转”。</p>
<p>请注意,如果您把鼠标指针移动到图像上,大多数浏览器会显示 "alt" 文本。</p>
<img src="/i/eg_goleft.gif" alt="向左转" />

<p>如果无法显示图像,将显示 "alt" 属性中的文本:</p>
  • 创建图像映射
<html>
<body>

<p>请点击图像上的星球,把它们放大。</p>
<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />

<map name="planetmap" id="planetmap">

<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />

<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />

<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />

</map>

<p><b>注释:</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性(根据浏览器),所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>
</body>
</html>

  • 把图像转换为图像映射
<!DOCTYPE html>
<html>

<body>

<p>请把鼠标移动到图像上,看一下状态栏的坐标如何变化。</p>
<a href="/example/html/html_ismap.html">
<img src="/i/eg_planets.jpg" ismap />
</a>

</body>
</html>

HTML 表格

你可以使用 HTML 创建表格。

表格


<table border="1"><th>说明</th><tr><tr>
表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

表格和边框属性


如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。
使用边框属性来显示一个带有边框的表格:

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

表格的表头


表格的表头使用 <th>标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本:

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

表格中的空单元格


在一些浏览器中,没有内容的表格单元显示得不太好。如果某个单元格是空的(没有内容),浏览器可能无法显示出这个单元格的边框。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td></td>
<td>row 2, cell 2</td>
</tr>
</table>

注意:这个空的单元格的边框没有被显示出来。为了避免这种情况,在空单元格中添加一个空格占位符,就可以将边框显示出来。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>row 2, cell 2</td>
</tr>
</table>

实例


  • 没有边框的表格
<h4>这个表格没有边框:</h4>
<table>
/* 或则是这句<table border="0"> */
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

  • 表格中的表头(Heading)

<html>
<body>
<h4>表头:</h4>
<table border="1">
<tr>
<th>姓名</th>
<th>电话</th>
<th>电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>垂直的表头:</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>电话</th>
<td>555 77 854</td>
</tr>
<tr>
<th>电话</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>

  • 空单元格
<html>
<body>
<table border="1">
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td></td>
<td>Some text</td>
</tr>
</table>
<p>正如您看到的,其中一个单元没有边框。这是因为它是空的。在该单元中插入一个空格后,仍然没有边框。</p>
<p>我们的技巧是在单元中插入一个 no-breaking 空格。</p>
<p>no-breaking 空格是一个字符实体。如果您不清楚什么是字符实体,请阅读关于字符实体的章节。</p>
<p>no-breaking 空格由和号开始 ("&"),然后是字符"nbsp",并以分号结尾(";")。</p>
</body>
</html>

  • 带有标题的表格
<html>

<body>

<h4>这个表格有一个标题,以及粗边框:</h4>
<table border="6">
<caption>我的标题</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>

  • 跨行或跨列的表格单元格
<html>

<body>

<h4>横跨两列的单元格:</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>横跨两行的单元格:</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>

  • 表格内的标签
<html>

<body>

<table border="1">
<tr>
<td>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</td>
<td>这个单元包含一个表格:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>这个单元包含一个列表:
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>菠萝</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>

  • 单元格边距(Cell padding)
<html>

<body>

<h4>没有 cellpadding:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>   
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>带有 cellpadding:</h4>
<table border="1" 
cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>   
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>

  • 单元格间距(Cell spacing)
<html>

<body>

<h4>没有 cellspacing:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>   
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>带有 cellspacing:</h4>
<table border="1" 
cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>   
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>

  • 向表格添加背景颜色或背景图像
<h4>背景颜色:</h4>
<table border="1" 
bgcolor="red">
<h4>背景图像:</h4>
<table border="1" 
background="/i/eg_bg_07.gif">
  • 向表格单元添加背景颜色或者背景图像
<td bgcolor="red">First</td>
<td background="/i/eg_bg_07.gif">  Second</td>
  • 在表格单元中排列内容
<html>

<body>

<table width="400" border="1">
<tr>
<th align="left">消费项目....</th>
<th align="right">一月</th>
<th align="right">二月</th>
</tr>
<tr>
<td align="left">衣服</td>
<td align="right">$241.10</td>
<td align="right">$50.20</td>
</tr>
<tr>
<td align="left">化妆品</td>
<td align="right">$30.00</td>
<td align="right">$44.45</td>
</tr>
<tr>
<td align="left">食物</td>
<td align="right">$730.40</td>
<td align="right">$650.00</td>
</tr>
<tr>
<th align="left">总计</th>
<th align="right">$1001.50</th>
<th align="right">$744.65</th>
</tr>
</table>
</body>
</html>

  • 框架(frame)属性
<html>
<body>

<p><b>注释:</b>frame 属性无法在 Internet Explorer 中正确地显示。</p>
<p>Table with frame="box":</p>
<table frame="box">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with frame="above":</p>
<table frame="above">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with frame="below":</p>
<table frame="below">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with frame="hsides":</p>
<table frame="hsides">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with frame="vsides":</p>
<table frame="vsides">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</body>
</html>


表格标签

HTML 列表


HTML 支持有序、无序和定义列表


无序列表


无序列表始于 <ul> 标签。每个列表项始于<li>

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

有序列表


有序列表始于<ol> 标签。每个列表项始于<li> 标签。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

定义列表


自定义列表不仅仅是一列项目,而是项目及其注释的组合。
自定义列表以<dl> 标签开始。每个自定义列表项以<dt> 开始。每个自定义列表项的定义以<dd> 开始。

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

列表标签

<ol>    定义有序列表。
<ul>    定义无序列表。
<li>    定义列表项。
<dl>    定义定义列表。
<dt>    定义定义项目。
<dd>    定义定义的描述。
<dir>     已废弃。使用 <ul> 代替它。
<menu>    已废弃。使用 <ul> 代替它。

<table border="1"><th>举例</th><tr><tr>

  • 不同类型的无序列表
<ul type="disc"> 实心黑点
<ul type="circle"> 圆圈
<ul type="square">实心方块
  • 不同类型的有序列表
<ol></ol>     数字列表
<ol type="A"> 字母列表
<ol type="a"> 小写字母
<ol type="I"> 罗马字母
<ol type="i"> 小写罗马
  • 嵌套
<h4>一个嵌套列表:</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶
<ul>
<li>中国茶</li>
<li>非洲茶</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
  • 定义列表
<h2>一个定义列表:</h2>
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

HTML 块


HTML <div><span>

可以通过<div><span>将 HTML 元素组合起来。

HTML 块元素

大多数 HTML 元素被定义为块级元素或内联元素。
编者注:“块级元素”译为 block level element,“内联元素”译为 inline element。
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
例子:<h1>, <p>, <ul>, <table>

HTML 内联元素


内联元素在显示时通常不会以新行开始。
例子:<b>, <td>, <a>, <img>

HTML <div> 元素


HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。
如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

HTML <span> 元素


HTML <span> 元素是内联元素,可用作文本的容器。
<span> 元素也没有特定的含义。
当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。

HTML 分组标签


标签       描述
<div>     定义文档中的分区或节(division/section)。
<span>    定义 span,用来组合文档中的行内元素。

HTML 布局


  • 网页布局对改善网站的外观非常重要。
  • 请慎重设计您的网页布局。

网站布局


  • 大多数网站会把内容安排到多个列中(就像杂志或报纸那样)。
  • 可以使用 <div> 或者<table> 元素来创建多列。CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观。

    提示:即使可以使用 HTML 表格来创建漂亮的布局,但设计表格的目的是呈现表格化数据 - 表格不是布局工具!

HTML 布局 - 使用 <div> 元素


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#container{width:500px}
div#header {background-color:#99bbbb;}
div#menu {background-color:#ffff99;height:200px;width:150px;float:left;}
div#content {background-color:#EEEEEE;height:200px;width:350px;float:left;}
div#footer {background-color:#99bbbb;clear:both;text-align:center;}
h1 {margin-bottom:0;}
h2 {margin-bottom:0;font-size:18px;}
ul {margin:0;}
li {list-style:none;}
</style>
</head>

<body>

<div id="container">

<div id="header">
<h1>Main Title of Web Page</h1>
</div>

<div id="menu">
<h2>Menu</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>

<div id="content">Content goes here</div>
<div id="footer">Copyright W3School.com.cn</div>
</div>

</body>
</html>

HTML 布局 - 使用表格


<!DOCTYPE html>
<html>
<body>

<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#99bbbb;">
<h1>Main Title of Web Page</h1>
</td>
</tr>

<tr valign="top">
<td style="background-color:#ffff99;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
Content goes here</td>
</tr>

<tr>
<td colspan="2" style="background-color:#99bbbb;text-align:center;">
Copyright W3School.com.cn</td>
</tr>
</table>

</body>
</html>

HTML 布局 - 有用的提示


提示:使用 CSS 最大的好处是,如果把 CSS 代码存放到外部样式表中,那么站点会更易于维护。通过编辑单一的文件,就可以改变所有页面的布局。
提示:由于创建高级的布局非常耗时,使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板(您可以使用这些预先构建好的网站布局,并优化它们)。

HTML 布局标签

标签    描述
<div>    定义文档中的分区或节(division/section)。
<span>    定义 span,用来组合文档中的行内元素。

HTML 表单和输入


HTML 表单用于搜集不同类型的用户输入。


  • 表单是一个包含表单元素的区域。
  • 表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。
  • 表单使用表单标签(<form>)定义。
<form>
...
input 元素
...
</form>

输入


多数情况下被用到的表单标签是输入标签(<input>)。输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:

  • 文本域(Text Fields)
  • 键入字母、数字等内容时,就会用到文本域
<form>
First name: 
<input type="text" name="firstname" />
<br />
Last name: 
<input type="text" name="lastname" />
</form>

注意,表单本身并不可见。同时,在大多数浏览器中,文本域的缺省宽度是20个字符。

  • 单选按钮(Radio Buttons)
  • 从若干给定的的选择中选取其一时,就会用到单选框
<form>
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female
</form>

注意,只能从中选取其一。

  • 复选框(Checkboxes)
  • 从若干给定的选择中选取一个或若干选项时,就会用到复选框
<form>
<input type="checkbox" name="bike" />
I have a bike
<br />
<input type="checkbox" name="car" />
I have a car
</form>
I have a bike
I have a car

表单的动作属性(Action)和确认按钮


  • 当用户单击确认按钮时,表单的内容会被传送到另一个文件。
  • 表单的动作属性定义了目的文件的文件名。
  • 由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
<form name="input" action="html_form_action.asp" method="get">
Username: 
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

假如您在上面的文本框内键入几个字母,然后点击确认按钮,那么输入数据会传送到 "html_form_action.asp" 的页面。该页面将显示出输入的结果。

举例


  • 文本域 (Text field)
<html>
<body>
<form>
用户:
<input type="text" name="user">
<br />
密码:
<input type="password" name="password">
</form>
<p>
请注意,当您在密码域中键入字符时,浏览器将使用项目符号来代替这些字符。
</p>
</body>
</html>
  • 简单的下拉列表
<html>
<body>
<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
<html>
<body>
<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
  • 文本域(Textarea)
<html>
<body>

<p>
This example cannot be edited
because our editor uses a textarea
for input,
and your browser does not allow
a textarea inside a textarea.
</p>

<textarea rows="10" cols="30">
The cat was playing in the garden.
  • 创建按钮
<input type="button" value="Hello world!">

HTML 框架


通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。


框架

通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。
使用框架的坏处:

  • 开发人员必须同时跟踪更多的HTML文档
  • 很难打印整张页面

框架结构标签()

  • 框架结构标签()定义如何将窗口分割为框架
  • 每个 frameset 定义了一系列行或列
  • rows/columns 的值规定了每行或每列占据屏幕的面积

    编者注:frameset 标签也被某些文章和书籍译为框架集。


框架标签(Frame)

Frame 标签定义了放置在每个框架中的 HTML 文档。

在下面的这个例子中,我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中,而 HTML 文档 "frame_b.htm" 被置于第二个列中:

<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>

基本的注意事项 - 有用的提示:


假如一个框架有可见边框,用户可以拖动边框来改变它的大小。为了避免这种情况发生,可以在 标签中加入:noresize="noresize"。
为不支持框架的浏览器添加 <noframes>标签。

重要提示:不能将 <body></body> 标签与 <frameset></frameset>标签同时使用!不过,假如你添加包含一段文本的 <noframes>标签,就必须将这段文字嵌套于<body></body>标签内。(在下面的第一个实例中,可以查看它是如何实现的。)


实例


  • 如何使用 <noframes>标签(垂直)
<html>
<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
<noframes>
<body>您的浏览器无法处理框架!</body>
</noframes>

</frameset>

</html>

  • 水平
<html>

<frameset rows="25%,50%,25%">

<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">

</frameset>

</html>

  • 混合框架
<html>

<frameset rows="50%,50%">

<frame src="/example/html/frame_a.html">

<frameset cols="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>

</frameset>

</html>

  • 含有 noresize="noresize" 属性的框架结构
<html>

<frameset cols="50%,*,25%">
<frame src="/example/html/frame_a.html" noresize="noresize" />
<frame src="/example/html/frame_b.html" />
<frame src="/example/html/frame_c.html" />
</frameset>

</html>

  • 导航框架
<html>

<frameset cols="120,*">

<frame src="/example/html/html_contents.html">
<frame src="/example/html/frame_a.html" name="showframe">

</frameset>

</html>

  • 内联框架
<html>

<body>

<iframe src="/i/eg_landscape.jpg"></iframe>
<p>一些老的浏览器不支持 iframe。</p>
<p>如果得不到支持,iframe 是不可见的。</p>
</body>
</html>

  • 跳转至框架内的一个指定的节
  • 使用框架导航跳转至指定的节

HTML Iframe


iframe 用于在网页内显示网页。


添加 iframe 的语法


<iframe src="URL"></iframe>

URL 指向隔离页面的位置。

Iframe - 设置高度和宽度


height 和 width 属性用于规定 iframe 的高度和宽度。
属性值的默认单位是像素,但也可以用百分比来设定(比如 "80%")。

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

Iframe - 删除边框


frameborder 属性规定是否显示 iframe 周围的边框。

设置属性值为 "0" 就可以移除边框:


<iframe src="demo_iframe.htm" frameborder="0"></iframe>

使用 iframe 作为链接的目标

iframe 可用作链接的目标(target)。

链接的 target 属性必须引用 iframe 的 name 属性:

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

HTML 背景


背景(Backgrounds)


<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。

背景颜色(Bgcolor)


背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。

黑色
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

背景(Background)


背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口,那么图像将在整个浏览器窗口进行复制

<body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">

URL可以是相对地址,如第一行代码。也可以使绝对地址,如第二行代码。

提示:如果你打算使用背景图片,你需要紧记一下几点:

  • 背景图像是否增加了页面的加载时间。小贴士:图像文件不应超过 10k。
  • 背景图像是否与页面中的其他图象搭配良好。
  • 背景图像是否与页面中的文字颜色搭配良好。
  • 图像在页面中平铺后,看上去还可以吗?
  • 对文字的注意力被背景图像喧宾夺主了吗?

基本的注意事项 - 有用的提示:

<body> 标签中的背景颜色(bgcolor)、背景(background)和文本(text)属性在最新的 HTML 标准(HTML4 和 XHTML)中已被废弃。W3C 在他们的推荐标准中已删除这些属性。
应该使用层叠样式表(CSS)来定义 HTML 元素的布局和显示属性。

HTML 颜色


颜色由红色、绿色、蓝色混合而成。


颜色值

颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。
每种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF)。
这个表格给出了由三种颜色混合而成的具体效果:

颜色名

大多数的浏览器都支持颜色名集合。

提示:仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是:aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。

如果需要使用其它的颜色,需要使用十六进制的颜色值。


Web安全色

数年以前,当大多数计算机仅支持 256 种颜色的时候,一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是,微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色(双方大约各使用 20 种)。
我们不确定如今这么做的意义有多大,因为越来越多的计算机有能力处理数百万种颜色,不过做选择还是你自己。

216 跨平台色

最初,216 跨平台 web 安全色被用来确保:当计算机使用 256 色调色板时,所有的计算机能够正确地显示所有的颜色。

颜色名

颜色名和文字搭配对比

HTML 高级教程

HTML 文档类型


<!DOCTYPE> 声明帮助浏览器正确地显示网页。


<!DOCTYPE> 声明

Web 世界中存在许多不同的文档。只有了解文档的类型,浏览器才能正确地显示文档。
HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。
<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息(声明),即 HTML 是用什么版本编写的。
提示:W3School 即将升级为最新的 HTML5 文档类型。

带有 HTML5 DOCTYPE 的 HTML 文档:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

HTML 版本

从 Web 诞生早期至今,已经发展出多个 HTML 版本:

HTML    1991
HTML+    1993
HTML 2.0    1995
HTML 3.2    1997
HTML 4.01    1999
XHTML 1.0    2000
HTML5    2012
XHTML5    2013

常用的声明

  • HTML5
<!DOCTYPE html>
  • HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
  • XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML 头部元素


HTML <head> 元素


<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。
以下标签都可以添加到 head 部分:<title>、<base>、<link>、<meta>、<script> 以及 <style>。

HTML <title> 元素

<title> 标签定义文档的标题

  • 定义浏览器工具栏中的标题
  • 提供页面被添加到收藏夹时显示的标题
  • 显示在搜索引擎结果中的页面标题
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

HTML <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 元素。

HTML 头部元素

标签       描述
<head>     定义关于文档的信息。
<title>    定义文档标题。
<base>     定义页面上所有链接的默认地址或默认目标。
<link>     定义文档与外部资源之间的关系。
<meta>     定义关于 HTML 文档的元数据。
<script>   定义客户端脚本。
<style>    定义文档的样式信息。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />
</head>

<body>
<p>
对不起。我们已经搬家了。您的 URL 是 <a href="http://www.w3school.com.cn">http://www.w3school.com.cn</a>
</p>

<p>您将在 5 秒内被重定向到新的地址。</p>

<p>如果超过 5 秒后您仍然看到本消息,请点击上面的链接。</p>

</body>
</html>

HTML 脚本


JavaScript 使 HTML 页面具有更强的动态和交互性。。


HTML script 元素

<script> 标签用于定义客户端脚本,比如 JavaScript。
script 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。
下面的脚本会向浏览器输出“Hello World!”:
<script type="text/javascript">
document.write("Hello World!")
</script>

<noscript> 标签

<noscript> 标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。
noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
只有在浏览器不支持脚本或者禁用脚本时,才会显示 noscript 元素中的内容:
<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>

如何应付老式的浏览器

如果浏览器压根没法识别 <script> 标签,那么 <script> 标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生,你应该将脚本隐藏在注释标签当中。那些老的浏览器(无法识别 <script> 标签的浏览器)将忽略这些注释,所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们,即使代码被嵌套在注释标签内。
实例
JavaScript:
<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
VBScript:
<script type="text/vbscript">
<!--
document.write("Hello World!")
'-->
</script>
标签          描述
<script>      定义客户端脚本。
<noscript>    为不支持客户端脚本的浏览器定义替代内容。

  • 插入一段脚本
<html>

<body>

<script type="text/javascript">
document.write("<h1>Hello World!</h1>")
</script> 

</body>

</html>
  • 使用 <noscript> 标签(如何应对不支持脚本或禁用脚本的浏览器)
<!DOCTYPE html>
<html>
<body>

<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>

<p>不支持 JavaScript 的浏览器将显示 noscript 元素中的文本。</p>

</body>
</html>

HTML 字符实体


HTML 实体


  • 在 HTML 中,某些字符是预留的。
  • 在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。
  • 如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)。
    字符实体类似这样:
&entity_name;

或者

&#entity_number;

如需显示小于号,我们必须这样写:&lt; 或 &#60;

提示:使用实体名而不是数字的好处是,名称易于记忆。不过坏处是,浏览器也许并不支持所有实体名称(对实体数字的支持却很好)。


不间断空格(non-breaking space)

HTML 中的常用字符实体是不间断空格(&nbsp;)。
浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格,在显示该页面之前,浏览器会删除它们中的 9 个。如需在页面中增加空格的数量,您需要使用 &nbsp; 字符实体。

HTML 实例示例

<!DOCTYPE html>
<html>
<body>

<h2>字符实体</h2>
<p>&X;</p>
<p>用实体数字(比如"#174")或者实体名称(比如 "pound")替代 "X",然后查看结果。</p>
</body>
</html>

HTML 中有用的字符实体

注释:实体名称对大小写敏感!

显示结果 描述 实体名称 实体编号
空格    &nbsp;    &#160;
<     小于号  &lt;    &#60;
>     大于号  &gt;    &#62;
&     和号    &amp;    &#38;
"     引号    &quot;    &#34;
'     撇号    &apos; (IE不支持)    &#39;
¢     分     &cent;    &#162;
£     镑      &pound;    &#163;
¥     日圆    &yen;    &#165;

			   

原文链接:https://www.cnblogs.com/chao8888/p/11417448.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:纯CSS3制作的20种loading动效

下一篇:选择CSS常用选择器的方法