✨HTML入门学习笔记+详细案例
作者介绍:
作者:偷偷敲代码的青花瓷
作者的Gitee:代码仓库
✨✨我和大家一样都是热爱编程✨,很高兴能在此和大家分享知识,希望在分享知识的同时,能和大家一起共同进步,取得好成绩盧,今天和大家分享的章节是HTML基础,如果有错误❌,欢迎指正哟,咋们废话不多说,跟紧步伐,开始学习吧~
文章目录1.什么是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
- 案例展示(代码实例)
- 案例一:展示一份简历信息
- 案例二:填写一份简历信息
- 总结
2.入门实例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 段落是通过标签
来定义的
保存后运行,即可在浏览器中打开如下界面:
3.4 格式化标签HTML 换行是通过标签
来定义的
strong 加粗 b 加粗 倾斜 倾斜3.5 链接标签删除线删除线下划线 下划线
HTML 链接是通过标签来定义的
保存后运行,即可在浏览器中打开如下界面:
这是一个外部链接内部链接
空链接网站内部页面之间的连接,写相对路径即可
下载链接使用# 在 href 中占位
照片锚点链接
3.6 图片标签点击了之后，是在本页面里面跳转到某个特定的位置(这里不做过多介绍)
HTML 图像是通过标签 来定义的。注意： 图像的名称和尺寸是以属性的形式提供的。
保存后运行,即可在浏览器中打开如下界面:
这里我们还可以给图片设置尺寸:
表格由
标签来定义。每个表格均有若干行（由
标签定义），每行被分割为若干单元格(列)（由 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格的表头使用 标签进行定义。如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。 如果不加任何属性,我们看到的表格是一个特别"原始"的表格
合并单元格(细节处理)
如何让表格更像表格呢?我们需要在其中加那些属性呢?
3.8 列表标签 无序列表
在浏览器打开如下:
有序列表
- 项目
- 项目
自定义列表
- 第一项
- 第二项
无序列表有序列表
- 哈哈哈
- 呜呜呜
自定义列表
- 你好
- 我不好
3.9表单标签
- 咬人猫
- 兔总裁
- 阿叶君
form标签表单标签,是用户和页面之间交互的重要手段,大部分的 html 标签都是给用户"展示",表单标签,是让用户来"输入"。
input标签form(不是from,注意不要拼写错了)表示一个表单标签,借助这个 form 就可以允许用户输入一些信息,并且交到 服务器上
label标签input 标签有很多形态
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;
- 了解计算机网络;
帅气而朴实无华
案例二:填写一份简历信息这是标题 请填写简历信息
总结
姓名 性别 出生日期 就读学校 应聘岗位 掌握的技能 项目经历 查看我的状态 请应聘者确认:
- 以上信息真实有效
- 能够尽快去公司实习
- 能够接受公司的加班文化
“种一颗树最好的是十年前,其次就是现在”
所以,
“让我们一起努力吧,去奔赴更高更远的山海”如果有错误❌,欢迎指正哟
如果觉得收获满满,可以动动小手,点点赞,支持一下哟
Cocos2d-x相关栏目本月热门文章
- 1【Linux驱动开发】设备树详解（二）设备树语法详解
- 2别跟客户扯细节
- 3Springboot+RabbitMQ+ACK机制(生产方确认(全局、局部)、消费方确认)、知识盲区
- 4【Java】对象处理流（ObjectOutputStream和ObjectInputStream）
- 5【分页】常见两种SpringBoot项目中分页技巧
- 6一文带你搞懂OAuth2.0
- 7我要写整个中文互联网界最牛逼的JVM系列教程 | 「JVM与Java体系架构」章节：虚拟机与Java虚拟机介绍
- 8【Spring Cloud】新闻头条微服务项目：FreeMarker模板引擎实现文章静态页面生成
- 9JavaSE - 封装、static成员和内部类
- 10树莓派mjpg-streamer实现监控及拍照功能调试
- 11用c++写一个蓝屏代码
- 12从JDK8源码中看ArrayList和LinkedList的区别
- 13idea 1、报错java: 找不到符号 符号: 变量 log 2、转换成Maven项目
- 14在openwrt使用C语言增加ubus接口（包含C uci操作）
- 15Spring 解决循环依赖
- 16SpringMVC——基于MVC架构的Spring框架
- 17Andy‘s First Dictionary C++ STL set应用
- 18动态内存管理
- 19我的创作纪念日
- 20Docker自定义镜像-Dockerfile
热门相关搜索路由器设置 木托盘 宝塔面板 儿童python教程 心情低落 朋友圈 vim 双一流学科 专升本 我的学校 日记学校 西点培训学校 汽修学校 情书 化妆学校 塔沟武校 异形模板 西南大学排名 最精辟人生短句 6步教你追回被骗的钱 南昌大学排名 清朝十二帝 北京印刷学院排名 北方工业大学排名 北京航空航天大学排名 首都经济贸易大学排名 中国传媒大学排名 首都师范大学排名 中国地质大学(北京)排名 北京信息科技大学排名 中央民族大学排名 北京舞蹈学院排名 北京电影学院排名 中国戏曲学院排名 河北政法职业学院排名 河北经贸大学排名 天津中德应用技术大学排名 天津医学高等专科学校排名 天津美术学院排名 天津音乐学院排名 天津工业大学排名 北京工业大学耿丹学院排名 北京警察学院排名 天津科技大学排名 北京邮电大学(宏福校区)排名 北京网络职业学院排名 北京大学医学部排名 河北科技大学排名 河北地质大学排名 河北体育学院排名名师互学网 版权所有 (c)2021-2022 ICP备案号：晋ICP备2021003244-6号
