热门标签
热门文章
- 1Hadoop3.2.1 【 HDFS 】源码分析 : Datanode 概述_hdfs datanode 数据目录结构
- 2mybatis&Mysql分页查询，以及SQL_CALC_FOUND_ROWS与count(*) 性能对比_mybatisconfig分页设置
- 3ExoPlayer架构详解与源码分析（12）——Cache_exoplayer cache
- 4Gitleaks - 一款高效的Github仓库敏感信息泄露查询工具
- 5【AI】AI 办公软件使用指南_ai办公应用教程
- 6解决：An attempt was made to access a socket in a way forbidden by its access permissions和无法终止 PID为4的进程
- 7120份！企业数字化建设、企业架构、数字化转型、数据中台、数据湖、数据仓库、主数据、数据治理等方案（PPT+WORD）_数据仓库和数据中台
- 8《数据结构——用C语言描述》第一章 基础概念与习题_数据结构用c语言描述第三版耿国华答案
- 9Spring Boot 2 (三)：Spring Boot 开源软件都有哪些？_springboot用什么软件
- 10vue3前端开发-小兔鲜项目-人气推荐栏目的前端渲染
当前位置: article > 正文
web---HTML基础知识_<
作者：空白诗007 | 2024-07-18 12:31:27
赞
踩
文章目录
1 HTML介绍
HTML 是用来描述网页的一种语言。
-
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
-
HTML 不是一种编程语言，而是一种标记语言 (markup language)
-
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页 -
所谓的超文本指的是超链接，使用超链接让我们从一个网页跳转到另一个网页
2 第一个网页
2.1、点击左面开始按钮，找到notepad,代开记事本
2.2、编辑页面源码
2.3、保存到桌面
后缀名称以 .html结束
2.4 、如图
2.5、打开index.html
浏览器渲染后的结果
2.6、检查页面源代码
其实就是上面记事本中自己编写的代码
3、标签
- 标签一般成对出现，但是也存在自结束标签
4、注释
格式： <!-- 需要备注是的内容 – >
注释中的会被浏览器所忽略，不会再网页中直接显示，
但是可以在源码中查看注释，注释是用来对代码进行解释说明的
注意：注释是不能嵌套的
5、标签的属性
5.1 概念
- 属性：在标签中，只能在开始标签或者自结束标签中设置属性，不可以在结束标签中设置属性
- 属性的结构：是名值对结构(x=y)
- 属性的作用：属性用来设置标签中的内容如何显示
- 属性注意点：属性和标签名。以及和其他属性之间使用空额分开，属性值使用引号引起来
5.2 案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标签的属性</title> </head> <body> <!-- 属性：在标签中，只能在开始标签或者自结束标签中设置属性， 不可以在结束标签中设置属性 属性：是名值对结构(x=y) 作用：属性用来设置标签中的内容如何显示 注意：属性和标签名。以及和其他属性之间使用空额分开 --> <h1>这是我的<font color="blue" size="4">第三个</font>网页</h1> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
5.3 运行结果
6、网页的结构
6.1 基本结构如下
<!DOCTYPE html> <!-- 文档声明：document type - 文档声明是用来告诉浏览器当前网页的版本 - HTML5的文档声明 - <!DOCTYPE html> - <!Doctype HTML> 在网页中是不区分大小写的 --> <html> <!-- 网页中的所有内容都需要写在根标签（根元素）中--> <head> <!-- head是网页的头部， head中的内容不会在网页中直接显示， 主要是帮助浏览器或搜索引擎来解析网页 --> <meta charset="utf-8"> <!-- <meta>标签用来设置网页的元数据，在这里用来设置网页的字符编码 utf-8 万国码。避免网页出现乱码 --> <title>网页的结构</title> <!-- <title>标签中的内容会显示在浏览器的标题栏 搜索引擎主要根据title中的内容来判断网页的主要内容 --> </head> <body> <!-- body也是html的子元素， 表示网页的主体 网页中所有可见的内容都应该写在body里 --> <h1>网页的发标题</h1> <!-- h1表示网页的一级标题--> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
6.2 文档声明:
文档声明是用来告诉浏览器当前网页的版本，HTML5的文档声明，在网页中是不区分大小写的，下面两种方式都可行：
< !DOCTYPE html >
< !Doctype HTML>
6.3 网页根标签（根元素）< html >
< html > 是网页的根标签：网页中的所有内容都需要写在根标签（根元素）中。
6.4 网页头标签< head >标签
head是网页的头部，
head中的内容不会在网页中直接显示，
主要是帮助浏览器或搜索引擎来解析网页
6.4.1 < meta >标签
< meta >标签用来设置网页的元数据，在这里用来设置网页的字符编码
utf-8 万国码。避免网页出现乱码
注意：网页的编码格式需要和编辑器的编码格式匹配
6.4.2 < title >标签：网页标题
< title >标签中的内容会显示在浏览器的标题栏
搜索引擎主要根据title中的内容来判断网页的主要内容
6.5 网页主体标签 < body >
body也是html的子元素，
表示网页的主体
网页中所有可见的内容都应该写在body里
7、HTML实体
7.1 什么是实体
在html中，我们不能字节书写一些特殊符号，比如：多个连续的空格，字母两侧的大于号和小于号
在网页中编写的内容中有多个空格，浏览器默认会解析成为一个空格
如果我们需要在网页中书写一些特殊符号，
则需要使用html中的实体，也就是转义字符
7.2 常用实体
8、meta标签
8.1 meta标签作用
主要用于设置网页中一些元数据，元数据不是给用户看的
8.2 meta标签中的属性
- charset：指定网页的字符集
- name：指定数据的名称
- content：指定数据的内容
- keywords 表示网页的关键字，可以同时制定对个关键字，关键字之间使用逗号隔开
- description:用于制定网站的描述，网站的描述会显示在搜索引擎的搜索结果中
- 注意：title标签的内容回座位搜索结果的超链接上的文字显示
<!DOCTYPE html> <html> <head> <meta name="keywords" content="学习前端知识" charset="utf-8"> <!-- meta标签 ： 主要用于设置网页中一些元数据，元数据不是给用户看的 meta标签中的属性 - charset：指定网页的字符集 - name：指定数据的名称 - content：指定数据的内容 - keywords: 表示网页的关键字，可以同时制定对个关键字，关键字之间使用逗号隔开 - description:用于制定网站的描述，网站的描述会显示在搜索引擎的搜索结果中 - title标签的内容回座位搜索结果的超链接上的文字显示 --> <title></title> </head> <body> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
9、HTML语义化标签
9.1 标题标签（六级）
- 标题标签分为六级：从< h1 >到< h6 >
- h1 标题最重要，其余次之，其重要性仅次于title标签
- 每个网页中只有一个一级标题
9.2 段落标签 p 标签
段落标签p标签
p标签属于块元素，独占一行
9.3 标题分组 hgroup 标签
hgroup标签用来为标题分组，
可以将一组相关的标题放入到此标签中
组标签也属于块元素，独占一行，
9.4 em 标签
em标签：用于表示某一个词语音语调的家中
em属于行内元素，在页面中不会独占一行的元素称为行内元素 （inline element）
9.5 strong标签
strong标签：表示强调重要的内容，
属于行内元素，不会独占一行，（inline element）
10、块元素和行元素
10.1 相关概念
- 块元素：block element，在网页中一般通过块元素对网页进行布局
- 行内元素：inline element， 行内元素主要用来包裹文字
- 一般情况下，会在块元素中访行内元素， 而不会在行内元素中放块元素，块元素中基本什么都能放
- p元素中不能放任何的块元素，浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
- 比如：标签写在了根元素的外部
p元素中嵌套了块元素
- 比如：标签写在了根元素的外部
10.2 案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>块元素行元素</title> </head> <body> <!-- 块元素：block element 在网页中一般通过块元素对网页进行布局 行内元素：inline element 行内元素主要用来包裹文字 一般情况下，会在块元素中访行内元素， 而不会在行内元素中放块元素 块元素中基本什么都能放 p元素中不能放任何的块元素 浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正 比如：标签写在了根元素的外部 p元素中嵌套了块元素 --> <p> <h1>块元素</h1> <!-- p元素中嵌套款块元素--> </p> </body> </html> <h2>今天的天气适合睡觉</h2>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
10.3 运行查看结果
11、 块元素布局标签
11.1 标签含义
- 布局标签也叫作结构化语义标签
- header表示网页的头部
- main 表示网页的主体，一个页面中只会有一个main
- footer 表示网页的底部
- nav 表示网页中的导航
- aside 表示和主体相关，但又不属于主体的内容
- article 表示独立的文章
- section 表示独立区块
- div 没有语义，就用来表示一个区块，div是主要的布局元素
- span 没有语义，是属于行内元素，一般用户在网页中选中文字
11.2 案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>布局标签</title> </head> <body> <!-- header表示网页的头部 main 表示网页的主体，一个页面中只会有一个main footer 表示网页的底部 nav 表示网页中的导航 aside 表示和主体相关，但又不属于主体的内容 article 表示独立的文章 section 表示独立区块 --> <header>头部</header> <main>主体</main> <footer>底部</footer> <nav>导航</nav> <aside>边栏</aside> <article>独立文章</article> <section>独立区块</section> <!-- 以上的是布局语义化标签 --> <!-- div 没有语义，就用来表示一个区块， div是主要的布局元素 span 没有语义，是属于行内元素，一般用户在网页中选中文字 --> <div>没有语义，主要布局元素，块元素</div> <span>没有语义，行内元素</span> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
11.3 展示结果
12、列表标签
12.1 列表分类
列表分为：
1、无序列表 unorder list
2、有序列表 order list
3、定义列表 definition list
- 无序列表：使用ul标签来创建无序列表，使用li（list-item）表示列表项
- 有序列表：使用ol标签来创建有序列表，使用li（list-item）表示列表项
- 定义列表：使用dl标签来创建定义列表
使用dt表示定义的内容 （definition title）
使用dd对定义的内容进行解释 (definition description)
12.2 案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>列表</title> </head> <body> <!-- 列表分为： 1、无序列表 unorder list 2、有序列表 order list 3、定义列表 definition list 无序列表：使用ul标签来创建无序列表，使用li（list-item）表示列表项 有序列表：使用ol标签来创建有序列表，使用li（list-item）表示列表项 定义列表：使用dl标签来创建定义列表 使用dt表示定义的内容 （definition title） 使用dd对定义的内容进行解释 (definition description) --> <ul> <li>上课</li> <li>敲代码</li> <li>下课</li> </ul> <ol> <li>吃饭</li> <li>睡觉</li> <li>打豆豆</li> </ol> <dl> <dt>java</dt> <dd>面向对象的编程语言</dd> </dl> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
12.3 运行结果
13 超链接
13.1 超链接定义
- 超链接：
- 定义: 使用a标签定义超链接，
可以让我们从一个页面跳转到另一个页面
或者是跳转到当前页面的其他位置 - 属性：href 指定跳转的目标路径
属性自可以是一个外部网站的地址
也可以是内部某一个网页的地址 - 特点：超链接是行内元素,行内元素中是不允许放块元素的，
a标签中可以嵌套除它自身以外的所有元素
- 定义: 使用a标签定义超链接，
13.2 案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>超链接</title> </head> <body> <!-- 超链接： 定义: 使用a标签定义超链接， 可以让我们从一个页面跳转到另一个页面， 或者是跳转到当前页面的其他位置 属性：href 指定跳转的目标路径 属性自可以是一个外部网站的地址 也可以是内部某一个网页的地址 特点：超链接是行内元素,行内元素中是不允许放块元素的 a标签中可以嵌套除它自身以外的所有元素 --> <a href="http://www.baidu.com">超链接</a> <br> <a href="11-列表标签.html">超链接</a> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
13.3 运行结果
14、相对路径
14.1 ./ 和…/
-
1、点斜杠 ./ 表示当前文件所在的目录
- .点： 表示13-相对路径.html
- 斜杠： / 表示13-相对路径.html 文件所在的目录：13-相对路径
-
2、 点点斜杠 . . / 表示当前文件所在目录的上级目录
14.2 案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>相对路径</title> </head> <body> <!-- ./ 表示当前文件所在的目录 . 表示13-相对路径.html / 表示13-相对路径.html 文件坐在的目录：13-相对路径 --> <a href="./target.html">相对路径的使用</a> <!-- ../ 表示当前文件所在目录的上级目录 --> <a href="../11-列表标签.html">相对路径的使用</a> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
14.3 运行结果
15、超链接的其他用法
15.1 a标签其他属性用法
1、target属性：同来指定超链接打开的位置
- 属性值1： _self 默认值，在当前页面中打开超链接
- 属性值2： _blank 空白的意思，表示在一个新的页面中打开超链接
2、a标签设置href的其他属性值：：
- 1、测试回到页面顶部
- href属性：属性值设置为：#号的时候，点击超链接，页面会回到顶部
- id属性：id属性是元素的唯一标识，同一个页面中不能出现相同的id
- 2、到页面的任意位置
- 只要将href属性值设置成目标元素的：#目标元素的id属性值即可
3、 开发中超链接的占位符
- 可以将 # 作为超链接的路径的占位符使用
- 也可以使用javascript:; , 作为href的属性值，此时点击这个超链接什么也不会发生
15.2 案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>超链接的其他用法</title> </head> <body> <!-- target属性：同来指定超链接打开的位置 属性值1： _self 默认值，在当前页面中打开超链接 属性值2： _blank 空白的意思，表示在一个新的页面中打开超链接 --> <a href="./13-相对路径/target.html" target="_blank">target指定超链接打开的位置</a> <br> <!-- 到网页的底部 --> <a href="#bottom">去页面的底部</a><br> <!-- 到页面的第三自然段 --> <a href="#third">第三自然段</a><br> <p>111111111111111111111111</p> <p>111111111111111111111111</p> <p id="third">111111111111111111111111</p> <p>111111111111111111111111</p> <p>111111111111111111111111</p> <!-- a标签设置href的其他属性值：： 1、测试回到页面顶部 href属性：属性值设置为：#号的时候，点击超链接，页面会回到顶部 id属性：id属性是元素的唯一标识，同一个页面中不能出现相同的id 2、到页面的任意位置 只要将href属性值设置成目标元素的：#目标元素的id属性值即可 --> <a id="bottom" href="#">回到页面顶部</a><br> <!-- 开发中超链接的占位符 可以将 # 作为超链接的路径的占位符使用 也可以使用javascript:; , 作为href的属性值，此时点击这个超链接什么也不会发生 --> <a href="#">#号当做超链接占位符</a><br> <a href="javascript:;">javascript:;当做超链接占位符</a><br> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
15.3 运行结果
16、图片标签
16.1 img标签的属性介绍
- 图片标签用于引入一个外部的图片，使用img标签引入图片，标签是自结束标签
- img属于替换元素，介于航元素和块元素之间，具有两种元素的特点
- 属性
- src属性：引入图片的路径（相对路径、绝对路径）
- alt属性：表示对图片的描述，默认情况下不会显示，有些浏览器在图片无法显示的时候显示描述
- alt属性的作用：主要用于搜索引擎对图片的识别
alt—alter：改变 变化的意思 - width属性： 设置图片的宽度
- height属性：设置图片的高度
宽度和高度：只改变其中一个，另一个会等比例缩放
16.2 图片的格式
1、图片的格式：
- jpeg（jpg）:支持的颜色比较丰富，不支持透明效果，不支持动图，一般用于显示照片
- gif：支持的颜色标胶少，支持简单透明，支持动图，用于颜色单一的图片，动图
- png：支持的颜色丰富，支持复杂透明。不支持动图，转为网页而生
- webp:专门用于表示网页中图片的一种格式，具备其他图片的所有优点，文件比较小
- base64:将图片使用base64进行编码，这样可以将图片转换为字符，通过字符的形式引入图片
2、图片使用规则：
如果一样，用占用内存小的
如果不一样，用效果好的
16.3 案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片标签</title> </head> <body> <!-- 图片标签用于引入一个外部的图片 使用img标签引入图片，标签是字节数标签 img属于替换元素，介于航元素和块元素之间，具有两种元素的特点 src属性：引入图片的路径（相对路径、绝对路径） alt属性：表示对图片的描述，默认情况下不会显示，有些浏览器在图片无法显示的时候显示描述 作用：主要用于搜索引擎对图片的识别 alt---alter：改变 变化的意思 width属性： 设置图片的宽度 height属性：设置图片的高度 宽度和高度：只改变其中一个，另一个会等比例缩放 --> <!-- 引入内部图片--> <img src="./img/1.gif"> <img src="./img/2.gif"> <!-- 引入外部图片--> <img width="200px" src="https://img2.baidu.com/it/u=4294688507,2055752971&fm=26&fmt=auto&gp=0.jpg"> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
16.4 运行结果
17、内联框架
17.1 内联框架的属性
内联框架：
- 定义：给当前页面中引入一个外部的其他页面，相当于插入一个标签
- src:指定要引入网页的路径
- frameborder:表示引入网页的边框，属性值：1/yes有边框 0/no无边框
- width：设置网页的宽度
- height：设置网页的高度
17.2 案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>内联框架</title> </head> <body> <!-- 内联框架<iframe>： 给当前页面中引入一个外部的其他页面，相当于插入一个标签 src:指定要引入网页的路径 frameborder:表示引入网页的边框，属性值：1/yes有边框 0/no无边框 width：设置网页的宽度 height：设置网页的高度 --> <iframe src="http://www.qq.com" width="800px" height="600px" frameborder="yes"></iframe> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
17.3 运行结果
有边框
无边框
18、音视频文件标签引入
18.1 标签属性
- audio:：标签用于给页面中引入一个外部的音视频文件
- 音视频文件引入后，默认情况下是不允许用户自己控制播放停止的
- 属性：
- src：给页面引入一个外部的音视频文件
- controls：是否允许用户控制播放停止
- autoplay: 是都自动播放音视频文件,设置了autoplay属性后，打开页面，音视频文件就会自动播放
- loop:表示设置成循环播放，也就是从头播放
除了可以使用src引入音视频文件之外，还可以使用source标签来制定文件的路径。指定多个source标签之后，优先使用第一个，第一个解析失败，使用第二个
18.2 案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>音视频</title> </head> <body> <!-- audio:：标签用于给页面中引入一个外部的音频文件 音频文件引入后，默认情况下是不允许用户自己控制播放停止的 属性： src：给页面引入一个外部的音频文件 controls：是否允许用户控制播放停止 autoplay: 是都自动播放音频文件,设置了autoplay属性后，打开页面，音频文件就会自动播放 loop:表示设置成循环播放，也就是从头播放 除了可以使用src引入音频文件之外，还可以使用source标签来制定文件的路径 制定多个source标签之后，优先使用第一个，第一个解析失败，使用第二个 --> <audio src="musicvideo/audio.mp3" controls="controls" autoplay="autoplay" loop="loop"></audio> <audio controls autoplay> <source src="./musicvideo/audio.ogg"> <source src="musicvideo/audio.mp3"> </audio> <!-- audio标签配合source引入视频文件 使用方式和音频文件的引入是一样的 --> <audio controls> <source src="musicvideo/flower.mp4"> <source src="musicvideo/flower.webm"> </audio> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
18.3 运行结果
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/空白诗007/article/detail/845673
推荐阅读
- web课程设计 ...
赞
踩
相关标签
Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。
