【HTML5】带你快速了解行级标签

简介: 【HTML5】带你快速了解行级标签

什么是行级标签?


行级标签可以在页面中可以和其他元素在同行显示,直到一行不能放下一个完整的元素,并且通常行级标签内不会包含其他元素。


1、<img/>:图片标签

网页设计中选择的图片不会太大,图片过大影响网页的加载速度;过小内容模糊不清则失去了存在的意义。


网页中常用的图片格式为GIF、JPG和PNG等。


基础语法:

<img src="img/logo.png" alt="GUIDM.LOGO" title="GUIDM blog"/>


属性:

  • src属性:

src属性表示引用图片的路径地址。


1)相对路径:以当前文件为准去寻找图片地址。


  1. 与当前文件处于同一层的图片:直接写图片名
  2. 图片在当前文件下一层:文件夹名/图片名
  3. 图片在当前文件上一层:../图片名


2)绝对路径:file:///盘符:/文件夹/图片.扩展名


严禁使用绝对路径,原因:


  1. 绝度路径只在当前计算机生效,若将网站转移服务器,则路径会失效。
  2. 通过绝对路径打开图片使用的是file协议,但网页中使用的是http协议。


3)网络地址:使用网络上的图片链接。


一般不使用,因为网络图片可能由于各种原因被删除、转移位置,使图片无法打开。


  • height(高度)和width(宽度)属性:
推荐CSS style="width:100px;height=100px;
  • title属性:

用于设置图片的标题,即当鼠标指在图片上后显示的文字。


  • alt属性:

设置用于图片无法加载时显示的文字。


  • align属性:

用处不大,推荐使用CSS来控制样式。


设置图片周围文字相对于图片的位置。


常用值:top、 center、 bottom


2、<a></a>:超链接标签

一个网站是由多个页面组成,用链接来完成不同页面的跳转。


标签可以设置一个超链接,单击则可跳转到新的文档或当前文档中的某个部分。


基础语法:

<a href="#">超链接</a>


属性:

  • href属性:


用来描述链接的地址,可以是网络地址也可以是本地文件。


当用#时,不是一个空的超链接。


  • target属性:

定义通过超链接打开的文档在何处显示。


常用的属性值:

  1. _self(默认值):在与链接相同的框架中打开被链接的文档。
  2. _blank:在新窗口在打开链接。


锚链接的用法

  • 本页面锚链接
  1. 设置锚点:
  2. 在超链接上,使用#name跳转到对应锚点:超链接


  • 页面间锚链接
  1. 在即将跳转页面的指定位置,设置锚点。
  2. 在超链接的href属性中,使用"页面地址.html#name"


页面间锚链接基础语法:

<a href="GUIDM.html#weixin">跳转到新页面指定部分</a>

3、<span></span>:行内标签

用来组合文档中的行内元素,无实际意义,用于包裹某部分文字。


div和span的区别

  1. div是块元素,可以包含任何块元素和行内元素,不会与其他元素位于同一行;span是行内元素,可以与其他行内元素位于同一行。
  2. div常用于页面中较大块的结构划分,然后配合css来操作;span一般用来包含文字等,他没有结构的意义,纯粹是样式应用。


其他行内元素都不适合的时候,可以用span来配合css操作,span标签往往用来配合css来修饰元素。


4、<em>:强调标签

可以嵌套使用,嵌套个数越多,强调级别越高。


表示强调的内容,显示效果为斜体


当引入新的术语或引用特定类型的术语或概念是作为固定样式的时候,也可以考虑使用。如果仅仅想使用斜体请使用标签。


5、<i>:斜体标签

显示斜体文本效果。还可以表示场景有外来语,分类名称和技术术语等。


6、<strong>:强调标签(程度更强)

通常以加粗的字体来显示,表示内容的重要性。


7、<small>:缩小字体标签

可以用于免责声明、使用条款和版权信息等需要小字体的场景。


8、<s>:删除线标签

有误文本,显示为文本文字上加删除线的样式


HTML5已经不支持,若需要使用请用代替


9、<b>:粗体标签

可以定义一些需要引起注意却没有额外语义的内容,比如摘要的关键内容和文章导语的加粗等。


10、<cite>:引用标签

表示它所包含的文本对某个参考文献的引用,比如书籍或杂志的标题。


通常应该把引用包括在一个标签中,从而把一个超链接指向该联机版本。


隐藏功能:可以从文档中自动摘抄参考书目


11、<q></q>:短引用标签

显示文字用“”引起来


<q>和<blockquote>的区别
  1. 他俩本质上是一样的,不同之处在于它们的显示和应用,标签用于简短的行内应用。
  2. 如果需要从周围内容分离出来比较长的部分,通常显示为缩进的块,这时应使用


12、<code></code>:源代码标签

专门为软件代码的编写者设计的。


表示计算机源代码或其他机器可以阅读的文本内容。通常只是把文字变成等宽字体,但它暗示着这段文本是源代码。


如果只希望使用等宽字体效果,此时应使用标签。


若想要在严格限制为等宽字体格式的文本显示编程代码,此时应使用<pre>标签。



目录
相关文章
|
26天前
|
数据采集 移动开发 前端开发
HTML代码的革命:语义化标签的魅力,让你的网页结构焕然一新!
【8月更文挑战第26天】本文探讨了Web前端开发中的语义化标签概念及其重要性。语义化标签通过使用具有明确含义的HTML标签来构建页面结构,提升了网页的可访问性及搜索引擎优化效果,并增强了代码的可读性和维护性。文章还讨论了实际开发中遇到的问题及未来发展趋势。
30 0
|
2月前
|
移动开发 JavaScript Java
关于Android中如何过滤HTML标签
关于Android中如何过滤HTML标签
46 0
|
1月前
|
移动开发 搜索推荐 前端开发
HTML结构的基本标签
HTML结构的基本标签
|
11天前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
28 13
|
10天前
|
搜索推荐 SEO
HTML中各种标题标签的正确使用方法及其特点
在HTML中,标题标签(`&lt;h1&gt;`至`&lt;h6&gt;`)用于定义文档的标题结构。`&lt;h1&gt;`表示主标题,每个页面应只有一个;`&lt;h2&gt;`至`&lt;h6&gt;`分别表示不同层级的子标题,可用于细分内容。正确使用这些标签不仅有助于文档的层次分明和可读性提升,还能优化SEO。使用时需注意保持层级结构连续、内容描述清晰。
|
11天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML基础知识(1)常用标签的使用 h、p、img、meta、a、iframe...
该博客文章详细介绍了HTML的基础知识,包括注释、标签属性、常用标签、实体、图片引入、meta标签、内联框架、超链接的使用,并通过代码示例和测试结果截图展示了这些元素在网页中的应用效果。
HTML基础知识(1)常用标签的使用 h、p、img、meta、a、iframe...
|
24天前
|
移动开发 数据安全/隐私保护 UED
HTML表单标签详解:如何用HTML标签打造互动网页?
通过合理使用HTML表单标签,可以构建功能丰富、用户友好的互动网页。HTML表单的元素和属性提供了丰富的输入选项和验证功能,使得收集和处理用户输入成为可能。随着HTML5的发展,表单元素的功能性和用户体验将继续得到提升。开发者应充分利用这些工具,为用户打造流畅、互动性强的网页体验。
33 4
|
3天前
|
移动开发 HTML5
这些年没来得及学习的一些 HTML5 标签
【9月更文挑战第16天】HTML5 引入了许多新标签,增强了网页的功能与便利性。这些标签包括结构标签如 `&lt;header&gt;`(定义页眉)、`&lt;footer&gt;`(定义页脚)、`&lt;nav&gt;`(定义导航链接)、`&lt;section&gt;`(定义文档节)和 `&lt;article&gt;`(定义独立内容),以及多媒体标签 `&lt;audio&gt;` 和 `&lt;video&gt;`,用于播放音频和视频。此外,还有表单相关标签,如 `&lt;datalist&gt。
HTML中font标签用法
这篇文章详细介绍了HTML中`<font>`标签的用法,包括如何分别设置字体风格(`font-style`)、字体粗细(`font-weight`)、字体大小(`font-size`)和字体类型(`font-family`),并通过实例代码演示了如何综合使用这些属性来定义文本的字体样式。
HTML中font标签用法