html

1、HTML元素根据浏览器表现形式分为两类：①块元素；②行内元素；

2、块元素特点：

• （1）独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；
• （2）块元素内部可以容纳其他块元素或行元素；

3、行内元素特点：

• （1）可以与其他行内元素位于同一行；
• （2）行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果；

表单

form标签属性

标签有几个属性，分别是action、method、enctype和target属性 ### 1、表单名称name 一个页面你的表单可能不止一个，为了区分这些表单，我们使用name属性来给表单进行命名。这样也是为了防止表单提交之后到后台程序出现混乱。 ### 2、提交表单action action用于指定表单数据提交到哪个地址进行处理。 表单的处理程序是表单要提交的地址，这个程序地址用来处理从表单搜集的信息。这个地址可以是相对地址，也可以是绝对地址，还可以是一些其他形式的地址。

<form  name="form1" action="mailto:lvyestudy@foxmail.com"></form>

### 传送方法method 表单method属性作用是告诉浏览器，指定将表单中的数据使用哪一种HTTP提交方法，取值为get或post。 | method属性值 | 说明 | | ——— | —————————————- | | get | 默认值，表单数据被传送到action属性指定URL，然后这个新URL被送到处理程序上 | | post | 表单数据被包含在表单主体中，然后被传送到处理程序上 | 这两种方式的区别在于，get在安全性上较差，所有的表单域的值直接显示出来。而post除了只有可见的处理脚本程序之外，其他的信息都可以隐藏。所以实际的开发当中通常都选择post这种处理方式 ### 目标显示方式target 标签的target属性跟 标签的target属性一样，都是用来指定目标窗口的打开方式。 | target属性值 | 说明 | | ——— | ———————————— | | _self | 默认值，表示在当前的窗口打开页面 | | _blank | 表示在新的窗口打开页面 | | _parent | 表示在父级窗口中打开页面 | | _top | 表示页面载入到包含该链接的窗口，取代当前在窗口中的所有页面，因此其他所有 | target这4个属性值都是以下划线“_” 开头的，书写的时候很容易遗漏。 ### 编码方式enctype 标签的enctype属性用于设置表单信息提交的编码方式。 | enctype属性值 | 说明 | | ——————————— | ————————- | | application/x-www-form-urlencoded | 默认的编码方式 | | multipart/form-data | MIME编码，对于“上传文件”这种表单必须选择该值 | 所谓的表单对象，简单来说，就是放在标签内部的各种标签。最常见的文本框、下拉列表都是表单对象。表单对象有3种：① input；②textarea；③select和option。 ### input 1. type=text 输入类型是text，这是我们见的最多也是使用最多的，比如登陆输入用户名，注册输入电话号码，电子邮件，住址等等。当然这也是Input的默认类型。 | 文本框text属性 | 说明 | | ——— | ——————– | | value | 定义文本框的默认值，也就是文本框内的文字 | | size | 定义文本框的长度，以字符为单位 | | maxlength | 设置文本框中最多可以输入的字符数 | ​ 参数name：同样是表示的该文本输入框名称。 ​ 参数size：输入框的长度大小。 ​ 参数maxlength：输入框中允许输入字符的最大数。 ​ 参数value：输入框中的默认值。 ​ 特殊参数readonly：表示该框中只能显示，不能添加修改。 1. type=password 输入类型是password，一看就明白的密码输入框，最大的区别就是当在此输入框输入信息时显示为保密字符。参数和“type=text”相类似。 2. **type=file ** 当你在BBS上传图片，在Email中上传附件时一定少不了的东西，提供了一个文件目录输入的平台，选择上传文件，参数有name，size。 3. type=hidden 有时候我们想要在页面传送一些数据，但是又不想让用户看见，这个时候我们可以通过一个隐藏域来传送这样的数据。隐藏域包含那些要提交处理的数据，但这些数据并不显示在浏览器中。 4. **type=button** 标准的windows风格的按钮，当然要让按钮跳转到某个页面上还需要加入写JavaScript代码。 5. **type=checkbox** 多选框，常见于注册时选择爱好、性格、等信息。参数有name,value及特别参数checked（表示默认选择） 其实最重要的还是value值，提交到处理页的也就是value。（附：name值可以不一样，但不推荐。） 6. **type=radio** 单选框，出现在多选一的页面设定中。参数同样有name,value及特别参数checked。不同于checkbox的是，name值一定要相同，否则就不能多选一。当然提交到处理页的也还是value值。 “` 性别： 男 女
你是： 90后 00后 其他

   value是为了方便像服务器端传递数据

“`

​

1. type=image

   比较另类的一个，可以作为提交式图片按钮，通常采用这种按钮效果更美观。

   普通按钮、提交按钮和重置按钮的区别

   从上面我们知道：普通按钮一般与JavaScript脚本结合在一起来实现一些特效，提交按钮主要用于把当前所在标签内部的表单输入信息提交给服务器处理，而重置按钮则是清除当前所在标签内部的表单元素的输入信息。

   多行文本框textarea简介

   单行文本框只能输入一行信息，而多行文本框可以输入多行信息。

   多行文本框使用的是textarea标签，而不是input标签。

   语法：

   多行文本框内容

   说明：

   在该语法中，不能使用value属性来建立一个在文本域中显示的初始值，这一点跟单行文本框不一样。

   对于多行文本框的默认文字内容，你可以设置，也可以不设置。

   下拉列表简介

   下拉列表由和这2个标签配合使用

标签属性	说明
multiple	可选属性，只有一个属性值”multiple”。默认情况下下拉列表只能选择一项，当设置multiple=“multiple”时，下拉列表可以选择多项
size	下拉列表展开之后可见列表项的数目

标签属性	说明
value	选项值
selected	是否选中


<select multiple="multiple" size="5">
<option>HTML</option>
<option selected="selected">CSS</option>
<option>jQuery</option>
<option>JavaScript</option>
<option>ASP.NET</option>
<option>Ajax</option>
</select>
value主要是用来向服务器传递数据用的


​

​

​

## 表格

标签	说明
table	表格
caption	标题
thead	表头（语义划分）
tbody	表身（语义划分）
tfoot	表尾（语义划分）
tr	行
th	表头单元格
td	表格单元格

合并行使用td标签的rowspan属性，而合并列则用到td标签的colspan属性

 <table>
        <tr>
            <td>姓名:</td>
            <td>小明</td>
        </tr>
        <tr>
            <td rowspan="2">喜欢水果:</td>
            <td>苹果</td>
        </tr>
        <tr>
            <td>香蕉</td>          //少一个td
        </tr>
    </table>

表格中的合并列：colspan属性

 <table>
        <!--第1行-->
        <tr>
            <td colspan="2">绿叶学习网精品教程</td>
        </tr>
        <!--第2行-->
        <tr>
            <td>HTML教程</td>
            <td>CSS教程</td>
        </tr>
        <!--第3行-->
        <tr>
            <td>jQuery教程</td>
            <td>SEO教程</td>
        </tr>
    </table>