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>
例子:
二、自结束标签和注释
<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>