推荐学习专栏:
JavaWeb学习专栏
。
和
,我们称为双标签。标签对中的第一个标签是开始标签,第二个标签是结束标签。
,我们称为单标签。双标签关系可以分为两类:包含关系和并列关系。
🌲包含关系 :
🌲并列关系:
每个网页都会有一个基本的结构标签(也称为骨架标签),页面内容也是在这些基本标签上书写。HTML页面也称为 HTML 文档。
标题 主体······
标签名 | 定义 | 说明 |
---|---|---|
| HTML标签 | 页面中最大的标签,我们称为根标签 |
| 文档的头部 | 注意在head标签中我们必须要设置的标签是title |
| 文档的标题 | 让页面拥有一个属于自己的网页标题 |
| 文档的主体 | 元素包含文档的所有内容,页面内容基本都是放到body里面的 |
HTML 文档的的后缀名必须是 .html
或 .htm
,浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。
推荐使用VSCode
1、
标签
文档类型声明标签,告诉浏览器这个页面采取html5版本来显示页面.2、 lang 语言
告诉浏览器或者搜索引擎这是一个英文网站. 本页面采取英文来显示.3、charset 字符集
必须写. 采取 UTF-8来保存文字. 如果不写就会乱码.具体原理后面分析GB2312
、BIG5
、GBK
和 UTF-8
,其中 UTF-8 也被称为万国码
,基本包含了全世界所有国家需要用到的字符.注意
:上面语法是必须要写的代码,否则可能引起乱码的情况。一般情况下,统一使用UTF-8
编码,尽量统一写成标准的 UTF-8
,不要写成 utf8
或 UTF8
。插件在扩展中搜索(快捷键:Ctrl+Shift+X)
中文语言包(Chinese)此插件对英语看起来比较头疼的小伙伴非常友好,推荐使用,当然你也可以换成英文,熟悉熟悉也就OK啦。按
Ctrl+Shift+P
然后输入configure language
就可以随意转换啦!
HTML Snippets(代码提示):HTML代码片段,该插件可为你提供html标签的代码提示,不用键入尖括号了
Auto Rename Tag(自动闭合标签)
Vetur(官方钦定Vue插件):VScode官方钦定Vue插件,Vue开发者必备。内含语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger等实用功能
JavaScript (ES6) code snippets(智能提示与快速输入)
Beautify(美化代码)
Markdown All in One(书写Markdown):可以在vscode里面快乐的书写Markdown,功能强大。丰富的快捷键,边写边看,轻松转化为html或pdf文件
学习标签是有技巧的,重点是记住每个标签的语义。简单理解就是指标签的含义,即这个标签是用来干嘛的。
根据标签的语义,在合适的地方给一个最为合理的标签,可以让页面结构更清晰。
-
(重要)为了使网页更具有语义化,我们经常会在页面中用到标题标签。HTML 提供了 6 个等级的网页标题, 即
。 -
🌲如:
一级标题
🌲特点:
🌲示例:
Document
标题标签
标题一共六级选,
文字加粗一行显。
由大到小依次减,
从重到轻随之变。
语法规范书写后,
具体效果刷新见。
在网页中,要把文字有条理地显示出来,就需要将这些文字分段显示。在 HTML 标签中,标签用于定义段
落,它可以将整个网页分为若干个段落。
🌲如:
一个段落标签
p是单词 paragraph 的缩写,意为段落。
🌲特点:
在 HTML 中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后才自动换行。如果希望
某段文本强制换行显示,就需要使用换行标签
。
🌲 如:
br为单词 break 的缩写,意为打断、换行。
🌲特点:
1.
是个单标签。
2.
标签只是简单地开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距。
🌲示例:
Document
在中国IT教育行业发展的轨迹中,
能始终秉承着初心做教育的企业为数不多,而在李开复老师的心中,传智播客就是其中之一。在11年的风雨历程中,传智播客在中国IT教育行业留下了“为莘莘学子改变命运而讲课,为千万学生少走弯路而著书”的独特烙印。同时,传智播客也凭借着良好的口碑、更注重品质的教学及优秀的业绩增长成功吸引了众多知名投资者们的青睐,其中不乏创新工场、经纬、君度、蓝图、北城壹号等多个投资机构。
不久前,传智播客新加入了几位知名股东,其中包括创投圈的大咖——创新工场的李开复老师。在中国,李开复老师至少影响了70和80后两代人,然而翻开他的履历,我们并没有看到诸如马云、马化腾那样堪称传奇的成功经历,我们看到的只是一位厚积薄发、深耕在世界IT互联网行业多年的“导师”:
在网页中,有时需要为文字设置粗体、斜体或下划线等效果,这时就需要用到 HTML 中的文本格式化标签,使
文字以特殊的方式显示。
标签语义: 突出重要性, 比普通文字更重要
语义 | 标签 | 说明 |
---|---|---|
加粗 | 或者
| 更推荐使用 标签加粗 语义更强烈 |
倾斜 | 或者
| 更推荐使用 标签加粗 语义更强烈 |
删除线 | 或者
| 更推荐使用 标签加粗语义更强烈 |
下划线 | 或者
| 更推荐使用 标签加粗语义更强烈 |
🌲示例:
文本格式化标签
我是加粗的文字我是加粗的文字我是倾斜的文字我是倾斜的文字我是删除线我是删除线我是下划线我是下划线
和
标签
和
是没有语义的,它们就是一个盒子,用来装内容的。
🌲如:
这是头部
今日价格
div 是 division 的缩写,表示分割、分区。span 意为跨度、跨距。
🌲特点:
标签用来布局,但是现在一行只能放一个。 大盒子
标签用来布局,一行上可以多个
。小盒子
示例:
div和span标签
我是一个div标签我一个人单独占一行我是一个div标签我一个人单独占一行百度新浪搜狐
(6)图像标签和路径 (重点)
🍂图像标签
在 HTML 标签中,![]()
标签用于定义 HTML 页面中的图像。
🌲如:
img为单词 image 的缩写,意为图像。
src 是![]()
标签的必须属性,它用于指定图像文件的路径和文件名。
所谓属性:简单理解就是属于这个图像标签的特性。
🌲其他属性:
属性 属性值 说明 src 图片路径 必须属性 alt 文本 替换文本。图像不能显示的文字 title 文本 提示文本。鼠标放到图像上,显示的文字 width 像素 设置图像的宽度 height 像素 设置图像的高度 border 像素 设置图像的边框粗细
🌲图像标签属性注意点:
① 图像标签可以拥有多个属性,必须写在标签名的后面。
② 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
③ 属性采取键值对的格式,即 key=“value" 的格式,属性 =“属性值”。
路径
目录文件夹和根目录
实际工作中,我们的文件不能随便乱放,否则用起来很难快速的找到他们,因此我们需要一个文件夹来管理他们
- 目录文件夹:就是普通文件夹,里面只不过存放了我们做页面所需要的相关素材,比如 html 文件、图片等。
- 根目录:打开目录文件夹的第一层就是根目录
VSCode打开目录文件夹
文件---- 打开文件夹 . 选择目录文件夹. 后期非常方便管理文件.
路径之相对路径
相对路径:以引用文件所在位置为参考基础,而建立出的目录路径。这里简单来说,图片相对于 HTML 页面的位置
相对路径分类 符号 说明 同一级路径 图像文件位于HTML文件同一级 如![]()
下一级路径 / 图像文件位于HTML文件下一级 如![]()
上一级路径 …/ 图像文件位于HTML文件上一级 如![]()
相对路径是从代码所在的这个文件出发,去寻找目标文件的,而我们这里所说的上一级 、下一级和同一级就是
图片相对于 HTML 页面的位置。
路径之绝对路径
绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。
例如,“D:\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif”
(7)超链接标签 (重点)
在 HTML 标签中,
标签用于定义超链接,作用是从一个页面链接到另一个页面。
链接的语法格式
文本或图像
🌲两个属性的作用:
属性 作用 href 用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,它就具有了超链接的功能 target 用于指定链接页面的打开方式,其中_self为默认值,_blank为在新窗口中打开方式。
链接分类
1.外部链接: 例如 < a href="http:// www.baidu.com ">
百度
。
2. 内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可,例如 < a href="index.html">
首页
。
3. 空链接: 如果当时没有确定链接目标时,< a href=“#”> 首页 。
4. 下载链接: 如果 href 里面地址是一个文件或者压缩包,会下载这个文件。
5. 网页元素链接: 在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接.
6. 锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置.
🌲示例:
超链接标签
1.外部链接
腾讯target 打开窗口的方式 默认的值是 _self 当前窗口打开页面 _blank 新窗口打开页面传智播客2.内部链接: 网站内部页面之间的相互链接
公司简介3.空链接:#
公司地址4.下载链接: 地址链接的是 文件 .exe 或者是 zip 等压缩包形式
下载文件5.网页元素的链接
5、HTML 中的注释和特殊字符
(1)注释
如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签。
HTML中的注释以“
”结束。
快捷键: ctrl + /
(2)特殊字符
在 HTML 页面中,一些特殊的符号很难或者不方便直接使用,此时我们就可以使用下面的字符来替代。
名称 代码 空格   ; 大于号 < ; 小于号 > ; 和号& & ; 人民币¥ ¥ ; 版权©️ © ; 注册商标®️ ® ; 摄氏度o ° ; 正负号 ± ; 乘号✖️ × ; 除号➗ ÷ ; 平方(上标2) ² ; 立方(上标3) ³ ;
🌲示例:
Document
讲 究< p > 是一个段落标签
6、 表格标签
(1)表格的主要作用
表格主要用于显示
、展示数据
,因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。
(2) 表格的基本语法
单元格内的文字 ... ...
🌲具体释义:
是用于定义表格的标签。
标签用于定义表格中的行,必须嵌套在
标签中。
用于定义表格中的单元格,必须嵌套在
标签中。- 字母 td 指表格数据(table data),即数据单元格的内容。
🌲具体示例:
Document
姓名 性别 年龄 刘德华 男 56 张学友 男 58 郭富城 男 51 黎明 男 57
(3)表头单元格标签
🌲 表头标签的具体实现:
姓名 ... ...
🌲具体示例:
表格属性
姓名 性别 年龄 刘德华 男 56 张学友 男 58 郭富城 男 51 黎明 男 57
- 一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中显示,
** 标签表示 HTML 表格的表头部分(table head 的缩写)**
(4)表格属性
表格标签这部分属性我们实际开发我们不常用,后面通过 CSS 来设置。
属性名 属性值 描述 align left、center、 right 规定表格相对周围元素的对齐方式。 border 1或"" 规定表格单元是否拥有边框,默认为”",表示没有边框 cellpadding 像素值 规定单元边沿与其内容之间的空白,默认1像素。 cellspacing 像素值 规定单元格之间的空白,默认2像素。 width 像素值或百分比 规定表格的宽度。
案例: 小说排行榜

思路:
- 先制作表格的结构.
-
第一行里面是 th 表头单元格
-
第二行开始里面是 td 普通单元格单元格,里面可以放任何元素
-
单元格里面可以放任何元素,文字链接图片等都可以
- 后书写表格属性
-
cellpadding 和 cellspacing
-
表格浏览器中对齐 align
🌲代码:
今日小说排行榜
排名 关键词 趋势 进入搜索 最近七日 相关链接 1 鬼吹灯 ![]()
456 123 贴吧 图片 百科 1 鬼吹灯 ![]()
456 123 贴吧 图片 百科 3 西游记 ![]()
456 123 贴吧 图片 百科 1 鬼吹灯 ![]()
456 123 贴吧 图片 百科 1 鬼吹灯 ![]()
456 123 贴吧 图片 百科 1 鬼吹灯 ![]()
456 123 贴吧 图片 百科
(5)表格结构标签
🌲使用场景:因为表格可能很长,为了更好的表示表格的语义,可以将表格分割成 表格头部
和表格主体
两大部分.
在表格标签中,分别用:标签 表格的头部区域
、标签 表格的主体区域
. 这样可以更好的分清表格结构。
🌲总结:
1.
:用于定义表格的头部。 内部必须拥有 标签。 一般是位于第一行。
2.
:用于定义表格的主体,主要用于放数据本体 。
3. 以上标签都是放在
标签中。
(6)合并单元格:
特殊情况下,可以把多个单元格合并为一个单元格
- 合并单元格方式
- 跨行合并:rowspan=“合并单元格的个数”
- 跨列合并:colspan=“合并单元格的个数”
- 目标单元格
- 跨行:最上侧单元格为目标单元格, 写合并代码。
- 跨列:最左侧单元格为目标单元格, 写合并代码。
- 合并单元格的步骤
- 先确定是跨行还是跨列合并。
- 找到目标单元格. 写上合并方式 = 合并的单元格数量。比如:
。 - 删除多余的单元格。
🌲示例:
合并单元格
7、列表标签
- 表格是用来显示数据的,那么列表就是用来
布局
的。 - 列表最大的特点就是
整齐、整洁、有序
,它作为布局会更加自由和方便。 - 根据使用情景不同,列表可以分为三大类:
无序列表
、有序列表
和自定义列表
。
(1)无序列表
标签表示 HTML 页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用
标签定义。
无序列表的基本语法格式如下:
- 列表项1
- 列表项2
- 列表项3
...
- 无序列表的各个列表项之间没有顺序级别之分,是并列的。
中只能嵌套
,直接在
标签中输入其他标签或者文字的做法是不被允许的。-
与
之间相当于一个容器,可以容纳所有元素。- 无序列表会带有自己的样式属性,但在实际使用时,我们会使用 CSS 来设置。
🌲示例:
无序列表
您喜欢的食物?
- 榴莲
- 臭豆腐
- 鲱鱼罐头
123
(2)有序列表
有序列表即为有排列顺序的列表,其各个列表项会按照一定的顺序排列定义。在 HTML 标签中,
标签用于定义有序列表,列表排序以数字来显示,并且使用
标签来定义列表项。
🌲有序列表的基本语法格式如下:
- 列表项1
- 列表项2
- 列表项3
...
中只能嵌套
,直接在
标签中输入其他标签或者文字的做法是不被允许的。
与
之间相当于一个容器,可以容纳所有元素。- 有序列表会带有自己样式属性,但在实际使用时,我们会使用 CSS 来设置。
🌲示例:
有序列表
粉丝排行榜
- 刘德华 10000
- 刘若英 1000
(3)自定义列表
自定义列表的使用场景:自定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。在 HTML 标签中,
标签用于定义描述列表(或定义列表),该标签会与
(定义项目/名字)和
(描述每一个项目/名字)一起使用。
🌲语法如下:
- 名词1
- 名词1解释1
- 名词1解释2
1.
里面只能包含
和
。
2.
和
个数没有限制,经常是一个
对应多个
。
🌲示例:
自定义列表
- 关注我们
- 新浪微博
- 官方微信
- 联系我们
- 关注我们
- 新浪微博
- 官方微信
- 联系我们
(4)列表总结

8、表单标签
🌲网页表单:

(1)为什么需要表单
- 使用表单目的是为了收集用户信息。
- 在我们网页中, 我们也需要跟用户进行交互,收集用户资料,此时就需要表单。
(2)表单的组成
在 HTML 中,一个完整的表单通常由表单域
、表单控件
(也称为表单元素)和 提示信息
3个部分构成。
(3)表单域
表单域是一个包含表单元素的区域。
在 HTML 标签中,
标签用于定义表单域,以实现用户信息的收集和传递。
会把它范围内的表单元素信息提交给服务器。
🌲 实现代码:
常用属性:

记住两点:
- 在我们写表单元素之前,应该有个表单域把他们进行包含.
- 表单域是 form标签.
🌲示例:
表单域
(4)表单控件(表单元素)
表单元素
- 在英文单词中,input 是输入的意思,而在表单元素中
标签用于收集用户信息。在
标签中,包含一个 type 属性,根据不同的 type 属性值,输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)。
标签为单标签.- type 属性设置不同的属性值用来指定不同的控件类型.
🌲type 属性的属性值及其描述如下:

🌲除 type 属性外,
标签还有其他很多属性,其常用属性如下:
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hmAFAmOj-1660266832532)(images/表单其他属性.png)]](/webdata/wwwroot/pics.8red.cn/weishitang/202401/862967dc6cceec.png)
- name 和value 是每个表单元素都有的属性值,主要给后台人员使用.
- name 表单元素的名字, 要求 单选按钮和复选框要有相同的name值.
- checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素.
- maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用.
🌲示例:
input 表单元素
标签
标签为 input 元素定义标注(标签)。
标签用于绑定一个表单元素, 当点击
标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.
🌲语法:
核心:
🌲示例:
label标签
表单元素
- 使用场景: 在页面中,如果有多个选项让用户选择,并且想要节约页面空间时,我们可以使用
标签控件定义下拉列表。
🌲语法:
中至少包含一对
。- 在
中定义 selected =“ selected " 时,当前项即为默认选中项。
🌲示例:
select下拉表单
表单元素
- 使用场景: 当用户输入内容较多的情况下,我们就不能使用文本框表单了,此时我们可以使用
标签。 - 在表单元素中,
标签是用于定义多行文本输入的控件。 - 使用多行文本输入控件,可以输入更多的文字,该控件常见于留言板,评论。
🌲语法:
通过
标签可以轻松地创建多行文本输入框。cols=“每行中的字符数” ,rows=“显示的行数”
我们在实际开发中不会使用,都是用 CSS 来改变大小。
🌲示例:
textarea 文本域
(5)总结
1、表单元素我们学习了三大组 input 输入表单元素 select 下拉表单元素 textarea 文本域表单元素.
2、这三组表单元素都应该包含在form表单域里面,并且有 name 属性.
🌲具体代码:
3、有三个名字非常相似的标签:
- 表单域 form 使用场景: 提交区域内表单元素给后台服务器
- 文件域 file 是input type 属性值 使用场景: 上传文件
- 文本域 textarea 使用场景: 可以输入多行文字, 比如留言板 网站介绍等…
9、综合案例:注册页面
🌲使用所学内容作出下边页面:
🌲示例:
综合案例-注册页面
青春不常在,抓紧谈恋爱
性别: 生日: 所在地区 婚姻状况: 未婚 已婚 离婚 学历: 喜欢的类型: 妩媚的 可爱的 小鲜肉 老腊肉 都喜欢 个人介绍 我同意注册条款和会员加入标准 我是会员,立即登录 我承诺
- 年满18岁、单身
- 抱着严肃的态度
- 真诚寻找另一半
相关内容
热门资讯
喜欢穿一身黑的男生性格(喜欢穿...
今天百科达人给各位分享喜欢穿一身黑的男生性格的知识,其中也会对喜欢穿一身黑衣服的男人人好相处吗进行解...
发春是什么意思(思春和发春是什...
本篇文章极速百科给大家谈谈发春是什么意思,以及思春和发春是什么意思对应的知识点,希望对各位有所帮助,...
网络用语zl是什么意思(zl是...
今天给各位分享网络用语zl是什么意思的知识,其中也会对zl是啥意思是什么网络用语进行解释,如果能碰巧...
为什么酷狗音乐自己唱的歌不能下...
本篇文章极速百科小编给大家谈谈为什么酷狗音乐自己唱的歌不能下载到本地?,以及为什么酷狗下载的歌曲不是...
华为下载未安装的文件去哪找(华...
今天百科达人给各位分享华为下载未安装的文件去哪找的知识,其中也会对华为下载未安装的文件去哪找到进行解...
怎么往应用助手里添加应用(应用...
今天百科达人给各位分享怎么往应用助手里添加应用的知识,其中也会对应用助手怎么添加微信进行解释,如果能...
家里可以做假山养金鱼吗(假山能...
今天百科达人给各位分享家里可以做假山养金鱼吗的知识,其中也会对假山能放鱼缸里吗进行解释,如果能碰巧解...
一帆风顺二龙腾飞三阳开泰祝福语...
本篇文章极速百科给大家谈谈一帆风顺二龙腾飞三阳开泰祝福语,以及一帆风顺二龙腾飞三阳开泰祝福语结婚对应...
四分五裂是什么生肖什么动物(四...
本篇文章极速百科小编给大家谈谈四分五裂是什么生肖什么动物,以及四分五裂打一生肖是什么对应的知识点,希...
美团联名卡审核成功待激活(美团...
今天百科达人给各位分享美团联名卡审核成功待激活的知识,其中也会对美团联名卡审核未通过进行解释,如果能...