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。

相关文章

CSS去除a标签的下划线的几种方法

CSS去除a标签的下划线的几种方法

《CSS去除a标签的下划线的几种方法》本文给大家分享在CSS中，去除a标签（超链接）的下划线的几种方法，本文给大家介绍的非常详细，感兴趣的朋友一起看看吧... 在 css 中，去除a标签（超链接）的下划线主要有以下几种方法：使用text-decoration属性通用选择器设置：使用a标签选择器，将tex
阅读更多...
MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

《MyBatis动态SQL优化之标签的实战与技巧(常见用法)》本文通过详细的示例和实际应用场景,介绍了如何有效利用这些标签来优化MyBatis配置,提升开发效率,确保SQL的高效执行和安全性,感... 目录动态SQL详解一、动态SQL的核心概念1.1 什么是动态SQL？1.2 动态SQL的优点1.3 动态S
阅读更多...
Python基于wxPython和FFmpeg开发一个视频标签工具

Python基于wxPython和FFmpeg开发一个视频标签工具

《Python基于wxPython和FFmpeg开发一个视频标签工具》在当今数字媒体时代,视频内容的管理和标记变得越来越重要,无论是研究人员需要对实验视频进行时间点标记,还是个人用户希望对家庭视频进行... 目录引言1. 应用概述2. 技术栈分析2.1 核心库和模块2.2 wxpython作为GUI选择的优
阅读更多...
Maven pom.xml文件中build,plugin标签的使用小结

Maven pom.xml文件中build,plugin标签的使用小结

《Mavenpom.xml文件中build,plugin标签的使用小结》本文主要介绍了Mavenpom.xml文件中build,plugin标签的使用小结,文中通过示例代码介绍的非常详细,对大家的学... 目录<build> 标签Plugins插件<build> 标签<build> 标签是 pom.XML
阅读更多...
HTML5中下拉框＜select＞标签的属性和样式详解

HTML5中下拉框＜select＞标签的属性和样式详解

《HTML5中下拉框＜select＞标签的属性和样式详解》在HTML5中，下拉框（select标签）作为表单的重要组成部分，为用户提供了一个从预定义选项中选择值的方式,本文将深入探讨select标签的... 在html5中，下拉框（<select>标签）作为表单的重要组成部分，为用户提供了一个从预定义选项中
阅读更多...
python解析HTML并提取span标签中的文本

python解析HTML并提取span标签中的文本

《python解析HTML并提取span标签中的文本》在网页开发和数据抓取过程中,我们经常需要从HTML页面中提取信息,尤其是span元素中的文本,span标签是一个行内元素,通常用于包装一小段文本或... 目录一、安装相关依赖二、html 页面结构三、使用 BeautifulSoup javascript
阅读更多...
【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标签

阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2