基础#

约 109 个字 12 行代码预计阅读时间 3 分钟

注释#

注释

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>注释</title>
</head>
<body>
<h1>注释</h1>
<!--注释-->
注释是不会渲染的，可以用来做说明和解释
<hr>
</body>
</html>

示例

排版相关标签#

排版相关标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>排版相关标签</title>
</head>
<body>
<h1>排版相关标签</h1>
<!--标题标签-->
<h2>标题标签</h2>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--p标签-->
<h2>p标签</h2>
<p>
  段落：HTML p元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，p
  是块级元素。
</p>
<p>
  段落：HTML p元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，p
  是块级元素。
</p>
<!--div标签-->
<h2>div标签</h2>
<div>
  HTML div 元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响。
</div>
<div>
  HTML div 元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响。
</div>
<hr>
</body>
</html>

示例

文本标签#

文本标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>文本标签</title>
</head>
<body>
<h1>文本标签</h1>
<!--em标签-->
<h2>em标签</h2>
em标签：<em>斜体，要着重阅读的内容</em>
<!--strong标签-->
<h2>strong标签</h2>
strong标签：<strong>加粗，十分重要的内容（语气比em要强）</strong>
<!--span标签-->
<h2>span标签</h2>
span标签：<span>没有语义，用于包裹短语的通用容器。用于设置文本的样式，或者为文本设置id</span>
<!--cite标签-->
<h2>cite标签</h2>
cite标签：<cite>引用，引用的作品名称</cite>
<!--dfn标签-->
<h2>dfn标签</h2>
dfn标签：<dfn>定义，定义术语，专属名词</dfn>
<!--del标签-->
<h2>del标签</h2>
del标签：
<del>删除线，表示文本被删除</del>
<!--ins标签-->
<h2>ins标签</h2>
ins标签：
<ins>下划线，表示文本被插入</ins>
<!--sub标签-->
<h2>sub标签</h2>
sub标签：下标，表示文本是下标,比如水：H<sub>2</sub>O
<!--sup标签-->
<h2>sup标签</h2>
sup标签：上标，表示文本是上标，8的3次方：8<sup>3</sup>
<!--code标签-->
<h2>code标签</h2>
code标签：<code>System.out.println("hello world");</code>
<!--kbd标签-->
<h2>kbd标签</h2>
kbd标签：表示键盘文本，<kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd>
<!--abbr标签-->
<h2>abbr标签</h2>
abbr标签：表示缩写，<abbr title="Hyper Text Markup Language">HTML</abbr>
<!--bdo-->
<h2>bdo标签</h2>
bdo标签：表示文本方向，<bdo dir="rtl">从右到左的文本</bdo>
<!--var标签-->
<h2>var标签</h2>
var标签：表示变量，<var>x</var> = <var>y</var> + 2
<!--small标签-->
<h2>small标签</h2>
small标签：<small>將使文本的字体变小一号。(例如从大变成中等，从中等变成小，从小变成超小)。在 HTML5
  中，除了它的样式含义，这个元素被重新定义为表示边注释和附属细则，包括版权和法律文本。--很少使用</small>
<!--b标签-->
<h2>b标签</h2>
b标签：<b>用于吸引读者的注意到该元素的内容上（如果没有另加特别强调）。这个元素过去被认为是粗体（Boldface）元素，并且大多数浏览器仍然将文字显示为粗体。尽管如此，你不应将
  b 元素用于显示粗体文字；替代方案是使用 CSS font-weight 属性来创建粗体文字。</b>
<!--i标签-->
<h2>i标签</h2>
i标签：<i>用于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等，它的内容通常以斜体显示。现在多用于<strong>字体图标</strong></i>
<!--u标签-->
<h2>u标签</h2>
u标签：<u>与正常内容反差文本。例如：错的单词、不合适的描述等。默认情况下渲染为一个实线下划线，可以用 CSS 替换。</u>
<!--q标签-->
<h2>q标签</h2>
q标签：<q>短的引用。浏览器通常会在引用的内容前后包裹引号。</q>
<!--blockquote标签-->
<h2>blockquote标签</h2>
blockquote标签：
<blockquote>长的引用。通常在引用的内容前后添加换行，以及缩进；也可以通过 CSS 来改变样式。</blockquote>
<!--address标签-->
<h2>address标签</h2>
address标签：
<address>联系信息。通常呈现为斜体。浏览器通常会在引用的内容前后包裹引号。</address>
<hr>
</body>
</html>

示例

图片标签#

图片标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>图片标签</title>
</head>
<body>
<h1>图片标签</h1>

<h2>img标签</h2>
<img src="img/small-image.jpg" alt="alt属性定义了图像的备用文本描述。"/>

<h2>图片无法显示</h2>
<img src="img/xxx" alt="当图片无法显示时会显示alt属性"/>

<h2>自定义图片尺寸</h2>
<!--只设置一个尺寸，图片会等比例缩放-->
<img width="200" height="100" src="img/small-image.jpg" alt="图片描述">
<hr>
</body>
</html>

示例

超链接标签#

超链接标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>超链接标签</title>
</head>
<body>
<h1>超链接标签</h1>

<h2>超链接页面跳转</h2>
<a href="https://www.baidu.com/">百度</a>

<h2>在新页面中跳转</h2>
<a href="https://www.baidu.com/" target="_blank">百度</a>

</body>
</html>

示例

列表标签#

列表标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>列表</title>
</head>
<body>
<h1>列表</h1>

<h2>有序列表</h2>
<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>

<h2>无序列表</h2>
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

<h2>自定义列表</h2>
<dl>
  <dt>自定义列表项1</dt>
  <dd>自定义列表项1的描述</dd>
  <dt>自定义列表项2</dt>
  <dd>自定义列表项2的描述</dd>
  <dt>自定义列表项3</dt>
  <dd>自定义列表项3的描述</dd>
</dl>
</body>
</html>

示例

表格标签#

表格标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表格标签</title>

  <style>
      table {
          /*border-collapse决定表格的边框是分开的还是合并的*/
          border-collapse: collapse;
          border-spacing: 0;
          width: 500px;
      }
      td,th {
          padding: 5px;
          border: 1px solid #000;
          text-align: center;
      }
  </style>
</head>
<body>
<h1>表格标签</h1>

<table>
  <!--表格标题-->
  <caption>学生信息</caption>
  <!--表格头部-->
  <thead>
  <tr>
    <th>姓名</th>
    <th>性别</th>
    <th>年龄</th>
    <th>民族</th>
    <th>政治面貌</th>
  </tr>
  </thead>
  <!--表格主体-->
  <tbody>
  <tr>
    <td>张三</td>
    <td>男</td>
    <td>18</td>
    <td>汉族</td>
    <td>共青团员</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>女</td>
    <td>19</td>
    <td>汉族</td>
    <td rowspan="2">群众</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>男</td>
    <td>20</td>
    <td>回族</td>
  </tr>
  <tr>
    <td>赵六</td>
    <td>女</td>
    <td>22</td>
    <td>汉族</td>
    <td>党员</td>
  </tr>
  </tbody>
  <!--表格脚注-->
  <tfoot>
  <tr>
    <td colspan="5">共计：4人</td>
  </tr>
  </tfoot>
</table>
</body>
</html>

示例

辅助标签#

辅助标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>其它标签</title>
  <style>
    * {
        padding: 0;
        margin: 0;
    }
  </style>
</head>
<body>
<h1>其它标签</h1>

<h2>br标签：换行</h2>
<p>这是第一行<br>这是第二行</p>

<h2>hr标签：水平线</h2>
<p>这是第一行</p>
<hr>
<p>这是第二行</p>

<h2>pre标签：按原文显示</h2>
<pre>
  **********
   ********
    ******
     ****
      **
</pre>
</body>
</html>

示例

表单#

表单

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表单标签</title>
</head>
<body>
<h1>表单标签</h1>
<!--
action: 表单提交的地址
method: 表单提交的方式
  get: 通过url地址栏传递数据，数据量小，不安全
  post: 通过请求体传递数据，数据量大，安全
target: 表单提交后的打开方式
-->
<form action="https://www.baidu.com/s" method="get" target="_blank">
  <!--<fieldset> 元素用于对表单中的控制元素进行分组（也包括 label 元素）。-->
  <fieldset>
    <!-- <legend> 元素用于表示其父元素 <fieldset> 的内容标题。-->
    <legend>主要信息</legend>
    <!--文本输入框-->
    <label for="input1">搜索内容：</label>
    <input id="input1" type="text" name="wd" value="前端开发" maxlength="10">
    <br>

    <!--密码输入框-->
    <label for="mima">密码：</label>
    <input id="mima" type="password" name="pwd" maxlength="10">
    <br>

    <!--单选框-->
    单选框：
    <input id="nan" type="radio" name="gender" value="1" checked> <label for="nan">男</label>
    <input id="nv" type="radio" name="gender" value="2"> <label for="nv">女</label>
    <br>

    <!--多选框-->
    多选框：
    <input type="checkbox" id="basketball" name="hobby" value="1" checked>
    <label for="basketball">篮球</label>
    <input type="checkbox" id="football" name="hobby" value="2">
    <label for="football">足球</label>
    <input type="checkbox" id="table-tennis" name="hobby" value="3">
    <label for="table-tennis">乒乓球</label>
    <input type="checkbox" id="disabled-hobby" name="hobby" value="3" disabled>
    <label for="disabled-hobby">禁用</label>
  </fieldset>
  <br>
  <fieldset>
    <legend>附加信息</legend>
    <!--隐藏域-->
    <label>隐藏域：
      <input type="hidden" name="id" value="1">
    </label>
    <br>

    <!--文本域-->
    <label>文本域：
      <textarea name="content" cols="30" rows="10">这是文本域的内容</textarea>
    </label>
    <br>

    <!--下拉列表-->
    <label>下拉列表：
      <select name="city">
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">广州</option>
        <option value="4">深圳</option>
      </select>
    </label>
    <br>
  </fieldset>

  <input type="reset" value="重置">
  <input type="button" value="普通按钮">
  <input type="submit" value="百度搜索">
</form>
</body>
</html>

示例

框架标签#

框架标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>框架标签</title>
</head>
<body>
<h1>框架标签</h1>

<h2>嵌入网页</h2>
<iframe src="http://www.webxml.com.cn/zh_cn/web_services.aspx){ .md-button .md-button--primary }

<h2>与a标签，form配合</h2>
<a href="http://www.webxml.com.cn/zh_cn/web_services.aspx" target="web">打开网站</a>
<iframe name="web){ .md-button .md-button--primary }
</body>
</html>

示例

字符实体#

字符实体

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>字符实体</title>
</head>
<body>
<h1>字符实体</h1>
<h2>空格</h2>
<p>空格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空格</p>
<h2>小于号</h2>
<p>小于号&lt;小于号</p>
<h2>大于号</h2>
<p>大于号&gt;大于号</p>
</body>
</html>

示例

meta原信息#

meta原信息

<!DOCTYPE html>
<html lang="en">
<head>
  <!--配置字符编码-->
  <meta charset="UTF-8">
  <!--兼容ie浏览器-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--针对移动端的设置视口-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--设置页面的关键字-->
  <meta name="keywords" content="关键字1,关键字2,关键字3">
  <!--设置页面的描述-->
  <meta name="description" content="页面的描述">
  <!--设置页面的作者-->
  <meta name="author" content="作者">
  <!--设置页面的版权-->
  <meta name="copyRight" content="版权">
  <!--搜索引擎配置-->
  <meta name="robots" content="index,follow">
  <!--网页自动刷新-->
  <meta http-equiv="refresh" content="5;url=https://www.baidu.com">
  <title>meta原信息</title>
</head>
<body>

</body>
</html>

示例

基础#

注释#

排版相关标签#

文本标签#

图片标签#

超链接标签#

列表标签#

表格标签#

辅助标签#

表单#

框架标签#

字符实体#

meta原信息#

评论