html常用标签

（1）html标题

          标题是通过<h1>-<h6>标签进行定义的

          <h1>最大，<h6>最小

          说明：HTML标题标签只能用于标题，而不能仅仅为了生成粗体或大号文本而使用

<h1>这是一个标题。</h1><h2>这是一个标题。</h2><h3>这是一个标题。</h3>

（2）html水平线

          <hr>用来在页面中创建水平线，用来分隔内容

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

（3）html段落

          <p>可以生成段落

<p>This is a paragraph </p><p>This is another paragraph</p>

          浏览器会自动在段落前后添加空行

（4）html换行

          <br/>可以在不生成一个新段落的情况下进行换行

         说明：浏览器会忽略内容中的空格和回车（换行），所以需要使用标签

（5）html文本格式化

          1.<b>：粗体

          2.<i>：斜体          

          3.<sub>：下标

          4.<sup>：上标

<b>加粗文本</b><br><br><i>斜体文本</i><br><br>这是 <sub> 下标</sub> 和 <sup> 上标</sup>

（6）html链接

        1. 链接url

             也就是超链接，使用href表示具体的url

<a href="url">Link text</a>

        2.在页面内

           相当于跳转到页面内指定位置，使用id来实现

           1）在html文档中插入id

<a id="jump">Useful jump Section</a>

           2）在html中定义跳转链接

<a href="#jump">Visit the jump Section</a>

           3）或者从另一个页面创建一个超链接跳转到id部分

<a href="http://www.w3cschool.cc/html_links.htm#jump">Visit the jump Section</a>

        3.注意

           1）一定要在url中添加/，否则就会发送2次http请求

           2）在新的标签页打开

使用target属性可以指定在新的标签页打开

<a href="http://www.baidu.com/" target="_blank">Visit baidu!</a>

        4.示例

           1）创建图片链接

<p>创建图片链接:<a href="http://www.w3cschool.cc/html/html-tutorial.html"><img src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p><p>无边框的图片链接:<a href="http://www.w3cschool.cc/html/html-tutorial.html"><img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

           2）链接跳出框架

<a href="http://www.w3cschool.cc/" target="_top">Click here!</a> 

（7）html图像

        1. <img>

<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" width="304" height="25">

          1）src

              指图像的url，如果在外网的名为 "boat.gif" 的图像位于 www.w3school.com.cn 的 images 目录中，那么其 URL 为 http://www.w3school.com.cn/images/boat.gif

          2）alt

              也就是说有可能图片无法载入，那么就显示alt中的信息，告诉用户失去了图片

          3）height、weight

              图片的高度和宽度，单位为像素

          4）align

              图像与文字的排列位置，默认为bottom

<h4>Image with default alignment (align="bottom"):</h4><p>This is some text. <img src="smiley.gif" alt="Smiley face" width="32" height="32"> This is some text.</p><h4>Image with align="middle":</h4><p>This is some text. <img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32"> This is some text.</p><h4>Image with align="top":</h4><p>This is some text. <img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32"> This is some text.</p><p><b>Note:</b> The align attribute is deprecated in HTML 4, and is not supported in HTML5. Use CSS instead.</p>

（8）html表格

        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>

           <table>表示其中是一个表格

           <tr>表示表格的每一行

           <td>表示表格的么一个单元格  

        2.<th>

           定义表格的表头，多数浏览器都会把表头显示为粗体居中的文本

<table border="1"><tr><th>Header 1</th><th>Header 2</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>

（9）html列表

        1.无序列表

<ul><li>Coffee</li><li>Milk</li></ul>

          <ul>表示无序列表，其中的每一项使用<li>

        2.有序列表

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

          <ol>表示无序列表，其中的每一项使用<li>

        3.自定义列表

<dl><dt>Coffee</dt><dd>- black hot drink</dd><dt>Milk</dt><dd>- white cold drink</dd></dl>

           自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

（10）div

        作用：块元素，也就是说如果遇到<div>会另起一行。是一个空白标签，不会对页面有其他影响，但是这样就能能在其中定义css了

        常见的页面分块都是用div做的，用height和width进行分区

（11）span

        作用：内联元素，也就是遇到<span>不会换行。也是一个空白标签，不会对页面有其他影响，但是这样就能能在其中定义css了

        和div的区别就在于换不换行

（12）form

      1.属性

        1）action

              向指定url发送表单数据

<form action="url">

              

        绝对 URL - 指向其他站点（比如 src="www.example.com/example.htm"）

          相对 URL - 指向站点内的文件（比如 src="example.htm"）

        2）method

              发送请求时候使用的方法

      2.内容

        1）文本框

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

        2）密码字段

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

        3）单选按钮

<form><input type="radio" name="sex" value="male">Male<br><input type="radio" name="sex" value="female">Female</form>

        注意name相同的视为一组

        4）复选框

<form><input type="checkbox" name="vehicle" value="Bike">I have a bike<br><input type="checkbox" name="vehicle" value="Car">I have a car </form>

          注意name相同的视为一组

         5）提交按钮

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

（13）iframe

             1.作用

                定义一个内联框架，也就是说能在当前html中引入另一个html

             2.属性

                1）src

                      指定iframe中文档的路径