0


前端的学习-HTML(二)

一:文本格式化标签

    紧接上篇内容:

          **  <pre></pre>**标签的使用。

            <small></small>:**变小字号**,不推荐使用,后面可用css替代。

            <big></big>:**变大字号**,不推荐使用,后面可用css替代。

            <font></font>:**字体标记**,不推荐使用,后面可用css替代,font标记是用来改变默认的字体、颜色、大小等属性,这些更改分别通过不同的属性定义完成。 
<font face="宋体" size="15" color="red"></font>
            属性说明:

                    size:**设置字体大小**,数字越大字体越大。

                    color:**设置字体颜色**,规定文本的颜色。可以使用rgb函数、十六进制数、颜 色英文名称来表达。

                    face:**设置字体样式**,face属性可以有多个值,用逗号分隔。字体使用方式为 从左向右依次选用。只要前面的字体不存在,则使用后 一个字体。都不存在,使用默认“宋体。

            文本格式化标签最终的效果:

二:div,span标签

    div:全称是division ,划分,有时可称图层。

    span : 跨距,量程。

    div与span并没有具体的语义,**他们就像一个盒子,用来装载其他的标签和内容**。

    <div> 作为一个纯粹的容器,<div>标签本身并不表示任何内容,它可以用作严格的组织工具,并且不使用任何 格式与其关联。

    <span>标签被用来组合文档中的行内元素。
<div>
    你好,我是div中的内容!!!!
</div>
<span>
    你好,我是span中的内容!!!!
</span>

三:图像标签和路径 -

    <img>单词 image 的缩写,意为图像,**标签用于在HTML页面中定义图像,**属于单标签。

    使用: **src 是 标签的必须属性,它用于指定图像文件的路径和文件名。**
<img src="图像的路径" alt="" title=""/>
   属性:

            **src:用于指定图片的路径,必须属性。**

            alt:替换文本,用于在**图片不能显示**时显示文本信息。

            title:文本信息,用于鼠标放在图片上时显示文本信息。

            width:用于设置图像的宽度。

            height:用于设置图像的高度。

            border:用于设置图像的边框。

    通常页面中的文件较多,这时则需要一个文件images来放置图片,采用“**路径**”的形式来指定图片的位置。

    ·        路径分为**相对路径**和**绝对路径**

      **      相对路径:**以引用文件所在位置为参考基础,而建立出的目录路径,就是说相对于HTML页面来说,位于什么位置。

       **     同一级位置:**(**HTML与图片位于同一级目录下**)

                    

                    代码示例:
<img src="Group 256.png"/>
       **     上级位置:**(图像位于HTML页面的上一级目录使用 “**../**”** **来表示)

    

    如示例,html页面为与html文件中进入html文件,此时图片位于html页面的上级目录。 

                    代码示例: 
<img src="../images/Group 265.png"/>
           ** 下级位置:**(图像为与html页面的下级位置使用“**/**”来表示) 

    如上所示,图片位于images文件下,此时图片位于html页面的下一级。
<img src="images/Group 256.png"/>

** 绝对路径:**是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。

                    示例:”D:\前端的学习\images\Group 256.png”

    对于<img>标签来说通常使用相对路径。

四:超链接标签-

    <a>标签用于定义超链接,作用是从一个页面链接到另一个页面。

    单词 anchor 的缩写,锚,抛锚。

    两个主要属性如下:

           ** href:用于指定链接目标的url,必要属性。**

** ** target:用于指定页面的打开方式,其中_selt为默认值,_blank为在新窗口打开,_top在窗口的整个主体中打开链接的文档,_parent在父框架中打开链接文档。

           ** 链接的分类:**

** ** ** ( 1)外部链接**: 例如

<a href="https://www.baidu.com">百度</a>
                **(2)内部链接**:网站内部页面之间的相互链接。直接链接内部页面名称即可,例如  
<a href="index.html">首页</a>
               **(3)空链接**:没有指定的链接目标,例如
<a href="#">空链接</a>

** (4)下载链接**:如果地址是一个文件或者压缩包,则会下载这个文件。

<a href="前端.docx">文件下载</a>

** (5)网页元素链接**: 可以在超链接中加入图片等元素,实现点击图片也可以进行超链接。

<a href="index.html">
    <img src="index.jpg" />
</a>

** (6)锚点链接:** 点击链接则可以跳转到页面的某个位置,需要在指定位置的容器上指定想要的id,超链接的href中的地址则是,此处的id名。

<div id="top">顶部</div>
<a href="#top">返回顶部</a>

五:注释和特殊字符

    在html文档中如需添加一些便于理解和阅读的文字,但又不想在页面中显示,则可以使用注释。

    HTML中的注释:** <!-- 注释内容 -->**
<!-- 这是注释中的内容,页面中不会显示 -->
   ** 特殊字符:**

** **在html页面中有些特殊的字符,从键盘无法输入或者对于html页面来说有特殊的含义,比如“>”,“ <”,这些是特殊的字符,如果要在网页中显示这些字符,就需要对他们进行另外编码。

            &lt:“<”,小于符号

            &gt:“>”,大于符号

            &amp:“&”

            &quot:引号

            &reg:“®”,注册号

            &copy:“©”,版权

            &trade:“™”,商标

            &ensp:半个空白位

            &emsp:一个空白位

            &nbsp:不断行的空白,相当于空格键

           ** 还有更多的符号,这里就不记了......**

六:音频标签-

<audio src="路径" controls="controls"></audio>
    用于在页面中加入音频文件。

    属性值:

            **src**:要播放的音频的 URL。

       **     autoplay**:如果出现该属性,则音频在准备就绪后马上播放。

          **  controls**:如果出现该属性,则向用户显示控件。 

            **loop**:如果出现该属性,则音频循环播放。

            **muted**:规定视频输出应该被静音。

           ** preload**:音频在页面加载时进行加载,并预备播放。如果使 用 "autoplay",则忽略该属性。

七:视频标签-

<video src="路径" controls="controls"></video>
       用于在html页面中加载视频。

    属性值:

           ** src**:要播放的视频的 URL

           ** autoplay**:如果出现该属性,则视频在就准备绪后马上播放。

            **controls**:如果出现该属性,则向用户显示控件。

            **height**:设置视频播放器的高度。

            **width**:设置视频播放器的宽度。

            **loop**:如果出现该属性,则音频循环播放。

            **muted**:规定视频的音频输出应该被静音。

            **poster**:规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。

            **preload**:如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使

用"autoplay",则忽略该属性。

           **注意:****以上两个标签,由于浏览器的版权等原因,不同的浏览器可支持播放的格式是不一样的。**

作者为前端的基础学习者,如有不正确没还望指出,谢谢。


本文转载自: https://blog.csdn.net/m0_68823256/article/details/140583811
版权归原作者 银杏也要学习代码 所有, 如有侵权,请联系我们删除。

“前端的学习-HTML(二)”的评论:

还没有评论