关于HTML5标签的基础知识

前言

一、标签学习

1.标题标签

2.段落标签

3.换行标签：

4.水平线标签

二、文本格式化标签

1.介绍

2.图片标签

3.路径

4.音频标签

5.视频标签

三、链接标签

1.介绍

2.target属性

前言

看网上视频写的HTML笔记

上一篇文章末写了标签的更基本内容这里接着写笔记

一、标签学习

1.标题标签

代码：h系列标签

<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

语义：1~6级标题，重要程度依次递减

进入vscode：输入h1回车自动生成格式

特点：

文字都有加粗
文字都有变大，并且从h1->h6逐渐变小
独占一行

2.段落标签

代码：我是一段文字

语义：段落

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>标题</title>
</head>
<body><p>电吉他是现代科学技术的产物，从外型到音响都与传统的吉他有着明显的差别。琴体使用新硬木制成，配有音量、音高调节器(琴钮)以及颤音结构(摇杆)等装置。配合效果器的使用，电吉他有很强的表现力，在现代音乐中有很重要的位置。现在多用于歌曲伴奏。</p><p>1920至1930年间，有人试着将不同的pick-up 拾音器装在吉他上。 rowe-deamond公司第一个发明出可以夹在吉他音孔上的拾音器，但真正发展出“电吉他”的应属Gibson。早期“空心电吉他”只是将一个拾音器装在有着拱形面板</p>
</body>
</html>

vscode中查看->自动换行:可以将上面很长的文字换行不至于像上面那样很长一截

特点：

段落之间有空隙
独占一行

3.换行标签：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>标题</title>
</head>
<body><p>电吉他是现代科学技术的产物<br>从外型到音响都与传统的吉他有着明显的差别。琴体使用新硬木制成，配有音量、音高调节器(琴钮)以及颤音结构(摇杆)等装置。配合效果器的使用，电吉他有很强的表现力，在现代音乐中有很重要的位置。现在多用于歌曲伴奏。</p><p>1920至1930年间，有人试着将不同的pick-up 拾音器装在吉他上。 rowe-deamond公司第一个发明出可以夹在吉他音孔上的拾音器，但真正发展出“电吉他”的应属Gibson。早期“空心电吉他”只是将一个拾音器装在有着拱形面板</p>
</body>
</html>

4.水平线标签

代码：<hr>

特点：单标签，在页面中显示一条水平线。

<body><h1>文章标题</h1><hr><p>电吉他是现代科学技术的产物<br>从外型到音响都与传统的吉他有着明显的差别。琴体使用新硬木制成，配有音量、音高调节器(琴钮)以及颤音结构(摇杆)等装置。配合效果器的使用，电吉他有很强的表现力，在现代音乐中有很重要的位置。现在多用于歌曲伴奏。</p><p>1920至1930年间，有人试着将不同的pick-up 拾音器装在吉他上。 rowe-deamond公司第一个发明出可以夹在吉他音孔上的拾音器，但真正发展出“电吉他”的应属Gibson。早期“空心电吉他”只是将一个拾音器装在有着拱形面板</p>
</body>

二、文本格式化标签

1.介绍

场景：需要让文字加粗，下划线，倾斜，删除线等效果。

代码：

标签	说明
b	加粗
u	下划线
i	倾斜
s	删除线

标签	说明
strong	加粗
ins	下划线
em	倾斜
del	删除线

语义：下边突出重要性的强调语境

eg：

    <b>加粗</b><br><strong>jiacu</strong>

可以看出和视觉上没区别，只是strong更有强调语义。

2.图片标签

场景：网页中显示图片

代码：<img src=" " alt=" ">

特点：

单标签
img标签需要展示对应的效果，需要借助标签的属性进行设置。

src属性：

目标图片的路径
注意点：当前网页和图片在同一文件夹中，路径直接写目标图片的名字即可。其余情况后面做介绍。
属性之间必须以空格隔开
属性之间没有顺序之分

  <img src="电吉他.jfif">

这是在代码文件目录下。

图片标签的alt属性

属性名：alt

属性值：替换文本

（当图片加载失败时，才显示alt文本，成功时不会显示）

<body><img src="电吉他q.jfif" alt="elec guitar">
</body>

图片标签的title属性

属性名：title

属性值：提示文本

（当鼠标悬停时，才显示的文本）

注意点：title属性不仅仅可以用于图片标签

<body><img src="电吉他.jfif" alt="elec guitar" title="这是title文字鼠标悬停显示">
</body>

width和height属性

属性名：width和height

<body><img src="data:image/guitar.jpeg">
</body>

属性值：宽度和高度

注意点：

如果只设置width或height，图片等比例改变，都设置则变形。

3.路径

绝对路径（了解）：目录下的绝对位置，可直接达到目标位置，通常从盘符开始的路径。

相对路径（常用）：从当前文件（html）开始找目标文件（eg：gjf）的工程。

同级目录：way1：<img src="目标图片.gif"> way2:<img src="./目标图片.gif">
下级目录：目标文件在下级目录。<img src="data:images/目标图片.gif">

<body><img src="data:image/guitar.jpeg">
</body>

3.上级目录：目标文件在上级目录 <img src="../目标图片.gif">

组合使用：

4.音频标签

代码：<audio src="./music.mp3" controls></audio>

常见属性：

属性名	功能
src	音频的路径
controls	显示播放的控件
autoplay	自动播放（一些浏览器不支持）
loop	循环播放

<body><audio src="./music.mp3" controls loop></audio>
</body>

注意点：音频标签支持三种格式：MP3，Wav，Ogg

5.视频标签

代码：<video src="./video.mp4" controls></video>

常见属性：

属性名	功能
src	视频的路径
controls	显示播放的控件
autoplay	自动播放（谷歌浏览器中需配合muted实现静音播放）
loop	循环播放

ps:若视频打不开，可能问题：video支持的音频流是mp4a，视频流是H264，你需要用格式工厂软件设置。

注意点：

视频目前支持三种格式：MP4，WebM，Ogg

三、链接标签

1.介绍

代码：<a href="./目标网页.html">超链接</a>
特点：双标签内部可以包裹内容，如果需要a标签点击之后去指定界面，需要设置a标签的href属性
```
<body><a href="https://www.baidu.com/">跳转到百度</a> <a href="./图片标签.html">跳吖</a>
</body>
```
当开发初期，不知道跳转地址时，href的值书写#（空链接）

2.target属性

属性名：target
属性值：目标网页的打开形式

取值	效果
_self	默认值，在当前窗口中跳转（覆盖原网页）
_blank	在新窗口跳转（保留原网页）

eg：<a href="https://www.baidu.com/" target="_blank">跳转到百度</a>

HTML标签基础知识相关推荐

css点击a标签显示下划线_好程序员HTML5培训教程-html和css基础知识
好程序员HTML5培训教程-html和css基础知识,Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. Css ...
【重识 HTML + CSS】网页基础知识、基本 HTML 标签
重识 HTML + CSS 网页的基础知识网页的显示过程缓存(cache)技术浏览器内核常用 HTML 元素 DOCTYPE 文档说明 html 元素:根元素 lang 属性 head 元素: ...
RFID标签的基础知识（3）--了解芯片（之超高频标签芯片篇）
RFID标签的基础知识(3)--了解芯片(之超高频标签芯片篇)) 前言一.如何认识芯片? 1. 1 怎么找芯片资料? 1. 2 芯片资料怎么看? 二.我认识的芯片 1.Alien(美国意联科技公司( ...
奔跑的akuan01:HTML建站的基础知识和HTML标签
日期 20180710 今天的学习总用时:5h 今天学习的目标是什么:学习完day1,看完html标签和web建站的基础常识哪些东西今天了解得比较透彻:web架构,一个完整的页面渲染,浏览器发送给服 ...
HTML第一章 (WEB基础知识、 HTML入门、HTML的语法规则、HTML常用标签汇总、图片与超链接、HBuilder的快捷键)
目录一.WEB基础知识二.HTML入门三.HTML的语法规则四.HTML标签五.图片与超链接六.HBuilder的快捷键每日一句一.WEB基础知识我们可以做什么? WEB前端大前端 ...
HTML5的基础知识的梳理及常用标签
HTML5的基础知识的梳理及常用标签 1.HTML5的介绍前端:展示页面.与用户交互 - HTML 后端:数据的交互和传递 - JavaEE/JavaWeb 1.前端开发的工作模式网页的组成部分( ...
Day01_网页开发基础知识、HTML概述、HTML标签
01.01_网页开发基础知识代码编写工具 python PyCharm Subline iPython... HTML HBulider Dreamweaver WebStorm Eclipse.. ...
前端学习（初识HTML 上）——基础知识和基本标签
前端学习之初识HTML 一.HTML基础知识 1.html定义 2.html特点 3.html标签 4.html基础结构 (1)<head></head>中的<meta& ...
html中table标签、tr标签、th标签、td标签的基础知识
html中table标签.tr标签.th标签.td标签的基础知识表格的结构表格的基本标签表格标签的基本属性 table标签的基本属性 tr标签的基本属性 th和td标签的基本属性表格高级样式设 ...

HTML标签基础知识

前言

一、标签学习

1.标题标签

2.段落标签

3.换行标签：<br>

4.水平线标签

二、文本格式化标签

1.介绍

2.图片标签

3.路径

4.音频标签

5.视频标签

三、链接标签

1.介绍

2.target属性

HTML标签基础知识相关推荐

最新文章

热门文章