✨前端"三剑客"—HTML之从入门到精通(一)
作者介绍:
作者:偷偷敲代码的青花瓷
作者的Gitee:代码仓库
✨✨我和大家一样都是热爱编程✨,很高兴能在此和大家分享知识,希望在分享知识的同时,能和大家一起共同进步,取得好成绩,今天和大家分享的章节是HTML基础,如果有错误❌,欢迎指正哟,咋们废话不多说,跟紧步伐,开始学习吧~
文章目录
- 1.什么是HTML
- 2.入门实例
- 3.HTML标签详解
- 3.1 标题标签
- 3.2 段落标签
- 3.3 换行标签
- 3.4 格式化标签
- 3.5 链接标签
- 外部链接
- 内部链接
- 空链接
- 下载链接
- 锚点链接
- 3.6 图片标签
- 3.7 表格标签
- 合并单元格(细节处理)
- 3.8 列表标签
- 无序列表
- 有序列表
- 自定义列表
- 3.9表单标签
- form标签
- input标签
- label标签
- select 标签
- textarea标签
- 3.10 无语义标签:div & span
- 案例展示(代码实例)
- 案例一:展示一份简历信息
- 案例二:填写一份简历信息
- 总结
HTML
是用来描述网页的一种语言
。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你的格式化文本,添加图片,创建链接、输入表单、框架和表格等等,并可将之存为文本文件,浏览器即可读取和显示。1.HTML 指的是超文本标记语言: HyperText Markup Language
2.HTML 不是一种编程语言,而是一种标记语言 3标记语言是一套标记标签 (markup tag)
4.HTML 使用标记标签来描述网页
5.HTML 文档包含了HTML 标签及文本内容
6.HTML文档也叫做 web 页面
用vscode新建一个 test.html文件,内容如下:
Document
我的第一个标题
我的第一个段落
HTML 标题(Heading)是通过
-
标签来定义的
HTML 段落是通过标签
来定义的
HTML 换行是通过标签
来定义的
strong 加粗
b 加粗
倾斜
倾斜
删除线
删除线
下划线
下划线
这是一个外部链接
网站内部页面之间的连接,写相对路径即可
使用# 在 href 中占位
照片
点击了之后,是在本页面里面跳转到某个特定的位置(这里不做过多介绍)
HTML 图像是通过标签
来定义的。注意: 图像的名称和尺寸是以属性的形式提供的。
保存后运行,即可在浏览器中打开如下界面:
这里我们还可以给图片设置尺寸:
表格由
标签来定义。每个表格均有若干行(由
标签定义),每行被分割为若干单元格 (列)
(由
标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格的表头使用
标签进行定义。如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。 合并单元格(细节处理)
如何让表格更像表格呢?我们需要在其中加那些属性呢?
在浏览器打开如下:
3.8 列表标签
无序列表
- 项目
- 项目
有序列表
- 第一项
- 第二项
自定义列表
无序列表
- 哈哈哈
- 呜呜呜
有序列表
- 你好
- 我不好
自定义列表
- 咬人猫
- 兔总裁
- 阿叶君
3.9表单标签
表单标签,
是用户和页面之间交互的重要手段
,大部分的 html 标签都是给用户"展示",表单标签,是让用户来"输入"。form标签
form(不是from,注意不要拼写错了)
表示一个表单标签,借助这个 form 就可以允许用户输入一些信息,并且交到 服务器上input标签
input 标签有很多形态
label标签
1.让
input 标签
搭配label 标签
,实现的点击文字,也能选中选项的效果
2.搭配上label的单选id属性
,任意HTML元素,都可以指定id属性,在一个页面中,id的取值不能重复
注意:刚刚使用input 标签时候:男女都可以选,加上name=“gender”
和checked
来使选项确定且唯一
选择文件:
保存运行后,打开网站,点击选择文件,就会弹出一个对话框,就可以选择本地的一个文件,然后,浏览器就会打开这个文件进一步的就可以实现 提交/上传 文件到服务器
select 标签
可以实现一个下拉菜单
textarea标签
多行编辑框
3.10 无语义标签:div & span
div默认是一个块级元素(独占一行)
span默认是一个行内元素(不独占一行)案例展示(代码实例)
案例一:展示一份简历信息
这是标题 吴彦祖
基本信息
求职意向: Java测试开发工程师
联系电话: xxx-xxx-xxxx
邮箱: 229472*****@qq.com
教育背景
- 2002 - 2005 xx 幼儿园
- 2006 - 2012 xx 小学
- 2013 - 2016 xx 初中
- 2017 - 2019 xx 高中
- 2020 - 2023 XX大学 xxx 本科
专业技能
- 了解Java基础语法,;
- 了解常见数据结构;
- 了解mysql;
- 了解计算机网络;
我的项目
无
个人评价
帅气而朴实无华
案例二:填写一份简历信息
这是标题
请填写简历信息
姓名 性别 出生日期 就读学校 应聘岗位 掌握的技能 项目经历 查看我的状态 请应聘者确认:
- 以上信息真实有效
- 能够尽快去公司实习
- 能够接受公司的加班文化
总结
“种一颗树最好的是十年前,其次就是现在”
所以,
“让我们一起努力吧,去奔赴更高更远的山海”如果有错误❌,欢迎指正哟