html各种标签

注释

<<!--这是HTML中的注释标签-->

加粗标签 strong和b

<p>Lorem ipsum dolor sit,<strong> amet consectetur adipisicing elit. Quis esse nulla, laudantium placeat dolorum dolores aspernatur quaerat atque nostrum inventore, ratione ut vel.</strong> Vitae enim <b>porro</b> rem maiores, et debitis?</p>

html文档标准格式

<!--这是HTML中的注释标签-->
<!DOCTYPE html>
<html>
<head>
<title>这是文章的标题</title>
</head>

<body>
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>

<p>正文内容</p>
</body>
</html>

HTML 短语

HTML <em> <strong> <dfn> <code> <samp> <kbd><var> <cite> 标签

定义和用法

以下元素都是短语元素。虽然这些标签定义的文本大多会呈现出特殊的样式,但实际上,这些标签都拥有确切的语义。

我们并不反对使用它们,但是如果您只是为了达到某种视觉效果而使用这些标签的话,我们建议您使用样式表,那么做会达到更加丰富的效果。

tag_em 把文本定义为强调的内容。
tag_strong 把文本定义为语气更强的强调的内容。
tag_dfn 定义一个定义项目。
tag_code 定义计算机代码文本。
tag_samp 定义样本文本。
tag_kbd 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
tag_var 定义变量。您可以将此标签与 < pre> 及 < code> 标签配合使用。
tag_cite 定义引用。可使用该标签对参考文献的引用进行定义,比如书籍或杂志的标题。

HTML标签参考手册

按功能类别排列 HTML 标签

按功能类别排列 HTML 标签
基础
标签 描述
<!DOCTYPE> 定义文档类型。
<html> 定义 HTML 文档。
<head> 定义关于文档的信息。
<title> 定义文档的标题。
<body> 定义文档的主体。
<h1> to <h6> 定义 HTML 标题。
<p> 定义段落。
<br> 定义简单的折行。
<hr> 定义水平线。
<!--...--> 定义注释。

-----------------------------------------------

格式化
标签 描述
<acronym> 定义只取首字母的缩写。HTML5 中不支持。请使用 <abbr> 代替。
<abbr> 定义缩写。
<address> 定义文档作者或拥有者的联系信息。
<b> 定义粗体文本。
<bdi> 定义文本的文本方向,使其脱离其周围文本的方向设置。
<bdo> 定义文字方向。
<big> 定义大号文本。HTML5 中不支持。请使用 CSS 代替。
<blockquote> 定义长的引用。
<center> 定义大号文本。HTML5 中不支持。请使用 CSS 代替。
<cite> 定义引用(citation)。
<code> 定义计算机代码文本。
<del> 定义被删除文本。
<dfn> 定义定义项目。
<em> 定义强调文本。
<font> 定义大号文本。HTML5 中不支持。请使用 CSS 代替。
<i> 定义斜体文本。
<ins> 定义被插入文本。
<kbd> 定义键盘文本。
<mark> 定义有记号的文本。
<meter> 定义预定义范围内的度量。
<pre> 定义预格式文本。
<progress> 定义任何类型的任务的进度。
<q> 定义短的引用。
<rp> 定义若浏览器不支持 ruby 元素显示的内容。
<rt> 定义 ruby 注释的解释。
<ruby> 定义 ruby 注释。
<s> 定义加删除线的文本。
<samp> 定义计算机代码样本。
<small> 定义小号文本。
<strike> 定义加删除线文本。HTML5 中不支持。请使用 <del><s> 代替。
<strong> 定义语气更为强烈的强调文本。
<sup> 定义上标文本。
<sub> 定义下标文本。
<template> 定义用作容纳页面加载时隐藏内容的容器。
<time> 定义日期/时间。
<tt> 定义打字机文本。HTML5 中不支持。请使用 CSS 代替。
<u> 定义下划线文本。
<var> 定义文本的变量部分。
<wbr> 定义可能的换行符。

-----------------------------------------------

表单和输入
标签 描述
<form> 定义供用户输入的 HTML 表单。
<input> 定义输入控件。
<textarea> 定义多行的文本输入控件。
<button> 定义按钮。
<select> 定义选择列表(下拉列表)。
<optgroup> 定义选择列表中相关选项的组合。
<option> 定义选择列表中的选项。
<label> 定义 input 元素的标注。
<fieldset> 定义围绕表单中元素的边框。
<legend> 定义 fieldset 元素的标题。
<isindex> 定义与文档相关的可搜索索引。HTML5 中不支持。
<datalist> 定义下拉列表。
<keygen> 定义生成密钥。
<output> 定义输出的一些类型。

-----------------------------------------------

框架
标签 描述
<frame> 定义框架集的窗口或框架。HTML5 中不支持。
<frameset> 定义框架集。HTML5 中不支持。
<noframes> 定义针对不支持框架的用户的替代内容。HTML5 中不支持。
<iframe> 定义内联框架。

-----------------------------------------------

图像
标签 描述
<img> 定义图像。
<map> 定义图像映射。
<area> 定义图像地图内部的区域。
<canvas> 定义图形。
<figcaption> 定义 figure 元素的标题。
<figure> 定义媒介内容的分组,以及它们的标题。
<svg> 定义 SVG 图形的容器。

-----------------------------------------------

音频/视频
标签 描述
<audio> 定义声音内容。
<source> 定义媒介源。
<track> 定义用在媒体播放器中的文本轨道。
<video> 定义视频。

-----------------------------------------------

链接
标签 描述
<a> 定义锚。
<link> 定义文档与外部资源的关系。
<nav> 定义导航链接。

-----------------------------------------------

列表
标签 描述
<ul> 定义无序列表。
<ol> 定义有序列表。
<li> 定义列表的项目。
<dir> 定义大号文本。HTML5 中不支持。请使用 CSS 代替。
<dl> 定义定义列表。
<dt> 定义定义列表中的项目。
<dd> 定义定义列表中项目的描述。
<menu> 定义命令的菜单/列表。
<menuitem> 定义用户可以从弹出菜单调用的命令/菜单项目。
<command> 定义命令按钮。

-----------------------------------------------

表格
标签 描述
<table> 定义表格
<caption> 定义表格标题。
<th> 定义表格中的表头单元格。
<tr> 定义表格中的行。
<td> 定义表格中的单元。
<thead> 定义表格中的表头内容。
<tbody> 定义表格中的主体内容。
<tfoot> 定义表格中的表注内容(脚注)。
<col> 定义表格中一个或多个列的属性值。
<colgroup> 定义表格中供格式化的列组。

-----------------------------------------------

样式和语义
标签 描述
<style> 定义文档的样式信息。
<div> 定义文档中的节。
<span> 定义文档中的节。
<header> 定义 section 或 page 的页眉。
<footer> 定义 section 或 page 的页脚。
<main> 定义文档的主要内容。
<section> 定义 section。
<article> 定义文章。
<aside> 定义页面内容之外的内容。
<details> 定义元素的细节。
<dialog> 定义对话框或窗口。
<summary><details> 元素定义可见的标题。
<data> 添加给定内容的机器可读翻译。

-----------------------------------------------

元信息
标签 描述
<head> 定义关于文档的信息。
<meta> 定义关于 HTML 文档的元信息。
<base> 定义页面中所有链接的默认地址或默认目标。
<basefont> 定义页面中文本的默认字体、颜色或尺寸。HTML5 中不支持。请使用 CSS 代替。

-----------------------------------------------

编程
标签 描述
<script> 定义客户端脚本。
<noscript> 定义针对不支持客户端脚本的用户的替代内容。
<applet> 定义嵌入的 applet。HTML5 中不支持。请使用 <embed><object> 代替。
<embed> 为外部应用程序(非 HTML)定义容器。
<object> 定义嵌入的对象。
<param> 定义对象的参数。

HTML(超文本标记语言)

初学者教程

HTML(超文本标记语言——HyperText Markup Language)是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果(如 CSS),或功能与行为(如 JavaScript)。

“超文本”(hypertext)是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网,并将其与他人创建的页面相链接,你就成为了万维网的积极参与者。

HTML 使用“标记”(markup)来注明文本、图片和其他内容,以便于在 Web 浏览器中显示。HTML 标记包含一些特殊“元素”如 ````````````````````![img](./)```````````````````` 等等等等。

HTML 元素通过“标签”(tag)将文本从文档中引出,标签由在“<”和“>”中包裹的元素名组成,HTML 标签里的元素名不区分大小写。也就是说,它们可以用大写,小写或混合形式书写。例如,标签可以写成,`` 或以任何其他方式。

下面的文章会帮助你更好地了解 HTML:

  • HTML 介绍

    如果您是 Web 开发新手,请务必阅读我们的 HTML 基础 文章来了解什么是 HTML 以及如何使用它。

  • HTML 教程

    关于如何使用 HTML 的文章,教程和完整的示例,查看我们的 HTML 学习区

  • HTML 参考

    在我们丰富的 HTML 参考 部分中,你可以找到在 HTML 中每一个元素和属性的详细信息。

我们的 HTML 学习区 含有许多富有特色的模块,学习者可以在没有任何先前经验的情况下从零开始,掌握 HTML。

  • HTML 介绍

    这一模块将为你打下基础,并为进一步的学习铺平道路。在这里,你将掌握一些重要的概念和语法,学习如何将 HTML 用于文本、如何创建超链接以及运用 HTML 去构建一个网页。

  • 多媒体与嵌入内容

    这个模块将带领你探索如何使用 HTML 在你的网页中包含多媒体内容,包括通过许多不同的方式嵌入图片,以及如何嵌入视频、音频甚至整个其他网页。

  • HTML 表格

    如何用可理解并易于访问的形式在网页中展示表格化数据一向都是个不小的挑战。这个模块涵盖了基本的表格标记,以及一些更复杂的特性,比如实现标题和总结等。

  • HTML 表单

    表单是构成 Web 世界的重要组成部分——它们提供了大量你所需要用来与网站进行交互所需的功能。比如注册、登录、发送评论反馈、购买商品等等。这个模块将引导你建立一个客户端/前端部分的表单。

  • 用 HTML 解决常见问题

    该部分提供了一些链接,它们指向那些你在构建 Web 页面的过程中最常见的问题的解决方法:如何处理网页标题、添加图片或视频、强调某些内容、建立基本的表单等。

高级主题

  • CORS 处理跨域图片

    通过搭配 crossorigin 属性和适当的 CORS 标头,在 ![img](./) 元素中定义的图片可以从外部来源加载并在 `` 元素中使用,就像是从本地源加载一样。

  • CORS 设置属性

    一些提供了对 CORS 的支持的 HTML 元素,比如 ![img](./)`` ,具有 crossorigin 元素属性/attribute(crossOrigin 对象属性/property),该属性能使你配置其跨域获取资源的请求。

  • HTML 中的焦点管理 (en-US)

    DOM 属性 activeElement 以及 DOM 方法 hasFocus() 可以帮助你跟踪并控制用户在网页中与各种元素的交互行为。

  • 使用 rel=”preload” 预加载页面内容 (en-US)

    `` 元素的 rel 属性的值 preload 允许你在 HTML 的 `` 部分声明一些(资源)获取请求,以指定那些在页面加载后即刻需要的资源。因此在浏览器的主渲染机制介入前,这些资源会在页面加载生命周期的早期阶段进行预加载。这样可以保证这些资源可被更早使用并减少阻塞页面初次渲染的可能性,从而提升性能。这篇文章提供了关于 preload 作用机制的基本指导。

参考

  • HTML 参考

    HTML 由元素组成,每个元素都可以被多个属性修饰。HTML 文档通过链接相互连接。

  • HTML 元素参考

    浏览完整的 HTML 元素列表。

  • HTML 属性参考

    HTML 元素都含有元素属性。这些额外的属性值可以通过各种途径对元素进行配置或调整其行为。

  • 全局属性

    全局属性可以在所有 HTML 元素上进行设置,包括那些没有在相关标准中出现的元素。这意味着即使这些元素使得文档并不符合 HTML5 标准,它们也必须允许这些属性。

  • 内联元素块级元素

    HTML 元素通常是”内联”或”块级”元素。一个内联元素仅会占用由定义它的标签所包裹起来的空间。而一个块级元素将会占用其父元素(容器)的全部空间,也就是创建一个“块”。

  • 链接类型

    在 HTML 中,各种各样的链接类型被用来确立和定义两个文档之间的关系。可以设置链接类型的链接元素包括 ````,和 ``

  • HTML 的 audio 与 video 元素所支持的媒体格式 (en-US)

    ```` 元素允许你播放音频和视频媒体。这些元素提供了一个浏览器原生的对于 Adobe Flash 和其他插件的替代品。

  • HTML 内容种类

    HTML 包含了几种内容,每种内容在特定的情景上下文中有效,而在其他上下文中无效。每种内容也指定了可以被它们包含的类别,以及可以或不可以在其中使用的元素。这里提供了一个关于这些类别的说明。

  • 怪异模式和标准模式

    关于怪异模式和标准模式的历史信息。

相关主题

  • 使用 CSS 为 HTML 元素应用颜色

    这篇文章涵盖了大多数使用 CSS 为 HTML 内容增加颜色的方式,并列举了 HTML 文档里哪些部分可以进行上色以及这一操作需要使用哪些 CSS 属性。它包含了一些示例,配色建构工具的链接,以及其他内容。

Demo

<!--这是HTML中的注释标签-->
<!DOCTYPE html>
<html>
<head>
<title>这是文章的标题</title>
</head>

<body>
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>

<p>Lorem ipsum dolor sit,<strong> amet consectetur adipisicing elit. Quis esse nulla, laudantium placeat dolorum dolores aspernatur quaerat atque nostrum inventore, ratione ut vel.</strong> Vitae enim <b>porro</b> rem maiores, et debitis?</p>
<p><em>Lorem ipsum dolor sit,</em> amet consectetur adipisicing elit. Architecto nobis nulla adipisci perferendis illum ea in rerum rem, vitae asperiores voluptas tempore veniam similique, esse modi. Ullam, magnam. Quas aspernatur dicta repudiandae incidunt magni autem voluptas quisquam perferendis velit consequatur! Velit in aliquam molestiae voluptatibus nam! Obcaecati eveniet facilis libero saepe accusamus deserunt consequatur corrupti pariatur. Eaque delectus fuga, sequi, dolor sunt velit non nesciunt, id iusto accusantium nisi harum quisquam consectetur accusamus. Quia laborum ducimus iusto, tenetur repellendus nam. Aspernatur voluptatem autem consequatur aliquam aliquid placeat earum recusandae magnam consequuntur sed maiores quia vel exercitationem, suscipit dicta, quo ab.</p>
<a href="https://www.baidu.com">测试a标签超链接</a>


<!--无序列表-->

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<!--有序列表-->
<ol>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
<li>List 5</li>
<li>List 6</li>
</ol>




<!--表格-->
<table>
<tr>
<th>name</th>
<th>age</th>
<th>sex</th>
<th>both</th>
<th>dead</th>

</tr>
<tr>
<td>Jan</td>
<td>18</td>
<td>男</td>
<td>2001</td>
<td>NOT FOUND</td>
</tr>
<tr>
<td>SAI</td>
<td>19</td>
<td>女</td>
<td>2000</td>
<td>NOT FOUND</td>
</tr>
<tr>
<td>ZM</td>
<td>20</td>
<td>女</td>
<td>2001</td>
<td>NOT FOUND</td>
</tr>
</table>


<table>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>

<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
</tr>
</table>

<br>
<br>
<hr>
<hr>
<br>

<!--表单-->
<form action="form.js" method="post">
<div>
<label>账号</label>
<input type="text" name="账号" placeholder="输入你的账号">
</div>
<div>
<label>密码</label>
<input type="text" name="密码" placeholder="输入你的密码">
</div>
<div>
<label>邮箱</label>
<input type="email" name="邮箱" placeholder="输入你的邮箱地址">
</div>
<input type="submit" name="submit" value="登录">

</form>
<br>
<button>这是个button按钮</button>

<!--插入图片-->

<img style="width: 100%;" src="https://cdn.jsdelivr.net/gh/fanygOfficial/cdn@img/img/acg.gy_34.jpg" alt="404 NOT FOUND"


</body>
</html>

更多的资料参考

https://www.w3school.com.cn/tags/tag_phrase_elements.asp

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/

https://developer.mozilla.org/zh-CN/docs/Web/HTML

资源参考

书籍推荐

<< Head First HTML与CSS >>

<< JavaScript高级程序设计 >>

<< Head First JavaScript程序设计>>

<< CSS权威指南 >>

https://developer.mozilla.org/zh-CN/docs/Learn/HTML

https://zh.learnlayout.com/

https://www.w3school.com.cn/