html5基础知识(2)-——表格&&列表&&表单

最新推荐文章于 2021-12-11 14:43:57 发布

白日梦想jun

最新推荐文章于 2021-12-11 14:43:57 发布

阅读量523

点赞数 1

分类专栏： HTML&&CSS

本文链接：https://blog.csdn.net/oiu1010110/article/details/49803867

版权

HTML&&CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML表格：

表格标签
<table>	定义表格
<caption>	定义表格标题
<th>	定义表格表头
<tr>	定义表格的行
<td>	定义表格的单元
<thead>	定义表格的页眉
<tbody>	定义表格的主体
<tfoot>	定义表格的页脚
<col>	定义表格的列属性

单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间

单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距，也就是说单元格中的内容与单元格边缘的距离为0，内容紧挨着边缘

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <table border="1" cellpadding="0" cellspacing="0">
        <caption>重要表格</caption>
        <!--表头-->
        <tr>
            <th>单元</th>
            <th>单元</th>
            <th>单元</th>
        </tr>
        <tr>
            <td>
                <ul>
                <li>苹果</li>
                <li>香蕉</li>
               </ul>
            </td>
            <td colspan="2" ></td>   <!--合并单元格-->
        </tr>
    </table>
</body>
</html>

HTML列表：
1、有序列表
标签：<ol><li>
属性：A、a、I、i、start
2、无序列表
标签：<ul><li>

属性：disc(实体圆)、circle（空心圆）、square（方块）

<ol type="disc">
</ol>

3、嵌套列表

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <ol>
        <li>车</li>
        <ul>
            <li>卡车</li>
            <li>汽车</li>
            <li>摩托车</li>
        </ul>
        <li>花</li>
        <ul>
            <li>桃花</li>
            <li>百合</li>
            <li>玫瑰</li>
        </ul>
    </ol>
</body>
</html>

4、自定义列表

<dl>
  <dt>学习</dt>
    <dd>学习是很重要的事</dd>
</dl>

HTML表单：

1、表单用于获取不同类型的用户输入

表单标签
<form>	表单
<input>	输入域
<textarea>	文本域
<label>	控制标签
<fieldset>	定义域
<legend>	域的标题
<select>	选择列表
<optgroup>	选项组
<option>	下拉列表中的选项
<button>	按钮

最简单的一个用户输入

<body>
<form>
    用户名
    <input type="text">
    <br/>
    密码：
    <input type="password">
</form>
</body>

下面我们来写一个也是常见的

1、复选框

<body>
<form>
    你喜欢的水果有
    <br/>
    苹果<input type="checkbox">
    西红柿<input type="checkbox">
    梨<input type="checkbox">
</form>
</body>

2、单选按钮

<body>
<form>
    你的性别是
    <br/>
    男<input type="radio" name="sex">
    女<input type="radio" name="sex">
</form>
</body>

注意我们新加了一个name,name必须相同,此时不能同时选中

3、下拉列表

<body>
<form>
    你的专业是
    <select>
        <option>计算机</option>
        <option>生物</option>
        <option>地理</option>
        <option>医生</option>
    </select>
</form>
</body>

当然在html5中，新增了一个文本框的list属性，datalist元素类似选择框，但当用户想要设定的值不在选择列表中，可以自行输入

；datalist元素本身并不显示，而是当文本框获得焦点时以提示输入的方式显示。

<body>
<form>
    你喜欢的专业是
    <input type="text" name="greeting" list="greeting">
    <datalist id="greeting" style="display: none">
        <option value="计算机"></option>
        <option value="生物"></option>
        <option value="地理"></option>
        <option value="医生"></option>
    </datalist>
</form>
</body>

这里的文本框是可直接输入的。

4、文本域

文本域可在表单外创建

<body>
    <textarea cols="30" rows="30">请在此输入你的建议</textarea>
</body>

5、按钮

<body>
<form>
    <input type="button" value="提交">
    <input type="submit">
    <input type="submit" value="提交">
</form>
</body>

第二个按钮上的字随浏览器不同而不同，有的浏览器直接是”提交“.

白日梦想jun

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
html5基础知识(2)-——表格&&列表&&表单

html5中表格，表单，列表基础
复制链接

扫一扫

专栏目录

html5基础知识(2)-——表格&&列表&&表单

“相关推荐”对你有帮助么？