此HTML常用标签简介编写的目的,是给一个经常使用网页编辑器的一个朋友提供一个快速熟悉和入门HTML的途径。

现在分享出来,给其他有类似需求的朋友,此处只列出了编辑文章时最常用和遇到的标签,完整标签页面请参阅底部给出的链接。

标题

六个级别的标题,<h1> 最粗字体最大, <h6> 最细

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
<h1>highest section level</h1>
<h6>lowest section level</h6>

示例:

h1

h2

h3

h4

h5
h6

水平线

单标记,无关闭标签

<hr>

示例:


段落

段落间一般会自动换行

<p>段落一</p>
<p>段落二</p>
<p>段落三</p>

示例:

段落一

段落二

段落三

换行

网页会在<br>标签处换行显示

第一行文字<br>
第二行文字

示例:

第一行文字

第二行文字

列表

an ordered list  有序列表
<ol>
<li>条目一</li>
<li>条目二</li>
</ol>
an unordered list 无序列表
<ul>
<li>语文</li>
<li>数学</li>
<li>英语</li>
</ul>

示例:

an ordered list 有序列表

  1. 条目一
  2. 条目二

an unordered list 无序列表

  • 语文
  • 数学
  • 英语

文本修饰

强调文本内容(也会显示为粗体)
<strong>强调的文本内容<strong> 以粗体显示文本
<b>此文本内容以粗体显示</b> 表示强调内容(一般会显示为斜体)
<em>强调此处的文本内容</em> 删除线
<del>此段文字会有一段删除线</del> 下划线
<u>此文字会有下划线</u>

示例:

强调文本内容(也会显示为粗体)

强调的文本内容

以粗体显示文本

此文本内容以粗体显示

表示强调内容(一般会显示为斜体)

强调此处的文本内容

删除线

此段文字会有一段删除线

下划线

此文字会有下划线

图片

只有 src 里的 url 必须指定清楚,其余的属性`alt` `height` `width` 等全部可以省略
<img src="图片所在的url" alt="图片错误时显示的文本" height="图片显示的高度" width="图片显示的高度" title="图片的描述内容">
<img src="https://pic.cnblogs.com/avatar/1546939/20190220212114.png" alt="我的头像" height="120px" width="120px" title="我的头像">

示例

链接

title 可以省略

<a href="目标链接地址" title="链接描述文字">链接显示文本</a>

<a href="https://www.shwww.net/" title="网站目录大全">网站目录大全</a>

示例:

网站目录大全

表格

<table>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
</tr>
</table>

以上的表格代码会生成一个类似如下的表格

John Doe
Jane Doe

完整标签参考

HTML常用标签简介及快速入门的更多相关文章

  1. Kotlin新语言简介和快速入门知识点

    Kotlin新语言简介和快速入门知识点 简介:Kotlin是最近由JetBrains发布的一种基于JVM的编程语言,已经被Google宣布为开发Android App的一级语言Kotlin有着与Jav ...

  2. SpringBoot简介与快速入门

    一.SpringBoot简介 1.1 原有Spring优缺点分析 1.1.1 Spring的优点分析 Spring是Java企业版(Java Enterprise Edition,JEE,也称J2EE ...

  3. web@前端--html,css,javascript简介、第一个页面(常用标签简介)

    1.什么是标签#1.在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来,如`<html>`.`<head>`.`<body>`都是标签,#2. ...

  4. Spring Boot从入门到精通之:一、Spring Boot简介及快速入门

    Spring Boot Spring Boot 简介 Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来 ...

  5. Docker基础修炼1--Docker简介及快速入门体验

    本文作为Docker基础系列第一篇文章,将详细阐述和分析三个问题:Docker是什么?为什么要用Docker?如何快速掌握Docker技术? 本系列文章中Docker的用法演示是基于CentOS7进行 ...

  6. 终结篇:RemoteWebDriver与Grid简介-----Selenium快速入门(十五)

    Selenium的基本使用,已经介绍得差不多了,今天来简单说说RemoteWebDriver与Grid,也是本系列的最后一篇. 还记得本系列第一章(Selenium简介与环境搭配)的配置中,提到我们下 ...

  7. JS快速入门(二)

    目录 JS快速入门(二) 结构图 BOM window对象 open() window子对象 location对象 history对象(了解) navigator 对象 screen对象 BOM 定时 ...

  8. flink01--------1.flink简介 2.flink安装 3. flink提交任务的2种方式 4. 4flink的快速入门 5.source 6 常用算子(keyBy,max/min,maxBy/minBy,connect,union,split+select)

    1. flink简介 1.1 什么是flink Apache Flink是一个分布式大数据处理引擎,可以对有限数据流(如离线数据)和无限流数据及逆行有状态计算(不太懂).可以部署在各种集群环境,对各种 ...

  9. html5快速入门(二)—— CSS简介

    前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...

随机推荐

  1. hdu5355 思维+爆搜

    pid=5355">http://acm.hdu.edu.cn/showproblem.php?pid=5355 Problem Description There are m sod ...

  2. hadoop1.0.4升级到hadoop2.2 具体流程步骤

     hadoop1.x 升级到hadoop2.2 本文參考了博客:http://blog.csdn.net/ajax_jquery/article/details/27311671,对一些地方做了改动. ...

  3. [Cypress] Test React’s Controlled Input with Cypress Selector Playground

    React based applications often use controlled inputs, meaning the input event leads to the applicati ...

  4. java5核心基础之泛型(3)-泛型作用于编译阶段-怎样将String对象传入Integer类型的泛型对象中?

    泛型作用于编译阶段: 泛型是作用于编译阶段,在编译阶段控制类型,以确保在编写代码的时候仅仅能传入指定类型数据到泛型集合对象中去. 怎样验证呢,贴代码例如以下: package highBasic.ge ...

  5. jQuery必知要点(一)

    1. jQuery框架的显著特点. jQuery强调的理念是写的少,做的多(write less.do more). 其主要特点有:轻量级.强大的选择器.美丽的DOM操作封装.可靠的事件处理机制.完好 ...

  6. D3D triangle list(三角形列) 小样例

    画三角形列的样例程序 #pragma once #pragma comment(lib,"d3d9.lib") #pragma comment(lib,"d3dx9.li ...

  7. 贪吃蛇c++实现

    近期没事翻了一下曾经写的程序.真是不堪入目.曾经真是什么都不懂.只是有一个程序倒是挺有意思的,大二的时候写的一个贪吃蛇游戏.尽管程序非常难看,还有非常多漏洞.但也是这个程序让我真正開始喜欢上了编程.不 ...

  8. cocos2d-x-3.1 NotificationCenter (coco2d-x 学习笔记八)

    在这里分享记录自己的学习NotificationCenter时候的代码,这里用NotificationManager进行管理使用NotificationCenter. NotificationMana ...

  9. hdu4849 Wow! Such City!(最短路dijkstra)

    转载请注明出处:http://blog.csdn.net/u012860063? viewmode=contents 题目链接:pid=4849">http://acm.hdu.edu ...

  10. [转载]ROS_LOG保存方法

    原文地址:ROS_LOG保存方法作者:东咚... 把Service中的WWW的IP设置为允许日志保存服务器访问的范围 System->Logging,点击 "Actions" ...