HTML 标签大全-1.基础和文字格式

HTML 标签大全

  • 介绍html基础标签和用法。

基础

  • <!DOCTYPE> 定义文档类型。
  • <html> 定义一个 HTML 文档
  • <title> 为文档定义一个标题
  • <body> 定义文档的主体
  • <h1> to <h6> 定义 HTML 标题
  • <p> 定义一个段落
  • <br> 定义简单的折行。
  • <hr> 定义水平线。
  • <!–…–> 定义一个注释

代码示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>代码示例</title>
</head>
<body>

  <!--一个注释-->

  <!--<h1> to <h6>示例-定义 HTML 一个	-->
  <h1>我的第一个标题</h1>
  <h2>我的第一个标题</h2>
  <h3>我的第一个标题</h3>
  <h4>我的第一个标题</h4>
  <h5>我的第一个标题</h5>
  <h6>我的第一个标题</h6>

  <!-- <hr>示例-定义水平线。	-->
  <hr>	

  <!-- <br>示例-定义简单的折行	-->
  <br>。
  
  <!-- <p>示例-定义一个段落	-->
  <p>我的第一个段落。</p>
 
</body>
</html>

文字格式

  • <abbr> 定义一个缩写。
  • <address> 定义文档作者或拥有者的联系信息。
  • <b> 定义粗体文本。
  • <bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置。
  • <bdo> 定义文本的方向。
  • <blockquote> 定义块引用。
  • <cite> 定义引用(citation)。
  • <code> 定义计算机代码文本。
  • <del> 定义被删除文本。
  • <dfn> 定义定义项目。
  • <em> 定义强调文本。
  • <i> 定义斜体文本。
  • <ins> 定义被插入文本。
  • <kbd> 定义键盘文本。
  • <mark> 定义带有记号的文本。
  • <meter> 定义度量衡。仅用于已知最大和最小值的度量。
  • <pre> 定义预格式文本
  • <progress> 定义运行中的任务进度(进程)。
  • <q> 定义短的引用。
  • <rp> 定义不支持 ruby 元素的浏览器所显示的内容。
  • <rt> 定义字符(中文注音或字符)的解释或发音。
  • <ruby> 定义 ruby 注释(中文注音或字符)。
  • <s> 定义加删除线的文本。
  • <samp> 定义计算机代码样本。
  • <small> 定义小号文本。
  • <strong> 定义语气更为强烈的强调文本。
  • <sub> 定义下标文本。
  • <sup> 定义上标文本。
  • <time> 定义一个日期/时间
  • <u> 定义下划线文本。
  • <var> 定义文本的变量部分。

代码示例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>代码示例</title> 
</head>
<body>

<!-- abbr定义一个缩写,鼠标点上会弹出提示信息 -->
<p> <abbr title="鼠标点上会弹出提示信息">我和他</abbr> 是中国人.</p>
<hr>

<!-- address定义文档作者或拥有者的联系信息。 -->
<address>
   <a href="mailto:test@demo.com">发邮件</a>.<br> 
  电话:<br>
  13840983215<br>
  联系人:<br>
  小李
</address>
<hr>

<!-- b	定义粗体文本。 -->
<p>普通的文本- <b>加粗文本</b>。</p>
<hr>

<!-- bdi允许您设置一段文本,使其脱离其父元素的文本方向设置。 -->
<ul>
 <li>用户 <bdi>小李</bdi>: 在</li>
 <li>用户 <bdi>小明</bdi>: 不在</li>
</ul>
<hr>

<!-- bdo	定义文本的方向。 -->
<p>从左到右显示。</p>  
<p><bdo dir="rtl">从右到左显示。</bdo></p> 
<hr>

<!-- blockquote定义块引用。 -->
<h1>关于我们</h1>
<p>公司网站:</p>
<blockquote cite="http://www.baidu.com">
“百度”二字,来自于八百年前南宋词人辛弃疾的一句词:众里寻他千百度。这句话描述了词人对理想的执着追求。1999年底,身在美国硅谷的李彦宏看到了中国互联网及中文搜索引擎服务的巨大发展潜力,抱着技术改变世界的梦想,他毅然辞掉硅谷的高薪工作,携搜索引擎专利技术,于 2000年1月1日在中关村创建了百度公司。
</blockquote>
<hr>

<!-- cite定义引用(citation)。 -->
<cite>我的字体和其他的字不一样</cite> 我是其他的字.
<hr>

<!-- code	定义计算机代码文本。 -->
  <code>一段代码 print("How are you?")</code>
  <hr>

  <!-- del	定义被删除文本。 -->
  <p>我喜欢的食物是 <del>青菜</del> <ins>猪肉</ins>!</p>
  <hr>
  <!-- dfn定义定义项目。 -->
  <p> <dfn>定义项目</dfn> </p> 
  <hr>
  <!-- em	定义强调文本。 -->
  <p><em>文字被强调</em> </p>
  
  <hr>
  <!-- i	定义斜体文本。 -->
  <p>他吃了很多 <i>西瓜</i>, 因为他很口渴.</p>
  <hr>
  <!-- ins	定义被插入文本。 -->
  <p>我喜欢 <del>猪肉</del> <ins>水果</ins>!</p>
  <hr>
  <!-- kbd	定义键盘文本。 -->
  <p><kbd>键盘输入</kbd> </p>
  
  <hr>
<!-- 示例<mark> 	定义带有记号的文本。	--> 
  <p>明天别忘了 <mark>八点</mark> 起床.</p>
  <hr>
<!-- 示例<meter> 	定义度量衡。仅用于已知最大和最小值的度量。	--> 
  <p><meter value="20" min="0" max="100">2 out of 10</meter><br>
    <meter value="0.4">40%</meter> </p>  
  <hr>
<!-- 示例<pre>	定义预格式文本	--> 
  <pre>
    此例演示如何使用 pre 标签
    对空行和 空格
    进行控制
    </pre>
  <hr>

<!-- 示例<progress> 	定义运行中的任务进度(进程)。	-->
  <p> <progress value="30" max="200"></progress> </p>
 
  <hr>
<!-- 示例<q>	定义短的引用。	--> 
  <p>如下文字是个引用:
    <q>这里的文字是引用.</q>
    这里不是引用.</p>
  <hr>

<!-- 示例<ruby> <rp> <rt> (中文注音或字符)。	--> 
  <p>
    <ruby>
      汉 <rp>(</rp><rt>Han</rt><rp>)</rp>
      字 <rp>(</rp><rt>zi</rt><rp>)</rp>
    </ruby>
</p>
<hr>

<!-- 示例<s>	定义加删除线的文本。	--> 
  <p><s>我的文字有删除线.</s></p>
  <p>我的文字无删除线.</p>
  <hr>
<!-- 示例 <samp>	定义计算机代码样本。	-->
  <samp>计算机代码样本</samp>
  <hr>
<!-- 示例<small>	定义小号文本。	--> 
  <p> 我是普通字号文本.</p>
  <p><small> 我是小号文本.</small></p>
  <hr>
<!-- 示例<strong>	定义语气更为强烈的强调文本。	--> 
  <strong>这是加粗文本</strong>
  <hr>
<!-- 示例<sub>	定义下标文本。	--> 
  <p>这句话包含 <sub>下标</sub>文本。</p>
  <hr>
<!-- 示例<sup>	定义上标文本。	--> 
  <p>这句话包含 <sup>上标</sup> 文本。</p>
  <hr>
<!-- 示例<time> 	定义一个日期/时间	--> 
  <p>我们在每天上午 <time>8:00</time> 开始上课。</p>
 
  <p>我在 <time datetime="2023-02-14">情人节</time> 有个约会。</p>
  <hr>
<!-- 示例<u>	定义下划线文本。	--> 
  <p>这是一个 <u>下划线文本</u>.</p>
  <hr>
<!-- 示例<var>	定义文本的变量部分。	--> 
  <var>这是一个</var>
  <hr>
<!-- 示例<wbr> 	规定在文本中的何处适合添加换行符。	--> 
<p>后面会发生换行 <wbr>这里换行<wbr>这里也换行。</p>
<hr>
</body>
</html>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

乐地课堂

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值