第四周html笔记

一，列表

种类

①有序列表：使用ol便签来创建有序列表，使用li表示列表项

②无序列表：使用ul便签来创建无序列表，使用li表示列表项

③定义列表：使用dl标签来创建定义列表，使用dt表示定义的内容，使用dd来对内容进行解释说明

 

列表之间可以互相嵌套

二，超链接

超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置

①使用a标签来定义超链接

②超链接也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素

③属性：href指定跳转的目标路径。值可以是一个外部网站的地址，也可以写一个内部页面的地址

用法：<a href=“"></a>

相对路径

①当我们需要跳转一个服务器内边的页面时，一般我们都会使用相对路径，相对路径都会使用.或..开头例：./ ../

ps：./可以省略不写，如果不写./也不写../则就相当于写了./

①./表示当前文件所在的目录

②../表示当前文件所在目录的上一级目录

3.其他用法

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

ps：可选值：_self默认值 在当前页面中打开超链接

            _blank 在一个新的网页中打开超链接

②回到顶部：直接将超链接的href属性设置为#，点击后不会跳转，直接转到页面的顶部的位置

③去到任意位置：将href属性设置为#目标元素的id属性值

ps：(1)id属性(唯一不重复的)：每一个标签都可以添加一个id属性，id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性

在开发中可以将#作为超链接的路径的占位符使用

三，图片标签

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

①使用img标签来引入外部图片，img标签是一个自结束标签

②属性：src属性指定的是外部图片的路径(路径规则和超链接是一样的)

③img这种元素属于替换元素(基于块和行内元素之间，具有两种元素的特点)

④alt：图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示。搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所搜索

⑤width 图片的宽度(单位是像素)。height 图片的高度。宽度和高度中如果只修改了一个，则另一个会等比例缩放

ps：一般情况在PC端，不建议修改图片的大小，需要多大的图片就裁多大。但在移动端，经常需要对图片进行缩放

图片的格式：

①ipeg(jpg)支持的颜色比较丰富，不支持透明效果，不支持动图

一般用来显示照片

②gif：支持的颜色比较少，支持简单透明，支持动图

颜色单一的图片，动图

③png：支持的颜色丰富，支持复杂透明，不支持动图

颜色，复杂透明图片(专为网页而生)

ps：效果一样，用小的。效果不一样，用效果好的

④这种格式是谷歌推出的专门用来表示网页中的图片的一种格式

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

缺点：兼容性不好

⑤base64：将图片使用base64进行编码，可以将图片转化为字符，通过字符的形式来引入图片

一般都是一些需要和网页一起加载的图片才会使用base64

四，内联框架

作用：用于向当前页面中引入一个其他页面，src指定要引入的网页路径

格式：<iframe src="">

frameborder指定内联框架的边框

五，音视频播放

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

ps：音视频文件引入时，默认情况下不允许用户自己控制播放停止

①属性：controls 是否允许用户控制播放。autoplay音频文件是否自动播放

ps：如果设置了autoplay则音乐在打开页面中时会自动播放，但大部分浏览器都不会自动播放音乐

②loop音乐是否循环播放