HTML常用标签积累

目录

  • 01-主体标签:html、head、titile、body
  • 02-b标签:加粗标签
  • 03-strong标签:文本加粗效果(文本强调效果)
  • 04-i标签:文本倾斜效果
  • 05-em标签:文本倾斜效果(带文本强调的效果)
  • 06-u标签:下划线效果
  • 07-ins标签:下划线效果
  • 08-del标签:删除线效果(中划线)
  • 09-s标签:删除线效果(中划线)
  • 10-font标签:字体设置标签
    • 10-01:font标签的color属性(设置字体颜色)
    • 10-02:font标签的size属性(设置字体大小)
    • 10-03:font标签的face属性(设置字体的样式)
  • 11-big标签:字体变大到原来的115%
  • 12-small标签:字体变小到原来的85%
  • 13-sub标签:下标效果
  • 14-sup标签:上标效果
  • 15-注释标签
  • 16-p标签:段落标签
    • 16-01:p标签的align属性(设置对齐方式)
  • 17-br标签:换行标签
  • 18-hr标签:分隔横线标签
    • 18-1:hr标签的width属性(线条长度)
    • 18-2:hr标签的size属性(线条粗线)
    • 18-3:hr标签的color属性(线条颜色)
    • 18-4:hr标签的align属性(对齐方式)
    • 18-4:hr标签的noshade属性(无阴影效果)
  • 19-h1~h6标签:标题标签
    • 19-1 h1~h6标签的align属性(对齐方式)
  • 20-div标签:块标签
  • 21-span标签:行内块标签
  • 22-ol和li标签:有序列表标签
    • 22-01-ol标签的type属性:改变列表序号的样式
    • 22-02-ol标签的start属性:改变列表序号的起始值
    • 22-03-有序列表标签的嵌套
  • 23-ul和li标签:无序列表标签
    • 23-01 ul和li标签的type属性
    • 23-02 无序列表的嵌套
  • 24-img标签:图片标签
  • 25 a标签:链接标签

01-主体标签:html、head、titile、body

<html><head><title>网页标题</title></head><body>大部分的内容</body>
</html>

说明：html是最大的标签哈。

02-b标签:加粗标签

示例代码如下：

<p>我需要强调的是<b>我对你并没有恶意</b></p>

效果如下图所示：
HTML常用标签积累-编程之家

03-strong标签:文本加粗效果(文本强调效果)

示例代码如下

<p>我需要强调的是<strong>对你并没有恶意</strong></p>

效果如下图所示：
HTML常用标签积累-编程之家

04-i标签:文本倾斜效果

示例代码如下：

<p><i>这是引用别人的叙述</i></p>

效果如下图所示：
HTML常用标签积累-编程之家

05-em标签:文本倾斜效果(带文本强调的效果)

示例代码如下：

<p><em>这是引用别人的叙述</em></p>

效果如下图所示：
HTML常用标签积累-编程之家

06-u标签:下划线效果

示例代码如下：

<p>这是<u>马云、马化腾</u>曾经说过的</p>

效果如下图所示：
HTML常用标签积累-编程之家

07-ins标签:下划线效果

示例代码如下：

<p>这是<ins>马云、马化腾、刘强东</ins>曾经说过的</p>

效果如下图所示：
HTML常用标签积累-编程之家

08-del标签:删除线效果(中划线)

示例代码如下：

<p>这是马云、马化腾、<del>刘强东</del>曾经说过的</p>

效果如下图所示：
HTML常用标签积累-编程之家

09-s标签:删除线效果(中划线)

示例代码如下：

<p>这是马云、<s>马化腾</s>、刘强东曾经说过的</p>

效果如下图所示：
HTML常用标签积累-编程之家

10-font标签:字体设置标签

10-01:font标签的color属性(设置字体颜色)

color属性常用的取值有如下这些：
red、yellow、blue、green
也可用16进制的RGB值作为颜色属性值，搜索引擎搜索“在线 调色板”就有很多网页提供这个功能。比如网页 https://www.ip138.com/yanse/index.htm

用英文单词作为颜色属性值的示例代码如下：

<p><font color="red">我要用红色显示这段文字</font></p>

效果如下图所示：
HTML常用标签积累-编程之家

用16进制的RGB值作为颜色属性值的示例代码如下：
HTML常用标签积累-编程之家

<p><font color="#6633FF">我要用紫蓝色显示这段文字</font></p>

效果如下图所示：
HTML常用标签积累-编程之家

10-02:font标签的size属性(设置字体大小)

size的属性值取值为1到7
示例代码如下

<p>font标签示例：<font color="#6633FF" size="5">我要用紫蓝色显示这段文字</font></p>

效果如下图所示：
HTML常用标签积累-编程之家
值得注意的是：如果size的值超过7，那么和7的取值效果是一样的，比如size="99"和size="7"效果是一样的。

10-03:font标签的face属性(设置字体的样式)

示例代码如下

<p><font size="7" >默认</font></p>
<p><font size="7" face="宋体">宋体</font></p>
<p><font size="7" face="方正舒体">方正舒体</font></p>
<p><font size="7" face="幼圆">幼圆</font></p>
<p><font size="7" face="华文琥珀">华文琥珀</font></p>

效果如下所示：
HTML常用标签积累-编程之家

11-big标签:字体变大到原来的115%

示例代码如下：

<p>这是一段<big>精彩</big>的文字</p>

效果如下所示：
HTML常用标签积累-编程之家

12-small标签:字体变小到原来的85%

示例代码如下：

<p>这是一段精彩<small>的的的</small>文字</p>

效果如下所示：
HTML常用标签积累-编程之家

13-sub标签:下标效果

示例代码如下：

<p>水的分子式为:H<sub>2</sub>O</p>

效果如下所示：
HTML常用标签积累-编程之家

14-sup标签:上标效果

示例代码如下：

<p>2<sup>3</sup>=8</p>

效果如下所示：
HTML常用标签积累-编程之家

15-注释标签

示例代码如下：

<p>这是第一行内容</p>
<!--这是注释内容-->
<p>这是第二行内容</p>

效果如下所示：
HTML常用标签积累-编程之家
注意，它是一种多行注释，比如下面这个例子：

<!--这是第一行注释内容
这是第二行注释内容
这是第三行注释内容-->

HTML常用标签积累-编程之家

16-p标签:段落标签

这个标签在上面的示例中已经广范用到了，这里再举一个例子。
p标签的特点是独占一行或一块。

<p>这是第一段内容</p><p>这是第二段内容</p>

效果如下所示：
HTML常用标签积累-编程之家

16-01:p标签的align属性(设置对齐方式)

可取值有left center right
示例代码如下

<p align="left">p标签左对齐效果</p>
<p align="right">p标签右对齐效果</p>
<p align="center">p标签居中对齐效果</p>

运行效果如下图所示：
HTML常用标签积累-编程之家

17-br标签:换行标签

换行标签是一个单标签
有两种写法：
第一种：

<br>

第二种(br标签的闭合形式)：

<br />

示例代码如下：

<p>空山新雨后,<br>天气晚来秋。<br>明月松间照,<br>清泉石上流</p>
<p>竹喧归浣女,<br />莲动下渔舟。<br />随意春芳歇,<br />王孙自可留</p>

运行效果如下图所示：
HTML常用标签积累-编程之家

18-hr标签:分隔横线标签

hr标签是单标签，示例代码如下：

<p>这是分隔线前面的内容<hr />这是分隔线后面的内容</p>

效果如下
HTML常用标签积累-编程之家

18-1:hr标签的width属性(线条长度)

示例代码如下

<p>这是分隔线前面的内容<hr width="300" />这是分隔线后面的内容</p>

效果如下：
HTML常用标签积累-编程之家

18-2:hr标签的size属性(线条粗线)

示例代码如下

<p>这是分隔线前面的内容<hr width="300" size="10"/>这是分隔线后面的内容</p>

效果如下：
HTML常用标签积累-编程之家

18-3:hr标签的color属性(线条颜色)

示例代码如下

<p>这是分隔线前面的内容<hr width="300" size="10" color="red"/>这是分隔线后面的内容</p>

效果如下：
HTML常用标签积累-编程之家

18-4:hr标签的align属性(对齐方式)

可取值有left center right，默认值为 center
示例代码如下

<p><hr width="300" size="10" color="red" align="left" /></p>
<p><hr width="300" size="10" color="blue" align="center" /></p>
<p><hr width="300" size="10" color="green" align="right" /></p>

运行结果如下
HTML常用标签积累-编程之家

18-4:hr标签的noshade属性(无阴影效果)

noshade属性的可取值就只有一个，即noshade，其可取值与其名字一样，这种情况下，书写时可以省略其值。
即

<p><hr noshade="noshade" /></p>

等效于

<p><hr noshade /></p>

hr标签默认是有阴影的，有阴影和无阴影的放大对比效果如下图所示：
HTML常用标签积累-编程之家
HTML常用标签积累-编程之家

19-h1~h6标签:标题标签

示例代码如下

<p><h1>标题1</h1><h2>标题2</h2><h3>标题3</h3><h4>标题4</h4><h5>标题5</h5><h6>标题6</h6>
</p>

运行效果如下
HTML常用标签积累-编程之家
从这个运行效果中我们可以看出，一个标题会占据一行。
注意，它呈现的字体大小是数字越大字体越小，即h1最大而h6最小。

19-1 h1~h6标签的align属性(对齐方式)

可取值有left center right，默认值为left
示例代码如下：

<p><h1 align="left">标题1</h1><h2 align="center">标题2</h2><h3 align="right">标题3</h3>
</p>

效果如下：
HTML常用标签积累-编程之家

20-div标签:块标签

块标签的含义是哪怕里面只有一个字符，它也要把某个块独占。前面已经说明了的p标签也是一种块标签。
示例代码如下：

我<div>爱</div>你中国

效果如下
HTML常用标签积累-编程之家
分析：爱这个字因为div标签的作用而独占一行，从而把字符串“我爱你中国”分成了三行。

21-span标签:行内块标签

这个标签的作用不太好说清，直接上示例代码吧！
示例代码如下：

屈原说-<span>路漫漫其修远兮，吾将上下而求过索。</span>屈原是一位理想主义者。

效果如下：
HTML常用标签积累-编程之家
HTML常用标签积累-编程之家
从运行结果可以看出，这个标签成的块的宽度就是它的内容的宽度。有人要说了，既然块的宽度就是它内容的宽度，那要它有什么有用？它的作用是我们可以对这个行内块设置一些格式属性啊，比如设置字体样式、加个边框什么的。
注意：由于span属于行内的块，所以是不可以设置这个块的宽高的。但是div标签形成的块就是可以的。

22-ol和li标签:有序列表标签

示例代码如下

<body><ol><li>列表项1</li><li>列表项2</li><li>列表项3</li><li>列表项4</li><li>列表项4</li></ol>
</body>

运行结果如下：
HTML常用标签积累-编程之家

22-01-ol标签的type属性:改变列表序号的样式

type属性的可取值有以下这些：
1—默认值，代表数字型列表序号。
a—代表小写字母a b c …
A—代表大写字母A B C …
i—小写的罗马记数
I—大写的罗马记数
none—没有序号
示例代码如下：

<body><ol type="1"><li>列表项1</li><li>列表项2</li><li>列表项3</li></ol><ol type="a"><li>列表项1</li><li>列表项2</li><li>列表项3</li></ol><ol type="A"><li>列表项1</li><li>列表项2</li><li>列表项3</li></ol><ol type="i"><li>列表项1</li><li>列表项2</li><li>列表项3</li></ol><ol type="I"><li>列表项1</li><li>列表项2</li><li>列表项3</li></ol><ol type="none"><li>列表项1</li><li>列表项2</li><li>列表项3</li></ol></body>

效果如下：
HTML常用标签积累-编程之家

22-02-ol标签的start属性:改变列表序号的起始值

示例代码如下：

<body><ol type="1" start="3"><li>列表项1</li><li>列表项2</li><li>列表项3</li></ol><ol type="a" start="4"><li>列表项1</li><li>列表项2</li><li>列表项3</li></ol>
</body>

效果如下
HTML常用标签积累-编程之家

22-03-有序列表标签的嵌套

示例代码如下：

	<ol><li>幼儿园<ol type="A"><li>小班</li><li>中班</li><li>大班</li></ol></li><li>小学</li><li>中学</li></ol>

运行效果如下：
HTML常用标签积累-编程之家

23-ul和li标签:无序列表标签

示例代码如下：

	<ul><li>张三</li><li>李四</li><li>王五</li></ul>

运行结果如下图所示：
HTML常用标签积累-编程之家

23-01 ul和li标签的type属性

type属性的值none表示前没有排序符号；
type属性的值disc表示实心圆；
type属性的值circle表示空心圆；
type属性的值square表示小方块；

ul标签进行type属性设置的示例代码如下：

	<ul><li>张三</li><li>李四</li><li>王五</li></ul><ul type="none"><li>张三</li><li>李四</li><li>王五</li></ul><ul type="circle"><li>张三</li><li>李四</li><li>王五</li></ul><ul type="square"><li>张三</li><li>李四</li><li>王五</li></ul><ul type="disc"><li>张三</li><li>李四</li><li>王五</li></ul>

运行结果如下：
HTML常用标签积累-编程之家
li标签进行type属性设置的示例代码如下：

23-02 无序列表的嵌套

示例代码如下：

	<ul><li>音乐</li><li>运动<ul><li>足球</li><li>篮球</li><li>跑步</li></ul></li><li>看书</li></ul>

运行效果如下图所示：
HTML常用标签积累-编程之家
从上我们可以看出，嵌套时前面的符号会自动实现区别。

24-img标签:图片标签

img标签是一个单标签，所以通常的形式如下：

<img />

示例代码如下：

	<p>下面显示一幅美景图：<br /><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0403%2F16c9b14dj00qqyz8z0050c000xc00mgm.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666409590&t=cf1fbe23ff7732190a2d49d4cb180916" /></p>

运行结果如下：
HTML常用标签积累-编程之家

25 a标签:链接标签

示例代码如下：

<a href="https://blog.csdn.net/wenhao_ir">点击这里查看昊虹AI笔记网的CSDN博客</a>

运行效果如下图所示：
HTML常用标签积累-编程之家
如果要在新标签中打开链接页面，可以像下面这样写：

<a href="https://blog.csdn.net/wenhao_ir" target="_blank">点击这里查看昊虹AI笔记网的CSDN博客</a>

.

查看全文

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.dgrt.cn/a/32753.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章：

HTML常用标签积累-编程之家

HTML常用标签积累

HTML常用标签积累 目录01-主体标签:html、head、titile、body02-b标签:加粗标签03-strong标签:文本加粗效果(文本强调效果)04-i标签:文本倾斜效果05-em标签:文本倾斜效果(带文本强调的效果)06-u标签:下划线效果07-ins标签:下划线效果08-del标签:删除线效果(中划线)09-s标签:删除……

编程日记2022/9/23 15:10:05HTML常用标签积累-编程之家

一文带你读懂Vue生命周期

Vue生命周期
vue生命周期（又称生命周期回调函数、生命周期函数、生命周期钩子），指的是vue在关键时刻帮我们调用一些特殊名称的函数。
vue生命周期涵盖从vue实例创建到虚拟dom产生再到数据绑定、数据监听、数据渲染以及销毁的整个过程&#……

编程日记2022/9/23 15:09:33HTML常用标签积累-编程之家

jdk源码调试-较好解决方案

Jdk源码断点看不到变量值
原因: sun对rt.jar中的类编译时,去除了调试信息 解决: 可以自己编译Jdk
使用eclipse编译Jdk
新建一个java-project 将D:/programfiles/Jdk/Jdk8/src.zip解压放到java-project的src中,并处理报红色的类,一般swing的可以直接删除 使用export功能导出普……

编程日记2022/9/23 15:09:00HTML常用标签积累-编程之家

kubernetes

Kubernetes 概述 1、K8s是什么? K8s 的全称为Kubernetes (K12345678S)，Ps:“嘛，写全称也太累了吧，不如整个缩写”。 作用: 用于自动部署、扩展和管理"容器化(containerized）应用程序"的开源系统。 可以理解成K8s是负责……

编程日记2022/9/23 15:08:28HTML常用标签积累-编程之家

前端关于cookie那些事儿

关于cookie的作用范围，跨域的问题
主域名不同的cookie是不能数据共享的，但一级域名相同，子域名不同的却可以。 比如 csdn.net 和 blog.csdn.net 和 dengxi.csdn.net 这三种domain的cookie在dengxi.csdn.net这个网站都能拿到。
HTTPOnly属性……

编程日记2022/9/23 15:07:54HTML常用标签积累-编程之家

网络攻击肆虐，高校如何构筑网络安全屏障？

随着人工智能、大数据、物联网等新一代信息技术的迅猛发展，教育信息化2.0和智慧校园建设快速推进。但与此同时，挖矿木马、勒索病毒、钓鱼邮件等网络安全威胁层出不穷，对高校数字化变革与信息化发展带来极大的挑战。
在此背景下，近……

编程日记2022/9/23 15:07:21HTML常用标签积累-编程之家

XMLHttpRequest

Ajax 的核心是 XMLHttpRequest 对象
创建对象
let xhttp new XMLHttpRequest();XMLHttpRequest 对象方法
方法描述new XMLHttpRequest()创建新的 XMLHttpRequest 对象abort()取消当前请求getAllResponseHeaders()返回头部信息getResponseHeader()返回特定的头部信息open(me……

编程日记2022/9/23 15:06:50HTML常用标签积累-编程之家

树莓派搭建网站：配置cpolar内网穿透为后台服务 4/4

在上篇介绍中，我们通过将cpolar云端数据隧道与本地网页的关联，了解了如何对cpolar的配置文件进行修改。现在，我们将继续对cpolar进行设置，将其添加到树莓派的自启动服务中，并设置为后台服务，这样即便树莓派……

编程日记2022/9/23 15:06:15HTML常用标签积累-编程之家

【微服务】- Nacos – 配置中心

微服务 – 配置中心 – Nacos 😄生命不息，写作不止 🔥 继续踏上学习之路，学之分享笔记 👊 总有一天我也能像各位大佬一样 🏆 一个有梦有戏的人 怒放吧德德 🌝分享学习心得，欢迎指正&am……

编程日记2022/9/23 15:05:41HTML常用标签积累-编程之家

软件实训-软件系统分析-某兔

一、软件系统
菜鸟教程
为想学习编程的人提供一个练习编程的网站，该网站包括了HTML、CSS、JavaScript、PHP、C、Python等各种基础编程教程资源。 二、调研成员
某兔
三、调研方式
通过调查编程论坛评论和其他视频软件投放的编程学习视频评论。
四、调研结果
……

编程日记2022/9/23 15:04:29HTML常用标签积累-编程之家

一个python训练

美国:28:麻省理工学院,斯坦福大学,哈佛大学,加州理工学院,芝加哥大学,普林斯顿大学,宾夕法尼亚大学,耶鲁大学,康奈尔大学,哥伦比亚大学,密歇根大学安娜堡分校,约翰霍普金斯大学,西北大学,加州大学伯克利分校,纽约大学,加州大学洛杉矶分校,杜克大学,卡内基梅隆大学,加州大学圣地……

编程日记2023/4/16 14:55:59HTML常用标签积累-编程之家

Mybatis03学习笔记

目录 使用注解开发
设置事务自动提交
mybatis运行原理
注解CRUD
lombok使用（偷懒神器，大神都不建议使用）
复杂查询环境（多对一）
复杂查询环境（一对多）
动态sql环境搭建
动态sql常用标签……

编程日记2023/4/16 14:55:50HTML常用标签积累-编程之家

设置或取得c# NumericUpDown 编辑框值的方法,(注意：不是Value值)

本人在C#开发中使用到了NumericUpDown控件，但是发现该控件不能直接控制显示值，经研究得到下面的解决办法
NumericUpDown由于是由多个控件组合而来的控件，其中包含一个类似TextBox的控件，若想取得或改变其中的值要使用如下方法
N……

编程日记2023/4/16 14:55:46HTML常用标签积累-编程之家

使用NPOI 技术 的SetColumnWidth 精确控制列宽不能成功的解决办法（C#）

在使用NPOI技术开发自动操作EXCEL软件时遇到不能精确设置列宽的问题。
如
ISheet sheet1 hssfworkbook.CreateSheet("Sheet1");
sheet1.SetColumnWidth(0, 50 * 256); // 在EXCEL文档中实际列宽为49.29
sheet1.SetColumnWidth(1, 100 * 256); // 在EXCEL文……

编程日记2023/4/16 14:55:46HTML常用标签积累-编程之家

Mysql 数据库zip版安装时basedir datadir 路径设置问题，避免转义符的影响

本人在开发Mysql数据库自动安装程序时遇到个很奇怪的问题，其中my.ini的basedir 的路径设置是下面这样的：
basedir d:\测试\test\mysql
但是在使用mysqld安装mysql服务时老是启动不了，报1067错误，后来查看window事件发现一个独特……

编程日记2023/4/16 14:55:45HTML常用标签积累-编程之家

java stream sorted排序 考虑null值

项目里使用到排序, java里没有像C# 里的linq，只有stream,查找stream.sorted源码看到有个
Comparator.nullsLast
然后看了一下实现，果然是能够处理null值的排序，如：minPriceList.stream().sorted(Comparator.comparing(l -> l.g……

编程日记2023/4/16 14:55:45HTML常用标签积累-编程之家

spring @EnableConfigurationProperties 实现原理

查看DataSourceAutoConfiguration源码，发现如下代码： Configuration ConditionalOnClass({ DataSource.class, EmbeddedDatabaseType.class }) EnableConfigurationProperties(DataSourceProperties.class) Import({ DataSourcePoolMetadataProvidersCon……

编程日记2023/4/16 14:55:44HTML常用标签积累-编程之家

postman请求https网址没有响应，但是用浏览器有响应，解决办法

遇到个问题：同一个get请求的url，postman请求https网址没有响应，但是用浏览器有响应
url是https开头的，查看错误描述里有一个SSL的选项： 然后根据描述关掉这个选项： 然后就没问题了，能正常请求及……

编程日记2023/4/16 14:55:44HTML常用标签积累-编程之家

java @Inherited注解的作用

看到很多注解都被Inherited进行了修饰，但是这个Inherited有什么作用呢？
查看Inherited代码描述：
Indicates that an annotation type is automatically inherited. If an Inherited meta-annotation is present on an annotation type decl……

编程日记2023/4/16 14:55:43HTML常用标签积累-编程之家

spring mvc的两种部署到Servlet容器的方式：web.xml 、WebApplicationInitializer 以及WebApplicationInitializer原理分析

方式一、编写web.xml
通常我们将一个spring mvc程序部署到Servlet容器（例如Tomcat）时，会使用该方式，示例如下：
<web-app><listener><listener-class>org.springframework.web.context.ContextLoad……

编程日记2023/4/16 14:55:43