HTML部分常用标签补充

devtools/2024/11/13 8:52:27/
htmledit_views">

table(布局方面不建议使用,而是使用CSS来完成):

标签解释:

~table标签顾名思义,是表格的意思

              ~table其中可以使用boder属性来显示表格的线,最好使用CSS来配合HTML的使用

              ~table内的内容可以使用colspan来定义内容所占的单元格在行中的格子数

                    【类似于excel中合并行单元格】

              ~table内的内容可以使用rowspan来定义内容所占的单元格在列中的格子数

                    【类似于excel中合并列单元格】

              

<表现形式1>

~caption表示表格的标题,可以通过其他的方式去实现

~其中使用 tr 表示第一行中的内容

~在 tr 中使用 th 表示列的内容

~在其他行中使用 td 来表示这一行所对应列中的数据

举例:
html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table border="1"> <caption>表格</caption><tr><th>标题1</th><th>标题2</th><th>标题3</th><th>标题4</th></tr><tr><td>A</td><td>B</td><td>C</td><td>D</td></tr></table>
</body></html>

<表现形式2>

【方便CSS来控制的结构,对应内容即为上当的内容】

~thead 表头的意思

~tbody 表的主体部分 

~tfoot  表的底部内容

举例:
html"><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><table><thead><tr><th>标题1</th><th>标题2</th><th>标题3</th><th>标题4</th></tr></thead><tbody><tr><td>A</td><td>B</td><td>C</td><td>D</td></tr></tbody><tfoot><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr></tfoot></table>
</body></html>

input:

说明:

~输入框,像我们登陆界面的一样

~基本结构为:<input type="" name="" value="">

~其中内部可以设置id,方便使用javascript进行管理

~name是为了给后台服务器进行管理使用

~value是指给定初始值

~type用于指定输入框中输入的内容(如password,text,radio等)

【当使用radio时,若要单选,则name值要相同】

例子:
html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>用户名 <input type="text" name="username" placeholder="用户名" value=""><br>密码 &nbsp; &nbsp;<input type="password" name="password" placeholder="密码" value=""><br>性别:<br><input type="radio" name="sex" value="">男<input type="radio" name="sex" value="">女<input type="radio" name="sex" value="">不方便透露<br>喜欢的颜色:<br><input type="checkbox" name="color" value="">红<input type="checkbox" name="color" value="">黄<input type="checkbox" name="color" value="">蓝<br><input type="button" name="提交" value="提交">  
</body>
</html>

lable:

标签解释:

~标签的含义,用于给元素说明。

~其结构为:<label for="说明元素的id">说明的内容</label>

举例(iput和lable举例):

<1>不指定说明对象时

html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><label for="">用户名</label><input type="text">
</body>
</html>

<2>指定说明对象时 将对象看作整体

html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><label for="username">用户名</label><input id="username" type="text">
</body>
</html>

button:

解释:

~按钮的标签,一般在form当中使用,也可以作为input的style的属性值(通过form传入到服务器当中交由后台做判断等)

~其默认值为submit

例子:
html"><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form action="传入对象" method="post"><select name="city"><option value="1">上海</option><option value="2">北京</option><option selected value="3">江苏</option><option value="4">广州</option></select><button type="submit">提交</button></form></body></html>

slect:

解释:

~下拉框

~结构为

<select name="" >

      内容

 </select>

~内容为:

   <option value="数值">选项名称</option>

   内容可以选择selected来表示默认选项

例子:
html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><select name="city"><option value="1">上海</option><option value="2">北京</option><option selected value="3">江苏</option><option value="4">广州</option></select>
</body>
</html>

div:

例子:

当我们使用F12去查看网页时可以发现div字样的标签:

标签解释:

div 是一个没有语义的元素,相当于一个盒子,可以放任何东西,其中所有元素所占据宽度是整个浏览器的宽度,高度则为div的宽度。

举例说明(以 div 和 p 标签为例对比):
html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div><p>这是一个div标签展示</p></div><p>这是一个p标签展示</p>
</body></html>

div占空间的大小为如图颜色区域:

p标签的占空间大小为如图所示区域:

p标签上下所占空间增加了一定的空格,而div却只有自身内容高度的大小。

span:

标签解释:

span标签没有语义,所占空间只有内容的大小。

举例说明(以div标签和span标签为例对比):

html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div><p>这是一个div标签展示</p></div><span>这是一个span标签展示</span>
</body></html>

div所占空间大小如图所示:

span标签所占大小如图所示:

其中div所占空间大小充满了整个网页的宽度,而span只占据了自身的宽度。


http://www.ppmy.cn/devtools/6489.html

相关文章

累加(C语言)

一、题目&#xff1b; 二、N-S流程图&#xff1b; 三、运行结果&#xff1b; 四、源代码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h>int main() {//初始化变量值&#xff1b;int i 0;int j 0;int n 5;int result 0;int sum 0;//运算&#…

什么是UX设计?

在这个先进的世界中&#xff0c;大城市都被称之为科技之都&#xff0c;在那里&#xff0c;你会经常发现人们在谈论各种应用程序的设计。如果你对应用程序设计有浓烈的兴趣&#xff0c;那你应该去了解一下它的两个基本方面&#xff0c;也就是 UX 设计和 UI 设计。UX 设计旨在处理…

MATLAB实现图片栅格化

MATLAB实现图片栅格化 1.读取图片&#xff1a;首先&#xff0c;你需要使用imread函数读取要栅格化的图片。 2.设置栅格大小&#xff1a;确定你希望将图片划分成的栅格大小&#xff0c;即每个栅格的宽度和高度。 3.计算栅格数量&#xff1a;根据图片的总尺寸和栅格大小&#…

Go中的HTTP请求处理概述

使用 Go 处理 HTTP 请求主要涉及两件事&#xff1a;ServeMuxes 和 Handlers。 ServeMux本质上是一个 HTTP 请求路由器&#xff08;或多路复用器&#xff09;。它将传入的请求与预定义的 URL 路径列表进行比较&#xff0c;并在找到匹配时调用路径的关联 handler。 handler 负责写…

鸢尾花数据集分类(决策树,朴素贝叶斯,人工神经网络)

目录 一、决策树 二、朴素贝叶斯 三、人工神经网络 四、利用三种方法进行鸢尾花数据集分类 一、决策树 决策树是一种常用的机器学习算法&#xff0c;用于分类和回归任务。它是一种树形结构&#xff0c;其中每个内部节点表示一个特征或属性&#xff0c;每个分支代表这个特征…

Scanpy(2)多种可视化

本篇内容为scanpy的可视化方法&#xff0c;可以分为三部分&#xff1a; embedding的散点图&#xff1b;用已知marker genes的聚类识别&#xff08;Identification of clusters&#xff09;&#xff1b;可视化基因的差异表达&#xff1b; 我们使用10x的PBMC数据集&#xff08;…

声明式 GUI 工具包:响应式、跨平台、多语言 | 开源日报 No.230

slint-ui/slint Stars: 14.5k License: NOASSERTION slint 是一个声明式的 GUI 工具包&#xff0c;用于为 Rust、C 或 JavaScript 应用程序构建原生用户界面。 可扩展性&#xff1a;支持响应式 UI 设计&#xff0c;跨操作系统和处理器架构的跨平台使用&#xff0c;并支持多种…

Mac电脑版鼠标连点工具 RapidClick for Mac

RapidClick for Mac是一款方便实用的自动点击工具&#xff0c;可以帮助Mac用户在使用电脑时轻松、快速地进行鼠标操作。它可以模拟人类手指点击的动作&#xff0c;让您的鼠标点击变得更加快捷高效&#xff0c;大大提升了工作和游戏的效率。 RapidClick for Macv1.5.1激活版下载…