HTML基础教程
1简介
1、什么是 HTML？
1.1标记语言
1.2标记标签
2、HTML 标签
2.1由尖括号包围的关键词，比如 <html>
2.2成对出现，比如 <b> 和 </b>
2.3开始标签、结束标签
3、HTML 文档 = 网页
3.1HTML 文档包含 HTML 标签和纯文本
3.2浏览器不会显示 HTML 标签
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
例子解释<html> 与 </html> 之间的文本描述网页<body> 与 </body> 之间的文本是可见的页面内容<h1> 与 </h1> 之间的文本被显示为标题<p> 与 </p> 之间的文本被显示为段落
2标签
1、HTML 标题
1.1 <h1> - <h6> 等标签
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
2、HTML 段落
2.1<p> 标签
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
3、HTML 链接
3.1<a> 标签
<a href="http://www.w3school.com.cn">This is a link</a>
在 href 属性中指定链接的地址。
4、HTML 图像
4.1 <img> 标签
<img src="w3school.jpg" width="104" height="142" />
图像的名称和尺寸是以属性的形式提供的。
3元素
1、HTML 元素
1.1开始标签（start tag）到结束标签（end tag）的所有代码
| 开始标签 | 元素内容 | 结束标签 |
|---|---|---|
| <p> | This is a paragraph | </p> |
| <a href="default.htm" > | This is a link | </a> |
| <br /> |
2、HTML 元素语法
1.2.1开始标签
1.2.2结束标签
1.2.3内容
1.2.4空元素在开始标签中进行关闭
1.2.5属性
3、嵌套的 HTML 元素
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
上面的例子包含三个 HTML 元素。
4、空的 HTML 元素
<br />是关闭空元素
5、HTML 提示：使用小写标签
4属性
1、HTML 属性
1.1为 HTML 元素提供附加信息。
1.2以名称/值对的形式出现，比如：name="value"。
1.3属性总是在 HTML 元素的开始标签中规定。
2、HTML 提示：使用小写属性
3、始终为属性值加引号
name='Bill "HelloWorld" Gates'
4、属性标签
| 属性 | 值 | 描述 |
|---|---|---|
| class | classname | 规定元素的类名（classname） |
| id | id | 规定元素的唯一 id |
| style | style_definition | 规定元素的行内样式（inline style） |
| title | text | 规定元素的额外信息（可在工具提示中显示） |
5标题
1、HTML 标题
1.1<h1> - <h6> 等标签
1.2<h1> 最大、<h6> 最小
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
2、标题很重要
2.1搜索引擎使用标题为您的网页的结构和内容编制索引。
2.2h1 主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
3、HTML 水平线
3.1<hr /> 可用于分隔内容。
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
4、HTML 注释
4.1浏览器会忽略注释，不会显示。
<!-- This is a comment -->
5、HTML 提示 - 如何查看源代码
5.1单击右键，然后选择“查看源文件”（IE）或“查看页面源代码”（Firefox）。
6、标题标签
| 标签 | 描述 |
|---|---|
| <html> | 定义 HTML 文档。 |
| <body> | 定义文档的主体。 |
| <h1> to <h6> | 定义 HTML 标题 |
| <hr> | 定义水平线。 |
| <!--> | 定义注释。 |
6段落
1、HTML 段落
1.1 <p> 标签
<p>This is a paragraph</p>
<p>This is another paragraph</p>
2、HTML 折行
2.1如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签：
<p>This is<br />a para<br />graph with line breaks</p>
3、HTML 输出 - 有用的提示
3.1当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
4、段落标签
7格式化
1、HTML 可定义很多供格式化输出的元素，比如粗体和斜体字。
2、文本格式化标签
| 标签 | 描述 |
|---|---|
| <b> | 定义粗体文本。 |
| <big> | 定义大号字。 |
| <em> | 定义着重文字。 |
| <i> | 定义斜体字。 |
| <small> | 定义小号字。 |
| <strong> | 定义加重语气。 |
| <sub> | 定义下标字。 |
| <sup> | 定义上标字。 |
| <ins> | 定义插入字。 |
| <del> | 定义删除字。 |
| <s> | 不赞成使用。使用 <del> 代替。 |
| <strike> | 不赞成使用。使用 <del> 代替。 |
| <u> | 不赞成使用。使用样式（style）代替。 |
3、“计算机输出”标签
| 标签 | 描述 |
|---|---|
| <code> | 定义计算机代码。 |
| <kbd> | 定义键盘码。 |
| <samp> | 定义计算机代码样本。 |
| <tt> | 定义打字机代码。 |
| <var> | 定义变量。 |
| <pre> | 定义预格式文本。 |
| <listing> | 不赞成使用。使用 <pre> 代替。 |
| <plaintext> | 不赞成使用。使用 <pre> 代替。 |
| <xmp> | 不赞成使用。使用 <pre> 代替。 |
4、引用、引用和术语定义
| 标签 | 描述 |
|---|---|
| <abbr> | 定义缩写。 |
| <acronym> | 定义首字母缩写。 |
| <address> | 定义地址。 |
| <bdo> | 定义文字方向。 |
| <blockquote> | 定义长的引用。 |
| <q> | 定义短的引用语。 |
| <cite> | 定义引用、引证。 |
| <dfn> | 定义一个定义项目。 |
8编辑器
1、使用 Notepad 或 TextEdit 来编写 HTML
2、四步
2.1步骤一：启动记事本
2.2步骤二：用记事本来编辑 HTML
2.3步骤三：保存 HTML
2.4步骤四：在浏览器中运行这个 HTML 文件
9CSS
1、所有的格式化代码均可移出 HTML 文档，然后移入一个独立的样式表。
2、如何使用样式
2.1外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
2.2内部样式表
<head>
<style type="text/css"> body {background-color: red} p {margin-left: 20px} </style>
</head>
2.3内联样式
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
3、CSS标签
| 标签 | 描述 |
|---|---|
| <style> | 定义样式定义。 |
| <link> | 定义资源引用。 |
| <div> | 定义文档中的节或区域（块级）。 |
| <span> | 定义文档中的行内的小块或区域。 |
| <font> | 规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。 |
| <basefont> | 定义基准字体。不赞成使用。请使用样式。 |
| <center> | 对文本进行水平居中。不赞成使用。请使用样式。 |
10链接
1、HTML 超链接
1.1可以是一个字，一个词，或者一组词，也可以是一幅图像或其他 HTML 元素
1.2<a> 标签
1.3两种 <a> 标签的方式
1.3.1通过使用 href 属性 - 创建指向另一个文档的链接
1.3.2通过使用 name 属性 - 创建文档内的书签
2、HTML 链接语法
<a href="url">Link text</a>
2.1href 属性规定链接的目标。
2.2开始标签和结束标签之间的文字被作为超级链接来显示。
3、HTML 链接 - target 属性
3.1使用 Target 属性，你可以定义被链接的文档在何处显示。
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
在新窗口打开文档。
4、HTML 链接 - name 属性
4.1name 属性创建 HTML 页面中的书签
4.2书签不会以任何特殊方式显示，它对读者是不可见的。
<a name="label">锚（显示在页面上的文本）</a>
锚的名称可以是任何你喜欢的名字。
您可以使用 id 属性来替代 name 属性，命名锚同样有效。
4.3其他页面中创建指向该锚的链接
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。
5、HTML 链接标签
| 标签 | 描述 |
|---|---|
| <a> | 定义锚。 |
11图像
1、图像标签（<img>）和源属性（Src）
1.1图像<img> 标签
1.2语法
<img src="url" />
2、替换文本属性（Alt）
<img src="boat.gif" alt="Big Boat">
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。
3、图像标签
12表格
1、表格
1.1表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。
<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>
2、表格和边框属性
2.1如果不定义边框属性，表格将不显示边框。
使用边框属性来显示一个带有边框的表格
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
3、表格的表头
3.1表头 <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>
4、表格中的空单元格
4.1在一些浏览器中，没有内容的表格单元显示得不太好。
<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>
4.2为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。
<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>
5、表格标签
| 表格 | 描述 |
|---|---|
| <table> | 定义表格 |
| <caption> | 定义表格标题。 |
| <th> | 定义表格的表头。 |
| <tr> | 定义表格的行。 |
| <td> | 定义表格单元。 |
| <thead> | 定义表格的页眉。 |
| <tbody> | 定义表格的主体。 |
| <tfoot> | 定义表格的页脚。 |
| <col> | 定义用于表格列的属性。 |
| <colgroup> | 定义表格列的组。 |
13列表
1、无序列表
1.1无序列表始于 <ul> 标签。每个列表项始于 <li>。
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
2、有序列表
2.1有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
3、定义列表
3.1自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
4、列表标签
| 标签 | 描述 |
|---|---|
| <ol> | 定义有序列表。 |
| <ul> | 定义无序列表。 |
| <li> | 定义列表项。 |
| <dl> | 定义定义列表。 |
| <dt> | 定义定义项目。 |
| <dd> | 定义定义的描述。 |
| <dir> | 已废弃。使用 <ul> 代替它。 |
| <menu> | 已废弃。使用 <ul> 代替它。 |
14块
1、HTML 块元素
1.1块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子：<h1>, <p>, <ul>, <table>
2、HTML 内联元素
2.1内联元素在显示时通常不会以新行开始。
例子：<b>, <td>, <a>, <img>
3、HTML <div> 元素
3.1如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
4、HTML <span> 元素
4.1当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
5、HTML 分组标签
15布局
1、网站布局
1.1可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。
2、HTML 布局标签
16表单
1、表单
1.1表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。
1.2表单标签（<form>）
<form>
...
input 元素
...
</form>
2、输入
2.1多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。
2.2文本域（Text Fields）
当用户要在表单中键入字母、数字等内容时，就会用到文本域。
<form>
First name:
<input type="text" name="firstname" />
<br />
Last name:
<input type="text" name="lastname" />
</form>
2.3单选按钮（Radio Buttons）
当用户从若干给定的的选择中选取其一时，就会用到单选框。
<form>
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female
</form>
2.4复选框（Checkboxes）
当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。
<form>
<input type="checkbox" name="bike" />
I have a bike
<br />
<input type="checkbox" name="car" />
I have a car
</form>
2.5表单的动作属性（Action）和确认按钮
当用户单击确认按钮时，表单的内容会被传送到另一个文件。
<form name="input" action="html_form_action.asp" method="get">
Username:
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
3、表单标签
| 标签 | 描述 |
|---|---|
| <form> | 定义供用户输入的表单 |
| <input> | 定义输入域 |
| <textarea> | 定义文本域 (一个多行的输入控件) |
| <label> | 定义一个控制的标签 |
| <fieldset> | 定义域 |
| <legend> | 定义域的标题 |
| <select> | 定义一个选择列表 |
| <optgroup> | 定义选项组 |
| <option> | 定义下拉列表中的选项 |
| <button> | 定义一个按钮 |
| <isindex> | 已废弃。由 <input> 代替。 |
17框架
1、框架
1.1通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
1.2框架结构标签（<frameset>）
2、框架标签（Frame）
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！
18内联框架
1、内联框架
1.1iframe 用于在网页内显示网页。
2、添加 iframe 的语法
<iframe src="URL"></iframe>
URL 指向隔离页面的位置。
3、Iframe - 设置高度和宽度
3.1height 和 width 属性用于规定 iframe 的高度和宽度。
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
4、Iframe - 删除边框
4.1frameborder 属性规定是否显示 iframe 周围的边框。
设置属性值为 "0" 就可以移除边框：
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
5、使用 iframe 作为链接的目标
5.1iframe 可用作链接的目标（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>
6、HTML iframe 标签
| 标签 | 描述 |
|---|---|
| <iframe> | 定义内联的子窗口（框架） |
19背景
1、背景（Backgrounds）
1.1背景颜色（Bgcolor）
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
1.2背景（Background）
<body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">
20颜色
1、颜色值
1.1颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
1.2每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。
1.3这个表格给出了由三种颜色混合而成的具体效果：
| Color | Color HEX | Color RGB |
|---|---|---|
| #000000 | rgb(0,0,0) | |
| #FF0000 | rgb(255,0,0) | |
| #00FF00 | rgb(0,255,0) | |
| #0000FF | rgb(0,0,255) | |
| #FFFF00 | rgb(255,255,0) | |
| #00FFFF | rgb(0,255,255) | |
| #FF00FF | rgb(255,0,255) | |
| #C0C0C0 | rgb(192,192,192) | |
| #FFFFFF | rgb(255,255,255) |
21颜色名
1、颜色名列表
22快速参考
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>
Logical Styles
<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>
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:[email protected]">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
<table 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
< is 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>