【web程序开发】前端标签介绍
2024-04-20 03:23:49
文章目录
- 基础标签
- 行标签与块标签
- 1.多级标题标签
- 2.段落标签 < p >与< span >
- 3.行标签与块标签的异同
- 文本标签
- 图片标签
- 表格标签
- 表格的标签和属性
- 列表标签
- 1.无序标签与有序标签
- 无序标签的属性
- 有序标签的属性
- 表单标签
- < form >标签
- 1. get
- 2.post
- 3.type属性
- 4.autocomplete属性
- 5.required属性
- 6.value属性
- 7.下拉列表
- 8.textarea文本域标签
- < label >标签
- 超链接标签
- 1.默认-跳转后在同一页面
- 2.target属性
- 多媒体标签
- 1.插入视频
- 2.插入音频
- 框架标签
- 框架标签应用-显示百度地图
基础标签
< b r>换行
< /br >也是换行，效果同上（如果配合使用，换两行）
< hr >水平线
行标签与块标签
1.多级标题标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h1>一级标签</h1><h2>二级标签</h2><h3>三级标签</h3><h4>四级标签</h4><h5>五级标签</h5><h6>六级标签</h6>
</body>
</html>
result:
2.段落标签 < p >与< span >
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><p>块标签</p><p>块标签</p><span>行标签</span> <span>行标签</span>
</body>
</html>
result:
3.行标签与块标签的异同
文本标签
图片标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><img src="" alt="无法显示"width="500px" height="700px"><img src="hinata1.jpg" alt=""width="500px" height="700px"></body>
</html>
result:
src：路径
alt：无法显示时提示语
width：宽度
height：高度
注意：如果图片上方有无法显示图片，下一张图片位置右移；如果无法显示图片在下方，不影响。
相对路径与绝对路径
- 相对路径：就是相对此文件夹来说的位置
- 绝对路径：就是在整个计算机中的位置
引用图片用相对绝对都可以
表格标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><table border="1.5"><tr><th>第一格</th><th>第二格</th><th>第三格</th></tr><tr><td>第一格</td><td>第二格</td><td>第三格</td></tr></table></body>
</html>
result:
表格的标签和属性
列表标签
1.无序标签与有序标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><u1><li>语文</li><li>数学</li><li>英语</li></u1><ol><li>语文</li><li>数学</li><li>英语</li></ol>
</body>
</html>
result:
无序标签的属性
有序标签的属性
2.
3.reversed属性
倒序排序
表单标签
< form >标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=<device-width>, initial-scale=1.0"><title>Document</title>
</head>
<body><form action="text"><!-- 去掉text后，效果一致 -->账号：<input type=""><br><!-- password属性：保密 后面不能加<br>会失效-->密码：<input type="password"><br><!-- 提交按钮 --><input type="button" value="登录"><br></form>
</body>
</html>
1. get
作用：数据发送
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action="https://www.baidu.com/" method="get">账号：<input type="text" name="username"><br>密码：<input type="password" name="password"><br><input type="submit" value="登录"><input type="reset"></form>
</body>
</html>
action：将数据发送到指定地址
缺点：账户密码暴露，保密性差。
2.post
作用：数据发送，相比get优势在于数据保密
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action="https://www.baidu.com/" method="post">账号：<input type="text" name="username"><br>密码：<input type="password" name="password"><br><input type="submit" value="登录"><input type="reset"></form>
</body>
</html>
3.type属性
4.autocomplete属性
5.required属性
6.value属性
拓展：与placeholder的功能一致
7.下拉列表
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><select name="" id=""><option value="">1</option><option value="">2</option><option value="">3</option></select>
</body>
</html>
result：
8.textarea文本域标签
文本域：可以输出很多文本从区域
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=<device-width>, initial-scale=1.0"><title>Document</title>
</head>
<body><form>今日反馈：<textarea></textarea></form>
</body>
</html>
< label >标签
作用：点击文本，输入框也被选中
超链接标签
作用：单机链接的文字或图片，就可以跳转另一个页面
1.默认-跳转后在同一页面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=《, initial-scale=1.0"><title>Document</title>
</head>
<body><a href="https://www.baidu.com/">跳转百度页面</a>
</body>
</html>
2.target属性
多媒体标签
1.插入视频
注意：要配置相关属性后才能显示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=<device-width>, initial-scale=1.0"><title>Document</title>
</head>
<body><video src="1.mp4" width="300px" height="300px" controls></video>
</body>
</html>
result：
2.插入音频
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><audio src="1.mp4" width="300px" height="300px" controls></video>
</body>
</html>
result：
框架标签
作用：在浏览器中嵌套子窗口
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><iframe src="" frameborder="1" width="200px" height="200px"></iframe>
</body>
</html>
框架标签应用-显示百度地图
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><a href="https://map.baidu.com/search/%E5%B9%BF%E5%B7%9E%E5%B8%82/@12611503,2631678.18306806,12z?querytype=s&da_src=shareurl&wd=%E5%B9%BF%E5%B7%9E&c=7&src=0&pn=0&sug=0&l=8&b=(11680691.12212063,2235184.3019813835;13195131.15085128,2970713.1180185354)&from=webmap&biz_forward=%7B%22scaler%22:2,%22styles%22:%22pl%22%7D&device_ratio=2"target="guangzhou"><button>广州</button></a><iframe src="" frameborder="1" width="500px" height="500px" name="guangzhou"></iframe></body>
</html>
result:
【web程序开发】前端标签介绍相关推荐
- 网约叫车出行小程序开发制作功能介绍
网约叫车出行小程序开发制作功能介绍: 打车小程序网约车顺风车拼车/代驾/出租车软件,帮助用户快速匹配司机,减少用户等待时间.让车主分享空余车位和乘客分摊部分油费,绿色出行,为拼车者免去了上下班挤公交地 ...
- 人才招聘微信小程序开发制作功能介绍
人才招聘微信小程序开发制作功能介绍 功能详情: 1.展示职位列表 2.展示简历列表 3.企业会员中心 4.个人会员中心展示 5.首页推荐企业广告位展示 6.职位详情展示 人才招聘微信小程序 企业入驻及 ...
- 食堂团餐预定小程序开发制作功能介绍
食堂团餐预定小程序主要用于用户写字楼,食堂等针对指定区域大量订餐使用可提前设置一周菜品,允许开关周六周日来适应各种调休假期政策. 食堂团餐预定小程序开发制作功能介绍: 前端点餐:当天下单.选择开放地点 ...
- 在线刷题题库微信小程序开发制作功能介绍
在线刷题题库微信小程序开发制作功能介绍 1.题库大全:支持搜索查询各类课程试题答案. 2.多试题类型:支持单选题.多选题.判断题.问答题等多种类型. 3.批量导入:支持批量导入课程试题. 4.试题纠错 ...
- 关于Web程序开发的感想
最近参加了学校内部的爪哇部落组织的软件设计大赛,我报名参加了后端的编程工作.在完成这一段开发的过程中有些对感想,可能对初学者有帮助. 首先是搭建Web程序开发的环境,我使用的是IDEA集成开发环境.J ...
- Java Web 高性能开发,前端的高性能
Java Web 高性能开发,第 2 部分: 前端的高性能 Web 发展的速度让许多人叹为观止,层出不穷的组件.技术,只需要合理的组合.恰当的设置,就可以让 Web 程序性能不断飞跃.Web 的思想是 ...
- 微信小程序开发尚学堂 介绍 项目结构 组件 喧嚷 事件 模板
一.微信小程序介绍 1. 微信小程序介绍 微信小程序,简称小程序,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打开应用. 说明: 小程 ...
- 汽车改装贴膜小程序开发制作功能介绍
汽车贴膜小程序主要适用于汽车改装美容门店,汽车贴膜等场景下. 汽车贴膜小程序开发制作主要功能有: 公司品牌介绍.产品介绍.汽车贴膜报价.贴膜案例.质保查询.预约到店.门店信息介绍.在线客服.爱车管理. ...
- 预订选座排队叫号小程序开发制作功能介绍
该酒吧预定预订排队选座小程序,需要是用于酒吧座位预订和排队叫号场景使用.用户通过酒吧小程序360度全景视频查看酒吧环境和座位选定. 酒吧预订排队选座小程序开发制作功能有:用户注册登录会员.360全景. ...
- 微商分销代理小程序开发制作功能介绍
一.微商分销代理小程序解决哪些问题 掌控代理:企业能够掌控所有代理商的详稳信息 整合团队:即使核心代理商离去也不会带走大批代理商 利益透明:无论是代理商差价或是公司返利,都清晰结算 消息通知:企业活动 ...
最新文章
- Git学习系列之Git基本操作克隆项目（图文详解）
- iOS开发中各种关键字的区别
- mysql用户添加_MySQL用户添加
- Oracle Data Integrator之代理创建
- python中select模块_基于python select.select模块通信的实例讲解 如何用python写个串口通信的程序...
- swift int转string_用Swift开发macOS程序，九、目录模块
- 【C++标准库】字符串
- linux dd后无法启动盘,dd后新盘系统无法启动，解决（上）
- 汇编 内存段划分和寄存器
- R、Rstudio的下载和安装教程
- Java疯狂讲义（第8章——泛型）（读书笔记）
- Google的图片处理库和条码处理库、汉字转拼音库
- python 头条视频_今日头条python视频消重赞
- 量子计算机平行宇宙,【宇宙探秘】量子永生？量子纠缠可以推断出平行宇宙，再无真正意义上的死亡？...
- 微信小程序云开发数据导出为Excel下载并打开
- java知识体系介绍
- 朋友结婚了，新娘不是我
- mac BigSur修改系统文件方法
- python爬取斗鱼图片
- AutoDock安装及AutoDockTools闪退问题