常用HTML标签分享系列一
前言
HTML,超文本标记语言,由标签组成,分为单标签和双标签,每个标签的属性id唯一,但name不唯一,其基本结构为Dom(Document Object Mode 文档对象模型)树,如图:
<html lang="en">
<head><!-- 头部内容 -->
</head>
<body><!-- 身体内容 -->
</body>
</html>
推荐学习网页:HTML标签及全称
目录
1. 注释标签
2. 标题标签
3. 段落标签
4. 换行标签
5. 格式化标签
6. 图片标签
7. a超链接标签
8. 表格标签
1. 注释标签
<!-- --> ,标签内容不会显示到页面上,在代码中起提示作用,快捷键ctrl + /(有?那个键)
2. 标题标签
● 基本解释
h1~h6,字体逐渐变小,h1为最大而h6为最小.
<h1>h1</h1><h2>h2</h2><h3>h3</h3><h4>h4</h4><h5>h5</h5><h6>h6</h6>
● 运行结果
3. 段落标签
● 基本解释
p标签,一个p标签对应一个段落,段落与段落之间有行间距.
<p>这是一个段落内容1,这是一个段落内容,这是一个段落内容,这是一个段落内容,这是一个段落内容,这是一个段落内容,这是一个段落内容,这是一个段落内容,这是一个段落内容,这是一个段落内容,这是一个段落内容,这是一个段落内容,这是一个段落内容,这是一个段落内容,这是一个段落内容,这是一个段落内容,这是一个段落内容,这是一个段落内容,这是一个段落内容,这是一个段落内容,这是一个段落内容,这是一个段落内容.</p><p>这是一个段落内容2,这是一个段落内容,这是一个段落内容,这是一个段落内容,这是一个段落内容,这是一个段落内容,这是一个段落内容,这是一个段落内容,这是一个段落内容,这是一个段落内容,这是一个段落内容,这是一个段落内容,这是一个段落内容,这是一个段落内容,这是一个段落内容,这是一个段落内容,这是一个段落内容,这是一个段落内容,这是一个段落内容,这是一个段落内容,这是一个段落内容,这是一个段落内容.</p>
● 运行结果
4. 换行标签
● 基本解释
br标签,它是一个单标签,一个br标签对应一次换行.
<span>这是一段文字,这是一段文字,这是一段文字.<br>这是一段文字,这是一段文字,这是一段文字.<br>这是一段文字,这是一段文字,这是一段文字.<br>这是一段文字,这是一段文字,这是一段文字.<br>这是一段文字,这是一段文字,这是一段文字.<br>这是一段文字,这是一段文字,这是一段文字.<br>这是一段文字.</span>
● 与段落标签的区别
换行与换行之间没有行间距.
● 运行结果
5. 格式化标签
● 基本解释
① strong和b标签:实现加粗效果.
② em和i标签:实现斜体效果
③ del和s标签:实现删除线效果
④ ins和u标签:实现下划线效果
当前向大家展示的是具有凤求凰图案,颜色鲜明的<strong>"大千世界"</strong>,<em>新推出的旗袍系列</em>,原价要<s>999999999</s>,现在搞活动,只要<ins>9999.</ins>
● 运行结果
6. 图片标签
● 基本解释
img标签,显示一张图片,必须设定的src属性,给定要显示图片的地址,地址分为网络地址和本地地址,本地地址又分为相对地址和绝对地址.只要图片的网络地址是有效的,那么就能显示该网络地址的图片.给定本地地址可以显示自己本地的图片,我这里是使用的相对地址.除src属性外,title属性用于当鼠标挪动到图片时,提示用户图片内容,alt属性用于当图片加载不出来的时候,对图片内容的描述.
<img src="./image/background.png" title="背景图片" alt = "背景图片">
● 运行结果
7. a超链接标签
● 基本解释
a标签用于实现点击跳转页面,必须设定属性为href属性指定要跳转的页面,我们给上述图片添加一个超链接,跳转到百度网页(以另一个新标签页打开 target属性设置为blank,默认为self当前页打开).
<a href="http://baidu.com" target="_blank"><img src="./image/background.png" title="背景图片"></a>
● 运行结果
点击图片后:
注:a标签还能实现锚点的跳转,给要跳转到的位置的标签设置id值,那么将a标签的href属性设置为#id名,就可以跳转到该id名的标签位置.
8. 表格标签
● 基本解释
table标签,由thead表头和tbody表身构成,一般来说,thead中包含th+td+tr(包含td,一行中有多个单元格,单元格用td表示),tbody由多行组成(一行有多个单元格).除此之外,我们可以针对列或行进行单元格的合并,为合并的第一列或第一行添加colspan,rowspan属性,可以设置合并单元格的个数.
总的结构如图:
<table height = "200px" width = "500px" style="border: red solid 3px;"><thead><th style="border: red solid 3px;">表头1</th><th style="border: red solid 3px;">表头2</th><th style="border: red solid 3px;">表头3</th></thead><tbody><tr><td style="border: red solid 3px;">第一行</td><td style="border: red solid 3px;">第一行</td><td style="border: red solid 3px;">第一行</td></tr><tr><!-- 列单元格合并,合并时就只需要写两个td就能构成三列 --><!-- <td style="border: red solid 3px;" colspan="2">第二行</td> --><td style="border: red solid 3px;">第二行</td><td style="border: red solid 3px;">第二行</td><td style="border: red solid 3px;">第二行</td></tr><tr><td style="border: red solid 3px;">第三行</td><td style="border: red solid 3px;">第三行</td><td style="border: red solid 3px;">第三行</td></tr></tbody></table>
● 运行结果
合并前:
合并后:
分享完毕~~
常用HTML标签分享系列一相关推荐
- [知识库分享系列] 三、Web(高性能Web站点建设)
知识库分享系列: [知识库分享系列] 二..NET(ASP.NET) [知识库分享系列] 一.开篇 分享介绍 此知识库之所以为 Web 系列,因为和 .NET 没有完全的关系,其中的技术和实践实用于各 ...
- (0098)iOS开发之应用间的分享系列(3)
(0096)iOS开发之应用间的分享系列(1) (0097)iOS开发之应用间的分享系列(2) 前两篇都是讲的分别是 将自己的应用添加到系统的分享面板 将图片通过分享面板分享到自己的应用中并显示. 这 ...
- (0096)iOS开发之应用间的分享系列(1)
分享系列: (1)应用间的分享概要 (2) Share Extension将应用添加到系统分享列表 (3) 在自己的应用中调起系统分享面板分享到面板上的其他应用中 (0097)iOS开发之应用间的分享 ...
- [知识库分享系列] 二、.NET(ASP.NET)
最近时间又有了新的想法,当我用新的眼光在整理一些很老的知识库时,发现很多东西都已经过时,或者是很基础很零碎的知识点.如果分享出去大家不看倒好,更担心的是会误人子弟,但为了保证此系列的完整,还是选择分享 ...
- 软件分享系列之【Office 2010下载安装】并持续分享中...
目录 一.office简介 二.office 2010下载 三.office 2010安装教程 步骤一 步骤二 步骤三 步骤四 步骤五 一.office简介 Microsoft Office是由Mic ...
- 【Echarts】ECharts中常用的标签
详细的标签详解 ECharts中常用的标签 ECharts中常用的标签 title标签 legend tooltip xAxis和yAxis 不同种类图的区别 ECharts中常用的标签 title标 ...
- 一点就分享系列(实践篇6——上篇)【迟到补发_详解yolov8】Yolo-high_level系列融入YOLOv8 旨在研究和兼容使用【3月份开始持续补更】
一点就分享系列(实践篇5-补更篇)[迟到补发]-Yolo系列算法开源项目融入V8旨在研究和兼容使用[持续更新] 题外话 [最近一直在研究开放多模态泛化模型的应用事情,所以这部分内容会更新慢一些,文章和 ...
- HTML5常用基础标签
HTML5中的标签众多,有时新手刚入门前端很容易步入误区,即想要一把抓掌握所有的知识,其实全部掌握效果不尽人意,相反会让我们学习受挫,效率低下,因此"片面"的学习有助于我们提高学习 ...
- 一点就分享系列(理解篇5)Meta 出品 Segment Anything 4月6号版核心极速解读——主打一个”Zero shot“是贡献和辅助,CV依然在!
一点就分享系列(理解篇5)Meta 出品 Segment Anything 通俗解读--主打一个"Zero shot"是贡献,CV依然在! 文章目录 一点就分享系列(理解篇5)Me ...
最新文章
- CVPR2020论文点评: AdderNet(加法网络)
- 新建swap分区的规划、挂载和自动挂载示例
- Android之adb jdwp获取debug版本app的进程Id
- JUnit的内置Hamcrest Core Matcher支持
- VS Code设置中文插件
- Spring Cloud 2020年路线图发布,涵盖Spring Boot 2.3、2.4,Spring Cloud Ilford等重磅内容!
- Python3 获取当前路径,当前文件名,当前文件名路径、指定import的文件路径、程序路径
- MVC系列——MVC源码学习:打造自己的MVC框架(一:核心原理)
- python实现k core算法_python实现k-近邻算法
- MVC4 Action
- vim编辑器删除空行
- ADS(Advanced Design system)原理图结合板层结构仿真(MSub)及版图仿真(EM Simulation)
- Apollo无人驾驶系统基础入门(云服务+感知(一))
- 文曲星猜数字游戏java代码_Python版的文曲星猜数字游戏代码
- 【vue+elementui】时间选择器:时间格式、设置时间最大日期或最小日期、设置时间选择范围
- 【后端架构完善与接口开发】003-新增ebook表,生成持久层代码
- Vue 短信验证码组件
- 阿里p9就三分钟。。。。。
- 14_单引号和双引号
- 为什么天蝎座出互联网大佬,我来告诉你原因!