2016-02-25

html知识点回顾

一、创建html文档

html基本结构

<html>
    <head>
        <title></title>
    </head>
    <body>
    </body>
</html>

doctype声明:<!doctype html>是html5的标准声明，用来告诉浏览器用html5的解析方式来解析此文档。
html标签不区分大小写，但是建议小写
注释方式:可一行或多行

1、标题标签

标题标签一共有6个，h1-h6，依据重要性递减。h1是最高等级。

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

2、段落标签 p

有默认的margin

3、em和strong标签

em斜体，strong加粗。两者在强调的语气上有区别:em表示强调，strong表示更强烈的强调

4、div和span标签

div 块级标签，可设宽高，margin、padding
span 行级标签

5、链接标签 a

href 链接地址
title 信息描述
target 规定在何处打开链接

6、img标签

为网页插入图片

src:图片的位置，可以是网上的图片，也可以是本地的图片
title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)
alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本

7、q标签

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

8、blockquote标签

长文本引用

9、br标签

换行标签

10、hr标签

分割线标签

11、address标签

为页面加入地址信息

12、code标签

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

13、pre标签

预格式化的文本要插入多行代码时不能使用code标签，可以使用pre标签

三、列表

无序列表 ul li 有默认的margin、padding，前面为. 可通过list-style-type:none;消除列表样式
```
<ul>
    <li></li>
    <li></li>
</ul>
```
有序列表 ol li 有默认的margin、padding，前面为1、2、3… 可通过list-style-type:none;消除列表样式
```
<ol>
    <li></li>
    <li></li>
</ol>
```
自定义列表 dl dt dd
```
<dl>
    <dt></dt>
    <dd></dd>
</dl>
```

四、表格

<table>
    <caption>  <!-- 表格标题，非必需标签 -->
        <tbody>  <!-- 可不写 -->
            <tr>  <!-- 表格的一行 -->
                <th></th>  <!-- 表格头部的一个单元格 -->
                <th></th>
                <th></th>
            </tr>
            <tr>
                <td></td>  <!-- 表格的一个单元格 -->
                <td colspan="2"></td>  <!-- 表示占两行 -->
                <td rowspan="2"></td>  <!-- 表示占两列 -->
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </caption>
</table>

summary属性:表格的摘要

五、表单

form
action属性:输入的数据被传送到的地址,比如一个PHP页面(test.php)。
method属性:数据传送的方式（get/post）

1、input 输入框 text password

当type=”text”时，输入框为文本输入框

<input type="text" name="" value=""/>

当type=”password”时, 输入框为密码输入框

<input type="password" name="" value=""/>

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

2、单选框复选框 radio checkbox

当type=”radio”时，控件为单选框

<input type="radio" name="" value=""/>

当type=”checkbox”时，控件为复选框

<input type="checkbox" name="" value=""/>

value 提交数据到服务器的值（后台程序PHP使用）
name 为控件命名，以备后台程序ASP、PHP使用
checked 当设置checked 或 checked=”checked”时，该选项被默认选中

<input type="text" name="" value="" check="checked"/>

注意：同一组的单选按钮，name取值一定要一致，这样同一组的单选按钮才可以起到单选的作用

3、submit reset hidden button…

4、label 为 input 元素定义标注（标记）

label元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上
标签的 for 属性应当与相关元素的 id 属性相同
for属性可把 label 绑定到另外一个元素。请把 “for” 属性的值设置为相关元素的 id 属性的值

5、textarea 文本域

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

6、select 下拉列表框

multiple属性可以实现多选功能
option 下拉选项

漢

html知识点回顾

一、创建html文档

二、标签

三、列表

四、表格

五、表单