文章目录
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
3123
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
