什么是 HTML？
HTML 是用来描述网页的一种语言。
∙ HTML 指的是超文本标记语言 (Hyper Text Markup Language)
∙ HTML 不是一种编程语言，而是一种标记语言 (markup language)
∙ 标记语言是一套标记标签 (markup tag)
∙ HTML 使用标记标签来描述网页
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
∙ HTML 标签是由尖括号包围的关键词，比如 <html>
∙ HTML 标签通常是成对出现的，比如 <b> 和 </b>
∙ 标签对中的第一个标签是开始标签，第二个标签是结束标签
∙ 开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
∙ HTML 文档描述网页
∙ HTML 文档包含 HTML 标签和纯文本
∙ HTML 文档也被称为网页
HTML 标题
HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。注：1最大
HTML 段落    paragraph
HTML 段落是通过 <p> 标签进行定义的。
HTML 链接
HTML 链接是通过 <a> 标签进行定义的。
HTML 图像
HTML 图像是通过 <img> 标签进行定义的。
HTML 文档是由 HTML 元素定义的。
HTML 元素
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
开始标签
元素内容
结束标签
<p>
This is a paragraph
</p>
<a href="default.htm" >
This is a link
</a>
<br />
<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
属性为 HTML 元素提供附加信息。
HTML 属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定。
HTML 水平线
<hr /> 标签在 HTML 页面中创建水平线。
网页设计html代码例子HTML 注释
HTML 段落
段落是通过 <p> 标签定义的。可以把 HTML 文档分割为若干段落。
注释：浏览器会自动地在段落的前后添加空行。
HTML 折行
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签
文本格式化标签
标签
描述
<b>
定义粗体文本。
<big>
定义大号字。
<em>
定义着重文字。
<i>
定义斜体字。
<small>
定义小号字。
<strong>
定义加重语气。
<sub>
定义下标字。
<sup>
定义上标字。
<ins>
定义插入字。
<del>
定义删除字。
HTML CSS
外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<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 >
This is a paragraph
</p>
标签
描述
<style>
定义样式定义。
<link>
定义资源引用。
<div>
定义文档中的节或区域（块级）。
<span>
定义文档中的行内的小块或区域。
<font>
规定文本的字体、字体尺寸、字体颜。不赞成使用。请使用样式。
<basefont>
定义基准字体。不赞成使用。请使用样式。
<center>
对文本进行水平居中。不赞成使用。请使用样式。
HTML 链接
HTML 链接语法
链接的 HTML 代码很简单。它类似这样：
<a href="url">Link text</a>
href 属性规定链接的目标。
开始标签和结束标签之间的文字被作为超级链接来显示。
实例
<a href="www.jb51/">Visit W3School</a>
上面这行代码显示为：Visit W3School
提示："链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
HTML 链接 - target 属性
使用 Target 属性，你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档：
<a href="www.jb51/" target="_blank">Visit W3School!</a>
Blank parent self
HTML 链接 - name 属性
name 属性规定锚（anchor）的名称。
您可以使用 name 属性创建 HTML 页面中的书签。
书签不会以任何特殊方式显示，它对读者是不可见的。
当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻他们需要的信息了。
命名锚的语法：
<a name="label">锚（显示在页面上的文本）</a>
提示：锚的名称可以是任何你喜欢的名字。
提示：您可以使用 id 属性来替代 name 属性，命名锚同样有效。
实例
首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：
<a name="tips">基本的注意事项 - 有用的提示</a>
然后，我们在同一个文档中创建指向该锚的链接：
<a href="#tips">有用的提示</a>
您也可以在其他页面中创建指向该锚的链接：
<a href="www.jb51/html/html_links.asp#tips">有用的提示</a>
在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。
基本的注意事项 - 有用的提示：
注释：请始终将正斜杠添加到子文件夹。假如这样书写链接：href="www.jb51/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="www.jb51/html/"。
提示：命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科，您会发现其中几乎每个词条都采用这样的导航方式。
提示：假如浏览器不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。
HTML 链接标签
标签
描述
<a>
定义锚。
HTML 图像
图像标签（<img>）和源属性（Src）
<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。
<img src="url" />
URL 指存储图像的位置。如果名为 "boat.gif" 的图像位于 www.jb51 的 images 目录中，那么其 URL 为 www.jb51/images/boat.gif。
浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。
替换文本属性（Alt）
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
<img src="boat.gif" alt="Big Boat">
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
基本的注意事项 - 有用的提示：
假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。
图像标签
标签
描述
<img>
定义图像。
<map>
定义图像地图。
<area>
定义图像地图中的可点击区域。
HTML 表格
表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在浏览器显示如下：
row 1, cell 1
row 1, cell 2
row 2, cell 1
row 2, cell 2
表格和边框属性
如果不定义边框属性，表格将不显示边框。
使用边框属性来显示一个带有边框的表格：
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。