HTML基础（三）常用标签

一、注释文字

语法：

二、<h1> - <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>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>

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

1.语法：
<a href="url">链接文本</a>

2.target 属性

3.id 属性

如：

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

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

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

八、 <img>标签、Alt属性

1.语法：
<img src="url" alt="some_text">

2.Alt属性
<img src="boat.gif" alt="Big Boat">

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

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

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

横行竖列

HTML基础（三）常用标签

合并

1.合并列

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

HTML基础（三）常用标签

2.合并行

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

HTML基础（三）常用标签

十、<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.多行文本

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="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

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

6.下拉框

（1）简单下拉框

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

（2）预选下拉框

<form action="">
<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>
</form>

（3）组别下拉框

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="Submit">
</form>

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

9.上传文件