前端基础（HTML）——html介绍 &amp； 常用标签 &amp； 几个案例_html基础标签及示例

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新软件测试全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上软件测试知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024b （备注软件测试）

正文

hello 你好

**Html 的代码注释 **

可以使用和eclipse一样的快捷键，用ctrl+/来注释一段代码

html文件都是.html或.htm结尾

四、常用的标签

完整的标签可以参考w3c网站

W3c网站

4.1 排版标签

h1~h6 做标题使用，特点：
1.独占一行；
2.行间有空隙；
3.加粗
p 段落；<hr 分割线

你好呀，哈哈哈，中国

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

具有良好的沟通能力与团队合作能力；性格开朗，勇于挑战；良好的人际关系，对技术有更高的追求。

test


test

分割线

---

4.1 排版案例

抬手就能付款！掌纹信息交出去了安全吗？

---

来源：扬子晚报 | 2023年05月24日 10:39:46 原标题：抬手就能付款！掌纹信息交出去了安全吗？

---

   出门不用带手机、银行卡，抬抬手就能付款！5月21日，
微信宣布“刷掌支付”功能上线，用户目前可以在北京实现刷掌坐地铁。对此，
有网友调侃道：“挥手说我不要，然后就把钱扣走了”“有些手，
刷着刷着钱就没了”，也有人表示担心，从此又多了一个个人信息泄露隐患。

据微信官方消息，用户需要先在设备绑定个人微信账号，录入手掌纹样。消费时，将手掌对准支付设备的扫描区，确认后即可完成支付。相比刷脸支付，刷掌支付无论是安全或精准度上都更高一些。区别于指纹识别读取指腹的表皮纹路，掌纹读取的则是掌心血管纹路，能够避免暴露在外以及复制伪造。

据微信官方消息

据微信官方消息

据微信官方消息

据微信官方消息

浙江温州江南皮革厂倒闭了，100块，200块，300块的皮包，统统只用15块

4.2 图片【重点】

[1] 图片看成一个对象，属性
1.src指向什么地方,源头；网络或者本地【需要在当面目录】
2.宽和高，width=，等比例缩小
3.title 央视 鼠标移动上去的效果
4.border 边框，弃用
5.alt 只有图片找不到时候才会显示

[2] 相对路径和绝对路径

j2se中相对路径：从工程名开始

​ 绝对路径：/user/download/1.jpg

Web中的相对路径：

​ . 表示当前文件所在的目录，如果文件在同一目录，./可以省略不写

​ …表示当前文件所在的上一级目录

绝对路径：https://img-blog.csdnimg.cn/img_convert/499a379bb447a8488e0d4685459c12ff.gif

4.2 图片案例（音视频）

音频 、视频
音频，controls 显示控制，autoplay自动播放，loop 循环播放
视频，controls 显示控制，autoplay不起作用被禁用【浏览器】，loop 循环播放

4.3 超链接【重点】

超链接，<a
中间可以是文字，图片，按钮等
跳转的方式，target _blank打开新页面
_self 自己，可不写

百度

百度_self

百度_blank

4.3 超链接案例

百度
百度
百度
图片路径
跳转到图片

4.3 招聘网站案例

哈哈哈技术股份有限公司Java开发工程师

---

上海 | 5-7年经验 | 本科 | 11-09发布

---

职位信息

1.本科以上学历，计算机软件或相关专业；

2.5年以上Java/J2EE开发经验，有2年以上大型项目开发经验，具有高并发WEB应用项目经验；

3.精通Java核心API，精通J2EE各核心模块，精通Java各种设计模式；

8.具备很强的学习能力及沟通能力；

9.具有良好的沟通能力与团队合作能力；性格开朗，勇于挑战；良好的人际关系，对技术有更高的追求

工作地址

上班地址：哈哈大厦

部门信息

所属部门：上海总部

官方网站

wind信息网

4.4 列表标签（了解）

有序列表，无序列表

• 高数
• 英语
• 马列

有序列表：

1. 打开冰箱门
2. 把大象放进去
3. 关上冰箱门

无序列表：

• 雪碧
• 可乐
• 凉茶

4.5 表格标签【重点】

table 表示一个表
tr表示表格的一行，th表示表头，td普通的格子
align 表格居中
border 边框
width 宽度

学号	姓名	入学时间	籍贯

10001 小王 2023-05-10 江苏南京 10002 小王2 2023-05-11 江苏南京2 10003 小王5 2023-05-12 江苏南京3

4.5 表格合并案例

组号 基本信息 院系 总分 学号 姓名 1组 10001 张望月 计算机系 358 10002 张望阳 软件系 348 10003 张望星 机械系 338 2组 10002 王望月 化工系 10002 王望月 10002 王望月

4.6 表单标签【重要】

什么是表单?

表单就是 html 页面中,用来收集用户信息的所有元素集合.然后把这些信息发送给服务器。比如登录页面等

action 输入框中的内容往哪里提交
method get 表示请求的方式

type text 表示文本框；
submit 表示提交框，提交所有name的值
name 提交内容；
reset 重置;
radio 单选框，name

1 输入框、密码框

身份证号：

密码：

2 单选框

婚否：已婚 未婚:

3 多选框

感兴趣的项目：
IT
电影
游戏

4 下拉菜单

婚否：已婚 未婚:

5 单选框

湖北 山东 河南 江苏

6 文本域

自我介绍

7 其他 隐藏域
文件上传
颜色
日期框
email

### 4.6 表单标签案例  **网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。** **需要这份系统化的资料的朋友，可以添加V获取：vip1024b （备注软件测试）**  **一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**
颜色
日期框
email

### 4.6 表单标签案例  **网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。** **需要这份系统化的资料的朋友，可以添加V获取：vip1024b （备注软件测试）** [外链图片转存中...(img-RdUC4GGp-1713468479688)] **一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**