HTML入门第三课（常用标签）

最新推荐文章于 2024-10-04 06:11:34 发布

二白程序员

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量849

点赞数 22

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_63511098/article/details/136370772

版权

上篇文章讲了一些简单的常用标签，这次我们来说一下一些其他常用的标签

一、实体

什么是实体

浏览器会提前征用一部分的字符，例如大于号，小于号，空格，版权符号等等

如果程序员想用，可以用一些额外的字符去表示，这些额外的字符，我们叫实体

实体的语法： &实体的名字; （不要忘了分号）

常用的实体

大于号：>

小于号：<

空格： 

版权符号：©

二、列表

列表（list）一组一组

1：有序列表用ol标签创建，li表示列表项

默认样式：

列表项的前面有加1，2，3等项目符号

列表项的前面有较大间距

2：无序列表用ul标签创建，li表示列表项

默认样式：

列表项的前面有加黑色实心小圆点

disc，默认值

square,实心的方块

circle,空心的园

实际开发过程中，我们会去除默认的项目符号

3：定义列表用dl标签创建，使用dd对内容进行解释说明

注意：1、常用有序列表和无序列表，而且在实际开发过程中，

不需要特别区分有序或者无序

2、有type属性，可以更改列表项目符号

ol type属性值：1，a，A，i，I

ul type属性值：circle，square，disc

3、列表之间是可以相互嵌套的

4、ol li

ul li

dl dt dd

是配合使用，一般情况下不加入其他直接子元素

默认样式，li有项目符号，上下外边距，左内边距

三、超链接

何为超链接呢，第一次课说到，html是超文本标记语言，这里的超就是超链接。

超链接：可以是一个字，可以是图片，可以是表格，或者音视频等等

是行内标签，特殊的行内标签，它里面什么都能放，除了他自己

功能：

1、从一个页面跳到另一个页面

2、在当前页面进行跳转（锚点功能），一般可以用来做“楼梯导航”

3、下载

属性：

href属性指向超链接跳转的地址

跳转的路径：

绝对路径：是一个完整的地址，无论超链接在哪里，只要地址不写错，就可以实现跳转

相对路径：不是一个完整的地址，路径写法跟你所在位置相关

./ 你（超链接）所在的位置跟你要跳转的位置在同一目录下，默认就是 ./ 开始

../ 你（超链接）所在的位置跟你要跳转的位置不在同一目录下

跳出当前目录来到上一级目录寻找，如果上一级目录下还未寻找到，

那就再../，直到找到为止

target属性：设置超链接的打开方式

可选值：

_self：当前页面打开超链接，也是默认值，一般情况，国外的网站喜欢用 _self

_blank：新开页面打开超链接，国内的网站常用 _blank

空连接写法（2种写法）

<a href="#">空链接写法1</a>

<a href="javascript:;">空连接写法2</a>

锚点功能实现：

第一步：给你要跳转的位置打一个标记

id=‘xxx’

id属性值：不能以数字开头，最好不要是汉字

第二步：在超链接href属性值里：#id属性值

特殊情况：回到顶部

会刷新页面，滚动条回到最开始的位置

四、img标签

使用img标签来向网页中引入一个外部图片

img这种元素属于替换元素，行内块标签（基于块和行内元素之间，具有两种元素的特点）

4个属性：

src：指向图片的引入路径

绝对路径：完整的地址

相对路径：不完整的的地址，./或../

alt：对图片的文字描述，正常情况下不显示，当图片引入不成功的时候会显示

对seo推广有好处

width：设置图片的宽度

height：设置图片的高度

注意：一般情况下不会同时设置宽度和高度

只会设置其一，另外一个浏览器会自适应调整大小

分享一个面试题：

问：你常用的图片有哪些？能说一下它的主要特点？

答：和油漆是一个道理，不同的图片格式特性不一样，使用场合也有所不同。

图片格式：

JPEG(JPG)

JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明

一般用来保存照片等颜色丰富的图片

GIF

GIF支持的颜色少，只支持简单的透明，支持动态图

图片单一或者是动态图时可以使用GIF

PNG

PNG支持的颜色多，并且支持复杂的透明，不支持动图

可以用来显示颜色复杂的透明的图片

专为网页而生

webp

谷歌新推出的专门用来表示网页的一种格式

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

缺点：兼容性不好

base64

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

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

图片的使用原则：

效果不一致，使用效果好的

效果一致，使用小的

网页加载流程：

第一次请求：加载网页本身，网页的结构，字符

第二次之后请求，加载外部资源，例如图片，外部css文件，js文件等

五、音视频

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

video标签用来向页面中引入一个外部的视频文件

src：引入音视频的路径

相对路径，绝对路径

controls：控制用户是否可以播放，默认用户不可以播放

sutoplay：自动播放（基本被废止）

loop：循环播放

下面分享一下做的很简单的练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <h1>热门活动&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="./作业1.html" target="_blank">更多</a></h1>
    <ul>
        <li>
            <img src="./image/img1.png" alt="榜单">
            <br><br>
            推荐活动 | <a href="./作业3.html" target="_blank">原创音乐现金榜T榜</a><br><br>
            
        </li>
        <li>
            <img src="./image/img2.png" alt="">
            <br><br>
            推荐节目 |<a href="https://www.baidu.com/sf/vsearch?pd=video&wd=TAImusic&tn=vsearch&lid=8911db35004c2241&ie=utf-8&rsv_pq=8911db35004c2241&rsv_spt=5&rsv_bp=1&f=8&atn=index" target="_blank">《TAImusic》爆笑来袭</a><br><br>
        </li>
        <li>
            <img src="./image/img3.png" alt=""><br><br>
            推荐歌单 | <a href="https://www.baidu.com/sf/vsearch?pd=video&wd=%E7%BB%A7%E7%BB%AD%E5%AE%A0%E7%88%B1%E5%BC%A0%E5%9B%BD%E8%8D%A3&tn=vsearch&lid=a2d3cf83004d4535&ie=utf-8&rsv_pq=a2d3cf83004d4535&rsv_spt=5&rsv_bp=1&f=8&atn=index" target="_blank">继续宠爱张国荣</a><br><br>
        </li>
        <li>
            <img src="./image/img4.png" alt=""><br><br>
            推荐活动 | <a href="https://www.douban.com/note/550607175/?_i=9187576pYcxxn1" target="_blank">330金属音乐巡演 成都小酒馆音乐空间</a><br><br>
        </li>
    </ul>
    
</body>
</html>

还有一个

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一路向北</title>
</head>

<body>
    <header>
        <center>
            <h1>歌曲推荐</h1>
        </center>
    </header>
    <hr>
    <main>
        <center>
            <h2>一路向北</h2>
            <h4><a href="https://baike.baidu.com/link?url=PVK9nPsf3lvxUzB_4MMqTeDEoAMrG3xK7vyfWPk14cub0LL0XatNmnxRwlwjrySg7BAPTaWygoch7njrjKz7jqzGyPQ6snjjrRippAoNOiK" target="_blank">周杰伦</a><br><a href="#tupian">跳转到第二张图片</a></h4>

        </center>
        <br>
        <center>
            <hgroup>
                <p>后视镜里的世界
                    越来越远的道别</p>
                <p>你转身向背
                    侧脸还是很美</p>
                <p>我用眼光去追
                    竟听见你的泪</p>
                <p>在车窗外面徘徊
                    是我错失的机会</p>
                <p>你站的方位
                    跟我中间隔着泪</p>
                <p>街景一直在后退
                    你的崩溃在窗外零碎</p>
                <p>我一路向北
                    离开有你的季节</p>
                <p>你说你好累
                    已无法再爱上谁</p>
                <p>风在山路吹</p>
                <p>过往的画面全都是我不对</p>
                <p>细数惭愧 我伤你几回</p>
                <p><img src="../2.28/周杰伦.jpg" alt="周杰伦照片"></p>
                <p>后视镜里的世界
                    越来越远的道别</p>
                <p>你转身向背
                    侧脸还是很美</p>
                <p>我用眼光去追
                    竟听见你的泪</p>
                <p>在车窗外面徘徊
                    是我错失的机会</p>
                <p>你站的方位
                    跟我中间隔着泪</p>
                <p>街景一直在后退
                    你的崩溃在窗外零碎</p>
                <p >我一路向北
                    离开有你的季节</p>
                <p>你说你好累
                    已无法再爱上谁</p>
                <p>风在山路吹</p>
                <p>过往的画面全都是我不对</p>
                <p id="tupian">细数惭愧 我伤你几回</p>
                <p><img src="../2.28/周杰伦2.jpg" alt="周杰伦照片"></p>
                <p>我一路向北
                    离开有你的季节</p>
                <p>方向盘周围
                    回转着我的后悔</p>
                <p>我加速超越
                    却甩不掉紧紧跟随的伤悲</p>
                <p>细数惭愧 我伤你几回</p>
                <p>停止狼狈 就让错纯粹</p>
            </hgroup>
        </center>
    </main>
    <hr>
    <footer>
        <center>友情链接:<a href="#">A网站</a>|<a href="#">B网站</a>|<a href="#">C网站</a><br><br><a href="#">回到顶部</a>|<a href="#">联系我们</a></center>
    </footer>
            
</body>

</html>

页面太大就不截图运行效果了，有兴趣可以自己动手试试