上一章 HTML 的框架标签

HTML 的内容标签

UX百科编辑部2024-01-05 发布
671人在学·0条笔记
收藏

2.3.1 一般文本格式标签

首先我们从最基本的文本类标签开始学起,这是最没有理解成本的标签类型。我们把常见的文本标签罗列出来大家看一看:

  • <h1> – <h6>:1级标题 – 6级标题
  • <p>:表示一个正文的段落
  • <b> :仅加粗文本字重,没别的意思
  • <strong>:加重文字权重和凸显,同时加粗
  • <i>:仅定义文字斜体,没别的意思
  • <em> :定义需要注意的文字,同时倾斜
  • <del>:定义删除线文字
  • <br/>:换行符,类似word中的换行效果

这些标签作为身份标识的作用想必不用介绍了,通常只要了解一点,h1 标签内部一般不用再包含一些标识文本的内容,而对于 p 标签来说就可以往下级添加其它标签配合。

比如一段文案:“超人老师 独家秘笈 上线啦,只要98,不用998,赶紧来参加!”,我们可以写成这样:

通过这种方法,我们对一个段落内容的文本就可以做出不同的语义调整,“独家秘笈” 我们强调这个关键字的权重,“98” 仅仅只是加粗它,“998” 我们则用删除线抹掉。

2.3.2 有序/无序列表标签

而在文本的段落类型里,还有一个重要的部分,就是列表。在正常我们打字编辑的时候,列表有两种,有序列表和无序列表,它们分别由 ul、ol 标签来标识。而仅仅定义一个列表是不够的,列表中还会包含对应的条目,所以它们中每个条目由 li 表示。

比如我们要创建一个 HTML CSS 课程的目录,作为一个有序列表(无序同理),它就可以这么写:

2.3.3 链接标签

链接我们上一节介绍过了,是 a 标签,可以通过 herf 属性指定线上网址或本地路径的方式进行跳转。而 a 标签内容的文字内容,则会变颜色以及多出下划线。

值得注意的是,链接是用来实现跳转功能的标签,而在我们的实际项目中,实现跳转的可不仅仅只有文字,还可能是整个段落,整个模块。

所以,使用这种效果的办法就是在这些内容的上级添加 a 标签,就可以实现超链接的跳转效果。

2.3.4 多媒体标签

多媒体内容就是一个页面中除了文字外的图片、音效、视频等内容,如下所示:、

  • <img>:图像标签,用来显示位图的标签
  • <audio>:音频标签,可以嵌入一些类似mp3的音频文件进行播放
  • <video>:视频标签,可以嵌入类似avi、wmv、mp4等主流格式的视频

这三个标签中,图像标签比较特殊,因为它也是一个不需要添加结束标签的特殊标签。想要正确应用这三个标签,就需要了解一个重要的属性 —— src。

这是一个用来指定多媒体文件地址的属性,只输入 img 标签,浏览器虽然知道这里应该放张图片,但具体是什么图,它不能凭空脑补出来,所以,我们要用 src 属性来指定具体目标。

这里就牵扯到下一个重要的知识点,链接类型:绝对链接、相对链接。

  • 绝对链接:比如链接到具体网址,比如 src=“supermancall.com/logo.png”
  • 相对链接:相对当前HTML文档的位置,比如 src=“/img/logo.png”

绝对链接比较好理解,就是每张图片的一个固定门牌号地址。而相对链接则是对方基于你当前位置的方位。我们可以尝试创建一个 HTML,然后在这个文档同级目录创建一个 img 文件夹,然后在里面添加素材中的 logo,再输入下方的代码,你就可以看见 img 文件夹中的 logo 被正常显示在浏览器中:

所以,这就是切图的作用,把页面图片导出,然后通过代码对它进行调用。当然,文件的地址你可以根据根目录随意更改,每一个 “/” 就代表一级目录,如果 img 下方还创建了一个目录的话,那么 src 的值就应该是 img / chil / logo.png。

如果你想控制它们的大小,就可以通过 height、width 两个属性,比如下面代码:

而 audio 和 video 两个标签,使用 src 的方法相同,只是它们有结束标签,且规则相对来说更复杂,因为对我们来说用的不多,所以暂且跳过。

2.3.5 表单标签

表单标签 form,类似我们去银行填写申请信息的申请单,是收集用户选填的一系列数据的标签。

一个完整的 form 标签就是一张清单本身,但上面是空白的,所以,我们要在表单里指定一系列我们需要收集的条目,比如姓名、手机号、地址等信息。

而收集的条目和列表类似,也要由其它标签来完成:

  • <input>:一个标准的输入元素,类型由属性指定,可以输入文本、密码等
  • <textarea>:一个多行文本输入框
  • <select>:定义下拉选项列表
  • <button>:表单执行的按钮,类似注册或登录按钮

对于表单来说,最常用的就是 input 标签了,它也没有结束标签。用 type 属性可以来指定这个输入元素是哪种类型,比如下面的情况:

  • < input type=”email”>:指定邮箱输入框
  • < input type=”password”>:指定密码输入框
  • < input type=”tel”>:指定手机号输入框
  • < input type=”date”>:指定日期选择空间
  • < input type=”button”>:表单内应用的按钮

再用个完整的例子来解释,比如我们要注册一个账号,那么填写账号的表单,代码可以这么表示:

表单是一个对前端来说非常重要的标签类型,可用的标签其实远远不止展示的这些,对于我们而言,只要对这些基础标签有认识,了解整个表单的功能即可。

671人在学·0条笔记
收藏
已学会
19人已学会
下一篇HTML 的布局标签
最后一部分,我们要介绍的,就是专门用来进行内容布局和定义结构的标签,主要包含: <div>:万能模块定义的标签, 用来组织不同的标签元素形成一个整体 <span>:行内内联元素,主要用来控制一些特殊的文本类型 <header>:页面的头部内容区域定义 <na...
本章笔记
仅看自己
logo