HTML基本标签和用处：

HTML常用标签总结 (1-3章)

1.标题标签

<h1> </h1> ...... <h6> </h6>

为了使网页更具有语义化,我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题 即<h1>-<h6>

2. 段落和换行标签

段落标签：<p> </p>

在HTML标签中,标签用于定义段落,它可以将整个网页分为若千个段落

3.换行标签

换行标签：<br/>

在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后才自动换行。如果希望 某段文本强制换行显示，就需要使用换行标签<br/>

4. 文本格式化标签

加粗：<strong>    </strong>或者<b>   </b>
倾斜：<em>    </em>或者<i>    </i>

4. <div></div>(块级元素)和<span></span>（行内元素）

<div style="background-color: brown;">111</div>
<div style="background-color: bisque;">222</div>
<div style="background-color: aqua;">333</div>

<span></span>是小盒子，一行可以放多个

5. 图像标签

图像标签：<img src="xxxxxx" 属性2="xxxxxx">

6. 超链接标签

< a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

7. 锚点链接

<a href="#要跳转的元素的id"></a>

点击链接的时候，会跳转到指定元素所在的位置。

8. 注释和特殊字符

注释以“<!-”开头，以“->”结束。

特殊字符：

空格   
<  小于号    <
>  大于号    >
￥  人名币    ¥
©    版权  ©

9. 表格标签

是用于定义表格的标签。

<table></tabe>是用于定义表格的标签。
<tr></tr>标签用于定义表格中的行,必须嵌套在< table></ table>标签中
<td></td>用于定义表格中的单元格，必须嵌套在< tr></ tr>标签中
<th></th>表示表格的表头部分，表示表格的第一行或第一列，其中的文本内容加粗居中显示

一些常用的属性：

    <!-- 
            table标签声明表格
                属性：
                border：设置边框
                align：设置表格对齐方式，还可以设置表格中内容的对齐方式
                    取值：center left right
                width：设置表格宽度，如果填写百分比会根据屏幕大小变化，如果填写固定值就不会
                cellpadding：设置单元格内容与边框的距离
                cellspacing：设置表格外边框和和单元格外边框的距离，以及每一个单元格外边框的距离
            tr标签代表表格的每一行
            caption标签是设置表格标题
            th标签是代表表头
            td标签代表每一个单元格
                属性：
                bgcolor：设置单元格的颜色
                valign：设置单元格内容的垂直对齐方式
                    取值：top（上） middle（下） bottom（居中）
                colspan：跨列合并单元格
                rowspan：跨行合并单元格
         -->
        <table border="2"  cellpadding="50" align="center" width="50%">
            <caption>学生成绩表</caption>
            <tr bgcolor="black" bgcolor="magenta">
                <th colspan="3">学生成绩表</th>
            </tr>
            <tr align="center">
                <td valign="middle" rowspan="2">张三</td>
                <td bgcolor="blue">语文</td>
                <td>数学</td>
            </tr>
            <tr align="center">
                <td>数学</td>
                <td>90</td>
            </tr>
            <tr>
                <td rowspan="2">李四</td>
                <td>语文</td>
                <td>数学</td>
            </tr>
            <tr>
                <td>数学</td>
                <td>90</td>
            </tr>
        </table>

10. 列表标签

<ul></ul>：定义无序列表，里面只能放 li 标签，其它标签不被允许
<ol></ol>：定义有序列表，里面只能放 li 标签，其它标签不被允许
<li></li>：有序列表和无序列表中的列表项，相当于一个容器，里面可以放其它标签
<dl></dl>：定义自定义列表，里面只能包含 dt 和 dd 标签
<dt></dt>：定义自定义列表中的项目
<dd></dd>：描述自定义列表中的每一个项目

<ul>
    <li>无序列表</li>
    <li>无序列表</li>
    <li>无序列表</li>
</ul>
<ol>
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
</ol>
<dl>
    <dt>帮助中心</dt>
    <dd>账户管理</dd>
    <dd>购物指南</dd>
    <dd>订单操作</dd>
    <dt>服务支持</dt>
    <dd>售后政策</dd>
    <dd>自助服务</dd>
    <dd>相关下载</dd>
</dl>

11. 表单标签

通常一个表单由一个大的表单域构成，表单域里面又包含表单元素和提示信息。

<form></form>：表单域标签，表单域就是一个包含表单元素的区域

<form></form>标签常用属性：

<input/>：输入表单元素
<lable></lable>：绑定一个表单元素，当点击 lable 标签内的文本时，会自动将焦点转到对应的表单元素上，lable 标签的for属性必须得与相关元素的id属性相同
<select></select>：下拉表单元素，用于定义一个下拉列表
<option></option>：下拉列表中的元素，定义**selected=“selected”**属性时，当前项为默认选中项
<textarea></textarea>文本域元素，用于定义一个多行文本输入框，cols属性规定每行的字符数，rows属性规定显示的行数

<input/>标签的常用属性：

    <!-- 声明表单使用form标签
                    action：服务器提交地址
                    methode：提交的方法get（不安全）、post（安全）
         -->
        <form action="#" method="get">
            <!-- 
            属性：
            type：
             文本框：text
             密码框：password
             单选框：radio
             多选框：checkbox
             文件上传：file
             文本域使用：textarea标签
             下拉栏：select标签，里面的选项用的是option
             name属性：例如有很多个input标签可以通过取名来辨别
             id属性：同name属性
             value：默认值
             checked：默认选择的单选框，或者复选框
             selected：使用在我们的下拉栏中，默认选中的值
             表单的高级应用
                placeholder：可以提示用户要输入的内容
                required：提示用户必须填写
             -->
            姓名：<input type="text" name="" id="" value="小心肝" /><br>
            密码：<input placeholder="请输入密码" required type="password" name="" id="" value="" /><br>
            性别：<input type="radio" checked="checked" name="sex"  value="男" />男
            <input type="radio" name="sex"  value="女" />女
            <br>
            兴趣爱好：
            <input type="checkbox" checked name="in" id="" value="富婆" />富婆
            <input type="checkbox" name="in" id="" value="马云" />马云
            <input type="checkbox" checked name="in" id="" value="富婆2" />富婆2
            <br>
            请上传你的私密图片：
            <input type="file" name="" id="" value="" />
            <br>
            生日年份：
            <select>
                <option value ="1995">1995</option>
                <option selected value ="1996">1996</option>
                <option value ="1997">1997</option>
            </select>年
            <br>
            请填写你要投诉的教师：
            <textarea rows="5" cols="60"></textarea>
            <br>
            <input type="submit"/>
            <input type="button" name="" id="" value="登录" />
            <input type="reset" />
        </form>