0
0

前端的学习-HTML（二）

一：文本格式化标签

  1.     紧接上篇内容：
  3.           **  <pre></pre>**标签的使用。

  1.             <small></small>：**变小字号**，不推荐使用，后面可用css替代。
  3.             <big></big>：**变大字号**，不推荐使用，后面可用css替代。
  5.             <font></font>：**字体标记**，不推荐使用，后面可用css替代，font标记是用来改变默认的字体、颜色、大小等属性，这些更改分别通过不同的属性定义完成。 
  1. <font face="宋体" size="15" color="red"></font>
  1.             属性说明：
  3.                     size：**设置字体大小**，数字越大字体越大。
  5.                     color：**设置字体颜色**，规定文本的颜色。可以使用rgb函数、十六进制数、颜 色英文名称来表达。
  7.                     face：**设置字体样式**，face属性可以有多个值，用逗号分隔。字体使用方式为 从左向右依次选用。只要前面的字体不存在，则使用后 一个字体。都不存在，使用默认“宋体。
  9.             文本格式化标签最终的效果：

二：div，span标签

  1.     div：全称是division ，划分，有时可称图层。
  3.     span ： 跨距，量程。
  5.     div与span并没有具体的语义，**他们就像一个盒子，用来装载其他的标签和内容**。
  7.     <div> 作为一个纯粹的容器，<div>标签本身并不表示任何内容，它可以用作严格的组织工具，并且不使用任何 格式与其关联。
  9.     <span>标签被用来组合文档中的行内元素。
  1. <div>
  2.     你好，我是div中的内容！！！！
  3. </div>
  4. <span>
  5.     你好，我是span中的内容！！！！
  6. </span>

三：图像标签和路径 -

  1.     <img>单词 image 的缩写，意为图像，**标签用于在HTML页面中定义图像,**属于单标签。
  3.     使用： **src 是 标签的必须属性，它用于指定图像文件的路径和文件名。**
  1. <img src="图像的路径" alt="" title=""/>
  1.    属性：
  3.             **src：用于指定图片的路径，必须属性。**
  5.             alt：替换文本，用于在**图片不能显示**时显示文本信息。
  7.             title：文本信息，用于鼠标放在图片上时显示文本信息。
  9.             width：用于设置图像的宽度。
  11.             height：用于设置图像的高度。
  13.             border：用于设置图像的边框。
  15.     通常页面中的文件较多，这时则需要一个文件images来放置图片，采用“**路径**”的形式来指定图片的位置。
  17.     ·        路径分为**相对路径**和**绝对路径**
  19.       **      相对路径：**以引用文件所在位置为参考基础，而建立出的目录路径，就是说相对于HTML页面来说，位于什么位置。
  21.        **     同一级位置：**（**HTML与图片位于同一级目录下**）
  23.                     

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

  1.     如示例，html页面为与html文件中进入html文件，此时图片位于html页面的上级目录。 
  3.                     代码示例： 
  1. <img src="../images/Group 265.png"/>
  1.            ** 下级位置：**（图像为与html页面的下级位置使用“**/**”来表示） 

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

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

  1.                     示例：”D:\前端的学习\images\Group 256.png”
  3.     对于<img>标签来说通常使用相对路径。

四：超链接标签-

  1.     <a>标签用于定义超链接，作用是从一个页面链接到另一个页面。
  3.     单词 anchor 的缩写，锚，抛锚。
  5.     两个主要属性如下：
  7.            ** href：用于指定链接目标的url，必要属性。**

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

  1.            ** 链接的分类：**

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

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

** （4）下载链接**：如果地址是一个文件或者压缩包，则会下载这个文件。

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

** （5）网页元素链接**： 可以在超链接中加入图片等元素，实现点击图片也可以进行超链接。

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

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

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

五：注释和特殊字符

  1.     在html文档中如需添加一些便于理解和阅读的文字，但又不想在页面中显示，则可以使用注释。
  3.     HTML中的注释：** <!-- 注释内容 -->**
  1. <!-- 这是注释中的内容，页面中不会显示 -->
  1.    ** 特殊字符：**

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

  1.             &lt：“<”,小于符号
  3.             &gt：“>”,大于符号
  5.             &amp：“&”
  7.             &quot：引号
  9.             &reg：“®”，注册号
  11.             &copy：“©”，版权
  13.             &trade：“™”，商标
  15.             &ensp：半个空白位
  17.             &emsp：一个空白位
  19.             &nbsp：不断行的空白，相当于空格键
  21.            ** 还有更多的符号，这里就不记了......**

六：音频标签-

  1. <audio src="路径" controls="controls"></audio>
  1.     用于在页面中加入音频文件。
  3.     属性值：
  5.             **src**：要播放的音频的 URL。
  7.        **     autoplay**：如果出现该属性，则音频在准备就绪后马上播放。
  9.           **  controls**：如果出现该属性，则向用户显示控件。 
  11.             **loop**：如果出现该属性，则音频循环播放。
  13.             **muted**：规定视频输出应该被静音。
  15.            ** preload**：音频在页面加载时进行加载，并预备播放。如果使 用 "autoplay"，则忽略该属性。

七：视频标签-

  1. <video src="路径" controls="controls"></video>
  1.        用于在html页面中加载视频。
  3.     属性值：
  5.            ** src**：要播放的视频的 URL
  7.            ** autoplay**：如果出现该属性，则视频在就准备绪后马上播放。
  9.             **controls**：如果出现该属性，则向用户显示控件。
  11.             **height**：设置视频播放器的高度。
  13.             **width**：设置视频播放器的宽度。
  15.             **loop**：如果出现该属性，则音频循环播放。
  17.             **muted**：规定视频的音频输出应该被静音。
  19.             **poster**：规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
  21.             **preload**：如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使

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

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

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

标签： 学习 html5
本文转载自: https://blog.csdn.net/m0_68823256/article/details/140583811
版权归原作者 银杏也要学习代码 所有， 如有侵权，请联系我们删除。
登录后发布评论

“前端的学习-HTML（二）”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。