前端“三剑客“---HTML之从入门到精通(一)

✨前端"三剑客"—HTML之从入门到精通(一)


作者介绍:

作者:偷偷敲代码的青花瓷‍
作者的Gitee:代码仓库
✨✨我和大家一样都是热爱编程✨,很高兴能在此和大家分享知识,希望在分享知识的同时,能和大家一起共同进步,取得好成绩,今天和大家分享的章节是HTML基础,如果有错误❌,欢迎指正哟,咋们废话不多说,跟紧步伐,开始学习吧~


前端“三剑客“---HTML之从入门到精通(一)_第1张图片

文章目录

  • 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
    • 案例展示(代码实例)
      • 案例一:展示一份简历信息
      • 案例二:填写一份简历信息
  • 总结

1.什么是HTML

HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你的格式化文本,添加图片,创建链接、输入表单、框架和表格等等,并可将之存为文本文件,浏览器即可读取和显示。

1.HTML 指的是超文本标记语言: HyperText Markup Language
2.HTML 不是一种编程语言,而是一种标记语言 3标记语言是一套标记标签 (markup tag)
4.HTML 使用标记标签来描述网页
5.HTML 文档包含了HTML 标签文本内容
6.HTML文档也叫做 web 页面

2.入门实例

用vscode新建一个 test.html文件,内容如下:




    
    
    
    Document


    

我的第一个标题

我的第一个段落

其中:
前端“三剑客“---HTML之从入门到精通(一)_第2张图片
保存后运行,即可在浏览器中打开如下界面:

前端“三剑客“---HTML之从入门到精通(一)_第3张图片

3.HTML标签详解

3.1 标题标签

HTML 标题(Heading)是通过

-
标签来定义的

前端“三剑客“---HTML之从入门到精通(一)_第4张图片
保存后运行,即可在浏览器中打开如下界面:
前端“三剑客“---HTML之从入门到精通(一)_第5张图片

3.2 段落标签

HTML 段落是通过标签

来定义的

前端“三剑客“---HTML之从入门到精通(一)_第6张图片
保存后运行,即可在浏览器中打开如下界面:
前端“三剑客“---HTML之从入门到精通(一)_第7张图片

3.3 换行标签

HTML 换行是通过标签
来定义的

前端“三剑客“---HTML之从入门到精通(一)_第8张图片

3.4 格式化标签

strong 加粗
b 加粗
倾斜
倾斜
删除线
删除线
下划线
下划线

3.5 链接标签

HTML 链接是通过标签来定义的

前端“三剑客“---HTML之从入门到精通(一)_第9张图片
保存后运行,即可在浏览器中打开如下界面:
前端“三剑客“---HTML之从入门到精通(一)_第10张图片

外部链接

这是一个外部链接

内部链接

网站内部页面之间的连接,写相对路径即可

前端“三剑客“---HTML之从入门到精通(一)_第11张图片

空链接

使用# 在 href 中占位

前端“三剑客“---HTML之从入门到精通(一)_第12张图片

下载链接

照片

锚点链接

点击了之后,是在本页面里面跳转到某个特定的位置(这里不做过多介绍)

3.6 图片标签

HTML 图像是通过标签 来定义的。注意: 图像的名称和尺寸是以属性的形式提供的。

前端“三剑客“---HTML之从入门到精通(一)_第13张图片
保存后运行,即可在浏览器中打开如下界面:
前端“三剑客“---HTML之从入门到精通(一)_第14张图片
这里我们还可以给图片设置尺寸:
前端“三剑客“---HTML之从入门到精通(一)_第15张图片

前端“三剑客“---HTML之从入门到精通(一)_第16张图片

3.7 表格标签

表格由

标签来定义。每个表格均有若干行(由 标签定义),每行被分割为若干单元格(列)(由
标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格的表头使用标签进行定义。如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。

如果不加任何属性,我们看到的表格是一个特别"原始"的表格
前端“三剑客“---HTML之从入门到精通(一)_第17张图片

合并单元格(细节处理)

如何让表格更像表格呢?我们需要在其中加那些属性呢?
前端“三剑客“---HTML之从入门到精通(一)_第18张图片
在浏览器打开如下:
前端“三剑客“---HTML之从入门到精通(一)_第19张图片

3.8 列表标签

无序列表

  • 项目
  • 项目

前端“三剑客“---HTML之从入门到精通(一)_第20张图片

有序列表

  1. 第一项
  2. 第二项

前端“三剑客“---HTML之从入门到精通(一)_第21张图片

自定义列表

 

无序列表

  • 哈哈哈
  • 呜呜呜

有序列表

  1. 你好
  2. 我不好

自定义列表

咬人猫
兔总裁
阿叶君

前端“三剑客“---HTML之从入门到精通(一)_第22张图片

3.9表单标签

表单标签,是用户和页面之间交互的重要手段,大部分的 html 标签都是给用户"展示",表单标签,是让用户来"输入"。

form标签

form(不是from,注意不要拼写错了)表示一个表单标签,借助这个 form 就可以允许用户输入一些信息,并且交到 服务器上

input标签

input 标签有很多形态



前端“三剑客“---HTML之从入门到精通(一)_第23张图片

label标签

1.让 input 标签搭配 label 标签,实现的点击文字,也能选中选项的效果
2.搭配上label的单选id属性,任意HTML元素,都可以指定id属性,在一个页面中,id的取值不能重复
注意:刚刚使用input 标签时候:男女都可以选,加上 name=“gender”checked来使选项确定且唯一

 


前端“三剑客“---HTML之从入门到精通(一)_第24张图片

选择文件:

保存运行后,打开网站,点击选择文件,就会弹出一个对话框,就可以选择本地的一个文件,然后,浏览器就会打开这个文件进一步的就可以实现 提交/上传 文件到服务器


前端“三剑客“---HTML之从入门到精通(一)_第25张图片

select 标签

可以实现一个下拉菜单


前端“三剑客“---HTML之从入门到精通(一)_第26张图片

textarea标签

多行编辑框


前端“三剑客“---HTML之从入门到精通(一)_第27张图片

3.10 无语义标签:div & span

div默认是一个块级元素(独占一行)
span默认是一个行内元素(不独占一行)

案例展示(代码实例)

案例一:展示一份简历信息

前端“三剑客“---HTML之从入门到精通(一)_第28张图片




    
    
    
    这是标题


  

吴彦祖

基本信息

玫瑰

求职意向: Java测试开发工程师

联系电话: xxx-xxx-xxxx

邮箱: 229472*****@qq.com

我的博客

教育背景

  1. 2002 - 2005 xx 幼儿园
  2. 2006 - 2012 xx 小学
  3. 2013 - 2016 xx 初中
  4. 2017 - 2019 xx 高中
  5. 2020 - 2023 XX大学 xxx 本科

专业技能

  • 了解Java基础语法,;
  • 了解常见数据结构;
  • 了解mysql;
  • 了解计算机网络;

我的项目

个人评价

帅气而朴实无华

案例二:填写一份简历信息

前端“三剑客“---HTML之从入门到精通(一)_第29张图片




    
    
    
    这是标题

请填写简历信息

姓名
性别
出生日期
就读学校
应聘岗位
掌握的技能
项目经历
查看我的状态

请应聘者确认:

  • 以上信息真实有效
  • 能够尽快去公司实习
  • 能够接受公司的加班文化

总结

“种一颗树最好的是十年前,其次就是现在”
所以,
“让我们一起努力吧,去奔赴更高更远的山海”

如果有错误❌,欢迎指正哟

如果觉得收获满满,可以动动小手,点点赞,支持一下哟
前端“三剑客“---HTML之从入门到精通(一)_第30张图片

你可能感兴趣的:(前端,HTML,html,前端)