文章目录
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>