HTML 快速指南

快速指南

本章节提供了 HTML 最常用标签的简单实用示例。 你可以将其当做速查手册。

基础

<!DOCTYPE html>
<html>
<head>
<title>这是文章标题</title>
</head>
<body>
<!-- 这是注释 -->
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
<p>这是段落</p>
<br> <!-- 这是换行 -->
<hr> <!-- 这是分割线 -->
</body>
</html>

样式

<b>粗体文本</b>
<i>斜体文本</i>
<u>下划线文本</u>
<em>定义着重文字</em><br />
<strong>定义加重语气</strong><br />
<ins>定义插入字</ins><br />
<sub>定义删除字</sub><br />
<sub>上标</sub>
<sup>下标</sup>

<!-- 计算机样式 -->
<pre>预格式文本</pre>
<code>一段电脑代码</code>
<dfn>定义项目</dfn>
<kbd>键盘输入</kbd>
<samp>计算机样本</samp>
<var>变量</var>

<!-- 特殊含义的样式 -->
<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>

<!-- 该段落文字从左到右显示 -->
<bdo dir="rtl">该段落文字从右到左显示</bdo>

<!-- 长的引用语 -->
<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: <q>Build a future where people live in harmony with nature.</q>

<!-- 定义引用、引证 -->
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
<dfn>定义项目</dfn>

链接、锚点、图片

<a href="http://www.example.com/">This is a Link</a>
<a href="http://www.example.com/"><img src="URL" alt="Alternate Text"></a>
<a href="mailto:webmaster@example.com">Send e-mail</a>A named anchor:
<a name="tips">Useful Tips Section</a>
<a href="#tips">Jump to the Useful Tips Section</a>

列表

<!-- 无序列表 -->
<ul>
<li>First item</li>
<li>Next item</li>
</ul>

<!-- 有序列表 -->
<ol>
<li>First item</li>
<li>Next item</li>
</ol>

<!-- 自定义列表 -->
<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>

表单

<form action="http://www.example.com/test.asp" method="post/get">
<input type="text" name="lastname"
value="Nixon" size="30" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">
<select>
<option>Apples
<option selected>Bananas
<option>Cherries
</select>
<textarea name="Comment" rows="60" cols="20"></textarea>
</form>

表格

<table border="1">
  <caption>Monthly Savings</caption>
  <colgroup>
    <col span="1" style="background-color:#dcdcdc">
    <col style="background-color:#00bfff">
  </colgroup>
  <thead>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
    <td>Sum</td>
    <td>$180</td>
  </tr>
  </tfoot>
  <tbody>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  </tbody>
</table>

区块

<div style="color:#0000FF">
  <h3>这是一个在 div 元素中的标题。</h3>
  <p>这是一个在 div 元素中的文本。</p>
</div>

<p><span style="color:red">some text.</span>some other text.</p>

框架

<iframe src="http://www.runoob.com">
  <p>您的浏览器不支持  iframe 标签。</p>
</iframe>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏walterlv - 吕毅的博客

WPF 和 UWP 中,不用设置 From 或 To,Storyboard 即拥有更灵活的动画控制

发布于 2017-10-26 04:55 更新于 2018-02...

401
来自专栏Windows Community

Windows Community Toolkit 4.0 - DataGrid - Part02

在上面一篇 Windows Community Toolkit 4.0 - DataGrid - Part01 中,我们针对 DataGrid 控件的 Coll...

502
来自专栏Danny的专栏

机房收费系统——将MSHFlexGrid控件中的数据导出到Excel

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

652
来自专栏Golang语言社区

设计包导出接口的随想

简介:本文讨论在设计一个包的导出接口时遇到的问题以及所采取的解决思路和方法,并提供了模拟代码作为例子。 假设有一个包gameword有个导出结构Player,包...

3306
来自专栏蓝天

curl和https,及openssl

如果使用curl访问https(注意不是http),则会牵涉到OpenSSL,就需要注意多线程安全问题。 一是OpenSSL需要编译成多线程安全版本,二是...

572
来自专栏me的随笔

.NET中数据访问方式(一):LINQ

语言集成查询(Language-Integrated Query),简称LINQ,.NET中的LINQ体系如下图所示:

763
来自专栏葡萄城控件技术团队

如何在保留装箱对象的前提下修改值

有人问如何在保留装箱对象的前提下修改值? 场景: object obj = 100; Console.WriteLine("original object va...

1897
来自专栏函数式编程语言及工具

泛函编程(10)-异常处理-Either

     上节我们介绍了新的数据类型Option:一个专门对付异常情况出现时可以有一致反应所使用的数据类型。Option可以使编程人员不必理会出现异常后应该如何...

1815
来自专栏程序员的SOD蜜

.net访问PostgreSQL数据库发生“找不到函数名”的问题追踪

    PostgreSQL是一个使用广泛的免费开源的数据库,与MySQL比较,它更适合复杂的企业计算任务,而MySQL在互联网领域应用更为广泛,究其原因,可能...

2727
来自专栏睿哥杂货铺

动态追踪技术(四):基于 Linux bcc/BPF 实现 Go 程序动态追踪

在这篇文章中,我将迅速调研一种跟踪的 Go 程序的新方法:基于 Linux 4.x eBPF 实现动态跟踪。如果你去搜索 Go 和 BPF,你会发现使用 BPF...

4935

扫码关注云+社区