HTML标签

白灵一

已于 2022-07-20 19:33:48 修改

阅读量125

点赞数

文章标签： html 前端

于 2022-06-30 14:48:25 首次发布

本文链接：https://blog.csdn.net/m0_70190404/article/details/125481321

版权

本文详细介绍了HTML的基础标签和用法，包括标题标签、段落与换行、文本格式化、图像、超链接、表格、列表、表单、框架、特殊字符、多媒体元素如音频和视频的使用。此外，还提到了内联框架iframe、框架frame以及画布Canvas和SVG的区别。内容涵盖了HTML中常用的元素和属性，是学习HTML的基础教程。

摘要由CSDN通过智能技术生成

标签（一）

1.标题标签

<h1>~<h6>共六级

格式：<h1>一级标题<h1>

2.段落和换行标签

<p>段落</p> 一个p标签表示一个段落

<br /> 强制换行

3.文本格式化标签

双标签：strong/b 表示加粗（strong语义更强些）em/i 表示倾斜（em语义更强） del/s 表示删除线（常用del） ins/u 表示下划线（常用ins）

4.<div>和<span>标签没有语句，可视为盒子，用来装东西

div表示分割，分区。一行只能放一个<div>

span意味跨度，跨距。一行能放多个个<span>

5.图像标签

图片和网页文件必须放到一起才可以显示

格式：<img src="图片路径">

相对路径：1.同一级目录下src="img.png" 2.下一级路径src="img/img.png" 3.上一级路径src="../img.png"

绝对路径：1.本地图片 “\” 2.网上路径“/”

src为<img>的必须属性；

其他非必须属性有：

alt替换属性，图片显示不出时，可以出现文字；
title属性，提示文字，鼠标放在图像上所显示的文字。
width设置图像的宽度像素
height设置图像的高度像素
border设置图像的边框粗细

6.超链接

外部链接 <a herf="跳转目标" target="用于指定链接页面的打开方式（非必须属性）">文本图像等</a>
target="_self"默认选择在此页面上打开，“_blank”新窗口打开属性
内部链接 <a href="index.xml">内部简介</a>
空连接 <a href="#">空连接</a>
下载链接<a href="index.xml">内部简介</a>
网页元素的连接，如文本，图片，视频，表格等
*锚点链接在链接文本的href属性中，设置属性值为“#名称”的形式，如<a href="#two">第二集</a>
目标位置标签需要添加一个id属性如:<h3 id = "two">第二集简介</h3>

特殊字符

标签（二）

表格标签

（1）用于展示数据

（2）基本语法：表格，行，单元格（表格结构标签thead定义表格的头部，必须含有tr和tbody让表格结构更加清晰）

<table>

<thead><tr> <th>作者</th> <th>作品</th> </tr> //表头单元格th 居中及加粗 </thead>

<tbody> <tr> <td>张嘉佳</td> <td>云边有个小卖部</td></tr> </tbody>

</table>

可以写在table中的属性

2.合并单元格

（1）跨行合并：rowspan="合并单元格的个数" 目标单元格：最上侧单元格写合并代码，其他的单元格删除即可。

（2）跨列合并：colspan="合并单元格的个数" 目。标单元格：最左侧单元格写合并代码，其他的单元格删除即可。

2.列表标签

（1）无序列表*

<ul>中只能放<li> ，<li>中什么都可以放

<ul>

</ul>

（2）有序列表

<ol>

</ol>

（3）自定义列表*

<dl>中只有<dt><dd>

<dl>

</dl>

3.表单标签（常见于注册页面）

目的为了收集用户信息

组成部分：表单域（form），表单控件/元素，提示信息。

表单元素

input 输入表单元素

input获取输入信息 <input type="属性值">

<input>表单属性（除了type外）

（lable标签）用于绑定一个表单元素，当点击<lable>标签内的文本时，浏览器会自动将光标转到表单相应元素上。增加了用户体验。

2.select下拉表单元素

3.textarear文本域元素（此属性实际开发不使用）可以写大段文本内容。

标签（三）

1、框架

（1）、内联框架 iframe

iframe 用于在网页内显示网页。

<iframe src="demo_iframe.htm" width="200" height="200px" frameborder="0" ></iframe>

上述代码：内联页面的宽度为200px, 宽度200px, frameborder为0表示删除边框。

（2）、框架 frame

通过使用框架，可以在同一个浏览器窗口中显示不止一个页面。

有垂直框架（垂直方向显示三个页面）

<html>

<frameset cols="25%,50%,25%">

  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

</frameset>

</html>

和水平框架（水平方向显示三个页面）

<html>

<frameset rows="25%,50%,25%">

  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

</frameset>

</html>

注意：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！

但是当需要添加包含一段文本的<noframes> 标签时，就需要该标签包含<body></body> 标签，并且这段文本要放在<body></body> 标签里。

<html>

<frameset cols="25%,50%,25%">
  <frame src="https://www.w3school.com.cn/">
  <frame src="./h5and_h/practive3(表单).html" />
  <frame src="./h5and_h/practive2(表格).html">

  <noframes>

  <body>

    您的浏览器无法处理框架！
  </body>

  </noframes>

</frameset>

</html>

2、常用实体

HTML 中的预留字符必须被替换为字符实体。 如常见的"<"和">"这些字符出现会被当成标签。

代码中要出现"<" 时，需要改为 &lt或者 &#60 ;

3、画布Canvas 和 SVG

（1）、画布 Canvas 元素用于在网页上绘制图形。

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

（2）、SVG

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准

SVG 直接嵌入 HTML 页面

具体学习路径SVG 教程 (w3school.com.cn)

（3）、两者对比

SVG 是一种使用 XML 描述 2D 图形的语言。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

不适合游戏应用

Canvas 通过 JavaScript 来绘制 2D 图形。

Canvas 是逐像素进行渲染的。

在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

最适合图像密集型的游戏，其中的许多对象会被频繁重绘

4、媒体

多媒体元素元素也拥有带有不同扩展名的文件格式，比如 .swf、.wmv、.mp3 以及 .mp4。

WAVE 是因特网上最受欢迎的无压缩声音格式，所有流行的浏览器都支持它。

MP3 是最新的压缩录制音乐格式。

插件（Plug-in）是扩展浏览器标准功能的计算机程序。

object 元素

定义 HTML 文档中的嵌入式对象；它旨在将插件（例如 Java applet、PDF 阅读器和 Flash 播放器）嵌入网页中，但也可以用于将 HTML 包含在 HTML 中。（h4的也可以使用）

<object width="100%" height="500px" data="snippet.html"></object>

embed元素

也可定义了 HTML 文档中的嵌入式对象。<embed> 元素没有结束标记。它无法包含替代文本。

<embed width="100%" height="500px" src="snippet.html">

音频 audio

前面两个元素也可以定义音频；

存在各个版本浏览器及h4不可使用；最好的html解决办法：

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>

使用了两个不同的音频格式。HTML5 <audio> 元素会尝试以 mp3 或 ogg 来播放音频。如果失败，代码将回退尝试 <embed> 元素。

向网站添加音频最好的方法 --雅虎的媒体播放器

使用方法：HTML 音频 (w3school.com.cn)

视频 video

前面两个元素也可以定义视频；

HTML 中播放视频也不容易，需要所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放。

<video> 标签的作用是在 HTML 页面中嵌入视频元素。

最好的html解决办法：  HTML 5 + <object> + <embed>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

使用了 4 中不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到 <embed> 元素。

HTML 中显示视频的最简单的方法 -- 使用优酷等视频网站

使用方法： HTML 视频 (w3school.com.cn)

附：<source> 标签可以同时指定多个音频视频格式（为了兼容）；

<track> 标签为诸如 video 元素、audio元素之类的媒介规定外部文本轨道。用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。如:字幕、屏幕阅读器说明和主题等。