一、注释文字

语法：
<!--注释文字 -->

二、<h1> - <h6> 标签

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

三、<hr> 标签

在 HTML 页面中创建水平线

<p>hr 标签定义水平线：</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>

四、<p> 标签

<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>

五、<br> 标签

<p>这个<br>段落<br>演示了分行的效果</p>

六、 <b>标签、<i>标签、<code>标签、<sub>标签、<sup>标签

对输出的文本进行格式, 如：粗体 or 斜体
通常标签 <strong> 替换加粗标签 <b> ("bold")来使用, <em> 替换 <i>("italic") 标签使用。

<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 _下标 和 ^上标

七、<a>标签、 target 属性、id 属性

1.语法：
<a href="http://www.mamicode.com/url">链接文本</a>

2.target 属性

<a href="http://www.baidu.com" target=_blank>链接文本</a>

<a href="http://www.baidu.com" target=_self>链接文本</a>

<a href="http://www.baidu.com" target=_parent>链接文本</a>

<a href="http://www.baidu.com" target=_top>链接文本</a>

3.id 属性

如：

<a href="http://www.mamicode.com/#p1">点击前往</a>
<p id="p1">文章</p>

在HTML文档中插入ID:
<a id="tips">有用的提示部分</a>

在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：
<a href="http://www.mamicode.com/#tips">访问有用的提示部分</a>

或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：
<a href="http://www.runoob.com/html/html-links.html#tips">
访问有用的提示部分</a>

八、 <img>标签、Alt属性

1.语法：
<img src="http://www.mamicode.com/url" alt="some_text">

2.Alt属性
<img src="http://www.mamicode.com/boat.gif" alt="Big Boat">

3.设置图像的高度与宽度
属性值默认单位为像素:
<img src="http://www.mamicode.com/pulpit.jpg" alt="Pulpit rock" width="304" height="228">

九、<table> 标签、<tr> 标签、<td> 标签、<th> 标签

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

横行竖列

 合并

1.合并列

<th colspan="3">人员信息表</th>

2.合并行

<th rowspan="5">我是多余的</th>

十、<ul>标签、<ol>标签、<li>标签、<dl>标签、<dt>标签、<dd>标签、type属性、start属性

HTML 支持有序、无序和定义列表:

1.无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用 <ul> 标签
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

属性   值
type   disc实心圆
       circle空心圆
       square实心矩形

2.有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
列表项项使用数字来标记。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
浏览器中显示如下：
1.Coffee
2.Milk

属性   值
type   数字，小写大写字母，罗马数字
start  数字

3.自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
浏览器显示如下：
Coffee
- black hot drink
Milk
- white cold drink

十一、<div> 、<span>

大多数 HTML 元素被定义为块级元素或内联元素。
块级 (block-level)在浏览器显示时，通常会以新行来开始（和结束）。
实例: <h1>, <p>, <ul>, <table>
内联元素(inline)在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>

<div> 元素是块级元素
<span> 元素是内联元素

十二、<form>标签、name属性、method属性、action属性、 <input>标签、type属性

<form>标签功能结构

属性           值

name       字符串

method    get/post

action      URL

1.文本域
<input type="text" name="" value="" size="" maxlegth="" readonly="readonly"> 标签来设定文本域，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

2.多行文本

<textarea name="" cols="长度" rows="宽度">
文本内容
</textarea>

3.密码字段
<input type="password" name="" value="" size="" maxlegth="" readonly="readonly"> 标签来定义密码字段:

<form>
Password: <input type="password" name="pwd">
</form>

4.单选按钮（Radio Buttons）
<input type="radio"> 标签定义了表单单选框选项

<form>
<input type="radio" name="sex" value="http://www.mamicode.com/male">Male<br>
<input type="radio" name="sex" value="http://www.mamicode.com/female">Female
</form>

5.复选框（Checkboxes）
<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>
<input type="checkbox" name="vehicle" value="http://www.mamicode.com/Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="http://www.mamicode.com/Car">I have a car
</form>

6.下拉框

（1）简单下拉框

<form action="">
<select name="cars">
<option value="http://www.mamicode.com/volvo">Volvo</option>
<option value="http://www.mamicode.com/saab">Saab</option>
<option value="http://www.mamicode.com/fiat">Fiat</option>
<option value="http://www.mamicode.com/audi">Audi</option>
</select>
</form>

（2）预选下拉框

<form action="">
<select name="cars">
<option value="http://www.mamicode.com/volvo">Volvo</option>
<option value="http://www.mamicode.com/saab">Saab</option>
<option value="http://www.mamicode.com/fiat" selected>Fiat</option>
<option value="http://www.mamicode.com/audi">Audi</option>
</select>
</form>

（3）组别下拉框

<form action="">
<select name="">
<optgroup label="华北区">
<option value="">河北</option>
<option value="">天津</option>
</optgroup>
<optgroup label="华南区">
<option value="" >深圳</option>
<option value="">广州</option>
</optgroup>
</select>
</form>

7.提交按钮(Submit Button)
<input type="submit"> 定义了提交按钮.
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="http://www.mamicode.com/Submit">
</form>

8.登录、重置、空按钮
<input type="submit" value="http://www.mamicode.com/登录" />
<input type="reset" value="http://www.mamicode.com/重置" />
<button>按钮</button>

9.上传文件

<input type="file" name="filename" />

十三、框架集及<iframe标签>

以下为例：

网页就会被分割成三个窗口，分别显示百度网易搜狐。

框架集一般会用于后台管理系统：

首先先建立T型页面，

 浏览器显示如下：

然后建立三个HTML页面head.html、left.html、body.html，见下：

创建完三个HTML页面，为head.html、left.html、body.html后，src到之前的后台管理页面中，见下：

显示如下，基本框架已出现：

然后实现点击左侧超链接，右侧会出现相关内容。则再新建一个people.html、xitong.html：

然后回到后台管理T型页面，给右侧frame起名字为body，见下：

然后回到left.html，在<a>标签中分别指向xitong.html、people.html、body.html，

再加上target=“body”，见下，这使点击左侧的超链接时，会显示在name为body的frame中。

<iframe>标签语法、设置高度与宽度、移除表框：
<iframe src="http://www.mamicode.com/URL" width="200" height="200" frameborder="0"></iframe>

例：点击链接时页面会显示在 iframe框架中，见下：
<body>

<iframe src="http://www.mamicode.com/demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>

<p><b>注意：</b> 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中。</p>

</body>

HTML基础（三）常用标签-by Haley