81_h5笔记5_列表标签 + 表格标签 + 表单标签

一，列表标签

1，无序列表(unordered list)

作用: 给一堆内容添加无序列表语义(一个没有先后顺序整体), 列表中的条目是不分先后

使用：
 <ul>
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
        <li>铁岭</li>
</ul>
注意点：

ul的作用并不是给文字添加小圆点, 而是增加无序列表的语义

ul还有一个type属性, 可以修改先导符号的样式, 取值有disc、square、circle几种

由于ul和li是一个整体, 所以ul里面不推荐包裹其它标签, 永远记住ul里面最好只写li标签

虽然ul中推荐只能写li标签, 但是li标签是一个容器标签, li标签中可以添加任意标签, 甚至可以添加ul标签

2，有序列表(ordered list)

作用: 给一堆内容添加有序列表语义(一个有顺序整体), 列表中的条目有先后之分

使用：
 <ol>
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
        <li>铁岭</li>
    </ol>
注意点：

ol和ul就是语义不一样，怎么使用都是一样的以及注意点都一样

其实ul还有两个常见属性start、type属性, 可以修改先导符号的样式和序号

3，定义列表(definition list)

作用: 给一堆内容添加列表语义, 通过dt罗列出列表的条目, 然后再通过dd给每个条目进行相应的描述

dl：definition list，定义列表
dt：definition title,定义标题
dd：definition description, 定义描述信息

使用：
    <dl>
        <dt>北京</dt>
        <dd>国家的首都, 看升国旗的地方</dd>
        <dt>上海</dt>
        <dd>魔都, 遍地是黄金的地方</dd>
    </dl>
注意点：

由于dl和dt、dd是一个整体, 所以dl里面不推荐包裹其它标签

dd和dt和li标签一样是容器标签, 里面可以添加任意标签

定义列表非常灵活, 可以将多个dt+dd组合拆分为多个dl

二，表格标签

作用:以表格形式将数据显示出来, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式

使用：

table定义表格

tr定义行

td定义单元格

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

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

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>
表结构：
thead标签:用来存放当前列的表头, 如果没有加css页面默认将表头中的高度设置变小

tbody标签:一般用来存放页面中的主体数据, 如果不写会自动加上

tfoot标签:用来存放表格的页脚（脚注或表注), 如果没有加css页面默认将表头中的高度设置变小, 一般不会出现

表格结构的意义主要是用于SEO, 便于搜索引擎指定哪部分的内容是需要抓取的重要内容, 一般情况下搜索引擎会优先抓取tbody中的内容
<table>
    <caption>表格的标题</caption>
    <thead>
        <tr>
            <th>每一列的标题</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>数据</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>数据</td>
        </tr>
    </tfoot>
</table>
示例：

三，表单标签

1，form表单：

作用: 用于收集用户信息, 让用户填写、选择相关信息
<form>
    所有的表单内容，都要写在form标签里面
</form>
2，input标签：

type属性：

text明文：<input type="text" value="123"/>

password暗文：<input type="password" value="123"/>

radio单选框：<input type="radio" name="xingbie" />

checkbox多选框：<input type="checkbox" name="aihao"/>

button按钮：<input type="button" value="点我丫" />

image图片按钮：<input type="image" src="lnj.jpg" />

reset重置按钮：<input type="reset" />

submit提交按钮：<input type="submit" />

hidden隐藏域：<input type="hidden">

color取色器：<input type="color">

date日期选择器：<input type="date">

value属性：默认值

maxlength属性：最长显示

账号:<input type="text" value="123"/>
密码:<input type="password" value="123"/>

3，label标签：

作用: label标签不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性
注意事项:
表单元素要有一个id，然后label标签就有一个for属性，for属性和id相同就表示绑定了
所有表单元素都可以通过label绑定

<label for="account">账号:</label>
<input type="text" id="account" />


<input type="radio" name="sex" id="man" /> <label for="man">男</label>


<input type="checkbox" id="basketball" />
<label for="basketball">篮球</label>
4，数据列表

作用: 给输入框绑定待选项
请输入你的车型: <input type="text" list="cars">

<datalist id="cars">
    <option>奔驰</option>
    <option>宝马</option>
    <option>奥迪</option>
    <option>路虎</option>
    <option>宾利</option>
</datalist>
5，下拉列表

作用: select标签和ul、ol、dl一样，都是组标签. 用于创建表单中的待选列表, 可以从选择某一个带选项
<select>
    <option>北京</option>
    <option>河北</option>
    <option>河南</option>
    <option>山东</option>
    <option>山西</option>
    <option>湖北</option>
    <option selected="selected">贵州</option>
</select>
6，多行文本框

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

注意：

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

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

可以通过cols和rows来指定输入框的宽度和高度

默认情况下输入框是可以手动拉伸的

使用：
       
    <style type="text/css">
        textarea{
            resize: none;
        }
    </style>

参考链接：https://www.jianshu.com/p/e4a36feadc64

81_h5笔记5_列表标签 + 表格标签 + 表单标签

一，列表标签

二，表格标签

三，表单标签

猜你喜欢