前端的学习-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>

        <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>

        <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>

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

        用于在页面中加入音频文件。

        属性值：

                src：要播放的音频的 URL。

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

                controls：如果出现该属性，则向用户显示控件。 

                loop：如果出现该属性，则音频循环播放。

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

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

七：视频标签-<video>

<video src="路径" controls="controls"></video>

           用于在html页面中加载视频。

        属性值：

                src：要播放的视频的 URL

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

                controls：如果出现该属性，则向用户显示控件。

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

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

                loop：如果出现该属性，则音频循环播放。

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

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

                preload：如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使
用"autoplay"，则忽略该属性。

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

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