HTML基础知识

一、标签结构

        1.标签由<、>、 /、英文单词或字母组成。并且把标签中< >包括起来的英文单词或字母称为标签名
        2.常见标签由两部分组成,我们称之为:双标签。前部分叫开始标签,后部分叫结束标签,两部分之间包裹内容
        3.少数标签由一部分组成,我们称之为:单标签。自成一体,无法包裹内容。

二、标签关系

        1.父子关系(嵌套关系)

        <head>
                <title></title>
        </head>

        2.兄弟关系(并列关系)

        <head>
        </head>
        <body>
        </body>

三、排版标签

        1.标题标签——文字加粗,文字逐渐变小,独占一行

                h1标签:一级标题
                h2标签:二级标题
                h3标签:三级标题
                h4标签:四级标题
                h5标签:五级标题
                h6标签:六级标题

        2.段落标签——段落之间存在间隙,独占一行

                <p>我是一段文字</p>

        3.换行标签——单标签,让文字强制换行

                br:换行

        4.水平线标签——单标签,在页面中显示一条水平线

                <hr>:分割不同主题内容的水平线

四、文体格式化标签——需要让文字有加粗、下划线、倾斜、删除线等效果

        突出重要性的强调语境侧标签

五、媒体标签

        1.图片标签——单标签,显示效果需要设置标签属性

           <img src="图片路径 " alt="当图片加载失败时,才会显示alt文本(替换文本) "

            title=“当鼠标悬停时才显示的文字”width="宽度"  height="高度">

        注意事项:

        1.如果只设置width或height中的一个,另一个没设置的会自动等比例缩放(此时图片不会变形)
        2.如果同时设置了width和height两个,若设置不当此时图片可能会变形

        路径问题——页面需要加载图片,需要先找到对应的图片

        1.绝对路径——目录下的绝对路径,从盘符开始的路径

                盘符开头: D:\dley01\images\1.jpg

                完整的网络地址:https://home.firefoxchina.cn/

        2.相对路径(常用)——从当前文件开始出发找目标文件的过程

                1.同级目录——直接写目标文件名字即可

                        <img src="目标图片.jpg">       <img src="./目标图片.jpg">

                2.下级目录——目标文件在下级目录

                        <img src="文件夹名字/目标图片">

                3.上级目录——目标文件在上级目录中

                        到上一级目录 : ../            上上一级 : ../../

        2.音频标签

                <audio src="路径"   controls  autoplay   loop></audio>

                音频标签目前支持三种格式: MP3、Wav、Ogg

 

        3.视频标签

                 <video src="路径" controls autoplay muted loop></video>

 

     

        

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值