HTML标签（超链接、锚、表格、表单）

HTML的标签2

  • 超链接标签：
  • 锚链接：
  • 表格标签：
  • 表单：
    • 输入输出：

超链接标签：

超链接标签：a
 
​ 属性：

​        href - 链接地址

​        target - 跳转目标（_self在当前卡页跳转，_blank在新增卡页跳转）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<a href="http://www.baidu.com" target="_self">百度一下</a>
		<br />
		
		<a href="http://www.baidu.com" target="_blank">百度一下</a>
		<br />
		
		<a href="08_列表案例.html" target="_blank">跳转本地页面</a>
		<br />
		
		<a href="08_列表案例.html" target="_blank">
			<img src="../img/花儿.jpg" width="50px"/>
		</a>
	</body>
</html>

​ target 的_self在当前卡页跳转

target 的_blank在新增卡页跳转

)

 
 

锚链接：

		<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<a href="#new01">法治</a><!--定位到锚点处-->
		<a href="#new02">国际</a><!--定位到锚点处-->
		<a href="#new03">娱乐</a><!--定位到锚点处-->
		
		<a name="new01"></a><!--下锚点-->
		
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<a name="new02"></a><!--下锚点-->
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<a name="new03"></a><!--下锚点-->
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		
		
		
	</body>
</html>

 
 

表格标签：

表格：table
 
​ 属性：

​        设置边框：border

行：tr
 
列：

​        th（加粗、居中）

​        td（向左对齐）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>

		
		<table border="1" width="300px">
			
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
			</tr>
			
			<tr>
				<td>小明</td>
				<td>男</td>
				<td>27</td>
			</tr>
			<tr>
				<td>小红</td>
				<td>女</td>
				<td>23</td>
			</tr>
			<tr>
				<td>小黑</td>
				<td>男</td>
				<td>25</td>
			</tr>
			<tr>
				<td>小白</td>
				<td>女</td>
				<td>24</td>
			</tr>
			
		</table>
		
	</body>
</html>

 

规定占据行数：rowspan=“2” – 占2行
规定占据列数：colspan=“2” – 占2列

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	
		<table border="1" width="300px" height="400px">
			
			<tr>
				<th>C</th>
				<th>-></th>
				<th>+</th>
				<th>-</th>
			</tr>
			<tr>
				<th>7</th>
				<th>8</th>
				<th>9</th>
				<th>*</th>
			</tr>
			<tr>
				<th>4</th>
				<th>5</th>
				<th>6</th>
				<th>/</th>
			</tr>
			<tr>
				<th>1</th>
				<th>2</th>
				<th>3</th>
				<th rowspan="2">=</th>
			</tr>
			<tr>
				<th colspan="2">0</th>
				<th>.</th>
			</tr>
			
		</table>
		
	</body>
</html>

​

 
 

表单：

标签 ：form
 
属性：

​        action---->服务器地址

​        method---->请求方式

输入输出：

标签：input

属性：type

值：

​        text---->文本

​        password----->密码

​        checkbox---->多选

       ​ submit---->提交按钮

       ​ image---->图片

​        reset---->重置按钮

​        button---->普通按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<form>
			
			输入框：<input type="text" /><br />
			密码框：<input type="password"/><br />
            <!--radio 单选框的name属性设为一致，实现单选-->
			单选框：
				<input type="radio" name="xxx"/>
				<input type="radio" name="xxx"/>
				<input type="radio" name="xxx"/>
				<br />
			多选框：
				<input type="checkbox" />
				<input type="checkbox" />
				<input type="checkbox" />
				<input type="checkbox" />
				<br />
			上传文件：<input type="file" /><br />
			下拉列表：
				<select>
					<option>aaa</option>
					<option>bbb</option>
					<option>ccc</option>
					<option>ddd</option>
					<option>eee</option>
				</select>
				<br />
            <!--style="resize: none;" 表示文本域大小固定不可变-->
            <!--readonly="readonly"表示文本域只可以读，不可以写入数据-->
			文本域：
				<textarea style="resize: none;" cols="20" rows="5" readonly="readonly">今天天气真好</textarea>
				<br />
				
            <!--将表单数据提交给服务器-->
			<input type="submit" value="提交按钮" />
            <!--和提交按钮的功能一致-->
			<input type="image" src="../img/花儿.jpg" width="30px"/>
            <!--将数据还原-->
			<input type="reset" value="重置按钮" />
            <!--自定义功能-->
			<input type="button" value="普通按钮" onclick="fun01()"/>
			<button onclick="fun02()">普通按钮</button>
		</form>
		
		<script type="text/javascript">
			
			function fun01(){
				//弹框
				alert("今天天气真好");
			}
			
			function fun02(){
				//弹框
				alert("我们取逛街吧");
			}
			
		</script>
		
	</body>
</html>

action=“服务器地址” 设置服务器地址
 
method=“post” 设置请求方式（get/post）
       get：服务器地址?键=值&键=值
       post：服务器地址 + 数据包
 
注意：post请求的安全级别比get请求更高，所以表单传输大概率会选择post请求。

注意：表单里的数据要想传给服务器，表单组件必须有name属性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
	
		<form action="服务器地址" method="get">
			
			账号：<input type="text" name="username" placeholder="请输入账号..." /><br />
			密码：<input type="password" name="password" placeholder="请输入密码..." /><br />
			性别：
				<input type="radio" name="sex" value="man" checked="checked"/>男
				<input type="radio" name="sex" value="woman"/>女
				<br />
			爱好：
				<input type="checkbox" name="hobbies" value="football" checked="checked"/>足球
				<input type="checkbox" name="hobbies" value="basketball"/>篮球
				<input type="checkbox" name="hobbies" value="shop"/>购物
				<br />
			城市：
				<select name="city">
					<option value="beijing">北京</option>
					<option value="shanghai">上海</option>
					<option value="guangzhou">广州</option>
					<option value="shengzheng">深圳</option>
					<option value="chengdu" selected="selected">成都</option>
					<option value="chongqing">重庆</option>
					<option value="dongguan">东莞</option>
				</select>
				<br />
			
			<input type="submit" value="注册" />
			
		</form>
		
	</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/670613.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

基于单片机的病床呼叫系统设计研究

基于单片机的病床呼叫系统设计研究

摘要&#xff1a;随着无线技术的快速发展&#xff0c;无线应用技术已经运用到人们生产生活中的多个领域&#xff0c;运用无线技术来设计病床呼叫系统能够实现无线信号的远距离传输&#xff0c;减少材料耗费&#xff0c;使医患之间的沟通更加便捷&#xff0c;该系统运用单片机作…
阅读更多...
VSCode界面Outline只显示类名和函数名，隐藏变量名

VSCode界面Outline只显示类名和函数名，隐藏变量名

参考链接 https://blog.csdn.net/Zjhao666/article/details/120523879https://blog.csdn.net/Williamcsj/article/details/122401996 VSCode中界面左下角的Outline能够方便快速跳转到文件的某个类或函数&#xff0c;但默认同时显示变量&#xff0c;导致找某个函数时很不方便。…
阅读更多...
【传知代码】多视图3D目标检测位置嵌入变换（论文复现）

【传知代码】多视图3D目标检测位置嵌入变换（论文复现）

前言&#xff1a;三维目标检测技术正逐渐成为计算机视觉领域的重要研究方向。特别是在自动驾驶、增强现实&#xff08;AR&#xff09;、虚拟现实&#xff08;VR&#xff09;以及机器人导航等应用中&#xff0c;对三维空间内目标的精准检测与定位显得尤为重要。然而&#xff0c;…
阅读更多...
virtualbox虚拟机、centos7安装增强工具

virtualbox虚拟机、centos7安装增强工具

文章目录 1. virtualBox语言设置2. 设置终端启动快捷键3. 添加virtualbox 增强工具4. 设置共享文件夹 1. virtualBox语言设置 virtualbox -> file -> perferences -> language ->选择对应的语言 -> OK virtualbox -> 管理 -> 全局设定 -> 语言 -> …
阅读更多...
点赋科技：建设智能饮品高地，打造数字化产业先锋

点赋科技：建设智能饮品高地，打造数字化产业先锋

在当今数字化时代的浪潮中&#xff0c;点赋科技以其敏锐的洞察力和卓越的创新能力&#xff0c;致力于建设智能饮品高地&#xff0c;打造数字化产业先锋。 点赋深知智能饮品机对于推动社会进步和满足人们日益增长的需求的重要性。因此&#xff0c;他们投入大量资源和精力&#x…
阅读更多...
[AI Google] 三种新方法利用 Gemini 提高 Google Workspace 的生产力

[AI Google] 三种新方法利用 Gemini 提高 Google Workspace 的生产力

Workspace 侧边栏中的 Gemini 现在将使用 Gemini 1.5 Pro&#xff0c;新的 Gemini for Workspace 功能即将登陆 Gmail 移动应用&#xff0c;等等。 Gemini for Google Workspace 帮助个人和企业更好地利用 Google 应用——从在 Gmail 中撰写邮件到在 Sheets 中组织项目计划。过…
阅读更多...
echarts学习: 图表自适应

echarts学习: 图表自适应

1.实现基本功能 我最近在研究如何封装echarts组件&#xff0c;几乎每个相关的文章都会给组件添加图表自适应的功能。其原理也很简单&#xff0c;就是通过侦听window的resize事件&#xff0c;当事件触发时就调用chartInstance.resize方法重置图表尺寸。 基本代码如下: // 重置…
阅读更多...
如何快速上手Python，成为一名数据分析师

如何快速上手Python，成为一名数据分析师

目录 写在前面 推荐图书 推荐理由 粉丝福利 写在最后 写在前面 520快乐&#xff01;喜欢Python的小伙伴有福啦&#xff0c;本期博主给大家推荐一本入门Python的热门书籍&#xff0c;快来看看吧~ 推荐图书 《Python数据分析快速上手》(王靖&#xff0c;商艳红&#xff0…
阅读更多...
基础数学内容重构（后缀0个数）

基础数学内容重构（后缀0个数）

今天也是参加了一下宁波大学的校赛&#xff0c;其中有一道题是求后缀0的个数&#xff0c;题意是让我们求一下式子的后缀0个数&#xff1a; 看上去比较复杂&#xff0c;但是通过化简我们可以知道以上式子就是求&#xff08;n 1&#xff09;&#xff01;&#xff0c;这里化简的过…
阅读更多...
【学习笔记】Vue3（Ⅰ）

【学习笔记】Vue3（Ⅰ）

Vue3（Ⅰ） 1、 概述 1.1、概述 1.2、使用 Vite 创建工程 1.2.1 Vite 介绍 1.2.2 创建工程 1.3、项目文件结构2、 基础 2.1、setup 2.1.1 初识 setup 2.1.2 setup 的返回值 2.1.3 setup 的触发时机…
阅读更多...
Matlab2010安装注册+激活(保姆级教程)

Matlab2010安装注册+激活(保姆级教程)

目录 一、软件安装 二、软件激活 三、软件测试 Matlab2010压缩包: 链接&#xff1a;https://pan.baidu.com/s/1bX4weZ0nC-4zlDLUiSKcRQ?pwdxljj 提取码&#xff1a;xljj 一、软件安装 1.解压所给压缩包&#xff0c;目录双击setup.exe打开. (如果用户名为中文则会遇到这个…
阅读更多...
HCIP-Datacom-ARST自选题库__BGP/MPLS IP VPN判断【10道题】

HCIP-Datacom-ARST自选题库__BGP/MPLS IP VPN判断【10道题】

1.部署BGP/MPLSIP VPN时,当两个VPN有共同的站点,则该共同站点一定不能与两个VPN其他站点使用重叠的地址空间。 2.如图所示&#xff0c;运营商BGP/MPLSIP VPN骨干网通过LDP构建LSP&#xff0c;若想实现用户X两个站点之间通过BGP/MPLSIP VPN网络互通&#xff0c;则PE1和PE2之间必…
阅读更多...
Flutter开发效率提升1000%，Flutter Quick教程之对被遮挡的组件进行编辑

Flutter开发效率提升1000%，Flutter Quick教程之对被遮挡的组件进行编辑

1&#xff0c;有些时候&#xff0c;有的widget会被其他widget所遮挡&#xff0c;那么&#xff0c;我们如何选中被遮挡的Widget?如下面这张图。上面是一个Text&#xff0c;外面包裹着一个Container&#xff0c;这时候点击事件会被Text所拦截&#xff0c;那么&#xff0c;如何选…
阅读更多...
腾讯 InstantMesh，单图生成 3D 模型，10 秒内完成，性能超越 SOTA

腾讯 InstantMesh，单图生成 3D 模型，10 秒内完成，性能超越 SOTA

前言 近年来&#xff0c;3D 内容创作在游戏、动画、虚拟现实等领域发挥着越来越重要的作用。然而&#xff0c;传统的 3D 模型制作流程繁琐&#xff0c;需要专业人员花费大量时间和精力。为了简化 3D 内容创作流程&#xff0c;腾讯 ARC 实验室推出了 InstantMesh&#xff0c;一…
阅读更多...
Python课设-学生信息管理系统

Python课设-学生信息管理系统

一、效果展示图 二、前端代码 1、HTML代码 <1>index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0">…
阅读更多...
C语言（内存函数）

C语言（内存函数）

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸各位能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎~~ &#x1f4a5;个人主页&#xff1a;小羊在奋斗 &#x1f4a5;所属专栏&#xff1a;C语言 本系列文章为个人学习笔记&#xff0c;在这里撰写成文一…
阅读更多...
Python魔法之旅-魔法方法(10)

Python魔法之旅-魔法方法(10)

目录 一、概述 1、定义 2、作用 二、应用场景 1、构造和析构 2、操作符重载 3、字符串和表示 4、容器管理 5、可调用对象 6、上下文管理 7、属性访问和描述符 8、迭代器和生成器 9、数值类型 10、复制和序列化 11、自定义元类行为 12、自定义类行为 13、类型检…
阅读更多...
【Python系列】Python的多返回值

【Python系列】Python的多返回值

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…
阅读更多...
ClickHouse 使用技巧总结

ClickHouse 使用技巧总结

文章目录 数据导入、导出技巧外部文件导入导技巧使用集成表引擎导入、导出数据 建表技巧表引擎选择技巧分区键选择技巧数据结构选择技巧分区技巧 高级技巧物化视图投影位图变更数据捕获 常见报错及处理方法 数据导入、导出技巧 外部文件导入导技巧 ClickHouse作为OLAP即席分析…
阅读更多...
opencv-python（二）

opencv-python（二）

马赛克 img cv2.imread(./bao.jpeg)print(img.shape)img2 cv2.resize(img,(35,23))img3 cv2.resize(img2,(900,666))cv2.imshow(bao,img3)cv2.waitKey(0)cv2.destroyAllWindows()img2 cv2.resize(img, (90,66))img3 np.repeat(img2, 10, axis 0) # 重复行img4 np.repeat(…
阅读更多...
最新文章

Copyright @ 2022~2023