HTML5篇学习笔记

冰镇奶茶

已于 2022-03-03 10:33:25 修改

阅读量475

点赞数 4

分类专栏：笔记文章标签： html5 前端 html

于 2021-11-08 10:41:04 首次发布

本文链接：https://blog.csdn.net/m0_57002951/article/details/121202684

版权

笔记专栏收录该内容

29 篇文章 3 订阅

订阅专栏

HTML

一、课程简介

1.服务器开发语言：

-Java !!!

-PHP

-C#

-Python

-Node.js!!

2.客户端形式：

-文字客户端（不常见）

-图形化界面（C/S架构）

-网页（B/S架构）！！！：1.使用到的语言：HTML，CSS，JavaScript

B/S架构相比于C/S架构的优点：

1不用安装 2不用更新 3跨平台

我的第一个html代码：

<html>
	<head>
		<title></title>
	</head>
	<body>
		<h1>我的标题</h1>
		<p>我的段落</p>
	</body>
</html>

运行结果：

二、网页简史

浏览器和网页

-浏览器：渲染作用（将你写的代码转换成画面显示出来）

-初期浏览器较为混乱，于是伯纳斯李建立万维网联盟（W3C）制订 网页开发的标准来规范。

-开发网页要遵循W3C的规范

网页的结构、表现、行为

结构：看不到就像人的骨架一样比较简单

表现：网页中所有能看到的就是表现

行为：动态需要响应用户的操作

三、HTML

一、HTML：超文本标记语言

<标签名>    <!--开始标签-->
    aaaaaaaaaaa   <!--标签体-->
  </标签名>  <!--结束标签-->

1.标题标签: <h1> (一级标题) <h2>(二级标题)

2.段落标签：<p>

例子：

根标签（有且只有一个）<html>

<html>
    <head>   <!--在<head>里的内容不会出现在网页中，让浏览器或搜索引擎可以解析我们的网页-->
        <title>  <!--网页的标题，出现在标题栏-->            
        </title>
        
    </head>
    <body>   <!--网页中所有可见内容都写在<body>里-->
        
        
        
    </body>
    
    
</html>

<head>和<body>是<html>的子标签 <title>是<head>的子标签 <title>是<html>的后代；反之<html>是<title>的祖先

例子：

二、自结束标签和注释

<html>
    <head>
        <title>
        </title>
    </head>
    <body>
        <h1>自结束标签和注释</h1>
      <!--  标签一般是成对存在，也存在一部分自结束标签，只有开始标签没有结束标签（<img> <input>） -->
        <img>     <!--自结束标签-->
        <input>    <!--自结束标签-->
    </body>
</html>

标签一般是成对存在，也存在一部分自结束标签，只有开始标签没有结束标签（<img> <input>）

html的注释： 注释不可以嵌套

三、标签中的属性

把“这是我的第三个网页”中的“第三个”标红

<html>
    <head>
        <title>标签的属性</title>
    </head>
    <body>
       <h1>这是我的第三个网页</h1>
    </body>
</html>

<html>
    <head>
        <title>标签的属性</title>
    </head>
    <body>
          <!--在标签（开始标签或自结束标签）中还可以设置属性;属性还是一个名值对结构（x=y）-->
        <h1>这是我的<font color="red" size='7'>第三个</font>网页！</h1>
            <!--<font>是一个字体-->
    </body>
</html>

运行结果：

属性：在标签（开始标签或自结束标签）中还可以设置属性;属性还是一个名值对结构（x=y）

属性用来设置标签中的内容如何显示

属性和标签名或其他属性应该用空格隔开

属性不能瞎写，应该根据文档中的规定来编写

有些属性有属性值，有些没有，如果有属性值，属性值应该用引号引起来（可以用双引号，也可以用单引号）

四、文档声明

声明自己写的文档是html5版本的网页：

<!doctype html>
<html>
    <head>
        <title>网页的基本结构</title>
    </head>
    <body>
       <h1></h1>
    </body>
</html>

文档声明（doctype）：因为网页会发生迭代（更新换代），因此我们需要告诉浏览器当前所写网页的版本。

----html5的文档声明 : 网页中有<!doctype html>（不区分大小写），就说明写的是html5的。

（现在我们一般写的都是html5这个版本的）

五、关于进制&&字符编码

【1】进制

十进制：（日常使用）

特点：满十进一

计数：1 2 3 4 5 6 7 8 9 10 11...

单位数字：10个（0-9）

二进制:（计算机底层的数据）

特点：满二进一

计数：0 1 10 11 100 101 110 111 ...

单位数字：2个（0 ，1）

-所有数据在计算机底层都会以二进制形式表示

-可以将内存想象成一个由多个小格子组成的容器，每个小格子可以存一个1或一个0

这一个小格子占用的大小就是1bit（位）

8bit=1byte(字节) 在计算机中最小可以操作的是字节

1024byte=1KB(千字节)

1024KB=1MB（兆字节）

1024MB=1GB（吉字节）

1024GB=1TB（特字节）

1024TB=1PB

八进制：（很少用）

特点：满八进一

计数：0 1 2 3 4 5 6 7 10 11 12 13 14 15 16 17 20...

单位数字：8个（0-7）

十六进制：（一般显示一个二进制数字时，都会转换为十六进制）

特点：满十六进一

计数：0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 ...1A 1B 1C 1D 1E 1F 20

单位数字：16个（1-9 A B C D E F）

【2】字符编码

过程

所有数据在计算机中存储时，都是以二进制存储的，文字也不例外

所以一段文字在存储到内存中时，都需要转换成二进制编码

当我们读取文字时，计算机会将二进制编码转换成字符，供我们阅读

在这个过程中涉及到两个内容：

-编码

字符--->二进制

-解码

二进制--->字符

字符集( 编码和解码所采用的规则称为字符集（charset） ):

--------如果编码和解码采用的字符集不同，就会出现乱码问题</font>

常用的字符集：

-ASCII（美国）--------------7位 128个

-ISO88591（欧洲）--------8位 268个

-GB2312（中国）

-GBK（中国'扩展'）

-UTF-8（万国码）包含世界上所有语言在开发时我们使用的字符集都是UTF-8

告诉计算机网页的字符集是UTF-8

<!doctype html>  <!--文档声明，声明网页的版本-->
<html>
    <head>            
        <meta charset="UTF-8">  <!--可以通过自结束标签meta标签来设置网页的字符集，来避免乱码问题-->
        <title>网页的基本结构</title>      
    </head>
    <body>      
       <h1>这是一个标题</h1>   
     
    </body>
</html>

以上是网页最最标准的基本结构

扩展：

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

<a href="https://www.runoob.com">这是一个链接</a>

<img loading="lazy" src="/images/logo.png" width="258" height="39" />

链接是通过<a>来定义的

HTML 图像是通过标签 <img> 来定义的.

六、文档的使用

[1]zeal(全英)

[2]百度-W3school（中文）

七、实体

在网页中编写多的空格，默认情况会自动被浏览器解析为一个空格

在html中有些时候，我们不能直接书写一些特殊符号

---比如多个连续的空格

---比如字母两侧的大于和小于号

---如果我们需要在网页中书写这种特殊符号，则需要使用html中的实体（转义字符）

实体的语法：

& 实体的名字；----------&开头 ;结尾

eg:

在今天天气真不错！中间加空格---------------& nbsp ;

& nbsp ;--------------------空格

& gt ;-------------------------大于号

& lt ;--------------------------小于号

& copy;----------------------版权符号

查询实体：

百度-W3school

八、meta标签

meta自定义标签：

用来设置一些网页的元数据，元数据是不给用户看的

属性：

---charset：指定网页的字符集

---name:指定的是数据的名称

---content：指定数据的内容

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">name</span>=<span style="color:#aa1111">"keywords"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">"HTML5,前端,CSS3"</span><span style="color:#117700">></span></span></span>

表示设置了一个元数据，元数据的名字叫keywords，它的值是 HTML5,前端,CSS3

【1】keywords ---------------表示网站的关键字，可以同时指定多个关键字，关键字间使用逗号隔开

<span style="background-color:#f8f8f8"><span style="color:#333333"> <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">name</span>=<span style="color:#aa1111">"Keywords"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">"网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"</span><span style="color:#117700">/></span></span></span>

【2】description-------------用于指定我们网站的描述,相当于网页的一个自我介绍,会显示在搜索引擎的搜索的结果中

<span style="background-color:#f8f8f8"><span style="color:#333333"> <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">name</span>=<span style="color:#aa1111">"description"</span>
          <span style="color:#0000cc">content</span>=<span style="color:#aa1111">"京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"</span><span style="color:#117700">/></span></span></span>

【3】title------------------------标签上的内容会作为搜索结果的超链接上的文字显示

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span></span></span>

【4】http-equiv--------------出现一个页面，几秒之后跳转到另一个页面上

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">http-equiv</span>=<span style="color:#aa1111">"refresh"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">"3;url=https://www.runoob.com/html/html-basic.html"</span><span style="color:#117700">></span></span></span>

其他的都不变，只有content=“ 数字；url= 地址 ”中的东西会改变

格式：< meta http-equiv="refresh" content="数字;url=地址">

eg:

【1】

京东网站的关键字是“网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东”

因此搜索这些关键字时就能看到京东的网页

<span style="background-color:#f8f8f8"><span style="color:#333333"> <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">name</span>=<span style="color:#aa1111">"Keywords"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">"网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"</span><span style="color:#117700">/></span></span></span>

【2】

<span style="background-color:#f8f8f8"><span style="color:#333333">  <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">name</span>=<span style="color:#aa1111">"description"</span>
          <span style="color:#0000cc">content</span>=<span style="color:#aa1111">"京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"</span><span style="color:#117700">/></span></span></span>

【3】

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span></span></span>

【4】

从当前页面跳转到百度

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">http-equiv</span>=<span style="color:#aa1111">"refresh"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">"3;url=https://www.baidu.com"</span><span style="color:#117700">></span></span></span>

九、语义化标签

(1)

在页面中独占一行的元素称为块元素（block element）

标题标签h1~h6 (块元素)

h1的重要性仅次于title标签，一般情况下一个网页只有一个h1，标题标签一般用到h1~h3， h4~h6很少用

< p>标签(块元素)

p标签表示页面中的一个段落

<hgroup>标签(块元素)

hgroup标签用来为我们的标题分组，可以将一组相关的标题放入到hgroup中(hgroup叫做标题组)

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#555555"><!doctype html></span>  <span style="color:#aa5500"><!--文档声明，声明网页的版本--></span>
<span style="color:#117700"><</span><span style="color:#117700">html</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span>            
        <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"UTF-8"</span><span style="color:#117700">></span>  <span style="color:#aa5500"><!--可以通过自结束标签meta标签来设置网页的字符集，来避免乱码问题--></span>
        <span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>网页的基本结构<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span>      
    <span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">hgroup</span><span style="color:#117700">></span>
            <span style="color:#117700"><</span><span style="color:#117700">h1</span><span style="color:#117700">></span>回乡偶书二首<span style="color:#117700"></</span><span style="color:#117700">h1</span><span style="color:#117700">></span>
            <span style="color:#117700"><</span><span style="color:#117700">h2</span><span style="color:#117700">></span>其一<span style="color:#117700"></</span><span style="color:#117700">h2</span><span style="color:#117700">></span>
        <span style="color:#117700"></</span><span style="color:#117700">hgroup</span><span style="color:#117700">></span>
    <span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span></span>

< em>标签（内联元素/行内元素）

表示语音语调的一个加重

< strong>标签（内联元素/行内元素）

表示强调，有加粗的效果

< blockquote>标签（内联元素/行内元素）

表示一个长引用,会有一个缩进的效果

<span style="background-color:#f8f8f8"><span style="color:#333333">鲁迅说:
<span style="color:#117700"><</span><span style="color:#117700">blockquote</span><span style="color:#117700">></span>这句话我从来没说过<span style="color:#117700"></</span><span style="color:#117700">blockquote</span><span style="color:#117700">></span></span></span>

< q>标签（内联元素/行内元素）

表示一个短引用

<span style="background-color:#f8f8f8"><span style="color:#333333">孔子说：
<span style="color:#117700"><</span><span style="color:#117700">q</span><span style="color:#117700">></span>学而时习之，不亦说乎<span style="color:#117700"></</span><span style="color:#117700">q</span><span style="color:#117700">></span></span></span>

< br>标签表示换行

<span style="background-color:#f8f8f8"><span style="color:#333333">孔子说：
<span style="color:#117700"><</span><span style="color:#117700">q</span><span style="color:#117700">></span>学而时习之，不亦说乎<span style="color:#117700"></</span><span style="color:#117700">q</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">br</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">br</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">p</span><span style="color:#117700">></span>今天天气真不错!<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span></span></span>

(2)

[1]语义化标签（块和行内）

块元素：（block element）

功能：在网页中一般通过块元素对网页进行布局

行内元素：（inline element）

功能：主要用来包裹网页内的文字

一般情况下我们会在块元素中放行内元素，而不会在行内元素中放块元素。< p>元素中不能放任何块元素

[2]浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正了。

比如：

--标签写在了根元素的外部

--< p>元素里边嵌套了块元素

--根元素中出现了除< head> < body>以外的子元素

...

（3）

结构化语义标签（布局）

不常用：

header-------------------表示网页的头部

main----------------------表示网页的主体部分（一个页面只有一个）

footer--------------------表示网页的底部

nav------------------------表示导航

aside----------------------和主题相关的其他内容（侧边栏）

article---------------------表示一个独立的文章

section---------------------表示一个独立的区块,上边的标签都不能表示的时候用section.

常用：

div---------------------------用来表示一个区块（块）

span-------------------------是一个行内元素，没有任何语义（行内元素）

十、列表（list）

【1】有序列表

--使用ol标签来创建有序列表

--使用li表示列表项

【2】无序列表(用的最多)

--使用ul标签来创建有序列表

--使用li表示列表项

【3】定义列表

--使用dl标签创建一个定义列表

--使用dt来表示定义的内容

--使用dd来对内容进行解释说明

列表之间可以互相嵌套

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">ul</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>
        aa 
        <span style="color:#117700"><</span><span style="color:#117700">ul</span><span style="color:#117700">></span>
            <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>aa<span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span>
            <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>bb<span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span>
        <span style="color:#117700"></</span><span style="color:#117700">ul</span><span style="color:#117700">></span>    
    <span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">ul</span><span style="color:#117700">></span></span></span>

十一、超链接

作用：让我们从一个页面跳转到其他页面；或者是我们当前页面的指定位置

【1】用a标签定义超链接（超链接也是行内元素）

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">a</span><span style="color:#117700">></span>超链接<span style="color:#117700"></</span><span style="color:#117700">a</span><span style="color:#117700">></span></span></span>

在a标签中可以嵌套除它自身任何元素

属性：

href:指定跳转的目标路径

---值可以是一个外部网站的地址（eg:可以写百度的网址）

---也可以写一个内部页面的地址

<span style="background-color:#f8f8f8"><span style="color:#333333">    <span style="color:#117700"><</span><span style="color:#117700">a</span> <span style="color:#0000cc">href</span>=<span style="color:#aa1111">"https://www.baidu.com"</span><span style="color:#117700">></span>超链接<span style="color:#117700"></</span><span style="color:#117700">a</span><span style="color:#117700">></span></span></span>

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">a</span> <span style="color:#0000cc">href</span>=<span style="color:#aa1111">"02实体.html"</span><span style="color:#117700">></span>链接<span style="color:#117700"></</span><span style="color:#117700">a</span><span style="color:#117700">></span></span></span>

十二、相对路径

当我们需要跳转一个服务器的内部页面时，一般我们都会使用相对路径。

---相对路径都会使用 . 或者 .. 或者 ./ 或者 ../ 开头 (注意./可以省略不写，如果不写./或../，就默认写了./)

./表示当前文件（写路径的文件）所在的目录（从当前目录里查找）

../表示当前文件所在目录的的上一级目录（从当前目录的上一级目录里查找）

所有目录是用/隔开的

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">a</span> <span style="color:#0000cc">href</span>=<span style="color:#aa1111">"../path/target.html"</span><span style="color:#117700">></span>超链接<span style="color:#117700"></</span><span style="color:#117700">a</span><span style="color:#117700">></span></span></span>

十三、超链接的其他用法

在开发中，我们可以把#作为超链接路径的占位符来使用，但点击这个超链接会回到顶部

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">a</span> <span style="color:#0000cc">href</span>=<span style="color:#aa1111">"#"</span><span style="color:#117700">></span>超链接<span style="color:#117700"></</span><span style="color:#117700">a</span><span style="color:#117700">></span></span></span>

也可以把javascript:;作为超链接路径的占位符,点击这个超链接，什么也不会发生

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">a</span> <span style="color:#0000cc">href</span>=<span style="color:#aa1111">"javascript:;"</span><span style="color:#117700">></span>超链接<span style="color:#117700"></</span><span style="color:#117700">a</span><span style="color:#117700">></span></span></span>

（1）属性：

target属性----------用来指定超链接打开的位置

可选值：

[1] _self 默认值在当前页面中打开超链接

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">a</span> <span style="color:#0000cc">href</span>=<span style="color:#aa1111">"https://www.baidu.com"</span> <span style="color:#0000cc">target</span>=<span style="color:#aa1111">"_self"</span><span style="color:#117700">></span>超链接<span style="color:#117700"></</span><span style="color:#117700">a</span><span style="color:#117700">></span></span></span>

[2] _blank 在一个新的页面中打开超链接

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">a</span> <span style="color:#0000cc">href</span>=<span style="color:#aa1111">"https://www.baidu.com"</span> <span style="color:#0000cc">target</span>=<span style="color:#aa1111">"_blank"</span><span style="color:#117700">></span>超链接<span style="color:#117700"></</span><span style="color:#117700">a</span><span style="color:#117700">></span></span></span>

(2)将href属性设置为# ----------页面不会发生跳转，而是直接回到页面的顶部位置

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">a</span> <span style="color:#0000cc">href</span>=<span style="color:#aa1111">"#"</span><span style="color:#117700">></span>回到顶部<span style="color:#117700"></</span><span style="color:#117700">a</span><span style="color:#117700">></span></span></span>

(3)id属性（唯一不重复的）

--每一个标签都可以添加id属性

--id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性

可以去到任何位置只要设置

< a href="#目标元素的id">< /a>

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">a</span> <span style="color:#0000cc">href</span>=<span style="color:#aa1111">"#bottom"</span><span style="color:#117700">></span>去底部<span style="color:#117700"></</span><span style="color:#117700">a</span><span style="color:#117700">></span>



<span style="color:#117700"><</span><span style="color:#117700">p</span><span style="color:#117700">></span>
    文本
<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span>



<span style="color:#117700"><</span><span style="color:#117700">a</span> <span style="color:#0000cc">id</span>=<span style="color:#aa1111">"bottom"</span>  <span style="color:#0000cc">href</span>=<span style="color:#aa1111">"#"</span><span style="color:#117700">></span>回到顶部<span style="color:#117700"></</span><span style="color:#117700">a</span><span style="color:#117700">></span></span></span>

十四、图片

1、图片标签

作用：用于向我们当前页面中引入一个外部图片

使用img标签来引入外部图片

img标签是一个自结束标签（替换元素：介于块元素和行内元素之间）

属性：

【1】src 属性指的是外部图片的路径（路径规则和超链接是一样的）

---跟超链接方法一样(引入内部图片)

---复制图片地址（引入外部标签）

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">img</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"./img/1.jpg"</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">img</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"https://pic1.zhimg.com/v2-fca6b92268bfe2ab3be1a5914fa16378_r.jpg?source=1940ef5c"</span><span style="color:#117700">></span></span></span>

【2】alt属性：是对图片的描述（不显示）

这个描述默认情况下不会显示

---有些浏览器会在图片无法加载时显示

---搜索引擎会根据alt中的内容来识别图片

【3】width属性：指定图片的宽度

【4】height属性：指定图片的高度

宽度和高度如果只修改了一个，则另一个会等比例缩放(一般情况下只修改其中一个

---在pc端并且一般情况下不建议修改图片的大小)需要多大就裁多大

---在移动端，经常对图片缩放，一般把大图片缩小

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">img</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"500"</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"https://pic1.zhimg.com/v2-fca6b92268bfe2ab3be1a5914fa16378_r.jpg?source=1940ef5c"</span><span style="color:#117700">></span></span></span>

2、图片格式

图片的格式：（效果一样用小的；效果不同用好的）

jpeg(jpg)

---支持的颜色比较丰富，不支持透明效果，不支持动图

---一般用来显示照片

gif

--- 支持的颜色比较少，支持简单透明，支持动图

---颜色单一的图片，动图

png

---支持的颜色丰富，支持复杂透明，不支持动图

---颜色丰富，复杂透明的图片（专为网页而生的）

webp（完美的图片）但轻易不用

---这种格式是谷歌新推出的，专门表示网页中图片的一种格式

---它具备其他图片格式的所有优点，而且文件还特别的小

---致命缺点：兼容性不好

base64 (使用的不多)

---图片可以使用base64来编码

---可以直接将图片转换为字符，通过字符的形式来引入图片

---一般就是需要和网页一起加载的图片才需要用base64

（使用方法：搜索base64,在线转换）

十五、内联框架

iframe用于向当前页面引入一个其他页面

src指定要引入网页的路径

frameborder指定内联框架的边框，0代表没有，1代表有

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">iframe</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">""</span> <span style="color:#0000cc">frameborder</span>=<span style="color:#aa1111">"0"</span><span style="color:#117700">></span>
    
<span style="color:#117700"></</span><span style="color:#117700">iframe</span><span style="color:#117700">></span></span></span>

十六、音视频

音频

audio标签向页面中引入一个外部的音频文件

音视频文件引入时，默认情况下不允许用户控制开始和停止，还需引入一个属性controls

【1】属性controls是否允许用户控制播放

【2】属性autoplay自动播放,如果设置了autoplay，则音乐会在打开页面时自动播放，但是目前来讲大部分浏览器都不会自动对音乐进行播放

【3】属性loop循环播放

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">audio</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">""</span> <span style="color:#0000cc">controls</span> <span style="color:#0000cc">autoplay</span> <span style="color:#0000cc">loop</span><span style="color:#117700">></</span><span style="color:#117700">audio</span><span style="color:#117700">></span></span></span>

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">audio</span> <span style="color:#0000cc">controls</span><span style="color:#117700">></span>
    对不起，您的浏览器不支持播放音频，请升级浏览器！
    <span style="color:#117700"><</span><span style="color:#117700">source</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"/mp3"</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">source</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"/ogg"</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">audio</span><span style="color:#117700">></span></span></span>

老的浏览器：

type指定文件类型

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">embed</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">""</span> <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"audio/mp3"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"100"</span><span style="color:#117700">></span>
</span></span>

总的：

解决了兼容性的问题

<audio controls>    <source src="/mp3">    <source src="/ogg">    <embed src="" type="audio/mp3" width="100"></audio>

视频

使用video标签来向网页中引入一个视频文件

使用方式和audio基本上是一样的

<video controls>    <source src="/mp4">    <source src="/webm">     <embed src="" type="video/mp4" width="100"></video>

冰镇奶茶

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
HTML5篇学习笔记

HTML一、课程简介1.服务器开发语言： -Java !!!-PHP-C#-Python-Node.js!!2.客户端形式：-文字客户端（不常见）-图形化界面（C/S架构）-网页（B/S架构）！！！：1.使用到的语言：HTML，CSS，JavaScriptB/S架构相比于C/S架构的优点：1不用安装 2不用更新 3跨平台我的第一个html代码：<html> <head> <title>&l...
复制链接

扫一扫