前言
- 本系列文章主要是基于W3school这个学习网站来总结的，之所以会自己总结一番，一来是因为网站中的实例效果，需要点击一下“尝试一下”这个按钮才可以看到，对于学习来说，其实效率很低，而且如果我要复习的话，只需要打开这篇文章在电脑屏幕左边，再打开在线编译器在屏幕右边，一路将例子敲下来即可，而不用每次都点击“尝试一下”这个按钮，来查看代码显示效果。
一、HTML简介
- HTML是用来描述网页的一种语言。
- HTML 指的是超文本标记语言（Hyper Text Markup Language）
- HTML 不是一种编程语言，而是一种标记语言（markup language），标记语言是一套标记标签（markup tag）
- HTML 使用标记标签来描述网页。
HTML标签
- HTML标记标签通常被称为HTML标签，HTML标签是HTML语言中最基本的单位，HTML标签是HTML（标准通用标记语言下的一个应用）最重要的组成部分。HTML标签的大小写，例如“主体”<body>和<BODY>表示的意思是一样的，推荐使用小写。
- 由尖括号包围的关键词，比如<html>
- 通常是成对出现的，比如<div>和</div>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签。
- 开始和结束标签也称为开放标签和闭合标签。
- 也有单独呈现的标签，比如<img src="周杰伦.jpg"/>等。
- 一般成对出现的标签，其内容在两个标签中间。单独呈现的标签，则在标签属性中赋值。如<h1>标题</h1>和<input type="text" value="按钮"/>
- 网页的内容需在<html>标签中，标题、字符格式、语言、兼容性、关键字、描述等信息显示在<head>标签中，而网页需要展示的内容需要嵌套在<body>标签中。某些时候不按标准书写代码虽然可以正常显示，但是作为职业素养，还是应该养成正规编写习惯。
HTML文档 = 网页
- HTML文档描述网页
- HTML文档包含HTML标签和纯文本
- HTML文档也被称为网页
- Web浏览器的作用是读取HTML文档，并以网页的形式显示出它们，浏览器不会显示HTML标签，而是使用标签来解释页面的内容。
实例
<html>
<body>
<h1>我的第一个标题。</h1>
<p>我的第一个段落。</p>
</body>
</html>
- 例子解释
- <html>与</html>之间的文本描述网页，<html>元素定义了整个HTML文档，这个元素拥有一个开始标签<html>，以及一个结束标签</html>，元素内容是另一个HTML元素（body元素）。
- <body>与</body>之间的文本是可见的页面内容，这个元素拥有一个开始标签<body>，以及一个结束标签</body>，元素内容是另外两个HTML元素（h1元素和p元素）。
- <h1>与</h1>之间的文本被显示为标题，这个元素拥有一个开始标签<h1>，以及一个结束标签</h1>，元素内容是：我的第一个标题。
- <p>与</p>之间的文本被显示为段落，这个元素拥有一个开始标签<p>，以及一个结束标签</p>，元素内容是：我的第一个段落。
二、HTML编辑器
- Notepad
- 记事本
- 启动记事本
- 使用记事本来编辑HTML
- 选择另存为，保存，然后将文件后缀更改为.html
- 在浏览器中运行这个HTML文件，直接鼠标拖动这个文件至浏览器页面即可。
三、四个最常使用的标签
HTML标题
- 实例
<html>
<body>
<h1>这是标题1</h1>
<h2>这是标题2</h2>
<h3>这是标题3</h3>
<h4>这是标题4</h4>
<h5>这是标题5</h5>
<h6>这是标题6</h6>
<h7>标题元素范围是h1到h6之间，所有h7不会显示加粗的标题效果</h7>
</body>
</html>
- HTML标题（Heading）是通过<h1>到<h6>等标签进行定义的，<h1>定义最大的标题，<h6>定义最小的标题。
- 浏览器会自动地在标题的前后添加空行，默认情况下，HTML会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
- 标题很重要
- 请确保将HTML heading标签只用于标题，不要仅仅是为了产生粗体或大号的文本而使用标题。
- 搜索引擎使用标题为你的网页的结构和内容编制索引。
- 因为用户可以通过标题来快速浏览你的网页，所以用标题来呈现文档结构是很重要的。
- 应该将h1用作主标题（最重要），其后是h2（次重要），再其次是h3，以此类推。
- HTML水平线
-
标签在HTMl页面中创建水平线。hr元素可用于分隔内容。 - 实例
-
<html>
<body>
<h2>hr 标签定义水平线</h2>
<hr/>
<p>这是段落1</p>
<hr/>
<p>这是段落2</p>
<hr/>
</body>
</html>
- HTML注释
- 可以将注释插入HTML代码中，这样可以提高其可读性，使代码更易被人理解，浏览器会忽略注释。
- 实例
<html>
<body>
<!--这是一段注释。注释不会在浏览器中显示。-->
<p>这是一段普通的段落。</p>
</body>
</html>
- HTML提示——如何查看源代码
- 单击右键，选择“查看源文件”（IE）或“查看页面源代码”（Firefox），其他浏览器的做法也是类似的，这么做会打开一个包含页面HTML代码的窗口。
HTML段落
- 实例
<html>
<body>
<p>这是段落1</p>
<p>这是段落2</p>
<p>这是段落3</p>
<p>段落元素由 p 标签定义</p>
</body>
</html>
- HTML段落是通过<p>标签进行定义的。
- 浏览器会自动地在段落的前后添加空行。（<p>是块级元素）
- 使用空的段落标记<p></p>去插入一个空行是个坏习惯，用
标签代替它。 - 不要忘记结束标签，即使忘了使用结束标签，大多数浏览器也会正确地将HTML显示出来。
- 实例
<html>
<body>
<p>This is a paragraph.
<p>This is a paragraph.
<p>This is a paragraph.
<p>不要忘记关闭你的 HTML 标签！</p>
</body>
</html>
- HTML拆行
- 如果你希望在不产生一个新段落的情况下进行换行（新行），就使用<br />标签。
- <br />元素是一个空的HTML元素，由于关闭标签没有任何意义，因此它没有结束标签。
- <br >还是<br />，在XHTML、XML以及未来的HTML版本中不允许使用没有结束标签（闭合标签）的HTML元素，即使<br >在所有浏览器中的显示都没有问题，使用<br />也是更长远的保障。
- 实例
<html>
<body>
<p>
To break<br/>
lines<br/>
in a<br/>
paragraph,<br/>
use the br tag.
</p>
</body>
</html>
- HTML输出——有用的提示
- 我们无法确定HTML被显示的确切效果，屏幕的大小，以及对窗口的调整都可能导致不同的结果。
- 对于HTML，我们无法通过在HTML代码中添加额外的空格和换行来改变输出的效果。
- 当显示页面时，浏览器会移除源代码中多余的空格和空行，所有连续的空格或空行都 会被算作一个空格，需要注意的是，HTML代码中的所有连续的空格（空行）也被显示为一个空格。
- 实例
<html>
<body>
<h1>春晓</h1>
<p>
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
</p>
<p>注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。</p>
</body>
</html>
HTML链接
- HTML链接是通过<a>标签进行定义的，并且在href属性中指定链接的地址。
- 实例
<html>
<body>
<a href="http://www.w3school.com.cn">w3school是一个非常好的学习Web技术的网站。</a>
</body>
</html>
HTML图像
- HTML图像是通过<img>标签进行定义的，图像的名称和尺寸是以属性的形式提供的。
- 如果是本地的话，后面加上图片的绝对路径或者相对路径。
- 如果图片源来自网上，那必须使用绝对路径。
<html>
<body>
<img src="https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=1da22b034936acaf59b59efa4ce9a128/279759ee3d6d55fb64b61e1c6f224f4a20a4dd9c.jpg" width="480" height="320" />
</body>
</html>
HTML元素
- HTML文档是由HTML元素定义的，HTML元素指的是从开始（start tag）到结束标签（end tag）的所有代码。开始标签常被称为开放标签（opening tag），结束标签常被称为闭合标签（closing tag）
| 开始标签 | 元素内容 | 结束标签 |
|---|---|---|
| <p> | This is a paragraph | </p> |
| <a href="default.html"> | This is a link | </a> |
| <br /> |
HTML元素语法
- HTML元素以开始标签起始
- HTML元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些HTML元素具有空内容（empty content）
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数HTML元素可拥有属性
嵌套的HTML元素
- 大多数HTML元素可以嵌套（可以包含其他HTML元素）
- HTML文档由嵌套的HTML元素构成
不要忘记结束标签
- 即使你忘记了使用结束标签，大多数浏览器也会正确地显示HTML，但是不要依赖这种做法，忘记使用结束标签会产生不可预料的结果或者错误，未来的HTML版本不允许省略结束标签。
空的HTML元素
- 没有内容的HTML元素被称为空元素，空元素是在开始标签中关闭的。
- 比如
就是没有关闭标签的空元素（
标签定义换行） - 在XHTML、XML以及未来版本的HTML中，所有元素都必须被关闭。
- 在开始标签中添加斜杠，比如<br />，是关闭空元素的正确方法，HTML、XHTML和XML都接受这种方式。
- 即使
在所有浏览器中都是有效的，但使用<br />其实是更长远的保障。
HTML属性
- HTML标签可以拥有属性，属性提供了有关HTML元素的更多信息。
- 属性总是以名称/值对的形式出现，比如name="value"。
- 属性总是在HTML元素的开始标签中规定。
- 属性实例，HTML链接由<a>标签定义，链接的地址在href属性中指定。
<html>
<body>
<a href="http://www.w3school.com.cn">w3school是一个非常好的学习Web技术的网站。</a>
</body>
</html>
- 更多属性实例
- 属性例子1：居中排列标题
<html>
<body>
<h1 align="center">This is heading 1</h1>
<p>上面的标题在页面中进行了居中排列。</p>
</body>
</html>
- 属性例子2：背景颜色
<html>
<body bgcolor="green">
<h2>请看：改变了颜色的背景。</h2>
</body>
</html>
- 属性例子3：
<table>定义HTML表格。
- 属性例子3：
-
HTML提示：使用小写属性
- 属性和属性值对大小写不敏感。不过万维网联盟在其HTML4推荐标准中推荐小写的属性和属性值。而新版本的（X）HTML要求使用小写属心。
-
始终为属性值加引号
- 属性值应该始终被包括在引号内，双引号是最常使用的，不过使用单引号也没有问题，在某些个别情况下，比如属性值本身就含有双引号，那么这时就必须使用单引号，例如：
name='Bill "Helloworld" Gates'
HTML样式
- 实例
<html>
<body style="background-color:PowderBlue;">
<h1>Look! Style and Colors</h1>
<p style="font-family:verdana;color:Blue">
This text is in Verdana and green
</p>
<p style="font-family:times;color:green">
This text is in Times and green
</p>
<p style="font-size:30px">
This text is 30 pixels high
</p>
</body>
</html>
- style 属性用于改变HTML元素的样式。
- style 属性的作用：
- 提供了一种改变所有HTML元素的样式的通用方法。
- 样式是HTML4引入的，它是一种新的首选的改变HTML元素样式的方式，通过HTML样式，能够通过使用style属性直接将样式添加到HTML元素，或者间接地在独立的样式表中（CSS文件）进行定义。
- 不赞成使用的标签和属性
- 在HTML4中，有若干的标签和属性是被废弃的，被废弃的意思是在未来版本的HTM和XHTML中将不支持这些标签和属性。
- 应该避免使用以下这些标签和属性，并使用样式代替。
| 标签 | 描述 |
|---|---|
| <center> | 定义居中的内容 |
| <font>和<basefont> | 定义HTML字体 |
| <s><strike> | 定义删除线文本 |
| <u> | 定义下划线文本 |
| 属性 | 描述 |
|---|---|
| align | 定义文本的对齐方式 |
| bgcolor | 定义背景颜色 |
| color | 定义文本颜色 |
- HTML样式实例——背景颜色
- background-color 属性为元素定义了背景颜色。
<html>
<body style="background-color:green">
<h2 style="background-color:red">
This is a heading
</h2>
<p style="background-color:yellow">
This is a paragraph
</p>
</body>
</html>
- HTML样式实例——字体、颜色和尺寸
- font-family、color以及font-size属性分别定义元素中文本的字体系列、颜色和字体尺寸。
<html>
<body>
<h1 style="font-family:times">A heading</h1>
<p style="font-family:verdana;color:red;font-size:20px">
A paragraph
</p>
</body>
</html>
- HTML样式实例——文本对齐
- text-align属性规定了元素中文本的水平对齐方式。
<html>
<body>
<h1 style="text-align:center">
This is a heading
</h1>
<p>上面的标题相对于页面居中对齐</p>
</body>
</html>
HTML格式化
HTML可以定义很多供格式化输出的元素，比如粗体和斜体字。
文本格式化标签
| 标签 | 描述 |
|---|---|
| <b> | 定义粗体文字 |
| <big> | 定义大号字 |
| <em> | 定义着重文字 |
| <i> | 定义斜体文字 |
| <small> | 定义小号字 |
| <strong> | 定义加重语气 |
| <sub > | 定义下标字 |
| <sup > | 定义上标字 |
| <ins> | 定义插入字 |
| <del> | 定义删除字 |
| <s> | 使用<del>代替 |
| <strike> | 使用<del>代替 |
| <u> | 使用样式 （style）代替 |
- “计算机输出”标签
| 标签 | 描述 |
|---|---|
| <code> | 定义计算机代码 |
| <kbd> | 定义键盘码 |
| <samp> | 定义计算机代码样本 |
| <tt> | 定义打字机代码 |
| <var> | 定义变量 |
| <pre> | 定义预格式文本 |
| <listing > | 使用<pre>代替 |
| <plaintext> | 使用<pre>代替 |
| <xmp> | 使用<pre>代替 |
- 引用、引用和术语定义
| 标签 | 描述 |
|---|---|
| <abbr> | 定义缩写 |
| <acronym> | 定义首字母缩写 |
| <address> | 定义地址 |
| <bdo> | 定义文字方向 |
| <blockquote> | 定义长的引用语 |
| <q> | 定义短的引用语 |
| <cite> | 定义引用、引证 |
| <dfn> | 定义一个定义项目 |
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>
- 地址
<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 CSS
通过使用HTML4.0，所有的格式化代码均可移出HTML文档，然后移入一个独立的样式表。
-
实例
- HTML中的样式
- 本例演示如何使用添加到<head>部分的样式信息对HTML进行格式化。
- 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="/example/html/lastpage.html" 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>
- 使用样式
- 当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化，有如下三种方式来插入样式表。
- 外部样式表
- 当样式需要被应用到很多页面的时候，外部样式表将是理想的选择，使用外部样式表，你就可以通过更改一个文件的外观。
- 外部样式表
- 当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化，有如下三种方式来插入样式表。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
- 内部样式表
- 当单个文件需要特别样式时，就可以使用内部样式表，你可以在head部分通过<style>标签定义内部样式表。
- 内部样式表
<head>
<style type="text/css">
body {background-color:red}
p {margin-left:20px}
</style>
</head>
- 内联样式
- 当特殊的样式需要应用到个别元素时，就可以使用内联样式，使用内联样式的方法是在相关的标签中使用样式属性。包含任何CSS属性，以下实例显示出如何改变段落的颜色和左外边距。
- 内联样式
<p style="Color:red;margin-left:60px">
This is a paragraph
</p>
| 标签 | 描述 |
|---|---|
| <style> | 定义样式定义 |
| <link> | 定义资源引用 |
| <div> | 定义文档中的节或区域（块级） |
| <span> | 定义文档中的行内的小块或区域 |
| <font> | 规定文本的字体、字体尺寸、字体颜色。不赞成使用，请使用样式。 |
| <basefont> | 定义基准字体，不赞成使用，请使用样式。 |
| <center> | 对文本进行水平居中，不赞成使用，请使用样式。 |
HTML链接
- HTML使用超级链接与网络上的另一个文档相连。
- 几乎可以在所有的网页中找到链接，点击链接可以从一张页面跳转到另一张页面。
实例
- 示例一：创建超级链接
- 本例演示如何在HTML文档中创建链接。
<html>
<body>
<p>
<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>
<p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>
</body>
</html>
- 示例二：将图像作为链接
- 本例演示如何使用图像作为链接。
<html>
<body>
<p>
您也可以使用图像来作链接：
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</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>
<a href="#C4">查看 chapter 4。</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla</p>
<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla</p>
</body>
</html>
- 示例五：跳出框架
- 本例演示如何跳出框架，假如你的页面被固定在框架之内。
<html>
<body>
<p>被锁在框架中了吗？</p>
<a href="/index.html"
target="_top">请点击这里！</a>
</body>
</html>
- 示例六：创建电子邮件链接1
- 本例演示如何链接到一个邮件。（本例在安装邮件客户端程序后才能工作。）
<html>
<body>
<p>
这是邮件链接：
<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
</p>
<p>
<b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。
</p>
</body>
</html>
- 示例七：创建电子邮件链接2
<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图像
- 在HTML中，图像由<img>标签定义，<img>标签是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src），src指“source”，源属性的值是图像的URL地址。定义图像的语法是：
<img src="url" />
URL指存储图像的位置。如果名为“boat.gif” 的图像位于www.w3school.com.cn的目录中，那么其URL为http://www.w3school.com.cn/images/boat.gif
浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。
alt 属性用来为图像定义一串预备的可替换的文本，替换文本属性的值是用户定义的。
<img src="boat.gif" alt="Big Boat">
- 在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息，此时，浏览器将显示这个替代性文本而不是图像，为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
- 注意事项，假如某个HTML文件包含十个图像，那么为了正确显示这个页面，需要加载11个文件，加载图片是需要时间的，所以我们的建议是：慎用图片。
图像标签
| 标签 | 描述 |
|---|---|
| <img> | 定义图像 |
| <map> | 定义图像地图 |
| <area> | 定义图像地图中的可点击区域 |
实例
- 示例一：插入图像
- 本例演示如何在网页中显示图像。
<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>
- 示例二：从不同的位置插入图片
- 本例演示如何将其他文件夹或服务器的图片显示到网页中。
<html>
<body>
<p>
来自另一个文件夹的图像：
<img src="/i/ct_netscape.jpg" />
</p>
<p>
来自 W3School.com.cn 的图像：
<img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" />
</p>
</body>
</html>
- 示例三：背景图片
- 本例演示如何向HTML页面添加背景图片。
<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>
- 示例六：调整图片尺寸
- 本例演示如何将图片调整到不同的尺寸。
<html>
<body>
<img src="/i/eg_mouse.jpg" width="50" height="50">
<br />
<img src="/i/eg_mouse.jpg" width="100" height="100">
<br />
<img src="/i/eg_mouse.jpg" width="200" height="200">
<p>通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像。</p>
</body>
</html>
- 示例七：为图片显示替换文本
- 本例演示如何为图片显示替换文本，在浏览器无法载入图像时，替换文本属性告诉读者们失去的信息，为页面上的图像都加上替换文本是个好习惯。
<html>
<body>
<p>仅支持文本的浏览器无法显示图像，仅仅能够显示在图像的 "alt" 属性中指定的文本。在这里，"alt" 的文本是“向左转”。</p>
<p>请注意，如果您把鼠标指针移动到图像上，大多数浏览器会显示 "alt" 文本。</p>
<img src="/i/eg_goleft.gif" alt="向左转" />
<p>如果无法显示图像，将显示 "alt" 属性中的文本：</p>
<img src="/i/eg_goleft123.gif" alt="向左转" />
</body>
</html>
- 示例八：制作图像链接
- 本例演示如何将图像作为一个链接使用。
<html>
<body>
<p>
您也可以把图像作为链接来使用：
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>
</body>
</html>
- 示例九：创建图像映射
- 本例显示如何创建带有可供点击区域的图像地图，其中的每一个区域都是一个超级链接。
<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>
- 示例十：把图像转换为图像映射
- 本例显示如何把一幅普通的图像设置为图像映射。
<html>
<body>
<p>请把鼠标移动到图像上，看一下状态栏的坐标如何变化。</p>
<a href="/example/html/html_ismap.html">
<img src="/i/eg_planets.jpg" ismap />
</a>
</body>
</html>
HTML表格
- HTML表格由<table>标签来定义，每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。字母td指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、段落、表单、水平线、表格等等。
- 边框属性，如果不定义边框属性，表格将不显示边框，有时这很有用，但是太多数时候，我们希望显示边框，使用边框属性border来显示一个带有边框的表格。
- 表头，表格的表头使用<th>标签进行定义，大多数浏览器会把表头显示为粗体居中的文本。
- 空单元格，在一些浏览器中，没有内容的表格单元显示得不太好，如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。为了避免这种情况，在空单元格中添加一个空占位符
<td> </td>，就可以将边框显示出来。
表格标签
| 标签 | 描述 |
|---|---|
| <table> | 定义表格 |
| <caption> | 定义表格标题 |
| <th> | 定义表格的表头 |
| <tr> | 定义表格的行 |
| <td> | 定义表格单元 |
| <thead> | 定义表格的页眉 |
| <tbody> | 定义表格的主体 |
| <tfoot> | 定义表格的页脚 |
| <col> | 定义用于表格列的属性 |
| <colgroup> | 定义表格列的组 |
实例
- 示例一：表格
- 这个例子演示如何在HTML文档中创建表格。
<html>
<body>
<p>每个表格由 table 标签开始。</p>
<p>每个表格行由 tr 标签开始。</p>
<p>每个表格数据由 td 标签开始。</p>
<h4>一列：</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>一行三列：</h4>
<table border="5">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>两行三列：</h4>
<table border="10">
<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>
- 示例二：表格边框
- 本例演示各种类型的表格边框。
<html>
<body>
<h4>带有普通的边框：</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>带有粗的边框：</h4>
<table border="8">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>带有很粗的边框：</h4>
<table border="15">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
HTML列表
HTML支持有序、无序和定义列表
-
无序列表
- 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
- 无序列表始于<ul>标签，每个列表项始于<li>。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
-
有序列表
- 有序列表也是一列项目，列表项目使用数字进行标记。
- 有序列表始于<ol>标签，每个列表项始于<li>标签。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
-
定义列表
- 自定义列表不仅仅是一列项目，而是项目及其注释的组合。
- 自定义列表以<dl>标签开始，每个自定义列表项以<dt>开始，每个自定义列表项的定义以<dd>开始。定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
列表标签
| 标签 | 描述 |
|---|---|
| <ol> | 定义有序列表 |
| <ul> | 定义无序列表 |
| <li> | 定义列表项 |
| <dl> | 定义定义列表 |
| <dt> | 定义定义项目 |
| <dd> | 定义定义的描述 |
| <dir> | 使用<ul>代替 |
| <menu> | 使用<ul>代替 |
实例
- 示例一：无序列表
- 本例演示无序列表。
<html>
<body>
<h4>一个无序列表：</h4>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
</body>
</html>
- 示例二：有序列表
- 本例演示有序列表。
<html>
<body>
<h4>有序列表样式：</h4>
<ol>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
<ol start="50">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
</body>
</html>
HTML块
可以通过<div>和<span>将HTML元素组合起来。
-
HTML块元素
- 大多数HTML元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束），比如<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类
-
对HTML进行分类（设置类），使我们能够为元素的类定义CSS样式，为相同的类设置相同的样式，或者为不同的类设置不同的样式。
- 示例，如下所示：
<html>
<head>
<style>
.cities {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<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>
</body>
</html>
- 分类块级元素
- HTML<div>元素是块级元素，它能够用作其他和HTML元素的容器，设置<div>元素的类，使我们能够为相同的<div>元素设置相同的类。
- 示例，如下所示：
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<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 class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
<p>Situated on the Seine River, it is at the heart of the 蝜e-de-France region, also known as the r間ion parisienne.</p>
<p>Within its metropolitan area is one of the largest population centers in Europe, with over 12 million inhabitants.</p>
</div>
<div class="cities">
<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>
<p>It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family.</p>
<p>The Tokyo prefecture is part of the world's most populous metropolitan area with 38 million people and the world's largest urban economy.</p>
</div>
</body>
</html>
- 分类行内元素
HTML<span>元素是行内元素，能够用作文本的容器，设置<span>元素的类，能够为相同的<span>元素设置相同的样式。
示例，如下所示：
<html>
<head>
<style>
span.red {
color:red;
}
</style>
</head>
<body>
<h1>我的<span class="red">重要的</span>标题</h1>
</body>
</html>
HTML布局
-
网站常常使用多列显示内容（就像杂志和报纸）。
- 使用<div>元素的HTML布局
- <div>元素常用作布局工具，因为能够轻松地通过CSS对其进行定位，下面这个例子使用了四个<div>元素来创建多列布局。
- 实例
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
<div id="section">
<h2>London</h2>
<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 ? W3Schools.com
</div>
</body>
</html>
-
使用HTML5的网站布局
- HTML5语义元素
| 语义元素 | 描述 |
|---|---|
| header | 定义文档或节的页眉 |
| nav | 定义导航链接的容器 |
| section | 定义文档中的节 |
| article | 定义独立的自包含文章 |
| aside | 定义内容之外的内容（比如侧栏） |
| footer | 定义文档或节的页脚 |
| details | 定义额外的细节 |
| summary | 定义details元素的标题 |
- 使用表格的HTML布局
<table>元素不是作为布局工具而设计的，<table>元素的作用是显示表格化的数据，使用<table>元素能够取得布局效果，因为能够通过CSS设置表格元素的样式。
实例
<html>
<head>
<style>
table.lamp {
width:100%;
border:1px solid #d4d4d4;
}
table.lamp th, td {
padding:10px;
}
table.lamp th {
width:40px;
}
</style>
</head>
<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>
</html>
HTML 响应式Web设计
-
什么是响应式Web设计？
- RWD指的是响应式Web设计（Responsive Web Design）
- RWD能够以可变尺寸传递网页
- RWD对于平板和移动设备是必需的
创建自己的响应式Web设计
<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>
HTML框架
- 通过使用框架，可以在同一个浏览器窗口中显示不止一个页面，每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
- 使用框架的坏处：
- 开发人员必须同时跟踪更多的HTML文档
- 很难打印整张页面
-
框架结构标签（<frameset>）
- 框架结构标签定义如何将窗口分割为框架
- 每个frameset定义了一系列行或列
- rows/columns 的值规定了每行或每列占据屏幕的面积
- frameset标签也被某些文章和书籍译为框架集
-
框架标签
- Frame 标签定义了放置在每个框架中的HTML文档
- 在下面的这个例子中，我们设置了一个两列的框架集，第一列被设置为占据浏览器窗口的25%，第二列被设置为75%，HTML文档“frame_a.html”被置于第一列中，而HTML文档“frame_b.html”被置于第二个列中：
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
- 基本的注意事项
- 假如一个框架有可见边框，用户可以拖动边框来改变它的大小，为了避免这种情况发生，可以在<frame>标签中加入：
noresize="noresize" - 为不支持框架的浏览器添加<noframes>标签。
- 不能将<body></body>标签与<frameset></frameset>标签同时使用，不过，假如你添加包含一段文本的<noframes>标签，就必须将这段文字嵌套于<body></body>标签内。
- 假如一个框架有可见边框，用户可以拖动边框来改变它的大小，为了避免这种情况发生，可以在<frame>标签中加入：
实例
- 示例一：垂直框架
- 本例演示如何使用三份不同的文档制作一个垂直框架。
<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">
</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内联框架（Iframe）
用于在网页内显示网页。
添加iframe的语法，URL指向隔离页面的位置。
<iframe src="URL"></iframe>
- Iframe-设置高度和宽度
- width和height属性用于规定 iframe的宽度和高度。属性值的默认单位是像素，但也可以用百分比来设定（比如"80%"）
- 实例
<html>
<body>
<iframe src="/example/html/demo_iframe.html" width="200" height="200"></iframe>
<p>某些老式的浏览器不支持内联框架。</p>
<p>如果不支持，则 iframe 是不可见的。</p>
</body>
</html>
- Iframe-删除边框
- frameborder 属性规定是否显示iframe周围的边框。设置属性值为"0"就可以移除边框。
- 实例
<html>
<body>
<iframe src="/example/html/demo_iframe.html" frameborder="0"></iframe>
<p>某些老式的浏览器不支持内联框架。</p>
<p>如果不支持，则 iframe 是不可见的。</p>
</body>
</html>
- 使用 iframe 作为链接的目标
- iframe可用作链接的目标（target）
- 链接的 target 属性必须引用 iframe 的 name 属性。
- 实例
<html>
<body>
<iframe src="/example/html/demo_iframe.html" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>
<p><b>注释：</b>由于链接的目标匹配 iframe 的名称，所以链接会在 iframe 中打开。</p>
</body>
</html>
HTML iframe 标签
| 标签 | 描述 |
|---|---|
| <iframe> | 定义内联的子窗口（框架） |
HTML背景
- <body>拥有两个配置背景的标签，背景可以是颜色或者图像。
- 背景颜色（Bgcolor），背景颜色属性将背景设置为某种颜色，属性值可以是十六进制数、RGB值或颜色名。
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
- 背景（Background），背景属性将背景设置为图像，属性值为图像的URL，如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。URL可以是相对地址，如第一行代码，也可以是绝对路径，如第二行代码。
<body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">
- 提示：如果你打算使用背景图片，你需要紧记一下以下几点：
- 背景图像是否增加了页面的加载时间，（图像不应超过10k）。
- 背景图像是否与页面中的其他图像搭配良好。
- 背景图像是否与页面中的文字颜色搭配良好。
- 图像在页面中平铺后，看上去还可以吗？
- 对文字的注意力被背景图像喧宾夺主了吗？
- 基本的注意事项：
- <body>标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的 HTML标准（HTML4和XHTML）中已被废弃，W3C在他们的推荐标准中已删除这些属性。
- 应该使用层叠样式表（CSS）来定义HTML元素的布局和显示属性。
实例
- 示例一：搭配良好的背景和颜色
- 一个背景颜色和文字颜色搭配良好的例子，使页面中的文字易于阅读。
<html>
<body bgcolor="#d0d0d0">
<p>
这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。
</p>
<p>
这是另一个段落。这是另一个段落。这是另一个段落。这是另一个段落。这是另一个段落。这是另一个段落。这是另一个段落。
</p>
</body>
</html>
- 示例二：搭配得不好的背景和颜色
- 一个背景颜色和文字颜色搭配得不好的例子，使页面中的文字难于阅读。
html>
<body bgcolor="#ffffff" text="yellow">
<p>
这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。
</p>
<p>
这是另一个段落。这是另一个段落。这是另一个段落。这是另一个段落。这是另一个段落。这是另一个段落。这是另一个段落。
</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头部元素
-
HTML <head> 元素
- <head>元素是所有头部元素的容器，<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息等等。
- 以下标签都可以添加到<head>部分：<title>、<base>、<link>、<meta>、<script>以及<style>。
-
HTML<title>元素
<title>标签定义文档的标题
title元素在所有HTML/XHTML文档中都是必需的。
-
title 元素能够：
- 定义浏览器工具栏中的标题
- 提供页面被添加到收藏夹时显示的标题
- 显示在搜索引擎结果中的页面标题
一个的简化的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属性来索引你的页面，name 和 content 属性的作用是描述页面的内容。
- 下面的 meta 元素定义页面的描述：
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
- 下面的meta元素定义页面的关键词：
<meta name="keywords" content="HTML, CSS, XML" />
-
HTML<script>元素
- <script>标签用于定义客户端脚本，比如JavaScript。
HTML头部元素
| 标签 | 描述 |
|---|---|
| <head> | 定义关于文档的信息 |
| <title> | 定义文档标题 |
| <base> | 定义页面上所有链接的默认地址或默认目标 |
| <link> | 定义文档与外部资源之间的关系 |
| <meta> | 定义关于HTML文档的元数据 |
| <script> | 定义客户端脚本 |
| <style> | 定义文档的样式信息 |
HTML字符实体
- HTML中预留的字符必须被替换为字符实体。
- HTML实体
在HTML中，某些字符是预留的。
在HTML中不能使用小号（<）和（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在HTML源代码中使用字符实体（character entities）。
如需显示小于号，我们必须这样写：
<或<使用实体名而不是数字的好处是，名称易于记忆，不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。
字符实体类似这样：
&entity_name;
或者
&#entity_number;
- 不间断空格（non-breaking space）
- HTML中常用字符实体是不间断空格（
）。 - 浏览器总是会截短HTML 页面上的空格，如果你在文本中写10个空格，在显示该页面之前，浏览器会删除它们中的9个，如需在页面中增加空格的数量，你需要使用
字符实体。
- HTML中常用字符实体是不间断空格（
HTML 中有用的字符实体（实体名称对大小写敏感！）
HTML统一资源定位器
URL也被称为网址。
URL可以由单词组成，比如"w3school.com.cn"，或者因特网协议（IP）地址：192.168.1.253。大多数人在网上冲浪时，会输入网址的域名，因为名称比数字容易记忆。
-
URL-Unifrom Resource Locator
- 当你点击HTML 页面中的某个链接时，对应的<a>标签指向万维网上的一个地址。
- 统一资源定位器（URL）用于定位万维网上的文档（或其他数据）。
- 网址，比如 http://www.w3school.com.cn/html/index.asp，遵守以下的语法规则：
scheme://host.domain:port/path/filename
- 解释：
- scheme：定义因特网服务的类型，最常见的类型是http
- host：定义域主机（http 的默认主机是www）
- domain：定义因特网域名，比如w3school.com.cn
- : port：定义主机上的端口号（http的默认端口号是80）
- path：定义服务器上的路径（如果设省略，则文档必须位于网站的根目录中）
- filename：定义文档/资源的名称
- 解释：
URL Schemes
| Scheme | 访问 | 用于... |
|---|---|---|
| http | 超文本传输协议 | 以http://开头的普通网页，不加密 |
| https | 安全超文本传输协议 | 安全网页，加密所有信息交换 |
| ftp | 文件传输协议 | 用于将文件下载或上传至网站 |
| file | 你计算机上的文件 |
HTML URL 字符编码
URL 编码会将字符转换为可通过因特网传输的格式。
-
URL-统一资源定位器
- Web浏览器通过URL从Web 服务器请求页面。
- URL是网页的地址，比如http://www.w3school.com.cn。
-
URL 编码
URL只能使用ASCII字符集来通过因特网进行发送。
由于URL常常会包含ASCII集合之外的字符，URL必须转换为有效的ASCII格式
URL编码使用"%"其后跟随两位的十六进制数来替换非ASCII字符
URL不能包含空格，URL编码通常使用"+"来替换空格。
URL编码示例
| 字符 | URL编码 |
|---|---|
| € | %80 |
| £ | %A3 |
| © | %A9 |
| ® | %AE |
| À | %C0 |
| Á | %C1 |
| Â | %C2 |
| Ã | %C3 |
| Ä | %C4 |
| Å | %C5 |
HTML Web Server
如果希望向世界发布你的网站，那么你必须把它存放在Web服务器上。
-
托管自己的网站
- 在自己的服务器上托管网站始终是一个选项，有几点需要考虑：
-
硬件支出
- 如果要运行“真正”的网站，您不得不购买强大的服务器硬件。不要指望低价的 PC 能够应付这些工作。您还需要稳定的（一天 24 小时）高速连接。
-
软件支出
- 请记住，服务器授权通常比客户端授权更昂贵。同时请注意，服务器授权也许有用户数量限制。
-
人工费
- 不要指望低廉的人工费用。你必须安装自己的硬件和软件。你同时要处理漏洞和病毒，以确保你的服务器时刻正常地运行于一个“任何事都可能发生”的环境中。
-
- 在自己的服务器上托管网站始终是一个选项，有几点需要考虑：
-
使用因特网服务提供商（ISP）
- 从 ISP 租用服务器也很常见，大多数小公司会把网站存放到由 ISP 提供的服务器上。其优势有以下几点：
- 连接速度
- 大多数 ISP 都拥有连接因特网的高速连接。
- 强大的硬件
- ISP 的 web 服务器通常强大到能够由若干网站分享资源。你还要看一下 ISP 是否提供高效的负载平衡，以及必要的备份服务器。
- 安全性和可靠性
- ISP 是网站托管方面的专家。他们应该提供 99% 以上的在线时间，最新的软件补丁，以及最好的病毒防护。
- 连接速度
- 从 ISP 租用服务器也很常见，大多数小公司会把网站存放到由 ISP 提供的服务器上。其优势有以下几点：
-
选择ISP时的注意事项：
-
24小时支持
- 确保 ISP 提供 24 小时支持。不要使自己置于无法解决严重问题的尴尬境地，同时还必须等待第二个工作日。如果你不希望支付长途电话费，那么免费电话服务也是必要的。
-
每日备份
- 确保 ISP 会执行每日备份的例行工作，否则你有可能损失有价值的数据。
-
流量
- 研究一下 ISP 的流量限制。如果出现由于网站受欢迎而激增的不可预期的访问量，那么你要确保不会因此支付额外费用。
-
带宽或内容限制
- 研究一下 ISP 的带宽和内容限制。如果你计划发布图片或播出视频或音频，请确保你有此权限。
-
E-mail 功能
- 请确保 ISP 支持你需要的 e-mail 功能。
-
数据库访问
- 如果你计划使用网站数据库中的数据，那么请确保你的 ISP 支持您需要的数据库访问。
在您选取一家 ISP 之前，请务必阅读 W3School 的 Web 主机教程。
-
HTML颜色
大多数的浏览器都支持颜色名集合
提示：仅仅有16种颜色名被W3C的HTML4.0标准所支持。它们是：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。
-
如果需要使用其它的颜色，需要使用十六进制的颜色值。
-
Web安全色
- 数年以前，当大多数计算机仅支持256种颜色的时候，一系列216种Web标准被建议使用，其中的原因是，微软和Mac操作系统使用了40种不同的保留的固定系统颜色（双方大约各使用20种）。
-
216跨平台色
-
最初，216跨平台Web安全色被用来确保：当计算机使用256色调板时，所有的计算机能够正确地显示所有的颜色。
-
HTML颜色名
- 颜色列表
-
单击一个颜色名或者16进制值，就可以查看与不同文字颜色搭配的背景颜色。
-
HTML<!DOCTYPE>
- <!DOCTYPE>声明
- <!DOCTYPE>声明帮助浏览器正确地显示网页。
- Web世界中存在许多不同的文档，只有了解文档的类型，浏览器才能正确地显示文档。
- HTML也有多个不同的版本，只有完全明白页面中使用的确切HTML版本，浏览器才能完全正确地显示出HTML页面，这就是<!DOCTYPE>的用处。
- <!DOCTYPE>不是HTML标签，它为浏览器提供一项信息（声明），即HTML是用什么版本编写的。
- 实例
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
-
HTML版本
-
从Web诞生早期至今，已经发展出多个HTML版本。
-
-
常用的声明
- HTML5
<!DOCTYPE html>
- HTML4.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 4.01快速参考
来自W3School的HTML快速参考，可以打印它，以备日常使用。
HTML Basic Document
<html>
<head>
<title>Document name goes here</title>
</head>
<body>
Visible text goes here
</body>
</html>
- Text Elements
<p>This is a paragraph</p>
<br> (line break)
<hr> (horizontal rule)
<pre>This text is preformatted</pre>
- Physical Styles
<b>This text is bold</b>
<i>This text is italic</i>
- Links, Anchors, and Image Elements
<a href="http://www.example.com/">This is a Link</a>
<a href="http://www.example.com/"><img src="URL"
alt="Alternate Text"></a>
<a href="mailto:webmaster@example.com">Send e-mail</a>A named anchor:
<a name="tips">Useful Tips Section</a>
<a href="#tips">Jump to the Useful Tips Section</a>
- Unordered list
<ul>
<li>First item</li>
<li>Next item</li>
</ul>
- Ordered list
<ol>
<li>First item</li>
<li>Next item</li>
</ol>
- Definition list
<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>
- Tables
border="1">
<tr>
<th>someheader</th>
<th>someheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>
- Frames
<frameset cols="25%,75%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>
- Forms
<form action="http://www.example.com/test.asp" method="post/get">
<input type="text" name="lastname"
value="Nixon" size="30" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">
<select>
<option>Apples
<option selected>Bananas
<option>Cherries
</select>
<textarea name="Comment" rows="60"
cols="20"></textarea>
</form>
- Entities
the same as <
> is the same as >
© is the same as ©
- Other Elements
<!-- This is a comment -->
<blockquote>
Text quoted from some source.
</blockquote>
<address>
Address 1<br>
Address 2<br>
City<br>
</address>
HTML表单
- HTML表单用于搜集不同类型的用户输入。
- <from>元素
- HTML表单用于收集用户输入。
- <from>元素定义HTML 表单。
- 实例
<form>
.
form elements
.
</form>
- HTML 表单包含表单元素
表单元素指的是不同类型的input元素、复选框、单选按钮、提交按钮等等。
-
<input>元素
- <input>元素是最重要的表单元素。
- <input>元素有很多形态，根据不同的type属性。
- 这是本章中使用的类型：
| 字符 | URL编码 |
|---|---|
| text | 定义常规文本输入 |
| radio | 定义单选按钮输入（选择多个选择之一） |
| submit | 定义提交按钮（提交表单） |
- 文本输入
<input type="text">定义用于文本输入的单行输入字段。
实例
<!DOCTYPE html>
<html>
<body>
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
<p>请注意表单本身是不可见的。</p>
<p>同时请注意文本字段的默认宽度是 20 个字符。</p>
</body>
</html>
- 单选按钮输入
- <input type="radio">定义单选按钮
- 单选按钮允许用户在有限的数量的选项中选择其中之一。
- 实例
<!DOCTYPE html>
<html>
<body>
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
</body>
</html>
- 提交按钮
- <input type="submit">定义用于向表单处理程序（form-handler）提交表单的按钮。
- 表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。
- 表单处理程序在表单的action属性中指定：
- 实例
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>
</body>
</html>
- Action属性
- Action属性定义在提交表单时执行的动作，向服务器提交表单的通常做法是使用提交按钮，通常，表单会被提交到Web服务器上的网页，在上面的例子中，指定了某个服务器脚本来处理被提交表单，如果省略action属性，则action会被设置为当前页面。
<form action="action_page.php">
-
Method属性
- method属性规定 在提交表单时所用的 HTTP方法（GET或POST）：
<form action="action_page.php" method="GET">
或
<form action="action_page.php" method="POST">
- 何时使用GET？
- 如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息，当你使用GET时，表单数据在页面地址中是可见的。GET最适合少量的数据提交，浏览器会设定容量限制。
action_page.php?firstname=Mickey&lastname=Mouse
-
何时使用POST？
- 如果表单正在更新数据，或者包含敏感信息（例如密码），POST的安全性更佳 ，因为在页面地址栏中被提交的数据是不可见的。
-
Name属性
- 如果要正确地被提交，每个输入字段必须设置一个name属性，本例只会提交"Last name"输入的字段：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>
<p>first name 不会被提交，因为此 input 元素没有 name 属性。</p>
</body>
</html>
- 用<fieldset>组合表单数据
- <fieldset>元素组合表单中的相关数据
- <legend>元素为<fieldset>元素定义标题
- 实例
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
- HTML Form 属性
- HTML<form>元素，已设置 所有可能的属性，是这样的：
- 实例
<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elements
.
</form>
- 下面是<form>属性的列表
| 属性 | 描述 |
|---|---|
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集）。 |
| action | 规定向何处提交表单的地址（URL）（提交页面）。 |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启）。 |
| enctype | 规定被提交数据的编码（默认：url-encoded）。 |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET）。 |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |
| novalidate | 规定浏览器不验证表单。 |
| target | 规定 action 属性中地址的目标（默认：_self）。 |
HTML 表单元素
-
<input>元素
- 最重要的表单元素是<input>元素，<input>元素根据不同的type属性，可以变化为多种形态。
-
<select>元素（下拉列表）
- <select>元素定义下拉列表。
- 实例
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>
<option>元素定义待选择的选项，列表通常会把首个选项显示为被选选项。你能够通过添加selected属性来定义预定义选项。
实例
<!DOCTYPE html>
<html>
<body>
<p>您可以通过 selected 属性预选择某些选项。</p>
<form action="/demo/demo_form.asp">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>
-
<textarea>元素
- <textarea>元素定义多行输入字段（文本域）。
-实例
- <textarea>元素定义多行输入字段（文本域）。
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<p>请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。</p>
</body>
</html>
- <button>元素
- <button>元素定义可点击的按钮。
- 实例
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="alert('Hello World!')">点击我！</button>
</body>
</html>
