P2-meta标签-块级语义化标签-行内元素标签-图片标签img-相对路径-图片格式-内联框架iframe-音频audio-视频video-a标签-id属性

meta标签

作用

• 用来设置网页的编码字符集，作用是告诉浏览器这个网页是采用UTF-8的字符集编码的

< meta charset = "UTF-8">

• 用来设置网页中的元数据（元数据就是网页中本身的特性），它里边的内容不被用户查看，一般用来告诉浏览器如何解析网页或者告诉搜索引擎网页的主要内容。

可选属性

• name：要设置的属性的名字 有两个参数：description/keywords
  description——用于告诉搜索引擎网页的主要内容，相当于自我介绍；
  keywords——定义网站的关键词，多个关键词使用逗号（英文）隔开，主要用于搜索引擎通过关键字链接本网页。
• content：要设置的属性的内容；
• http-equiv：常量，将content属性关联到http头部，设置http协议的响应头。

< meta http-equiv = "参数" , content = "参数变量值">

参考

常用的功能

• 设置网页的描述信息

<meta name = "description" content = "这是一个很好的网站">

• 设置网页的关键字

<meta name = "keywords", content = "HTML5,JAVA,大数据">

• 设置网页重定向 refresh

<meta http-equiv = "refresh" content = "3;url = https://www.baidu.com">
解释：
	content中的3 —— 表示三秒。
	url 表示 网页。
	整体表示：当打开这个网页3秒之后跳转到url所处页面。

案例运行过程：将模拟网页打开后，经过3秒后baidu网页被打开。
实例：关于页面注册之后几秒以后跳转 就是通过上述的content实现的。

语义化标签1：（块）

标签名字	解释
header	表示网页的头部，主要用于放置一些logo、导航、搜索框、广告条等
main	表示网页中的主体内容；一个网页中只有一个main标签
footer	表示网页的底部，footer主要放置一些版权信息、版权申明、联系方式、友情链接…
nav	表示网页的导航栏
hgroup	表示其内容是一个标题组
article	表示网页中的一块内容（一般是一些文字的信息）
section	表示一块独立的区域（区块）
aside	表示网页的一个侧边栏（辅助信息）
blockquote	是块标签，适合长引用。 为什么不将blockquote放入p标签中，是因为p标签中不能放任何的块元素。
div	表示一个块区（div可以代替上面的所有块）
注意：

• nav标签会使用的比较多，但基本上可以使用div来代替以上所有标签。
• 以上所有的标签都是H5新增的语义化标签，他们并不能支持所有的浏览器，所以基本上这些东西都不是必须使用的，如果有块元素（block element)，它会在网页中独占一行。
  块标签，div可以替代所有，且独占一行

语义化标签2 ：（行内元素）

行内元素/内联元素： 像em和strong这种不独占一行的标签，

标签名	说明
em	表示强调，默认浏览器会以斜体显示em中的文字，表示读音上的强调
strong	表示强调，和em相比，更强。默认浏览器会加粗显示，表示语义上的强调
i	表示斜体 在h5之前i专门表示斜体，但是在h5之后认为斜体属于表现
b	表示加粗
上述两个	用来表示一段文本中的特殊内容，而在实际的网页中可能采用i来表示一些实际的小图标
q	表示短引用
span	一个文本标签，但是它没有语义，主要作用是选中文本
以上这些元素都是行内元素（内联元素），在页面中不会独占一行
行内标签，span可以替代所有，不会独占一行
注意：
div和span是网页中最常用的。
各个标签展示图：

图片标签 img

概念说明

• 图片标签用来向页面中引入一个外部标签，使用img标签来引入外部图片。
• 网页是一个纯文本文件，不能引入图片，所以需要使用图片标签引入图片。
• 浏览器加载网页，一次对网页的请求、多次对加载图片的请求（有几个外部图片就有几次请求。如果图片的路径填写错误则将找不到图片、无法完成加载）。

img标签属性

属性名	作用
src	图片的路径 当文件和图片在一个目录下时，直接写图片的名字+扩展名
alt	图片的一个描述 这个描述不会在页面中显示，但是有可能在图片无法加载时显示 搜索引擎会根据alt属性来判断图片的内容。如果没有alt属性搜索引擎不会对图片进行收录
width	图片的宽度
height	图片的高度

解释说明

• 宽度和高度如果只修改一个，则另一个会等比例缩放。
  （如果原图片是100*100，那么修改width为50，则height会自动变成50）。
• 前端一般不对图片宽高进行修改，因为一般情况下需要多大的就会引用多大的。如果引入500500的图片，实际使用的是100100的则会造成内存的浪费；如果使用1000*1000的，则会造成失真。最好是需要多大就引用多大。
• pc端是固定布局，图片一般都是需要多大就是多大；而移动端的话，手机屏幕大小不一致，图片处理起来比较麻烦。
• img是内联元素，img标签后面跟着文本，显示会直接在图片后方。
• img是一种替换元素，不是将标签的内容显示出来，而是用src内容将标签位置替换。

路径

使用./开头的是相对路径，其中./可以省略

• 相对路径指相对于当前文件夹所在目录的路径，只能引入项目内的资源。

路径样式	说明
.	表示当前目录
./	表示当前目录
. ./	表示上一级目录 返回几层就写几个
. ./. ./	表示返回上两层目录
（备注：当两个英文句号中间没有空格的时候，显示结果会有三个句号）

• 相对路径只适用网站内部、不适用于网站外部。
  通过brackets软件打开一个文件夹，则文件夹就是一个网站，文件夹内就是网站内部、文件夹外的就是网站外部。
  双击某个html文件打开的网页是通过磁盘进行访问；而通过软件打开一个文件夹则是通过服务器进行的访问。
  对于导入一个根目录之外的图片，直接双击html图片正常显示；而通过服务器方式访问不能显示。原因在于双击html的根目录是D盘，但是服务器访问的根目录就是软件打开的文件夹。
  对于每一个项目都会有一个根目录，项目的所有资料都要放在根目录里面，不能放在其外面。

路径的几种情况：（要求：在index.html中引入1.jpg）

root 
    -index.html
    -1.jpg                
   引用格式：1.jpg 或者 ./1.jpg
root
    -index.html
    -hello 
          -1.jpg
     引用格式：./hello/1.jpg
root
    -1.jpg
    -hello
          -index.html
     引用格式：../1.jpg
     当前目录是hello，../之后的目录是root
root
     -1.jpg
     -hello 
           -abc
               -index.html
     引用格式：../../1.jpg
     当前目录是abc、../../ 之后的目录依次是hello、root
 root
     -heihei
            -1.jpg
     -hello
           -abc
               -index.html
      引用格式：../../heihei/1.jpg

图片的格式

jpeg（jpg）

• 支持的颜色比较丰富、不支持透明效果。（其中颜色可以2的8、12、24次方种颜色）
• 适合用来显示图片。

gif

• 支持的颜色比较少，支持简单的透明，支持动图。
• 简单透明：图片只含有一个正方形，且只有正方形外部是透明的。
• 复杂透明：图片中包含复杂的图案，想让图案外部透明。
• 适用范围：颜色单一的图片（logo）、简单透明的图片、动图。

png

• 支持的颜色丰富，支持复杂透明。

webp

• google专门为网页设计的一种图片格式。
• 支持的颜色丰富、复杂透明、动图且占用内存特别小，但是它的兼容性比较差（不能兼容所有的浏览器）。

base64编码 （特殊情况下使用）

• base64是一种编码格式，base64可以将图片转换成字符串，直接在页面中使用。
• base64编码，可以通过网页在线转换，在网页中输入base64 图片转换即可。

图片选择格式的原则：效果一致用小的；效果不一致用效果好的。

内联框架iframe

内联框架iframe，用来引入一个外部的网页。

属性

属性名	说明
src	将双引号内的网页引入到本网页中，默认框比较小，可以通过width和height调整
frameborder	指定内联框架有没有边框。

案例1：外部网页，绝对路径

<iframe src="https://www.baidu.com" frameborder="0" width="500" height="500"> </iframe>

百度这个网页属于外部网页，是绝对路径。
案例2：执行文件和引用文件同一目录

<iframe src="P2-图片标签.html" frameborder="0" width="500"></iframe>

说明

• 一般在开发中不推荐使用，iframe中的内容不会被搜索引擎获取。
• 所有能看见的标签都支持title属性，用于当鼠标放在某个位置时显示提示文字。
• 可以引入内部标签，采用的是相对路径。

音频audio

使用audio来引入一个外部的音频

一般情况下，音频都是使用mp3。默认情况下，音频在页面中不会显示和播放。

属性

属性名	说明
controls	用来设置是否允许用户控制音频的播放 这个属性比较特殊，它没有属性值，如果允许用户播放，则添加该属性，否则不添加，不需要设置属性值。
autoplay	用来设置音乐是否自动播放。一般的浏览器默认情况下，都不会自动播放。但是当之前访问此网页播放过后，则下一次没有关浏览器刷新会自动播放。

一般格式

<audio controls autoplay loop>
<source src="">
<source src="">
<source src="">
您的浏览器不支持，audio标签
</audio>

解释说明：

• controls 是个布尔值属性，如果存在，则向用户展示音频控件。
• autoplay，存在，音频就绪后就会马上播放。
• loop，存在，每当音频结束时重新开始播放。

该标签不支持IE8及以下浏览器

<audio controls>
对不起，您的浏览器不支持该标签！
<source src="src/audio.mp3">
<source src="src/audio.ogg">
</audio>

上述这个描写的好处是：
当浏览器支持audio标签，controls之下的文字内容是看不到的，不支持则可以看到，类似于图片的alt属性。
对于某些浏览器不支持mp3格式，采用上述引入音频方式可以多写几个格式。
采用source可以为一个音频指定多种格式

执行过程：
网页会优先看mp3格式，如果不支持则看ogg，如果也不支持ogg，则输出“对不起您的浏览器不支持该标签！”

<embed src="src/audio.mp3" type="audio/mp3" width="200" height="100">

要想兼顾ie8，可以使用embed（），所有浏览器都支持，但实际上这个标签已经不常用了。
type类型，参数为大类型/小类型。两个参数（大的类型）image、audio、vedio等；（小的类型）gif、mp3、mp4。

视频标签video

video标签：用来引入外部视频

属性

属性名	说明
src	地址
controls	用于生成页面中的控制按钮

一般格式

<video controls autoplay loop>
<source src="">
<source src="">
您的浏览器不支持，video标签
</video>

• 采用source可以为一个视频指定多种格式，基本上mp4和webm（Google提出的开放、免费的媒体文件格式）可以兼容多个浏览器，IE浏览器8不支持还得使用embed，IE10、9都可以使用。
• 可以引入优酷、爱奇艺等网页的视频。（将视频网页打开，点击某个视频，有关于分享的部分，可以看到关于iframe的内容复制粘贴在自己所要建立的网页上即可）
• 常见的视频服务器是：七牛云视频。

a标签

通过超链接可以从一个页面跳转到另外的页面。

属性

属性名	说明
href	指定的内容可以为：跳转的目标路径（外部页面地址或内部的相对地址），或跳转到页面内部的其他位置（#表示当前页面的顶部）。
target	表示打开链接的目标位置 可选值： _self : 默认值，在当前窗口打开页面 _blank : 在新窗口打开页面 国内网站一般都是打开新窗口，而国外网站大部分都是当前窗口打开。

href案例：

 打开外部的页面：
 <a href="https://www.baidu.com">link</a>
 打开内部的页面：
 <a href="../hello.html"></a>
 跳转页面到页面的指定位置(锚点)：
 <a href="#id属性值">link</a>

id属性

• 每个元素都可以设置一个id属性
• id属性不能重复，它是元素的唯一标识
• id属性严格区分大小写
• 要想到底部或某一个指定的位置，可以为那个位置所处的标签设置id，利用’#id’来超链接到指定位置

常用标签区分是块元素还是行内元素

分类	具体标签
块元素	ul li标签 img标签
行内元素	a标签