HTML部分标签的使用_textarea required=''true" 不好使-CSDN博客

本文链接：https://blog.csdn.net/youshengbaku/article/details/129855799

文章详细介绍了HTML中表格的使用，包括table、tr、td、th等标签及其属性，以及表单元素如input、select、textarea的应用，包括各种类型的input标签和相关属性，如autofocus、required等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表格标签

表格标签用于数据展示的，它涉及到 table、tr、td、th等子标签。

要定义一个表格，我们需要使用 table 标签，如果要定义一行，我们还需要使用 tr（定义行） 子标签；

要在一行中定义单元格，就需要使用到 td （定义列）子标签。例如：定义一个三行三列的表格。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签的使用</title>
</head>
<body>
<table width="300" border="1" cellpadding="0" cellspacing="0" align="left">
  <caption>表格标题</caption>
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr align="center">
      <td align="center" rowspan="2">1</td>
      <td width="100">刘备</td>
      <td>28</td>
    </tr>
    <tr align="center">
      <td>关羽</td>
      <td>27</td>
    </tr>
    <tr align="center">
      <td colspan="2">3</td>
      <td>张飞</td>
    </tr>
  </tbody>
  <tfoot>
  </tfoot>
</table>
</body>
</html>

table标签有以下几种属性：

width：用于指定表格的宽度，单位是像素
border：用于定义表格的边框，值的类型是数字，而是一个正数，值越大边框越粗
cellpadding：用于定义单元格的内边距，即单元格中的内容也单元格的边之间的距离
cellspecing：用于定义单元格的外边距，即单元格与单元格之间的距离
align：用于定义表格的对齐方式主要有 left right center 等

table还有以下几个子标签：

caption：用于定义表格的标题
thead：用于定义表头部分
tbody：用于定义表体部分
tfoot：用于定义表尾部分
tr：用于定义表格的一行
th：用于定义一个单元格，它的特点是内容加粗且居中显示
td：用于定义一个单元格

td 标签有几个属性需要说明：

colspan：用于定义跨列操作，也就是合并多个列
rowspan：用于定义跨行操作，也就是合并多个行

表单标签的使用

在一个web项目中，和用户之间进行交互操作是必不可少的，这时就需要使用到表单来让用户和服务器之间进行交互。因此，表单是一个非常重要的元素。但在表单中，包括的子标签非常多，大体上可分为以下几种：

1.<input>标签基本语法如下：

<input type="元素类型" name="元素名称" value=”元素值”id="客户端唯一标识">

常用的有下列几种：

名称	类型
单行文本框	type="text"
密码框	type="password"
单选按钮	type="radio"
多选按钮	type="checkbox"
提交按钮	type="submit"
复位按钮	type="reset"
按钮	type="button"
图像按钮	type="image"
隐藏域（隐藏起来，一般用户看不见,在页面中不显示，在提交表单时发送 value 属性的值，该元素通常用来传输一些客户端到服务器的状态信息）	type="hidden"
文本域	type="file"

几个好用的属性值（ id value 那些就不写了）

label标签为 input 元素定义标签(label),label 元素不会向用户呈现任何特殊的样式
readonly ------属性规定输入字段为只读，只读字段是不能修改的
disabled -------规定应该禁用 input 元素。被禁用的 input 元素既不可用,也不可点击
required---------属性：在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中会弹出提示文字。
autofocus--------属性：当页面打开时，该控件自动获得光标焦点

2.<select>标签

主要用来建立下拉列表基本语法如下

<select>
<option></option>

<option></option>
</select>

<select>可用属性：

1.name 同其他标签相同，起提交作用

2.multiple 下拉列表默认只允许选择一个选项，如果允许用户选择多个，就要用到 multiple 属性。表示允许用户选择多个选项。

3.size <select>默认未下拉时只显示一个选项，size用来显示未下拉时多个选项

<option>可用属性：

selected 在为<select>标签设置了 multiple 属性后，就可以通过标签的selected"实现某一项的预先选中。
value

注意：当select标签设置 multiple属性时，select以列表形式显示，当select标签不设置 multiple 属性时，以下拉框形式显示。列表框在选择时按住键盘的ctrl或shift

<textarea >标签

基本语法

<textarea name="comment" rows="10" cols="30"placeholder="您的建议或者意见"></textarea>

<textarea>标签基本属性

：一个简短的提示，描述文本区域期望的输入值（值：text）。
：（值：readonly）。
：（值：required）。
rows number：文本区域内可见的行数（值：number）。
：当提交表单时，文本区域中的文本应该怎样换行（值：hard、soft）。

名称	属性值	作用
autofocus	autofocus	当页面加载时，文本区域自动获得焦点
cols	cols=“数字”	文本区域内可见的列数
rols	rols=“数字”	文本区域内可见的行数
disabled	disabled	禁用文本区域
maxlength	maxlength=“数字”	文本区域允许的最大字符数
name	name=“文本”	文本区域的名称
placeholder	placeholder=“文本”	提示，描述文本区域期望的输入值
readonly	readonly	文本区域为只读
required	required	文本区域是必需的/必填的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上课表单</title>
</head>
<body>
    <h1>用户注册</h1>
    <p>用户名称:<input type="text" value="zhangsan" autofocus ></p>
    <input type="text" value="zhangsan" disabled >
    <p>用户密码:<input type="text" value="" ></p>
    <p>用户性别:<input type="text" name="xing" >男<input type="radio" name="xing">女</p>
    <p >您的爱好
        <input type="checkbox" value="足球">足球<input type="checkbox" value="篮球">篮球
        <input value="LOL" type="checkbox">LOL<input value="韩剧" type="checkbox">韩剧
        <input value="王者" type="checkbox">王者</p>
    <p>邮箱<input type="text" placeholder="请输入您的邮箱"></p>
    <p>用户头像:<input type="file" value="选择文件" ></p>
    <p>您的家住地址:<select name="province"size="" >
        <option value="lanzhou">兰州</option>
        <option value="shanaxi">陕西</option>
    </select></p>  
    <p>您的建议或意见：<br>
        <textarea placeholder="您的建议或意见"cols="25" rows="5"></textarea></p> 
    <p>
    <input type="color"> 
    <input type="date" name="" id="" value="" />
    <input type="datetime-local" name="" id="" value="" />
    <input type="time" name="" id="" value="" />
    <input type="url" name="" id="" value="" />
    <input type="range" name="" id="" value="" /></p>
    <input type="button" value="注册用户">
</body>
</html>

效果如下