2016-02-26

html标签属性知识回顾

一、block块级标签：可以设置宽和高的标签

1、div：无意义的盒子

<div style="width:100px;height:100px;background-color:red;"></div>

2、 h1~h6

标题一共有六个，h1～h6，并且依据重要性递减，字体有加粗效果。h1是最高的等级。有默认margin值。

<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>

我是一级标题

我是二级标题

我是三级标题

我是四级标题

我是五级标题

我是六级标题

3、 p段落

有默认margin值

<p>我是一个段落</p>

4、列表

（1）有序列表ol

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
</ol>

列表项1

列表项2

（2）无序列表ul

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
</ul>

列表项1

列表项2

ol和ul必须要和li嵌套使用。根据书写规范来说：中间不能添加其他标签，如果要添加其他标签内容的话就在li标签里添加

要注意的是，ul和ol是块级标签，但是li不是块级标签，之所以li可是设置宽和高，是因为li继承了父级的块级属性，li其实属于 display: list-item;

（2）自定义列表

<dl>//自定义列表
    <dt>汉字</dt>//列表标题
    <dd>是用于书写汉语的文字[1]  ，也可被借用于书写日语、朝鲜语（韩语）等语言。</dd>//列表内容
    <dt>洛阳纸贵</dt>
    <dd>称颂杰出的作品风行一时。</dd>
</dl>

汉字: 是用于书写汉语的文字[1] ，也可被借用于书写日语、朝鲜语（韩语）等语言。
洛阳纸贵: 称颂杰出的作品风行一时。

dl,dt,dd要嵌套配合使用。根据书写规范来说：中间不能添加其他标签，如果要添加其他标签内容的话就在dt和dd标签里添加

5、 form表单:用于为用户输入创建HTML表单

<form action="test.php" method="get"></form>

有属性：

（1）actoin属性输入的数据被传送到的地址，比如一个PHP页面（test.php）

（2）method属性数据传送的方式（比较常见：post（保密性较强）、get（保密性差，显示到地址框上）

form标签里嵌套的是input标签

6、hr分割线标签

<p>几号放假？</p>
<hr />
<p>大家好啊！</p>

几号放假？

大家好啊！

6、blockquote标签：长文本引用。

7、pre标签：预格式化的文本要插入多行代码时不能使用code标签，如果是多行代码，可以使用pre标签。

<pre>
    var i = 0;
    var j = 0;
</pre>

    var i = 0;
    var j = 0;

8、address标签：为页面加入地址信息，样式为斜体。

<address>上海市</address>

上海市

二、inline-blck行块级标签

1、input标签

（1）text文本

<label>姓名：</label><input type="text" name="username" value="请输入姓名" />

姓名：

（2）password密码:可以隐藏字符

密码：

密码：

- name 为文本框命名，以备后台程序ASP 、PHP使用；
- value 为文本输入框设置默认值。(一般起到提示作用)

（3）radio单选框：只能选一个

男：

女：

（4）chexkbox复选框：可以选多个

喜欢吃的水果：

<label>荔枝：</label><input type="checkbox" name="" value="荔枝" checked />

    <label>苹果：</label><input type="checkbox" name="" value="苹果" />

<label>香蕉：</label><input type="checkbox" name="" value="香蕉" checked />

喜欢吃的水果：

荔枝：

苹果：

香蕉：

value 提交数据到服务器的值（后台程序PHP使用）
name 为控件命名，以备后台程序ASP、PHP使用
checked 当设置checked 或 checked=”checked”时，该选项被默认选中
注意：同一组的单选按钮，name取值一定要一致，这样同一组的单选按钮才可以起到单选的作用

5、button：按钮

<input type="button" name="button" value="按钮" />

6、sumbit：发送

<input type="submit" name="submit" value="发送" />

顾名思义，button就是有按钮点击作用，submit有发送到服务器端的作用

7、textarea文本域标签

<textarea></textarea>

可鼠标拖动改变文本域框的大小，可以设置最多输入多少行，多少列

cols属性：多行输入域的列数
rows属性：多行输入域的行数

8、select标签：下拉列表框。

<select>
    <option>面包</option>
    <option>牛奶</option>
    <option>奶酪</option>
</select>

<select multiple>
    <option>面包</option>
    <option>牛奶</option>
    <option>奶酪</option>
</select>

//按住command键，可实现多选。

multiple属性可以实现多选功能，但是样式会发生改变。
option 下拉选项

三、table标签

1、table表格

（1）table tbody这个标签基本上不怎么用了

（2）tr 表格的一行

（3）th 表格的头部的一个单元格，表格表头

（4）td 表格的一个单元格

（5）caption 表格标题

（6）summary属性表格的摘要

<table summary="水果价格表">
    <caption>表格标题</caption>
    <tr>
        <th>香蕉</th>
        <th>草莓</th>
        <th>荔枝</th>
    </tr>
    <tr>
        <td>5元/斤</td>
        <td>10元/斤</td>
        <td>10元/斤</td>
    </tr>
</table>

表格标题
香蕉	草莓	荔枝
5元/斤	10元/斤	10元/斤

四、inline行级标签

1、em 和 strong

两者都是强调，但是两者在强调语气上有区别：em 表示强调；strong 表示更强烈的强调

我是em

我是strong

2、span：和div差不多无意义，但多是用来包含字符。

3、q：短文本引用比如在你的网页的文章里想引用某个作家的一句诗，这样会使你的文章更加出彩，那么标签是你所需要的。

五、其他标签

1、label标签：为input元素定义标注（标记）

2、br标签：换行

3、a:超链接

href属性：链接目标，必不可少的
title属性
target

4、img图片：为网页插入图片

<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTkYnz8GgqSaflPuEsnKbJrxZMGouOYLj0eOjYm25PlEldrBhsGDg" title="可爱小猪" alt="可爱小猪图片" />

可爱小猪图片

把鼠标移动到图片上看看

src 图像的位置，必不可少的
title 提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)
alt 指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；

5、code标签：在网页中显示一些计算机专业的编程代码，当代码为一行代码时，你就可以使用code标签了。

<code>
    var i = 0;
    var j = 0;
</code>

var i = 0; var j = 0;