二：HTML常用标签(总)

六、无序列表：unordered list

• ul：无序列表
• li：列表项目

        <ul type="square">
            <li type="">一级</li>
            <ul>
                <li type="1">二级</li>
                <ul type="circle">
                    <li>三级</li>
                    <li>三级</li>
                </ul>
                <li type="1">二级</li>
            </ul>
            <li>三级</li>
        </ul>
标记的次序－－－
如果项目指定了type，使用本项目的type，此时ul的type在此项目不生效；
如果项目未指定type，此时使用ul的type；
如果项目和ul都没有指定type，此项目使用默认标记：小园点

type: square  在项目前显示方框
type: circle  在项目前显示小圆圈
type: ""和无type 是一样的效果，不指定type;此时，使用什么标记，依据上面的“标记顺序”
type: "1" 在项目前显示数字序号
type: "i" 在项目前显示阿拉伯符号作序号

多个项目，多行
多级ul，以table退后显示

七、有序列表：ordered list

• ol：有序列表
• li：列表项目

        <ol type="1">
            <li >一级</li>
            <ol type="a">
                <li >二级</li>
                <ol type="i">
                    <li>三级</li>
                    <li>三级</li>
                </ol>
                <li>二级</li>
            </ol>
            <li>一级</li>
        </ol>

八、自定义列表：definition list

• dl：定义列表
• dt：描述项
• dd：描述项的解释项

        <dl>
            <dt>描述项:</dt>
            <dd>描述项的解释项.</dd>
        </dl>

九、表格：table

• table：表格
• caption：表格标题
• thead：表头
• th：表格单元格标题；应该在外层加上tr或td
• tbody：表主体
• tfboot：表尾
• tr：表格行
• td：表格列
• d
• td rowspan：此列，行合并
• tr colspan：此行，列合并

        <table border="1" width="600" align="center">   // border 线条大小；align　对齐方式；width表格宽度
            <caption>表格标题</caption>
            <thead>
                <tr>
                    <th>表格单元格标题</th>
                    <th>表格单元格标题</th>
                    <th>表格单元格标题</th>
                </tr>
            </thead>
            <tbody align="center">
                <tr>
                    <td>一</td>
                    <td>二</td>
                    <td rowspan="2">行合并</td>
                </tr>
                <tr>
                    <td>一</td>
                    <td>二</td>
                </tr>
            </tbody>
            <tfoot><tr><td colspan="3" align="center">表尾列合并</td></tr></tfoot>
        </table>

十、表单：form

• form：表单，把"控件"集中起来
• input：控件
  
  • name：控件名
  • size：表单域的长度大小
  • maxlength：特定控件允许输入的最大字符数
  • checked：设置是否选中
  • value：按钮上的文本信息
  • disabled：第一次载入时失效

        <form name="表单" action="" method="">
            <input type="text" size="30" maxlength="10" name="文本框" value="输入文本" >
            <input type="password" name="密码框">
            <input type="submit" value="提交按钮" name="提交按钮">
            <input type="reset" value="重置按钮" name="重置按钮">
            <input type="radio" value="单选按钮" name="单选按钮" >
            <input type="checkbox" value="复选按钮" name="复选按钮" checked="" disabled="">
            <input type="hidden" value="隐藏文本框" name="隐藏文本框">
        </form>

form name="表单"，这是表单名 

name="文本框"，name="密码框"....这些是控件名

type控制类型: 什么样的type决定了什么什么样的控制，这是关键；其它信息仅仅是辅助属性，无论何值，都不会影响控件的类型；

十一、文本域和文本区域

• textarea：文本区域
  
  • cols：列数
  • rows：行数
  • name：文本域名字
  • readonly：文本域只可以读
  • disabled：第一次载入时失效

        <form>
            <textarea cols="20" rows="4" maxlength="100"  name="文本域" >文本域123</textarea>
        </form>

　　textfield：文本域

十二、选择列表

• select：下拉列表
  
  • size：显示可见显目数
  • name：列表名
  • multiple：可同时多选
  • disabled：载入时失效
• optgroup：列表的项目名
  
  • label：项目标签名
  • disabled：载入时失效
• option：
  
  • label
  • selected
  • value
  • disabled

        <select multiple="" name="下拉列表" size="6">
            <optgroup label="学科">
            <option label="标签1" value="语文">语文</option>
            <option label="标签2" selected="" value="数学">数学</option>
            </optgroup>
            <optgroup label="体育">
            <option label="标签3">游泳</option>
            <option label="标签4">篮球</option>
        <select>

十二、域标签

• fieldset：域标签
• legend：域标题标签

        <form>
            <fieldset>
                <legend>
                域标题
                </legend>
                用户：<input type="text" name="user"><br>
                留言：<textarea rows="10" cols="20"></textarea><br>
                <input type="submit" value="发送">
                <input type="reset" value="删除">
            </fieldset>
        </form>

十三、框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

• frameset：定义框架的容器
  
  • cols：框架占列的大小
  • rows：框架占行的大小
• frame：子窗口
  
  • scroling：子窗口是否可以滚动
  • name：子窗口名字
  • src：串口链接url指定的文件
  • marginheight：子窗口上下边距
  • marginwidth：子窗口左右边距
  • frameborder：显示子窗口的边界与否；"0" 为移除iframe的边框

    <frameset  rows="30%, 30%, *" cols="*">
    <frame name="top" src="1-1%E4%B8%AA%E4%BA%BA%E7%AE%80%E5%8E%86.html" scrolling="yes">
    <frame name="middle" src="1-2%E6%9C%88%E6%B6%88%E8%B4%B9%E8%A1%A8.html" frameborder="1" marginheight="100" marginwidth="500">
    <frame name="bottom" src="1-3%E5%A4%A9%E7%8C%AB.html" scrolling="no" noresize="">
    </frameset>

示例：使用iframe来显示目录链接页面

　　iframe可以显示一个目标链接的页面，目标链接的属性必须使用iframe的属性

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.ziqiangxuetang.com" target="iframe_a">ZiQiangXueTang.com</a></p>

十四、图像

• img：图像
  
  • src：图片地址
  • alt：图片描述
  • align：对齐
  • height：高度
  • width：宽度

<img src="image/1.png" align="" alt="图片" height="500" width="500">

map ：定义图像地图
area : 定义图像地图中的可点击区域 

十五、文本格式化

• b：粗体
• i：斜体
• big：大号
• samll：小号
• sup：上标
• sub：下标
• ins：插入
• del：删除线
• pre：预格式文本
• address：地址
• strong：加重
• em：强调

        <b>粗体</b><br>
        <i>斜体</i><br>
        <big>大字体</big><br>
        <small>小字体</small><br>
        <sup>上标字</sup><br>
        <sub>下标字</sub><br>
        <ins>插入字</ins><br>
        <del>删除字</del><br>
        <pre>预格式文本</pre><br>
        <address>地址:www.baidu.com</address><br>
        <strong>加重字体</strong><br>
        <em>强调字体</em><br>

通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。
但是这些标签的含义是不同的，应根据场景选择：
<b> 与<i> 定义粗体或斜体文本。
<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。

十六、HTML字符实体

　如果要使用在 HTML 中预留字符的，需使用&标记。

　　&nbsp：空格　　

　　&lt：<

　　&#60：<

　　&amp： &

　　&copy：©

HTML 中的常用字符实体是不间断空格(&nbsp;)。

浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用 &nbsp; 字符实体。

十六、脚本标签

• <script>：<script>用于定义客户端脚本，比如 JavaScript。<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
• <noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。