HTML部分常用标签示例

最新推荐文章于 2023-05-10 14:34:34 发布

进击的小陈

最新推荐文章于 2023-05-10 14:34:34 发布

阅读量419

点赞数

分类专栏：自动化文章标签： html html5 css

本文链接：https://blog.csdn.net/c_xiazai12345/article/details/120603266

版权

自动化专栏收录该内容

21 篇文章 4 订阅

订阅专栏

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。

声明，声明必须在html标签之前，是html文本的第一行，但它并不是html标签。注意，只有给文本写了声明，这样浏览器才能获知文档类型。正确的呈现html界面。声明html格式如下( 声明不是一对，只写一次)：

<!DOCTYPE html>

注释，被注释的信息，是不会显示到浏览器当中，注释标签的形式如下：

<!-- 要注释的内容 -->

比如我在txt文档中写下如下代码，并保存为html格式，运行后，效果如下：
在这里插入图片描述
*超链接标签，它的一个重要属性是herf属性。基础使用格式：

<a herf="超链接地址">描述</a>

效果如下，点击百度超链接跳转到百度界面，但是要注意，点击超链接默认都是在当前界面刷新，如果要打开新的页签，则需要target指定：
在这里插入图片描述
比如下面html文件，点击超链接，就会在新的页签打开百度界面：

使用超链接标签时，还有其他许多功能，比如download, hreflang, media, rel, target 以及 type 属性，但使用这些属性的前提是要使用herf属性。这里就不在做详细介绍了。

缩写标签，格式如下：

<abbr title="要缩写的内容">缩写</abbr>

当鼠标放置在缩写上时，会显示出全称：
在这里插入图片描述

首字母缩写标签：

<acronym title="英文字母">首字母缩写</acronym>

效果：
在这里插入图片描述

标签粗体

 <b>文本内容</b>

效果：
在这里插入图片描述

文本为斜体标签 i：

<i>...</i>

效果：
在这里插入图片描述

定义文本的输出方向。rtl为从右往左输出，ltr为从左往右输出：

<bdo dir="rtl">
输出内容
</bdo>

效果：
在这里插入图片描述

body标签，文档的主题，包含文档的全部内容

<body>
文档内容
</body>

效果：
在这里插入图片描述

br标签，简单换行符，插入一个空行，没有结束标签：

<br>

效果：
在这里插入图片描述

button，按钮标签

<button type="button">按钮名称</button>

效果：
在这里插入图片描述

table，定义表格标签。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

<table border="3">
<tr>
  <td></td>
  <td></td>
  <td></td>
</tr>
</table>

效果：
在这里插入图片描述

定义表格标题：
在这里插入图片描述
*dir，定义目录列表标签：

<dir></dir>

效果：
在这里插入图片描述

div标签，可以把文档分割为独立的、不同的部分。相互之间不受影响。

<div>段落1</div>
<div>段落2</div>

效果：
在这里插入图片描述

frame标签定义 frameset 中的一个特定的窗口（框架）。每个框架都可以设置不同的属性，比如border等。需要注意的是，frame标签在html中是没有结束标签的，但在xhtml中需要正确的关闭。

  <frame src="窗口指向html路径">

效果：
在这里插入图片描述

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

<iframe>
...
</iframe>

标题h1 – h6

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

效果：
在这里插入图片描述

head标签，标记浏览器头部， head标签放在文档的开始处，紧跟在 html后面，并处于 body标签或 frameset标签之前。title 定义文档的标题，是head标签的必须元素。

<head>
<title> HTML 页面标题</title>
</head>

效果：
在这里插入图片描述

header标签定义文档的页眉，即介绍信息。

<header>
...
</header>

效果：
在这里插入图片描述

hr标签，定义水平线
input标签，定义输入框,示例

<input type="输入类型" name="输入框标签名称" value="默认值">

效果：
在这里插入图片描述

table标签为 input 元素定义标注（标记）：
li标签定义列表项目。ol为有序列表，ul为无序列表。

<ol>
  <li>...</li>
  <li>...</li>
</ol>

<ul>
  <li>...</li>
  <li>...</li>
</ul>

效果：
在这里插入图片描述

nav定义导航部分超链接

<nav>
<a href="链接地址">名称</a>
...
</nav>

效果：
在这里插入图片描述

p标签定义段落

<p>段落内容</p>

在这里插入图片描述

进击的小陈

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML部分常用标签示例

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。声明，声明必须在html标签之前，是html文本的第一行，但它并不是html标签。注意，只有给文本写了声明，这样浏览器才能获知文档类型。正确的呈现html界面。声明html格式如下( 声明不是一对，只写一次)：<!DOCTYPE html>注释，被注释的信息，是不会显示到浏览器当中，注释标签的形式如下：<!-
复制链接

扫一扫