HTML基础小结（二）

最新推荐文章于 2023-01-04 17:15:30 发布

转载最新推荐文章于 2023-01-04 17:15:30 发布 · 247 阅读

文章标签：

#HTML学习

html学习专栏收录该内容

2 篇文章

订阅专栏

创建表格

每个表格由行与列组成的。<table>表示表格，<tr>表示行，<td>为单元格，<th>表示表头的单元格，每行可以由多个单元格组成，每一个单元格就是一列。一般第一行的<tr>里面的直接子元素并不是<td>，而是<th>，这是因为我们第一行是表头，用<th>表示更合适。

当然为了更清楚的区别表头和内容部分，还可以使用<thead>包裹表头的<tr>，<tbody>包裹所有内容的<tr>，除此之外还可以为table添加一个标题<caption>如下：

<table>
    <caption>五险一金缴纳</caption> <!-- table 标题，table里面第一个元素 -->
    <thead> <!-- 使用 thead 包裹表头行 -->
        <tr>
            <th>缴纳项目</th>
            <th>个人缴纳</th>
            <th>单位缴纳</th>
        </tr>
    </thead>
    <tbody> <!-- 使用 tbody 包裹内容 -->
        <tr>
            <td>养老</td>
            <td>8%</td>
            <td>14%</td>
        </tr>
        <tr>
            <td>医疗</td>
            <td>2%</td>
            <td>6.2%</td>
        </tr>
        <tr>
            <td>失业</td>
            <td>1%</td>
            <td>2%</td>
        </tr>
        <tr>
            <td>工伤</td>
            <td>0%</td>
            <td>0.4%</td>
        </tr>
        <tr>
            <td>生育</td>
            <td>0%</td>
            <td>0.5%</td>
        </tr>
        <tr>
            <td>公积金</td>
            <td>14%</td>
            <td>14%</td>
        </tr>
    </tbody>
</table>

创建表单

表单元素本身是指<form>，不过它也有一个更广泛的概念，指构成表单的所有元素。
首先就<form>元素本身来说，主要有两个属性：

action：表示表单数据所提交到的处理地址（如果不知道处理地址，可先用#表示）
method：表示提交内容的方式，默认取值为 get，可以设置为 post

接下来将会简单介绍几种form表单常用元素。在介绍表单常用元素之前，先说下一般它们都通用的几个属性：

name：用来标识数据的key名称
value：表示字段值（最后提交的表单数据就是所有的字段值）
disabled：表示字段是否禁用，该属性可以不用设置值，加上该属性即表示禁用
readonly：表示字段是否只读，该属性可以不用设置值，加上该属性即表示只读

参考：form MDN

`<input>`元素

<input>元素跟<img>元素一样，不需要闭合标签。除了上面说到的通用属性外，其常见属性如下：

type：必备属性，常见取值如下：
- text：文本输入框
- password：密码输入框
- search：搜索框
- number：数字输入框
- radio：单选按钮
- checkbox：复选框
- hidden：隐藏域（页面不可见，用来保存数据等）
- file：上传文件
- button：普通按钮
- submit：提交按钮
- reset：重置按钮
placeholder：如为输入框时，可设置该属性，在输入框中灰色显示提示信息

简单示例：

<!-- 文本输入框 -->
<input type="text" name="username">
<!-- 文本输入框提示信息 -->
<input type="text" name="username" placeholder="用户名">
<!-- 搜索框 -->
<input type="search" name="search" placeholder="搜索">
<!-- 数字输入框 -->
<input type="number" name="age" placeholder="只能输入数字">
<!-- 密码输入框 -->
<input type="password" name="pwd" placeholder="密码">
<!-- 单选框 -->
<input type="radio" name="sex" value="man">男
<!-- 复选框 -->
<input type="checkbox" name="hobby" value="music">音乐
<!-- 隐藏域 -->
<input type="hidden" name="other-data" value="用户不可见数据">
<!-- 上传文件 -->
<input type="file" name="file">
<!-- 普通按钮 -->
<input type="button" name="button" value="普通按钮">
<!-- 提交按钮 -->
<input type="submit" name="submit" value="立即加入">
<!-- 重置按钮 -->
<input type="reset" name="reset">

input参考：input MDN

`<textarea>`元素

用于多行文本输入，可以通过 cols 和 rows 属性来规定 textarea 的尺寸，更好的办法是使用 CSS 的 height 和 width 属性来控制其尺寸。

简单示例：

<textarea rows="5" cols="30" placeholder="请输入评论"></textarea>

更多参考：textarea MDN

`<select>`元素

用于创建选项菜单，默认只能选择一个值，可通过设置属性multiple="multiple"来实现多选（很少很少使用多选）。其选项为<option>元素，常用有两个属性：

value：表示选中该选项的值。
selected：表示默认选中。
简单示例：

<!-- 单选且有默认选中值 -->
<select name="tag">
  <option value="html" selected>HTML</option>
  <option value="css">CSS</option>
  <option value="js">JS</option>
</select>
<!-- 多选 -->
<select name="tags" multiple="multiple">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JS</option>
</select>

select参考：select MDN

`<button>`元素

<button>元素用来定义按钮，跟 input 定义的按钮不同，这个是有闭合标签的。简单示例如下：

<button>我是个普通按钮</button>

同样也可以通过设置 type 属性来实现提交按钮和重置按钮，不过不建议这么做。

<!-- 下面的两种方式不建议使用 -->
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>

一般对于提交与重置按钮，我们建议使用 input 来定义，对于普通按钮可以使用 button。
button参考：button MDN

`<label>`元素

<label>元素用于关联表单元素的标题，可直接包裹表单元素，也可以通过设置其 for 属性关联到表单元素的 id 属性，这样点击 label 标题上关联的表单元素就可以自动获取焦点，提升用户体验。
简单示例：

<!-- 包裹表单元素 -->
<label>用户名：<input type="text"></label>

<!-- 使用for属性关联表单元素的id属性 -->
<label for="username">用户名：</label><input type="text" id="username">