web前端开发之HTML标签汇总（1）

最新推荐文章于 2024-04-03 16:47:57 发布

奔跑的星黛露

最新推荐文章于 2024-04-03 16:47:57 发布

阅读量690

点赞数 2

分类专栏： web

本文链接：https://blog.csdn.net/Galaxy_Su/article/details/115144216

版权

HTML 标签示例语法前端开发

关键词由CSDN通过智能技术生成

web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

web前端开发之HTML标签汇总（1）

<h> 【1-6】（六种同类型的标题标签）（字体由大到小1->6）（加粗）

<h> 你好呀！</h>

<p> 段落标签（随着浏览器的页面变化）

<p>Here you can see another sub-heading.</p>

<abbr> 标记一个缩写（在鼠标指针移动到 <abbr> 元素上时显示出简称/缩写的完整版本）

<p><abbr title="Professor">Prof</abbr> Stephen Hawking is a theoretical physicist and cosmologist.</p>

<acronym> 标记一个首字母缩写（在鼠标指针移动到元素上时显示出缩写的完整版本）

 <p><acronym title="National Aeronautics and Space Administration">NASA</acronym> do some crazy space stuff.</p>

<address> 地址（变斜体）

<a> 超链接

<p><a href="https://www.baidu.com/">baidu</a></p>

<b> 加粗

<b> bold </b>

<cite> (变斜体）

<p><cite>A Brief History of Time</cite> by Stephen Hawking has sold over ten million copies worldwide.</p>

<dfn> （变斜体） definitions (定义一个定义项目)

<p>A <dfn>black hole</dfn> is a region of space from which nothing, not even light, can escape.</p>

<em> (变斜体）

<p>I think <em>Ivy</em> was the first.</p>

<hr /> （分界线）

——————————————

<del> （删除线）

<del>你说错了谢谢</del>

效果： ~~你说错了谢谢~~

<s> (删除线）（等同于<del>) 【不建议使用】

<s>你说错了谢谢</s>

效果：~~你说错了谢谢~~

<ins> （下划线）

<ins>best</ins>

效果：best

<i> （变斜体）

<i>italic</i>

效果：italic

<br/> （换行）

<blockquote> （标记长的引用）

<html>
<body>

Here comes a long quotation:

<blockquote>
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
</blockquote>

请注意，浏览器在 blockquote 元素前后添加了换行，并增加了外边距。

</body>
</html>

<q> （" ")

<q> I miss you.</q>

效果： " I miss you."

<strong> （加粗）

<strong> strong the thing </strong>

<sup> （上标）

4<sup>th</sup>

$4^{th}$

<sub> （下标）

CO<sub>2</sub>

CO2 (懂得都懂）

<dl> <dt> <dd> （定义一个列表）

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

计算机
    用来计算的仪器 ... ...

<ul> <li> （定义一个无序列表）（ · ）（前面有距离）

 <ul>             

           <li>2 eggs</li>             

           <li>1tbs butter</li>           

           <li>2tbs cream</li>         

</ul>

·2 eggs

·1tbs butter

·2tbs cream

<ol> <li> （定义一个有序列表）（1. 2. 3.）（前面有距离）

<ol>

            <li> the first </li>

            <li> the second </li>

            <li> the third </li>

</ol>

1. the first

2. the second

3. the third

若为英文字母排序

<ol style="list-style-type: upper-alpha">
<ol style="list-style-type: lower-alpha">

<ul> 嵌入 <ul> （小黑点变小白点）

<ul>             

            <li>Mousses</li>             

           <li>Pastries                 

           <ul>                     

                      <li>Croissant</li>                     

                      <li>Mille-feuille</li>                   

                      <li>Palmier</li>                   

                      <li>Profiterole</li>                 

           </ul>             

           </li>             

           <li>Tarts</li>         

</ul>

<img> （插入图片）（src：为图片的地址 alt：若地址错误则显示alt内的文字 width、height:控制宽和高 align:控制在字体左边/右边/中间）

<img src="/i/eg_tulip.jpg"   alt="上海鲜花港 - 郁金香" />

<figure> (用作文档中插图的图像) <figcaption> (带有一个标题)

【带有间距使其看起来像是一个板块】

<table> <tr> <th> <td>（创建表格） (tr：行 th：表头【有加粗效果】 td：内单元格）

(border:边框的宽度 bgcolor: 表格背景颜色 width：单元格的宽度 padding:内间距 colspan：横向合并单元格的个数 rowspan：纵向合并单元格的个数 cellpadding: 规定单元边沿与其内容之间的空白 cellspacing:规定单元格之间的空白 headers:对应哪个表头单元格）

<thead> <tbody> <tfoot> (相当于把表格分为头身尾利于加边框）

奔跑的星黛露

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
web前端开发之HTML标签汇总（1）

web开发标签学习
复制链接

扫一扫

专栏目录

web前端开发之HTML标签汇总（1）

web前端开发之HTML标签汇总（1）

<h> 【1-6】（六种同类型的标题标签）（字体由大到小1->6）（加粗）

<p> 段落标签（随着浏览器的页面变化）

<abbr> 标记一个缩写（在鼠标指针移动到 <abbr> 元素上时显示出简称/缩写的完整版本）

<acronym> 标记一个首字母缩写（在鼠标指针移动到元素上时显示出缩写的完整版本）

<address> 地址 （变斜体）

<a> 超链接

<b> 加粗

<cite> (变斜体）

<dfn> （变斜体） definitions (定义一个定义项目)

<em> (变斜体）

<hr /> （分界线）

<del> （删除线）

<s> (删除线）（等同于<del>) 【不建议使用】

<ins> （下划线）

<i> （变斜体）

<br/> （换行）

<blockquote> （标记长的引用）

<q> （" ")

<strong> （加粗）

<sup> （上标）

<sub> （下标）

<dl> <dt> <dd> （定义一个列表）

<ul> <li> （定义一个无序列表）（ · ）（前面有距离）

<ol> <li> （定义一个有序列表） （1. 2. 3.） （前面有距离）

若为英文字母排序

<ul> 嵌入 <ul> （小黑点变小白点）

<img> （插入图片） （src：为图片的地址 alt：若地址错误则显示alt内的文字 width、height:控制宽和高 align:控制在字体左边/右边/中间）

<figure> (用作文档中插图的图像) <figcaption> (带有一个标题)

【带有间距 使其看起来像是一个板块】

<table> <tr> <th> <td>（创建表格） (tr：行 th：表头【有加粗效果】 td：内单元格）

<thead> <tbody> <tfoot> (相当于把表格分为头身尾 利于加边框）

<address> 地址（变斜体）

<ol> <li> （定义一个有序列表）（1. 2. 3.）（前面有距离）

<img> （插入图片）（src：为图片的地址 alt：若地址错误则显示alt内的文字 width、height:控制宽和高 align:控制在字体左边/右边/中间）

【带有间距使其看起来像是一个板块】

<thead> <tbody> <tfoot> (相当于把表格分为头身尾利于加边框）