HTML基础——常用标签

Gimm
278 阅读5分钟

HTML标准骨架

<!doctype html><!-- HTML5文档类型声明  -->
<html lang="en"><!-- lang定义当前网页显示的主语言，en为英文，zh为中文 -->

<head>
    <meta charset="UTF-8"><!-- 字符设置是必须的，否则极大可能引起网页乱码。一般情况下，统一使用 "UTF-8" 编码，  -->
    <title>Title</title>
</head>

<body>
</body>

</html>

HTML常用标签记录

1.标题标签h1-h6

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

单词 head 的缩写，意为：头部、标题。

2.段落标签p

<p>我是一个段落标签</p>

单词 paragraph 的缩写，意为：段落。

3.换行标签br

<br>

单词 break 的缩写，意为：打断、换行。

4.分割线标签hr

<hr>
<!-- 某些时候需要对内容块进行分割时会用到分割线标签 -->

注意：实际开发中并不常用 hr 作为分割线，而是使用 CSS 盒子模型中的边框来实现分割线效果，或是利用一个空盒子设置长宽高及背景颜色来实现分割线效果。

5.文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示。

语义标签
加粗<strong> </strong> 或 <b> </b>
倾斜<em> </em> 或 <i> </i>
删除线<del> </del> 或 <s> </s>
下划线<ins> </ins> 或 <u> </u>

注意：<em> 标签不只是单纯的用于倾斜文本，其核心的意义在于对元素进行强调！所以在后期的开发中可以把一些特殊性、强调性的元素放在 em 标签中，然后再对 em 这个盒子进行样式设置，这比把其放入其他盒子（如：span）中要更合理，同理 <strong> 标签页适合放一些重点强调的元素。

6.div和span标签

<div> 和 <span> 是没有语义的，它们就是两种盒子，用来对网页进行布局和装其他内容。

<div>这是头部</div>
<span>今日价格</span>

div 是 division 的缩写表示：分割、分区。

span 意为：跨度、跨距。

特点：

  • <div> 标签用来布局，一行只能放一个 <div>，大盒子
  • <span> 标签用来布局，一行上可以放多个 <span>，小盒子

7.图像标签img

<img src="图像URL">

单词 image 的缩写，意为图像

src 是 <img> 标签的必须属性，它用于指定图像文件的路径和文件名。

URL 是 统一资源定位符（通俗理解：地址、网址）。

所谓属性：简单理解就是属于这个图像标签的特性。

图像标签的其他属性：

属性属性值说明
src图片路径必须属性
alt文本替换文本，图像显示失败时显示（为了提高 SEO 及适配屏幕阅读器，建议都把 alt 写上）
title文本提示文本，鼠标放到图片上，显示的提示文字
width像素设置图像的宽度（了解，后面通过 CSS 设置）
height像素设置图像的高度（了解，后面通过 CSS 设置）
border像素设置图像的边框粗细（了解，后面通过 CSS 设置）

图像标签的注意点：

  • 图像标签可以同时拥有多个属性（其它标签也是同理）
  • 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开（其它标签也是同理）
  • 属性均采取键值对的格式，即：key="value" 的格式，属性="属性值"
  • 设置图像的宽度与高度时：一般设置其中之一便可，另外一个会自动按比例适配
  • 设置宽高时，可以使用百分数作为值，此时图片大小会以当前父元素的大小为基础进行比例缩放，这样做的好处在于当父元素改变大小时，图片也会随比例同等缩放

路径

  • 相对路径

相对路径：以引用文件所在位置为参考基础，而建立出目录路径。

相对路径分类符号说明
同一级路径.如：<img src="baidu.png" />
下一级路径/如：<img src="image/baidu.png" />
上一级路径../如：<img src="../image/baidu.png" />
  • 绝对路径

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

如 Windows 系统的绝对路径：D:\web\img\logo.png

  • 网络地址

    https://github.com/JERRY-Z-J-R/JERRY-Z-J-R/blob/main/mark-img/readme.gif

注意：

  • 相对路径为 /（正斜杆），绝对路径为 \（反斜杆）(Windows)
  • 实际开发中建议使用相对路径或网络地址（都是 / 正斜杆）

8.超链接标签a

<a href="跳转目标" target="目标窗口的弹出方式">文本、图像或其他内容</a>

单词 anchor 的缩写，意为：锚。

属性作用
href用于指定链接目标的 url 地址，（必须属性）当标签应用 href 属性时，它就具有了超链接的功能
target用于指定链接页面的打开方式其中 _self 在当前页面打开的方式（为默认值），_blank 在新窗口中打开的方式

链接分类：

  • **外部链接：**例如：<a href="http://www.baidu.com">百度</a>

  • **内部链接：**网站内部页面之间相互链接，直接链接内部页面名称即可，例如： <a href="index.html">首页</a>

  • **空链接：**如果当时没有确定链接目标时， <a href="javascript:void(0)">首页</a>"，当用户点击链接时，void(0) 计算为 0，但 Javascript 上没有任何效果

  • **下载链接：**如果 href 里面地址是一个文件或者压缩包（前提：路径包含文件类型后缀名，如：.exe、.zip 等），便会下载这个文件

  • **网页元素链接：**在网页中的各种网页元素，如：文本、图像、表格、音频、视频等都可以添加超链接

  • **锚点链接：**点击链接，可以快速定位到当前页面中的某个位置

    • 在链接文本的 href 属性中，设置属性值的 #名字 的形式，如：<a href="#two">第2集</a>
    • 找到目标位置标签（此处以 h3 标签为例），里面添加一个 id属性="刚才的名字"，如：<h3 id="two">第2集介绍</h3>

9.特殊字符

在 HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。

特殊字符描述字符的代码
空格符&nbsp;
<小于号&lt;
>大于号&gt;
&和号&amp;
±正负号&plusmn;
×乘号&times;
÷除号&divide;
²上标&sup2;

10.媒体标签

音频 <audio src="music.mp3" controls autoplay loop></audio>

视频 <video src=""></video>

controls显示播放控件 autoplay自动播放 loop循环播放

avatar
文章
阅读
粉丝