美文网首页
HTML5的基础标签(下)

HTML5的基础标签(下)

作者: 低调桀骜红烧肉 | 来源:发表于2017-01-02 18:31 被阅读0次

    1.表格标签:

    格式:<table>

                          <tr></tr>

                          <td></td>

               </table>

    border: 默认情况下表格的边框宽度为0看不到, 通过border属性给表格指定边框宽度

    width: 默认情况下表格的宽度是由内容自动计算出来的, 可以通过width属性指定表格的宽度

    height:默认情况下表格的高度是由内容自动计算出来的, 可以通过height属性指定表格的高度

    cellspacing: 外边距. 默认情况下单元格之间有2个像素的间隙, 可以通过cellpadding指定表格之间的间隙

    cellpadding: 内边距. 默认情况下单元格边缘距离内容有1个像素的内边距, 可以通过cellpadding属性指定单元格边缘和内容之间的内边距

    align: 规定表格相对周围元素的对齐方式, 它的取值有center、left、right

    给table设置align属性, 是让表格在浏览器中居左/居右/居中

    给tr设置align属性, 是让当前行中所有内容居左/居右/居中

    给td设置align属性,是让当前单元格中所有内容居左/居右/居中

    该属性仅仅作为了解, 企业开发中用css代替, 因为HTML仅仅用于说明语义

    如果td中设置了align属性, tr中也设置了align属性, 那么单元格中的内容会按照td中设置的来对齐

    valign: 规定表格相对周围元素的对齐方式, 它的取值有center、left、right

    给table设置valign属性, 无效

    给tr设置valign属性, 是让当前行中所有内容居上/居中/居下

    给td设置valign属性,是让当前单元格中所有内容居上/居中/居下

    如果td中设置了valign属性, tr中也设置了valign属性, 那么单元格中的内容会按照td中设置的来对齐

    bgcolor:规定表格的背景颜色

    给table设置bgcolor属性, 是给整个表格设置背景颜色

    给tr设置bgcolor属性, 是给当前行设置背景颜色

    给td设置bgcolor属性, 是给当前单元格设置背景颜色

    2.表单中有两种类型的单元格, 一种是标准单元格td, 一种是表头单元格th

    th标签: 给每一列设置标题, 单元格中的内容会自动加粗,居中

    caption标签:给整个表格设置标题

    一定要嵌套在talbe标签内部才有效

    格式:<table>

                         <caption>title</caption>

                               <tr>

                               <th></th>

                          <tr>

                          <tr>

                                 <td></td>

                          </tr>

            </table>

    3.合并单元格

    合并当前列的哪几个单元格, 注意colspan之后向后合并, 不会向前合并

    3.1横向合并calspan

    格式:

    <td calspan="2"></td>

    3.2纵向合并rowspan

    格式:<td rowspan="2"</td>

    4.表单

    作用: 用于收集用户信息, 让用户填写、选择相关信息

    所有的表单内容,都要写在form标签里面

    form标签中有两个比较重要的属性action和method

    明文输入框

    作用: 用户可以在输入框内输入内容

    title:<input type="text">

    暗文输入框

    作用: 用户可以在输入框内输入内容

    title:<input type="password">

    给输入框设置默认值

    title:<input type="text" value="good">

    规定输入字段中的字符的最大长度

    title:<input type="password" name="liming" maxlength="8">

    单选框(radio)

    作用: 用户只能从众多选项中选择其中一个

    单选按钮,天生是不互斥的,如果想互斥,必须要有相同的name属性

    checked是用来设置默认属性

    <input type="radio" name="Lihua">男

    <input type="radio" name="Lihua" checked="checked">女

    多选框(checkbox)

    作用: 用户只能从众多选项中选择多个

    复选框,最好也是有相同的name(虽然他不需要互斥,但是也要有相同的name)

    <input type="checkbox" name="hobby">篮球

    <input type "checkbox" name="boddy">足球

    abel标签

    作用: label标签不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性

    注意事项:

    表单元素要有一个id,然后label标签就有一个for属性,for属性和id相同就表示绑定了

    所有表单元素都可以通过label绑定

    格式:

    <label for="account">账号:</label>

    <input type="text" id="account">

    按钮

    作用: 定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)

    <input type="botton"value ="我是按钮">

    图片按钮

    作用:定义图像形式的提交按钮

    <input type="img" src="0.jpg">

    重置按钮

    作用: 定义重置按钮。重置按钮会清除表单中的所有数据

    这个按钮不需要写value自动就有“重置”文字

    reset只对form表单中表单项有效果

    <input type="reset">

    提交按钮

    作用:定义提交按钮。提交按钮会把表单数据发送到action属性指定的页面

    格式:

    <input type="submit">

    注意事项:

    这个按钮不需要写value自动就有“提交”文字

    要想通过submit提交数据到服务器, 被提交的表单项都必须设置name属性

    默认明文传输(GET)不安全, 可以将method属性设置为POST改为非明文传输(学到Ajax再理解)

    隐藏域

    作用: 定义隐藏的输入字段

    格式:

    <input type="hidden">

    取色器

    格式:

    <input type="color">

    HTML5中input类型增加了很多type类型, 例如color、date但是都不兼容, 后面讲到浏览器兼容时会重点讲解

    日期选择器

    <input type="date">

    HTML5中input类型增加了很多type类型, 例如color、date但是都不兼容, 后面讲到浏览器兼容时会重点讲解

    数据列表

    作用: 给输入框绑定待选项

    格式:

    <datalist  type="text" list="">

          <option>待选项内容</option>

    </datalist>

    多行文本框(文本域)

    作用: textarea标签用于在表单中定义多行的文本输入控件

    cols属性表示columns“列”, 规定文本区内的可见宽度

    rows属性表示rows“行”, 规定文本区内的可见行数

    格式:<textarea cols="30" rows=10>默认

    相关文章

      网友评论

          本文标题:HTML5的基础标签(下)

          本文链接:https://www.haomeiwen.com/subject/jxhwvttx.html