HTML基础（二）

最新推荐文章于 2025-04-07 15:14:21 发布
原创 最新推荐文章于 2025-04-07 15:14:21 发布 · 526 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html

本文详细介绍了HTML中的表格元素，包括`<table>`,`<tr>`,`<td>`等，以及表头`<thead>`，表尾`<tfoot>`的使用。还讲解了如何使用开发者模式检查网页元素。此外，深入探讨了表单元素，如`<input>`的`type`属性，`<label>`的作用，`<textarea>`，`<select>`和`<option>`的组合使用，以及`<form>`的属性如`action`，`method`和`name`。最后提到了HTML5的新标签和特性，如字符集设定和新的元素用法。" 81913284,7974655,Python操作Redis数据库：连接、操作及持久化,"['Redis', 'Python开发', '数据库操作']
部署运行你感兴趣的模型镜像

表格标签 table

<table></table> 用来定义表格
<tr></tr> 用来定义行，嵌套在 <table></table> 中
<td></td> 用来定义行中的单元格，嵌套在 <tr></tr> 中
<tr></tr> 中只能嵌套<td></td> , 但 <td></td> 相当于一个容器，可以嵌套任意元素
表格相关的属性如下：
在这里插入图片描述

   <!DOCTYPE html>
    <html lang="en">
    	<head>
       	 	<meta charset="UTF-8">
        	<title>大云汉IT表格</title>
    	</head>
    	<body>
    		<table cellspacing="3" cellpadding="2" border="1" align="left">
        		<tr>
            		<td>大云汉IT教育第一行第1列</td>
            		<td>大云汉IT教育第一行第2列</td>
            		<td>大云汉IT教育第一行第3列</td>
        		</tr>
       		    <tr>
            		<td>大云汉IT教育第二行第1列</td>
            		<td>大云汉IT教育第二行第2列</td>
            		<td>大云汉IT教育第二行第3列</td>
        	    </tr>
    		</table>
    	</body>
    </html>

表头标签

表头一般位于表格的第一行或者第一列。
表头标签为 <th></th>，在显示的时候默认会显示为加粗的效果
增加表头时，使用 <th></th> 替代对应位置的 <td></td>即可
下图即是设置了表头的表格。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta charset="UTF-8">
    	<title>大云汉IT教育表头</title>
	</head>
	<body>
		<table border="1" cellspacing="1" cellpadding="10" align="center">
    		<caption>caption标签是啥？大云汉IT？</caption>
    		<tr>
        		<th>属性</th>
        		<th>含义</th>
        		<th colspan="2">取值</th>
   	  	    </tr>
        	<tr>
        		<th>border</th>
        		<td>单元格边框</td>
        		<td>像素值，默认0</td>
        		<td rowspan="3">rowspan从当前单元格向下跨三行</td>
    		</tr>
    		<tr>
        		<th>cellspacing</th>
        		<td>单元格与单元格边框的间距</td>
        		<td>像素值，默认2</td>
   	 		</tr>
    		<tr>
        		<th>cellpadding</th>
        		<td>单元格内容与单元格边框的间距</td>
        		<td>像素值，默认1</td>
    		</tr>
		</table>
	</body>
</html>

表格结构(了解)

使用表格时，可以将表格分为头部、主体、页脚（页脚有兼容问题）
<thead></thead> 用来定义头部。必须位于 <table></table> 中，一般包含网页的logo和导航等头部信息。
<tbody></tbody> 用来定义表格的主体，一般包含网页中除头部和底部之外的其他内容。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta charset="UTF-8">
    	<title>thead+tbody</title>
	</head>
	<body>
		<table cellspacing="2" cellpadding="10" align="center" border="1">
    		<thead>
    			<tr>
        			<th>属性名称</th>
        			<th>含义</th>
        			<th>取值</th>
    			</tr>
   		    </thead>
    	    <tbody>
    			<tr>
        			<td>colspan</td>
        			<td>向右横跨几列</td>
        			<td>数值</td>
    			</tr>
    			<tr>
        			<td>rowspan</td>
        			<td>向下竖跨几行</td>
        			<td>数值</td>
    			</tr>
    		</tbody>
		</table>
	</body>
</html>

网页元素检查（开发者模式）

基于 chrome 浏览器，在页面中右击，然后选择 “检查”
在这里插入图片描述
表格标题标签 caption
<caption></caption> 标签用来定义标题的标签
必须写在 <table></table> 中，和 <thead></thead>平级
相关代码可以参考 表头标签 的代码。

单元格合并
适用于 <td></td>、<th></th>
colspan 跨列合并（水平合并）
rowspan 跨行合并（垂直合并）
相关代码可以参考 表头标签 的代码。

表单标签

html 中一个完整的表单通常由 表单元素、提示信息、表单域（即多个表单的父容器）三部分组成。
在这里插入图片描述
（1）input 输入标签
<input/> 为单标签（自闭合标签）
type 是其基本属性，用来控制输入的类型
input 、br、hr 、img、 base 都是单标签
在这里插入图片描述
多个 radio 使用相同的 name ，则表示这是一组数据，这样可以实现单选效果。如果不加 name 多个 radio 可同时被选中

<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta charset="UTF-8">
    	<title>input标签</title>
 	</head>
	<body>
    	用户名：<input type="text" maxlength="15"/>
    	<br/>
    	<!--次数密码中间的空格使用了是全角输入法，全角输入法中，空格占一个汉字的大小-->
    	密　码：<input type="password"/>
    	<br/>
    	<!--使用name 限定了一组内容，从而实现单选-->
    	性　别：
    	<input type="radio" name="sex" checked="checked"/> 男
    	<input type="radio" name="sex"/> 女
    	<br/>
    	爱　好：
    	<input type="checkbox" name="hobby"/> 看电影
    	<input type="checkbox" name="hobby"/> 读书
    	<br/>
    	<input type="button" value="普通按钮"/>
    	<br/>
    	<input type="submit" value="提交按钮"/>
    	<br/>
    	<input type="reset" value="重置按钮"/>
    	<br/>
    	<input type="image" src="../image/imgButton.png"/>
    	<br/>
    	请选择文件：<input type="file"/>
	</body>
</html>

效果图如下：
在这里插入图片描述
(2）label 标签(理解)
label 标签为 input 标签定义标注/标签
用来绑定一个表单元素，当点击 label 标签的时候，被绑定的 表单元素就会获取焦点
通过 for 属性，可以绑定 label 和 input ; 或者直接用lable 标签将input 包裹起来

<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta charset="UTF-8">
    	<title>label的使用</title>
 	</head>
	<body>
    	<!--label 中直接包裹 input,可以实现绑定-->
    	<label>点击此处文本，用户名输入框会获取焦点 <br> 用户名：<input type="text"/></label>
    	<br/>
    	<hr/>
    	<!--使用 label 的 for 属性绑定input-->
    	<label for="#two">点击此处文本，密码输入框会获取焦点</label>
    	<br/>
    	用户名：<input type="text"/>
   	 	<br/>
    	密　码：<input type="text" id="#two"/>
	</body>
</html>

(3）textarea 文本域标签
<textarea></textarea>用来做大量文本的输入，支持多行
有 cols 、rows 属性。cols 限制每行中所输入的文本字数，rows 限制最大行数。（这两个属性通常不被使用，更多使用会使用CSS样式做相关控制）

<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta charset="UTF-8">
    	<title>textarea标签</title>
	</head>
	<body>
    	请输入评论内容：
    	<br/>
    	<textarea ></textarea>
	</body>
</html>

效果图如下：
在这里插入图片描述
（4）下拉菜单 <select></select>
<select></select> 用来定义下拉菜单
<option></option> 用来定义下拉菜单选项
<select></select> 中至少包含一对 <option></option>
在 option 中定义了属性 selected=“selected” 之后，表示该项被默认选中

<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta charset="UTF-8">
    	<title>select标签</title>
	</head>
	<body>
    	设置家乡
    	<select >
        	<option>选择省份</option>
        	<option>山东</option>
        	<option>内蒙古</option>
        	<option>黑龙江</option>
        	<option>山西</option>
    	</select>
   	 	<select>
            <option>济南</option>
            <option selected="selected">临沂</option>
            <option>聊城</option>
            <option>莱芜</option>
            <option>青岛</option>
    	</select>
	</body>
</html>

效果图如下：
在这里插入图片描述
(5）表单域 <form></form>
该标签用来定义表单域，以实现用户信息的收集和传递，form 中的内容通常都会被提交到服务器。
基本语法格式：

   <form action="url地址" method="提交方式" name="表单名称">
         ...各种表单控件...
     </form>

常用属性有action、method、name
action : 指定接收并处理表单信息的服务器url地址
method : 表单数据的提交方式。分为 post / get
name : 指定表单名称，用来区分页面中的多个表单

每个表单都应该有自己的表单域
使用form 包裹之后点击提交按钮才有提交的动作

<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta charset="UTF-8">
    	<title>form表单域</title>
    </head>
    <body>
        <!--使用 form 包裹之后，提交按钮和图片按钮点击时就有效果了-->
        <form action="https://www.baidu.com" method="post" name="userInfo">
            用户名：<input type="text" maxlength="15"/>
            <br/>
            <!--次数密码中间的空格使用了是全角输入法，全角输入法中，空格占一个汉字的大小-->
            密　码：<input type="password"/>
            <br/>
            <!--使用name 限定了一组内容，从而实现单选-->
            性　别：
            <input type="radio" name="sex" checked="checked"/> 男
            <input type="radio" name="sex"/> 女
            <br/>
            爱　好：
            <input type="checkbox" name="hobby"/> 看电影
            <input type="checkbox" name="hobby"/> 读书
            <br/>
            <input type="button" value="普通按钮"/>
            <br/>
            <input type="submit" value="提交按钮"/>
            <br/>
            <input type="reset" value="重置按钮"/>
            <br/>
            <input type="image" src="../image/imgButton.png"/>
            <br/>
            请选择文件：<input type="file"/>
        </form>
	</body>
</html>

六、HTML5新标签及新特性
在这里插入图片描述

HTML演变

1、文档类型设定
即 <!Doctype > 对应的属性值。
HTML , 对应早期的 HTML4.0.1, 基本结构如下：

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html lang="en">
     <head>
         <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
         <title>Document</title>
     </head>
     <body>
     </body>
 </html>

XHTML ，其基本结构如下：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  	<head>
      	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      	<title>Document</title>
  	</head>
  	<body>
  	
  	</body>
  </html>

HTML5 ，其基本格式如下

  <!DOCTYPE html>
  <html lang="en">
  	<head>
      <meta charset="UTF-8">
      <meta name="viewport"
            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
  	</head>
  	<body>
  
  	</body>
  </html>

在webStorm 中，如果想查看上述三种类型的基本格式，可以按如下步骤：new > file > 输入文件名为 xxx.html > 分别输入 html:4s / html:xt / html:5 然后回车即可
如果想查看某个页面使用了两种 HTML，可以 右击，然后选择查看网页源码 ，然后查看<!Doctype > 中的信息即可
2、字符设定
XHTML、HTML中设置字符集时使用：

<metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">

HTML5 中设置字符集时使用：

3、常用新标签

在这里插入图片描述
(1）datalist 示例
datalist 中包裹 option
datalist 与 input 关联后，input 就具备的 select 的效果，同时具有了输入联想功能。

<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta charset="UTF-8">
    	<title>inputlist</title>
	</head>
	<body>
    	<input type="text" value="请输入姓名" list="names">
    	<datalist id="names">
        	<option>张三</option>
        	<option>李四</option>
        	<option>王五</option>
    	</datalist>
	</body>
</html>

（2）fieldset 示例
fieldset 默认宽度满屏
效果图如下：

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190531105807240.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RheXVuaGFuSVQ=,size_16,color_FFFFFF,t_70)
<!DOCTYPE html>
	<html lang="en">
		<head>
    		<meta charset="UTF-8">
    		<title>fieldset</title>
		</head>
		<body>
    	<fieldset>
        	<legend>用户登录</legend>
        	用户名:<input type="text"/>
        	<br/>
        	密　码:<input type="password"/>
    	</fieldset>
	 </body>
</html>

您可能感兴趣的与本文相关的镜像

Yolo-v8.3

Yolo-v8.3

Yolo

YOLO（You Only Look Once）是一种流行的物体检测和图像分割模型，由华盛顿大学的Joseph Redmon 和Ali Farhadi 开发。 YOLO 于2015 年推出，因其高速和高精度而广受欢迎

如何去掉 HTML 输入框的边框？
CodeWWWCode的博客
09-24 2647
使用 CSS 的 border 属性、outline 属性或 box-shadow 属性，你可以轻松地控制输入框的边框样式，并提升用户界面的外观。除了使用 border 属性，我们还可以使用 CSS 的 outline 属性来控制输入框的边框。另一种去掉输入框边框的方法是使用 CSS 的 box-shadow 属性。要去掉 HTML 输入框的边框，我们可以使用 CSS 的 border 属性，并将其设置为 “none”。在上面的代码中，我们使用了内联 CSS 样式来设置输入框的边框为 “none”。
HTML中input输入框（详解输入框的用法）
热门推荐
百赢出品，必属精品
04-30 2万+
input>元素是HTML表单中最常见的元素之一，用于收集用户的输入数据。它可以包含多种类型的输入，如文本、密码、数字等。通过指定不同的type属性，可以定义不同类型的输入字段。类型（type）属性定义输入字段的类型，如文本框、密码框、单选按钮、复选框等。常见类型包括textpasswordradiocheckboxfile等。名称（name）属性用于标识输入字段的名称，以便在表单提交时能够将数据传输到服务器。对于单选按钮和复选框，相同名称的一组按钮被视为一个组，只能选择其中的一个或多个。
HTML基础
Mr_wh_2014的博客
03-26 344
一、HTML基本框架 <html> 　　<head> 　　　　<title>无标题文档</title> 　　</head> 　　<body> 　　　　<!--代码-->　　</body></html> 二、什么是 HTML？ HTML 是用来描述网页的一种语言。 ...
html 基础
Claroja
11-13 556
html元素(标签) html> head> 等标签 --> meta charset="utf-8"> title>html5title> link rel="stylesheet" type="text/css" href="mystyle.css"> style type="text/css">style> script>scri
HTML基础知识入门大全
HTDiiii的博客
08-20 3800
HTML 什么是 HTML HTML（HyperText Markup Language，超文本标记语言）是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单，一切取决于 web 开发者。HTML 由一系列的元素组成，这些元素可以用来包围或标记不同部分的内容，使其以某种方式呈现或者工作。两端的标签可以使内容变成超链接，以连接到另一个页面；使字体表现为斜体等。 HTML 标签/元素 HTML 属性 第一个 HTML <!-- 文档的类型 ，根据类型可以知道当前文档的版本-->
初级基础HTML CSS实现二级下拉菜单
weixin_67318211的博客
04-21 6731
我们在日常浏览网页时，会经常看到有二级下拉菜单列表的应用。它在我们日常网页，特别是在头部导航运用较多，那我们如何通过HTML和CSS来实现它呢？ 1.HTML部分 HTML整体部分较为简单，看到这个结构，我们可以首先想到的是运用ul列表标签和a标签来整体实现。话不多说，代码如下： <header> <ul> <li> <a href="#">英雄介绍</a> .
《Web程序设计基础R》实验报告---HTML基础
一只小鹿的博客
12-21 5124
一、实验目的 1．掌握常用的HTML语言标记； 2．利用文本编辑器建立HTML文档，制作简单表单页面。 二、实验环境 计算机、Windows10 操作系统 三、实验内容、源码及运行结果 1．  实验内容 在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy1.html保存，并在浏览器中运行。（请仔细阅读下列程序语句，理解每条语句的作用） 源程序清单如下： 1. <html> 2. <head> 3. <title>Example</title&
零基础学HTML CSS源代码
05-10
DIV与SPAN区别二.html 演示DIV与SPAN区别二。 DIV与SPAN实例手把手--布局.html 演示DIV与SPAN实例手把手--布局。 第14章（源代码\第14章） 示例描述：本章演示DIV与CSS结合用法。 内联定义样式.html ...
计算机网络基础：系列教程汇总
最新发布
优快云博客专家，系统架构师，有合作、疑惑请私信博主。
04-07 16万+
计算机网络基础：系列教程汇总，从《计算机网络基础：揭开网络世界的神秘面纱》、《计算机网络基础：剖析网络的构成要素》、《计算机网络基础：认识网络拓扑结构》、《计算机网络基础：解析网络协议》、《计算机网络基础：了解网络类型》、《计算机网络基础：探秘网络数据传输》、《计算机网络基础：网络安全基础》等文章描述计算机网络，计算机网络基础系列教程构建了完整的知识体系，各部分相互关联，从理论基础到实践应用，为学习者深入理解计算机网络、从事相关技术工作及进一步探索网络前沿领域奠定坚实基础。
html基础
菜鸟一个
08-02 338
什么是HTML： HTML（HyperText Markup Language）超文本标记语言。 什么是超文本： 指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 html历史： HTML基本结构： 不区分大小写 不区分单双引号 DOCTYPE/title/meta： 我的第一个网页： 先建立一个空的txt文档， 然后插入下面代码： &lt;html&...
HTML 基础
2301_79881188的博客
09-05 3034
HTML（HyperText Markup Language）是构建网页的标准标记语言。HTML包括一系列标签tag。通过这些标签,可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。:整个html文件的根标签最顶层标签head和body是html的子标签(html就是head和body的父标签。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值