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。

相关文章

HTML中meta标签的常见使用案例(示例详解)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化（seo）三、社交媒体集成四、移动
阅读更多...
HTML input 标签示例详解

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入，随type属性值的不同，变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签，感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框
阅读更多...
HTML img标签和超链接标签详细介绍

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》：本文主要介绍了HTML中img标签的使用，包括src属性（指定图片路径）、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等，详细内容请阅读本文，希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h
阅读更多...
HTML5 中的＜button＞标签用法和特征

HTML5 中的＜button＞标签用法和特征

《HTML5中的＜button＞标签用法和特征》在HTML5中，button标签用于定义一个可点击的按钮，它是创建交互式网页的重要元素之一，本文将深入解析HTML5中的button标签，详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled
阅读更多...
全面解析HTML5中Checkbox标签

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一，通过合理使用其属性和样式自定义方法，可以为用户提供丰富多样的交互体验，这篇文章给大家介绍HTML5中C... 在html5中，Checkbox（复选框）是一种常用的表单元素，允许用户在一组选项中选择多个项目。本
阅读更多...
使用Python和Tkinter实现html标签去除工具

使用Python和Tkinter实现html标签去除工具

《使用Python和Tkinter实现html标签去除工具》本文介绍用Python和Tkinter开发的HTML标签去除工具,支持去除HTML标签、转义实体并输出纯文本,提供图形界面操作及复制功能,需... 目录html 标签去除工具功能介绍创作过程1. 技术选型2. 核心实现逻辑3. 用户体验增强如何运行
阅读更多...
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
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2