HTML标签（下）

最新推荐文章于 2022-12-15 22:10:46 发布

一口¹个小娃娃

最新推荐文章于 2022-12-15 22:10:46 发布

阅读量241

点赞数

文章标签： html visual studio code

本文链接：https://blog.csdn.net/m0_65306663/article/details/124864992

版权

表格标签作用：主要用于显示和展示数据

表格标签基本语法：

标签	基本语法
<table></table>	用于定义表格的标签，最外面的大框框
<tr></tr>	定义表格中的行，必须在<table></table>标签里使用
<td></td>	定义表格中的单元格，必须在<tr></tr>标签里使用
<th></th>	定义表头单元格，使之居中加粗

<!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>Document</title> <!-- 网站页面的标题，有着索引的作用 -->
</head><!-- 声明使用的脚本语言 -->
<body>
  <table> <!-- 用于定义表格的标签 -->
      <tr> <!-- 定义表格的行 -->
           <th>表头加粗居中</th>
           <th>表头加粗居中</th>
       </tr>   
       <tr>
              <td>表格中的数据</td>
              <td>表格中的数据</td>
       </tr>
       <tr>
        <td>表格中的数据</td>
        <td>表格中的数据</td>
 </tr>
   </table>
 </body><!--表示网页的主题内容 -->
</html>

代码运行后，如下图所示：

表格标签的属性：

属性名	属性值	描述
align	left、center、right	规定对齐方式
border	1或“ ”	规定边框
cellspacing	像素值	规定两个单元格之间的距离
cellpadding	像素值	规定单元格内文字与单元格之间的空隙
width	像素值	表格宽度
heigth	像素值	表格高度

注：以上属性需在<table>标签中使用。

表格结构标签(需放<table>中使用）：

<thead>：表格的头部区域（一般为第一行）；

<tbody>：表格的主体区域。

合并单元格的方法：

跨行合并（上侧为目标单元格）：rowspan="合并单元格的个数"

跨列合并（左侧为目标单元格）：colspan="合并单元格的个数“

注：合并后，需删除多余单元格的代码。

列表标签作用：用于布局；

种类：无序列表、有序列表、自定义列表。

无序列表：<ul></ul> <li></li>;

有序列表：<ol></ol> <li></il>;

自定义列表：<dl></dl> <dt></dt> <dd></dd>;

表单标签：

作用：为了手机用户信息；

组成：表单域、表单控件（表单元素）、提示信息；

使用方法：<form action="url 地址“ method=”提交方法“ name=”表单域名称“> </form>

属性：

属性	属性地址	作用
action	URL地址	用于接收并处理表单数据服务器程序的URL地址
method	post/get	设置表单数据的提交方式
name	名称	用于指定表单的名称，区分表单域

<input>输入表单元素：

type属性的属性值：

属性值	描述
button	定义可点击按钮
checkBox	定义复选框
file	定义输入字段和浏览按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段
radio	定义单选按钮
reset	定义重置数据
submit	定义提交按钮
text	定义单行输入的字段，默认20个字符

<label>标签：

用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动选择对应的表单元素；

语法：<label for="sex">男</label>

<input type="radio" name="sex" id="sex"/>

注：for·属性应与Id属性相同。

<!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>Document</title> <!-- 网站页面的标题，有着索引的作用 -->
</head><!-- 声明使用的脚本语言 -->
<body>
  <from>
    <label for="nan">男 </label>
    <input type="radio" name="sex" id="nan"/>
    <label for="nv">女 </label>
    <input type="radio" name="sex" id="nv"/>
  </from>
 </body><!--表示网页的主题内容 -->
</html>

代码运行，如下图所示：

<select>下拉表单元素：

定义一个下拉列表，节省空间。

语法：<select>

<option>选择一</option>

<option>选择二</option>

..........

</select>

注：在<option>中定义select="selected"时，当前项即为默认选中项。

例如：

<!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>Document</title> <!-- 网站页面的标题，有着索引的作用 -->
</head><!-- 声明使用的脚本语言 -->
<body>
  <from>
    <select>
      <option select="selected">榴莲</option> <!--选择一，当前选项为默认选项 -->
      <option>芒果</option><!-- 选择二 -->
     <option>草莓</option> <!-- 选择三 -->
    </select>
  </from>
 </body><!--表示网页的主题内容 -->
</html>

代码运行后，如下图所示：

< textarea>文本域表单元素：

用于定于多行文本输入的控件，eg：留言板、评论区。

一口¹个小娃娃

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML标签（下）

表格标签作用：主要用于显示和展示数据表格标签基本语法：标签基本语法 <table></table> 用于定义表格的标签，最外面的大框框 <tr></tr> 定义表格中的行，必须在<table></table>标签里使用 <td></td> 定义表格中的单元格，必须在<tr></tr>标签里使用 <th></th>
复制链接

扫一扫