基础标签

常用的标签

注释：``

html

<!--
下面这串代码是经理要求加的，目的就是为了拖慢网页加载速度，好再坑客户一笔优化网站的钱
-->

主体：`<body>···</body>`

注意：一个html 只能包含一个body

加粗：`<b>···</b>`

斜体：`<i>···</i>`

下划线：`<u>···</>`

删除线：`<s>···</s>`

居中对齐：`<center>···</center>`

大号文本：`<big>···</big>`

段落：`<p>···</p>`

空标签：``

注意：无需结束标签；一般用作换行

主题标签：`<h1>`to`<h6>`

分隔行： `<hr>`

<!DOCTYPE html> 标签

DOCTYPE 是 document type(文档类型)的简写语义：声明这是一个html文档

链接标签

<a>

超链接标签

属性： href 属性，用于创建指向另外一个文档的链接（或超链接）

属性	作用	值
href	指定链接	`mailto:` 创建电子邮件
target	打开方式	`_self`: 本窗口打开 `_blank`: 新窗口打开 `_top`: 在顶级窗口打开 `_parent`: 父窗口打开

输入

html

<!--将图像作为链接-->
<a href="http://www.doc.jenkina.cn">
<img  alt="doc" src="/markdown.svg" width="50" height="50">
</a>
<!--将图像作为链接-->

输出

`<link>`

<link> 标签定义文档与外部资源的关系。经常用于链接 CSS 样式表

属性	值	描述
href	URL	定义被链接文档的位置
rel	`alternate` `archives` `author` `bookmark` `external` `first` `help` `icon` `last` `license` `prev`上一页 `next`下一页 `nofollow` `noreferrer` `pingback` `prefetch`预加载技术 `search` `sidebar`侧边栏 `stylesheet`样式表 `tag` `up`返回上一级/顶部	必需。定义当前文档与被链接文档之间的关系。

html

<!--实例-->
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

图片标签

`<img>`

属性	值	描述
alt	text	规定图像替代的文本
width；height	pixels	规定图像的宽和高
src	url	规定图像的url
usemap	#mapname	将图像定义为客户器端图像映射。

### <map><map> 标签可以和 <area> 元素一起使用，以此来达到定义图像映射的作用

属性	值	描述
name	#mapname	引用img标签内usename定义的属性名称

`<area>`

属性	值	描述
shape	`default`默认 `rect`矩形 `circle`圆 `poly`多边形	规定区域形状
coords	coordinates	规定区域的坐标
alt	text	规定图像替代的文本，如果使用href属性，该属性必须
href	url	规定图像的url

html

<img src="/demo/map/life.png" alt="Life" usemap="#lifemap" width="650" height="451">

<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="/demo/map/airpods.png" target="_top">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="/demo/map/iphone.png">
  <area shape="circle" coords="570,291,75" alt="Coffee" href="/demo/map/coffee.png">
</map>

输出 Life

小工具：获取图片围栏坐标.exe

按钮标签

`<button>`···`</button>`

属性	值	描述
type	`button` `reset` `submit`	规定按钮类型
name	name	规定按钮名称
value	text	规定按钮初始值
formtarget	`_blank` `_self` `_parent` `_top` `framename`	规定在何处打开 action URL。覆盖 form 元素的 target 属性。该属性与 type="submit" 配合使用。
搭配事件属性	如：onclick

实例

输入

html

<button type="button" onclick="alert('Hello world!')">登录!</button>

输出

列表标签

`<dl>`、 `<dt>`、 `<dd>`

html

<dl><!--规定一个列表-->
 <dt>列表名称</dt><!--列表名称-->
   <dd>内容k</dd><!--列表名称-->
</dl>

`<dir>`、 `<dt>`、 `<dd>`

语法

html

<element dir="ltr|rtl|auto">
  <!--属性分别为靠右、靠左、和自动-->

`<li>`、 `<ol>`、 `<ul>`

语法

html

<ol>
  <li>有序列表1</li>
  <li>有序列表2</li>
  <li>有序列表3</li>
</ol>
<ul>
  <li>无序列表1</li>
  <li>无序列表2</li>
  <li>无序列表3</li>
</ul>

注：列表可以进行多级嵌套。

格式化标签

`<span>`

对行内的某类元素着重进行定义

::details 实例

输入

html

<p>我的母亲有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛，我得父亲有 <span style="color:darkolivegreen;font-weight:bold">碧绿色</span> 的眼睛。</p>

输出

我的母亲有蓝色的眼睛，我得父亲有碧绿色的眼睛。

:::

`<abbr>`

<abbr> 标签最初是在 HTML 4.0 中引入的，表示它所包含的文本是一个更长的单词或短语的缩写形式。

实例

输入

html

The<abbr title="World Health Organization">WHO</abbr> was founded in 1948.

输出

TheWHO was founded in 1948.

`<addresss>`

定义地址、签名或者文档的作者身份，（使用该标签的文本显示为斜体）

实例

输入

html

<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

输出

Written by Jon Doe.
Visit us at:
Example.com
Box 564, Disneyland
USA

`<bdo>`

规定文本的排序方向

实例

输入

html

<!--属性dir 对应的值 ltr rtl 分别对应从左到右  和从右到左-->
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>

输出

该段落文字从右到左显示。

文本引用

`<q>`：短引用

`<blockquote>`：长引用

实例

输入

html

<!--短引用-->
<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>

<!--长引用cite属性是规范引用来源-->
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>

输出

WWF's goal is to: Build a future where people live in harmony with nature. We hope they succeed.

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

表格标签 & 表单标签

`<table>`

<table> 标签定义 HTML 表格。

一个 HTML 表格包括 <table> 元素，一个或多个 <tr>、<th> 以及 <td> 元素。

<tr> table row元素定义表格行，

<th> table head元素定义表头，head

<td> table data元素定义表格单元。

实例

输入

html

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

输出

Month	Savings
January	$100
February	$80

小工具： html 转md 工具1 html 转md 工具2

`<form>`

<table> 标签定义 HTML 表单，一般可以用于向服务器提供数据

<form> 元素包含一个或多个如下的表单元素：

<input>
button
select
option
optgroup
fieldset
label

属性	值	描述
action	url	规定当提交表单时向何处发送表单数据。
autocomplete	on; off	规定是否启用自动完成功能
method	get; post	规定用于发送表单数据的 HTTP 方法。
name	text	规定表单的名称。
novalidate	novalidate	如果使用该属性，则提交表单时不进行验证。
target	`_self`: 本窗口打开 `_blank`: 新窗口打开 `_top`: 在顶级窗口打开 `_parent`: 父窗口打开	规定在何处打开 action URL。

实例

输入

html

<!--带有两个输入字段和一个提交按钮的html表单-->
<form action="/statics/demosource/demo-form.php" method="post">
  <label for="username">账户:</label>
  <input type="text" id="username" name="username" placeholder="请输入账号"><br>
  <label for="password">密码:</label>
  <input type="password" id="password" name="password" placeholder="请输入密码"><br>
  <input type="submit" value="登录">
</form>

输出

输入

html

<form action="/submit-form" method="post">
  <fieldset>
    <legend>个人信息</legend>
    
    <!-- 单选按钮（Radio Buttons） -->
    <p>
      <label for="male">
        <input type="radio" id="male" name="gender" value="male" required>
        男
      </label>
    </p>
    <p>
      <label for="female">
        <input type="radio" id="female" name="gender" value="female" required>
        女
      </label>
    </p>
    
    <!-- 复选框（Checkboxes） -->
    <p>
      <label for="newsletter">
        <input type="checkbox" id="newsletter" name="newsletter" value="yes">
        订阅新闻通讯
      </label>
    </p>
    <p>
      <label for="terms">
        <input type="checkbox" id="terms" name="terms" value="agree">
        我同意服务条款
      </label>
    </p>
    
    <!-- 提交按钮 -->
    <button type="submit">提交</button>
  </fieldset>
</form>

输出

提示

注意：该方法使用 <fieldset> 标签创建了一个视觉分组，使用了<legend> 标签，来定义这个分组的标题

基础标签 ​

常用的标签 ​

注释： ​

主体：<body>···</body> ​

加粗：<b>···</b> ​

斜体：<i>···</i> ​

下划线：<u>···</> ​

删除线：<s>···</s> ​

居中对齐：<center>···</center> ​

大号文本：<big>···</big> ​

段落：<p>···</p> ​

空标签： ​

主题标签：<h1>to<h6> ​

分隔行： <hr> ​

<!DOCTYPE html> 标签 ​

链接标签 ​

<a> ​

输入 ​

<link> ​

图片标签 ​

<img> ​

<area> ​

按钮标签 ​

<button>···</button> ​

输入 ​

输出 ​

列表标签 ​

<dl>、 <dt>、 <dd> ​

<dir>、 <dt>、 <dd> ​

语法 ​

<li>、 <ol>、 <ul> ​

语法 ​

格式化标签 ​

<span> ​

输入 ​

输出 ​

<abbr> ​

输入 ​

输出 ​

<addresss> ​

输入 ​

输出 ​

<bdo> ​

输入 ​

输出 ​

文本引用 ​

<q>： 短引用 ​

<blockquote>：长引用 ​

输入 ​

输出 ​

表格标签 & 表单标签 ​

<table> ​

输入 ​

输出 ​

<form> ​

输入 ​

输出 ​

输入 ​

输出 ​

基础标签

常用的标签

注释：``

主体：`<body>···</body>`

加粗：`<b>···</b>`

斜体：`<i>···</i>`

下划线：`<u>···</>`

删除线：`<s>···</s>`

居中对齐：`<center>···</center>`

大号文本：`<big>···</big>`

段落：`<p>···</p>`

空标签：``

主题标签：`<h1>`to`<h6>`

分隔行： `<hr>`

<!DOCTYPE html> 标签

链接标签

<a>

输入

`<link>`

图片标签

`<img>`

`<area>`

按钮标签

`<button>`···`</button>`

输入

输出

列表标签

`<dl>`、 `<dt>`、 `<dd>`

`<dir>`、 `<dt>`、 `<dd>`

语法

`<li>`、 `<ol>`、 `<ul>`

语法

格式化标签

`<span>`

输入

输出

`<abbr>`

输入

输出

`<addresss>`

输入

输出

`<bdo>`

输入

输出

文本引用

`<q>`：短引用

`<blockquote>`：长引用

输入

输出

表格标签 & 表单标签

`<table>`

输入

输出

`<form>`

输入

输出

输入

输出