Web学习之HTML基础（一）

作者: AR7_ | 来源:发表于2018-05-19 16:28 被阅读321次

前言

本系列文章主要是基于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表格。
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>

<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>标签内。

实例

示例一：垂直框架
- 本例演示如何使用三份不同的文档制作一个垂直框架。

<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统一资源定位器

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时的注意事项：
- 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 <
&gt; is the same as >
&#169; 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>元素定义多行输入字段（文本域）。
  -实例

<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>

Web学习之HTML基础（一）

前言

一、HTML简介

HTML标签

HTML文档 = 网页

实例

二、HTML编辑器

三、四个最常使用的标签

HTML标题

HTML段落

HTML链接

HTML图像

HTML元素

HTML元素语法

嵌套的HTML元素

不要忘记结束标签

空的HTML元素

HTML属性

HTML样式

HTML格式化

HTML文本格式化实例

HTML CSS

HTML链接

实例

HTML图像

图像标签

实例

HTML表格

表格标签

实例

HTML列表

列表标签

实例

HTML块

HTML分组标签

HTML类

HTML布局

HTML 响应式Web设计

HTML框架

实例

HTML内联框架（Iframe）

HTML iframe 标签

HTML背景

实例

HTML脚本

HTML头部元素

HTML字符实体

HTML 中有用的字符实体（实体名称对大小写敏感！）

HTML统一资源定位器

HTML URL 字符编码

URL编码示例

HTML Web Server

HTML颜色

HTML颜色名

HTML<!DOCTYPE>

HTML 4.01快速参考

HTML表单

HTML 表单元素

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读