HTM标签 - 2

2024-02-01 01:28
文章标签 标签 htm

本文主要是介绍HTM标签 - 2，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

HTM标签

超链接标签

  • 超链接标签：<a> 文本或图片 </a>

  • 用法1：在页面中使用超链接标签跳转到另一个页面

  • 属性描述
    href页面跳转的地址，相对地址或绝对地址；
    ###：空连接；#：跳转到当前页面顶部；不写：刷新当前页面
    target跳转页面的打开方式
    _blank: 在新窗口打开
    _self[默认]: 在自身窗口打开
    _parent: 在父窗口打开
    _top: 在顶级窗口打开
    自定义名称窗口

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>超链接标签</title>
</head>
<body><h1>超链接标签</h1><h2>1、在页面中使用超链接标签跳转到另一个页面</h2><ul><li>href: 页面跳转的地址，相对地址或绝对地址</li><li>target: 跳转页面的打开方式</li><ul><li>_blank: 在新窗口打开</li><li>_self[默认]: 在自身窗口打开</li><li>_parent: 在父窗口打开</li><li>_top: 在顶级窗口打开</li><li>自定义名称窗口</li></ul></ul><a href="http://www.baidu.com" target="_blank">百度</a><a href="index.html">首页</a><br><a href="https://www.yuanshen.com/#/"><img src="image/ys.96a55539.png" alt="" width="10%"></a>
</body>
</html>

  • 用法2：跳转到页面指定位置

    1. 定义位置(标记) < a name|id="标记"></a>
    2. 跳转到指定位置 < a href="#标记"></a>

表格标签

  • 表格标签用来在页面中规则整齐的显示数据

  • 标签：

    • table：定义表格
      • border：表格的边框
      • width：表格的宽度
      • height：表格的高度
      • bgcolor： 表格的背景颜色
      • align： 表格的水平对齐方式，left、center、right
    • tr：定义行
      • bgcolor：行的背景颜色
      • align：行的内容水平对齐方式
      • valign：行的内容垂直对齐方式 top、middle、bottom
    • td：定义列
      • bgcolor：单元格的背景颜色
      • align：单元格的内容水平对齐方式
      • valign：单元格的内容垂直对齐方式
    • th：定义列标题，加粗居中显示

  • <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格标签</title>
</head>
<body><table border="1" width="500" height="400" bgcolor="gold"><tr><th>姓名</th><th>班级</th><th>学号</th></tr><tr><td>张三</td><td>一班</td><td align="right" valign="top">1001</td></tr><tr align="center"><td>李四</td><td>二班</td><td>2001</td></tr><tr bgcolor="blue"><td>王五</td><td>一班</td><td>1002</td></tr><tr><td>宋六</td><td bgcolor="red">三班</td><td>3001</td></tr></table>
</body>
</html>

  • 列合并、行合并

  • 列合并：colspan

  • 行合并：rowspan

    在这里插入图片描述

    <table border="1" width="500" height="400"><tr><th colspan="3" align="center" bgcolor="gold">课程表</th></tr><tr align="center"><td rowspan="3" bgcolor="skyblue">周一</td><td>上午</td><td>语文</td></tr><tr align="center"><td>下午</td><td>数学</td></tr><tr align="center"><td>晚上</td><td>物理</td></tr><tr align="center"><td rowspan="3" bgcolor="skyblue">周二</td><td>上午</td><td>语文</td></tr><tr align="center"><td>下午</td><td>数学</td></tr><tr align="center"><td>晚上</td><td>物理</td></tr>
</table>

表单标签

form元素常用属性
  • action表示动作，值为服务器的地址，把表单的数据提交到该地址上处理
  • method:请求方式：get 和post
    • get:
      • 地址栏,请求参数都在地址后拼接 path?name=“张三”&password=“123456”
      • 不安全
      • 效率高
      • get请求大小有限制，不同浏览器有不同，但是大约是2KB；一般情况用于查询数据
    • post：
      • 地址栏：请求参数单独处理。
      • 安全可靠些
      • 效率低
      • post请求大小理论上无限；一般用于插入删除修改等操作
  • enctype:表示是表单提交的类型
    • 默认值：application/x-www-form-urlencoded 普通表单
    • multipart/form-data 多部分表单(一般用于文件上传)​
input元素

不同type值呈现不同状态。

属性值描述代码
text单行文体框< input type=“text”/>
password密码框< input type=“password”/>
radio单选按钮< input type=“radio”/>
checkbox复选框< input type=“checkbox”/>
date日期框< input type=“date”/>
time时间框< input type=“time”/>
datetime日期和时间框< input type=“datetime”/>
email电子邮件输入< input type=“email”/>
number数值输入< input type=“number”/>
file文件上传< input type=“file”/>
hidden隐藏域< input type=“hidden”/>
range取值范围< input type=“range”/>
color取色按钮< input type=“color”/>
submit表单提交按钮< input type=“submit”/>
button普通按钮< input type=“button”/>
reset重置按钮< input type=“reset”/>
image图片提交按钮< input type=“image”/>

文件上传

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文件上传</title>
</head>
<body><h1>文件上传</h1><form action="" method="post" enctype="multipart/form-data"><!-- multiple：可以选择多个图片 -->头像:<input type="file" name="photo" multiple><br><!-- 隐藏域：隐藏在表单中，表单提交时会发给服务器 --><input type="hidden" name="id" value="8888888"><input type="submit" value="上传"></form>
</body>
</html>

元素练习 email、number、range、color、date、time

<form action="" method="post" enctype="application/x-www-form-urlencoded"><table><tr><td>邮箱</td><td><input type="email" name="email"></td></tr><tr><td>年龄</td><td><input type="number" name="age" min="1" max="100"></td></tr><tr><td>满意度</td><td><input type="range" name="level" min="1" max="100"></td></tr><tr><td>喜欢的颜色</td><td><input type="color" name”color></td></tr><tr><td>出生日期</td><td><input type="date" name="born"></td></tr><tr><td>访问时间</td><td><input type="time" name="time"></td></tr><tr><td colspan="2"><input type="submit" value="提交"></td></tr></table></form>

name属性是必须的，否则不会交给服务器，value就是提交的数据

select：下拉列表
  • 选项
    • <option>文本</option>
  • 属性
    • selected：默认选中
    • multiple：多选
textarea：文本域

  • 属性

    • cols：列数
    • rows：行数

  • 高级属性：

    • readonly：只读
    • disabled：禁用
    • required：必填

  • 在这里插入图片描述

  • <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>其他表单元素</title>
</head>
<body><form action="" method="post" enctype="application/x-www-form-urlencoded"><table><tr><td>用户名</td><td><input type="text" name="username" value="admin" readonly></td></tr><tr><td>密码</td><td><input type="password" name="password" required></td></tr><tr><td>学历</td><td><select name="edu"><option value="none">无</option><option value="High school education">高中</option><option value="University degree">大学</option><option value="Postgraduate degree">研究生</option><option value="Doctoral degree">博士</option></select></td></tr><tr><td>自我介绍</td><td><textarea name="info" cols="30" rows="10" style="resize: none;"></textarea></td></tr><tr><td colspan="2"><input type="submit" value="提交"><input type="reset" value="重置" disabled></td></tr></table></form>
</body>
</html>

框架标签

  • 内嵌标签：iframe

  • <iframe src="" frameborder="0"></iframe>

  • <body><!-- src:关联页面地址 frameborder：是否有边框，0没有，1有--><table width="100%" border="1"><tr><td colspan="2"><iframe src="top.html" frameborder="0" width="100%"></iframe></td></tr><tr><td width="20%"><iframe src="left.html" frameborder="0" width="100%" height="700"></iframe></td><td><iframe src="right.html" frameborder="0" width="100%" height="700" name="main"></iframe></td></tr></table>
</body>

其他标签、特殊字符

  • <!DOCTYPE html>
<html lang="en">
<head><!-- 定义网页的的编码方式 --><meta charset="UTF-8"><!-- 适配移动端浏览器 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 设置页面的关键字，配合搜索引擎，多个关键字使用逗号隔开 --><meta name="keyword" content="Java开发,IT培训"><title>Document</title>
</head>
<body><h1>特殊字符</h1>空格：空格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空格<br>大于号：&gt;<br>小于号：&lt;<br>注册符号：&reg;<br>双引号：&quot;<br>人民币：&yen;<br>
</body>
</html>

这篇关于HTM标签 - 2的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/665654。

相关文章

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。 🏆《博客》：Python全栈，前后端开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi
阅读更多...
EMLOG程序单页友链和标签增加美化

EMLOG程序单页友链和标签增加美化

单页友联效果图： 标签页面效果图： 源码介绍 EMLOG单页友情链接和TAG标签，友链单页文件代码main{width: 58%;是设置宽度 自己把设置成与您的网站宽度一样，如果自适应就填写100%，TAG文件不用修改 安装方法：把Links.php和tag.php上传到网站根目录即可，访问 域名/Links.php、域名/tag.php 所有模板适用，代码就不粘贴出来，已经打
阅读更多...
Spring下自定义xml标签

Spring下自定义xml标签

dubbo自定义了很多xml标签，例如<dubbo:application>，那么这些自定义标签是怎么与spring结合起来的呢？我们先看一个简单的例子。 一 编写模型类 1 package com.hulk.testdubbo.model;2 3 public class Hero {4 private String name;5 private int
阅读更多...
aspcms如何过滤html标签

aspcms如何过滤html标签

阅读更多...
IEEE会议投稿资料汇总http://cadcg2015.nwpu.edu.cn/index.htm

IEEE会议投稿资料汇总http://cadcg2015.nwpu.edu.cn/index.htm

最近投了篇IEEE的顶级会议文章，一下是比较有用的一些资料，以供参考。 1.会议主页：http://cadcg2015.nwpu.edu.cn/index.htm     （The 14th International Conference on Computer-Aided Design and Computer Graphics (CAD/Graphics 2015)） 2.I
阅读更多...
Struts2常用标签总结--转载

Struts2常用标签总结--转载

Struts2常用标签总结 一 介绍 1．Struts2的作用 Struts2标签库提供了主题、模板支持，极大地简化了视图页面的编写，而且，struts2的主题、模板都提供了很好的扩展性。实现了更好的代码复用。Struts2允许在页面中使用自定义组件，这完全能满足项目中页面显示复杂，多变的需求。 Struts2的标签库有一个巨大的改进之处，struts2标签库的标签不依赖于
阅读更多...
LLM应用实战: 产业治理多标签分类

LLM应用实战: 产业治理多标签分类

数据介绍 标签体系 产业治理方面的标签体系共计200+个，每个标签共有4个层级，且第3、4层级有标签含义的概括信息。 原始数据 企业官网介绍数据，包括基本介绍、主要产品等 企业专利数据，包括专利名称和专利摘要信息，且专利的数据量大。 LLM选型 经调研，采用Qwen2-72B-Instruct-GPTQ-Int4量化版本，占用显存更少，且效果与非量化相当，
阅读更多...
Vue 向标签中传入 this

Vue 向标签中传入 this

我曾经问过 chatgpt 这个问题，chatgpt 说不行！ 但是，chatgpt 说的就算吗？ 来试试吧： https://andi.cn/page/621733.html 当然是可以的！
阅读更多...
SimD：基于相似度距离的小目标检测标签分配

SimD：基于相似度距离的小目标检测标签分配

摘要 https://arxiv.org/pdf/2407.02394 由于物体尺寸有限且信息不足，小物体检测正成为计算机视觉领域最具挑战性的任务之一。标签分配策略是影响物体检测精度的关键因素。尽管已经存在一些针对小物体的有效标签分配策略，但大多数策略都集中在降低对边界框的敏感性以增加正样本数量上，并且需要设置一些固定的超参数。然而，更多的正样本并不一定会带来更好的检测结果，事实上，过多的正样本
阅读更多...
纯HTML标签详解

纯HTML标签详解

HTML标签很多,可是实际上常用的却就那么十几二十个,很多标签的功能渐渐的被大家忽略了.然后,如果在适当的时候,用一用,还是能在一定程序上给我们的页面设计带来一点小小的方便的.下面这些HTML标签基本上包含了所有现有的标签,花几分钟,一一浏览一下,或许还会小有收获: 　　:注释标签用来在源文档中插入注释 　　:告知浏览器文档使用哪种 HTML 或 XHTML 规范 　　:定义锚,
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2