HTML常用标签及属性

标签按照实现效果可以分为：
        1.块元素标签（行元素标签）：默认占有一行
        2.内联元素标签(行内元素)：默认可以排列在一行

1.块元素标签

1. 标题标签h1到h6，含有默认样式

<h1></h1>~<h6></h6>

2. 段落标签，含有默认样式

<p></p>

3. 通用块容器标签,包含任意一块不定的内容，没有固定语义，可以做嵌套

<div></div>

2.内链元素标签

1. 超链接标签

<a href="超链接目标地址">超链接文字</a>
举例：
<a href="http://www.baidu.com">去百度</a>
<a href="#">  </a>  如果网址还不确定，先用#代替

2. 图片

<img src="images/无标题.png" alt="哈哈哈哈" title="显示文字">

3. 超链接图片

<a href="http://www.baidu.com"><img src="images/无标题.png" alt="哈哈哈哈"></a>
href设置链接地址，alt图片说明，src图片地址,title鼠标指到图片后显示文字

4. 通用内联元素标签

<span> </span>

3.字符实体

  空格
&lt;  小于号<
&gt; 大于号>

4.功能标签

<br>: 换行标签
<!--注释-->  注释标签

5.列表标签及属性

1.无序列表：

<ul>
<li>列表标题<li>
</ul>
列表一般都是带链接的，如下
<ul>
<li><a href="链接">列表文字</a></li>
</ul>

2.有序列表：

<ol>
<li>有序列表</li>
</ol>

3.序号样式 ist-style:none;

none 			无效果；
cricle 			空心圆；
decimal 		序号（1 2 3）；
decimal-leading-zero 序号（01 02 03）；
disc 			实心圆；
llower-alpha 	（a b c d）；
lower-greek 	（α β）；
lower-latin 	（a b c）；
lower-roman 	（i ii iii）；
upper-alpha 	（A B C）；
upper-roman 	（Ⅰ Ⅱ Ⅲ）

6.表单标签及属性

1、<form>标签 定义整体的表单区域

●action属性 定义表单数据提交地址
	为空表示提交到当前地址
●method属性 定义表单提交的方式，一般有“get”方式和“post”方式
	get显示在地址栏
	post 显示在报文里

2、<label>标签 为表单元素定义文字标注

<label for="id">aaa</label>
<input type="text" id="id">  点aaa就能到文本框里

3、标签 定义通用的表单元素

1. type属性

type="text" 定义单行文本输入框
type="password" 定义密码输入框
type="radio" 定义单选框
type="checkbox" 定义复选框
type="file" 定义上传文件
type="submit" 定义提交按钮
type="reset" 定义重置按钮
type="button" 定义一个普通按钮

2. value属性 定义表单元素的值
3. name属性 定义表单元素的名称，此名称是提交数据时的键名
4. placeholder属性 设置文本框默认显示内容

4、标签 定义多行文本输入框

5、标签 定义下拉表单元素

6、标签 与标签配合，定义下拉表单元素中的选项

7.举例

<form action="http://www.baidu.com" method="get">
        <p>
        <label for="">用户名：</label>
        <input type="text" name="用户名">
        </p>
        <p>
        <label for="">密&nbsp;&nbsp;&nbsp;码：</label>
        <input type="password" name="密码">
        </p>
        <p>
            <label for="">性&nbsp;&nbsp;&nbsp;别：</label>
            <input type="radio" name="gender" value=0>男
            <input type="radio" name="gender" value=1 checked="checked">女
        </p>
        <p>
            <label for="">爱&nbsp;&nbsp;&nbsp;&nbsp;好：</label>
            <input type="checkbox" name="favorate" value=0 checked="checked">学习
            <input type="checkbox" name="favorate" value=1 checked="checked">唱歌
            <input type="checkbox" name="favorate" value=2 checked="checked">游泳
            <input type="checkbox" name="favorate" value=3 checked="checked">打篮球
            <input type="checkbox" name="favorate" value=4 checked="checked">玩游戏
        </p>
        <p>
            <label for="">裸&nbsp;&nbsp;&nbsp;照：</label>
            <input type="file" name="个人照片">
        </p>
        <p>
            <label for="">籍&nbsp;&nbsp;&nbsp;贯：</label>
            <select name="" id="">
                <option value="0">上海</option>
                <option value="1">北京</option>
                <option value="2" selected="selected">深圳</option>
                <option value="3">广州</option>
            </select>
        </p>
        <p>
            <label for="">个人简介：</label>
            <textarea name="个人简介" id="" cols="30" rows="10"></textarea>
        </p>
        <p>
            <input type="submit" value="提交">
            &nbsp;&nbsp;&nbsp;
            <input type="reset" value="重置">
            &nbsp;&nbsp;&nbsp;
            <input type="button" value="普通按钮">
        </p>
    </form>

7.表格标签及属性

（1）<table>标签：声明一个表格
（2）<tr>标签：定义表格中的一行
（3）<td>标签：定义一行中的一个普通单元格
（4）<th>标签：定义一行中的一个表头单元格
举例：

<style>
        table{
            width: 500px;
            height: 200px;
            border:2px solid black;
            /* 设置表格的边线合并 */
            border-collapse:collapse;
        }
        th{
            border:1px solid black;
            /* 设置每个单元格的宽度为总宽度的20%，
            否则单元格默认宽度会根据填写内容自动调整 */
            width:20%;
            background:hotpink;
        }
        td{
            border:1px solid black;
            text-align:center;
        }

    </style>