HTML基础

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

HTML 文档是由 HTML 元素定义的。HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
注释：开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。空元素在开始标签中进行关闭（以开始标签的结束而结束），大多数 HTML 元素可拥有属性。

HTML 实例
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>

在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。HTML 标签对大小写不敏感：<P> 等同于 <p>。推荐使用小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

<p> 元素定义了 HTML 文档中的一个段落。<body> 元素定义了 HTML 文档的主体。<html> 元素定义了整个 HTML 文档。

HTML 属性
属性为 HTML 元素提供附加信息，属性总是以名称/值对的形式出现，比如：name=”value”。属性总是在 HTML 元素的开始标签中规定。

属性实例：
<a href="http://www.cnblogs.com" rel="external nofollow" >This is a link</a>链接的地址在 href 属性中指定
<h1 align="center"> 拥有关于对齐方式的附加信息。
<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。
<table border="1"> 拥有关于表格边框的附加信息

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，
HTML 标准属性：http://www.w3school.com.cn/tags/html_ref_standardattributes.asp

HTML 标题（Heading）是通过 <h1> – <h6> 等标签进行定义的。HTML 链接是通过 <a> 标签进行定义的。HTML 图像是通过 <img> 标签进行定义的。HTML 水平线：<hr /> 标签在 HTML 页面中创建水平线。

元素标签

HTML 注释：可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

<!-- This is a comment -->

段落是通过 <p> 标签定义的。HTML 折行，如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签：

<p>This is<br />a para<br />graph with line breaks</p>

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
显示预排<pre>标签，文字标签<font>，加粗<b>，斜体<i>，下划线<u>，下标<sup>，上标<sub>，<strong> 标签和<em> 标签一样，用于强调文本，但它强调的程度更强一些。<big> 标签和其相应的 </big> 标签之间的文字，其字体比周围的文字要大一号。<small>要小一号。

“计算机输出”标签：

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

缩写和首字母缩写：

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

如果浏览器支持 bi-directional override (bdo)，会从右向左输出：

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

显示：Here is some Hebrew text
块引用：

<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>
<q>
这是短的引用。
</q>

使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。
删除字效果和插入字效果：

<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>
<p>大多数浏览器会改写为删除文本和下划线文本。</p>

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" />
</head>
<body>
<a href="/example/html/lastpage.html" rel="external nofollow"  rel="external nofollow"  style="text-decoration:none">
这是一个链接！
</a>
</body>
</html>

链接到一个外部样式表：

<html>
<head>
<link rel="stylesheet" type="text/css" href="/csstest.css" rel="external nofollow"  >
</head>
<body>
<h1>我通过外部样式表进行格式化。</h1>
<p>我也一样！</p>
</body>
</html>

有三种方式来插入样式表：外部样式表、内部样式表、内联样式。

HTML 链接
将图像作为链接：

<html>
<body>
<p>
您也可以使用图像来作链接：
<a href="/example/html/lastpage.html" rel="external nofollow"  rel="external nofollow" >
<img border="0" src="/eg_buttonnext.gif" />
</a>
</p>
</body>
</html>

有两种使用 <a> 标签的方式：
通过使用 href 属性 – 创建指向另一个文档的链接；通过使用 name 属性 – 创建文档内的书签；使用 Target 属性，你可以定义被链接的文档在何处显示。

提示：您可以使用 id 属性来替代 name 属性，命名锚同样有效。假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。

邮件链接：

<a href="mailto:test@126.com" rel="external nofollow" >发送邮件</a>
另一个负载的 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!" rel="external nofollow" >发送邮件！</a>

HTML 图像
<img src = “路径” alt = “文字说明” width = “宽” height = “高” border = “边框” align = “对齐方式”/>

背景图片：<body background=”/i/eg_background.jpg”>

创建图像映射，每个区域都是一个超级链接：

<img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<!-- map -->
<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>

把一幅普通的图像设置为图像映射：

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

HTML 表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border = "" height = "" width = "" align = "" cellpading = "" frame = "" >
<caption>我的标题</caption>
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
</table>

cellpading表示单元格内容与其边框之间的空白；cellspacing表示单元格之间的距离；使用 “frame” 属性来控制围绕表格的边框；表格的表头使用 <th> 标签进行定义。属性：colspan 跨列；rowspan 跨行。

HTML 列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

<ul type = "">
<li>Coffee</li>
<li>Milk</li>
</ul>

有序列表也是一列项目，列表项目使用数字进行标记。

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

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

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

HTML <div> 和 <span>
可以通过 <div> 和 <span> 将 HTML 元素组合起来。大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）。例子：<h1>，<p>，<ul>，<table>；内联元素在显示时通常不会以新行开始。例子：<b>，<td>，<a>，<img>。

HTML <div> 元素

HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。<div> 元素的另一个常见的用途是文档布局。

HTML <span> 元素

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

HTML 布局

使用 <div> 元素的网页布局:

<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="gb2312"/>
<style type="text/css">
div#container{width:500px}
div#header {background-color:#99bbbb;}
div#menu {background-color:#ffff99;height:200px;width:150px;float:left;}
div#content {background-color:#EEEEEE;height:200px;width:350px;float:left;}
div#footer {background-color:#99bbbb;clear:both;text-align:center;}
h1 {margin-bottom:0;}
h2 {margin-bottom:0;font-size:18px;}
ul {margin:0;}
li {list-style:none;}
</style>
</head><body>
<div id="container">
<div id="header">
<h1>Main Title of Web Page</h1>
</div>
<div id="menu">
<h2>Menu</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<div id="content">Content goes here</div>
<div id="footer">Copyright W3School.com.cn</div>
</div>
</body>
</html>

HTML 表单和输入

<form>
用户：
<input type="text" name="user">
<br />
密码：
<input type="password" name="password">
</form>

表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。输入:多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
文本域（Text Fields）当用户要在表单中键入字母、数字等内容时，就会用到文本域。<input type=”text” name=”name” />

单选按钮（Radio Buttons）当用户从若干给定的的选择中选取其一时，就会用到单选框。<input type=”radio” name=”sex” value=”male” />

复选框（Checkboxes）当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。<input type=”checkbox” name=”bike” />

表单的动作属性（Action）和确认按钮：

<!-- text.htm -->
<html>
<body>
<form action ="post.php" method ="post">
Name: <input type="text" name="username" />
<input type ="submit" value="ok" />
</form>
</body>
</html>

<!-- post.php -->
<html>
<body>
You are <?php echo $_POST["username"]?>.
</body>
</html>

简单的下拉列表:

<form>
<select name="cars">
<option value="volvo" selected="selected">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

创建按钮:

<form>
<input type="button" value="Hello world!">
</form>

在数据周围绘制一个带标题的框:

<form>
  <fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    体重：<input type="text" />
  </fieldset>
</form>

HTML的特殊符号
&nbsp 空格; &lt <; &amp & ; &gt > ; &quat “;

HTML 框架

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

使用框架的坏处：开发人员必须同时跟踪更多的HTML文档;很难打印整张页面。

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

为不支持框架的浏览器添加 <noframes> 标签。重要提示：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。

<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>
</frameset>

HTML 内联框架：

<iframe src="/eg_landscape.jpg"  width="200" height="200" frameborder="0"></iframe>

使用 iframe 作为链接的目标：

<iframe src="pic/blue02.jpg" name="iframe_a"></iframe>
<p><a href="http://www.cnblogs.com/houkai/" rel="external nofollow"  target="iframe_a">侯凯</a></p>

个人收藏笔记记录

开通VIP