Web前端day02-html标签

目录

1.列表

2.超链接

3.图片标签

4.音视频标签

---

 

1.列表

列表(list)

在html中也可以创建列表 html列表有3种：

            1.有序列表‘

            2.无序列表

            3.定义列表

• 有序列表，使用ol标签创建有序列表

                使用li表示列表

 <ol>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
 </ol>

 

• 无序列表，使用ul标签创建无序列表

                使用li表示列表

<ul>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
</ul>

 

•   定义列表，使用dl标签来创建一个定义列表

                使用dt来表示定义的内容

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

<dl>
        <dt>
            结构
        </dt>
        <dd>结构表示网页的结构，结构用来规定网页哪里时标题，哪里是段落</dd>
</dl>

  

  列表之间可以互相嵌套

 <ul>
        <li>
            aa
            <ul>
                <li>aa-1</li>
                <li>aa-2</li>
            </ul>
        </li>
</ul>

2.超链接

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

使用a标签定义超链接 超链接也是一个行内元素，但是在a标签可以嵌套出它自身外的任何元

            属性：

                href指定跳转的目标路径

                    -值可以是一个外部网站的地址

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

<a href="../07liebiao.html">超链接</a>

<a href="./inner/target.html">chaolianjie</a>

也可以直接将超链接的href属性设置为# 这样点击超链接以后页面不会发生跳转而是转到当前页面的顶部位置

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

        可选值：

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

        _black 在一个新的页面中打开超链接

(_self和_black各有千秋，没有好坏之分) 

id属性(唯一不重复的)

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

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

a标签和p标签中都有id属性

<a href="#bottom">去底部</a>



中间部分





<a  id="bottom" href="#">回到顶部</a>

此代码段中可以从第一个a标签的位置跳转到底部

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

可以使用javascript:;来作为href的属性，此时点击这个超链接什么也不会发生  

与#区别：#会跳到页面的顶部

<!--在开发中可以将#作为超链接的占位符使用-->

<a href="#">这是一个新的超链接</a>

<br><br>
<!--可以使用javascript:;来作为href的属性，此时点击这个超链接什么也不会发生   与#区别：#会调到页面的顶部-->
<a href="javascript:;">这是一个新的超链接</a>

3.图片标签

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

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

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

属性：

•             src 属性指定是外部图片的路径(路径规则和超链接是一样的)
•             alt 图片的描述，这个描述在默认情况下不会显示，有些浏览器会在图片无法加载时显示，搜索引擎会根据alt中的内容来识别图片 如果不写alt属性则图片不会被搜索引擎所收录
•             width图片的宽度(单位是像素)
•             height 图片的高度(宽度和高度中如果只修改了一个 则另一个会等比例缩放)

            注意：

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

                但是在移动端，经常需要对图片进行缩放(大图缩小)

图片的格式：

            jpeg(jpg)

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

                -一般用来显示照片

            gif

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

                -颜色单一的图片，动图

            png

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

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

            webp

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

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

                -缺点：兼容性不好

图片的格式选择：

            效果一样，用小的

            效果不一样，用效果好的

base64

                -见图片使用base64进行编码，这样可以将图片转换为字符，通过字符的形式来引入图片

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

4.音视频标签

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

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

            属性：

            controls 是否允许用户控制播放

            autoplay音频文件是否自动播放

                -如果设置了autoplay则音乐在打开页面时会自动播放

                    但是目前来讲大部分浏览器都不会自动对音乐进行播放

            loop 音乐是否循环播放

<audio src="./source/星华 - 我是谁（《狼殿下》主题曲）（翻自 狼殿下）.mp3" controls autoplay loop></audio>

除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径

第一个不能用用第二个 第二个也不能用显示文字

<audio controls>
        对不起，您的浏览器不支持播放音频！请升级浏览器
        <source src="./source/星华 - 我是谁（《狼殿下》主题曲）（翻自 狼殿下）.mp3">
        <source src="./source/印子月 - 落空.mp3">
         <embed src="./source/星华 - 我是谁（《狼殿下》主题曲）（翻自 狼殿下）.mp3" type="" width="300" height="100">

</audio>

video向网页中引入视频文件 使用方式与audio基本一样

 <video controls>
            <source src="./source/刘人语 - 心跳的证明  (电影《一吻定情》心动版主题曲).mp4">
            <embed src="./source/星华 - 我是谁（《狼殿下》主题曲）（翻自 狼殿下）.mp3" type="video/mp4" >

 </video>

一般情况下引入本地文件的方式一般比较少

也可以直接复制网上的嵌入代码