HTML基础标签

最新推荐文章于 2024-09-05 21:31:46 发布
最新推荐文章于 2024-09-05 21:31:46 发布
阅读量868 收藏 2
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41532872/article/details/86317955
版权

标题标签


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!-- h1-h6都是标题标签，定义一段话的标题，h1最大，依次递减，h6最小
			标题标签的作用：让文本加粗显示		
		-->
		<h1>我是h1标题</h1>
		<h2 align="right">我是h2标题</h2>
		<h3 align="center">我是h3标题</h3>
		<h4>我是h4标题</h4>
		<h5>我是h5标题</h5>
		<h6>我是h6标题</h6>
	<!--	 <h7>我是h7标题</h7>-->
	</body>
</html>

在这里插入图片描述

段落标签


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--段落标签：p标签
		用来显示一段文本(图片)，它会忽略源代码中的排版 
		 块元素：独占一行的元素，和相邻的元素不能共享同一行,所有的块元素都有align属性,
		 h1-h6和p元素都是块元素
		-->
		<p align="right">
	 春眠不觉晓，
                处处闻啼鸟。
                   夜来风雨声，
                        花落知多少。
		</p>xxxx
	</body>
</html>

在这里插入图片描述

格式标签


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--格式标签：
			 b标签：加粗文本
			 del标签：包含的文本中间有条横线
			 em标签：包裹的文本会显示为斜体
			 i标签：包裹的文本会显示为斜体
			 pre标签：显示源代码的排版
			 strong标签：和em作用一样，都有强调的意思，如果要强调一段文字，建议使用strong标签
			 u标签：给文本添加下划线
			 sup：定义上标文本
			 sub:定义下标文本
		-->
		我是正常的文本
	   <b>我是粗体文本</b>
	   <del>武汉尚学堂</del>
	   <p>我 是一个<em>好人</em></p>
	      <i>虽然也是斜体字，但这里是i标签</i>
	      
	      <pre>
	      	春眠不觉晓，
                                     处处闻啼鸟。
                                        夜来风雨声，
                                            落知多少。
	      </pre>
	      我是<strong>好人</strong>    <u>我自带下划线</u>
	       2<sup>2</sup>=4
	       log<sub>10</sub>1000=3
	</body>
</html>

在这里插入图片描述

图片标签及其他标签


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			图片标签img，用来把图片显示在网页上
			 必须属性:1.src:图片的路径(可以用相对路径或绝对路径，不建议用绝对路径)
			 2.alt:定义图片无法显示时的代替文本
			  相对路径：以当前文件所在的位置为参考路径,定义出来的路径叫相对路径
			 绝对路径：文件在硬盘上的物理路径叫绝对路径,例如：
			 D:\work\20181129JAVA班\课件\01-web前端课件\web-day1\Code\web-day1\img\tly.jpg
			 可选属性：
			 1.title：鼠标放在图片上时的提示文字,所有元素都有title属性
			 2.width:定义图片的宽度，默认以像素px为单位，可以省略单位不写
			 3.height:定义图片的高度
			 br标签：换行标签，可以写成<br>或者<br/>
			 hr标签：水平线标签，可以写成<hr>或者<hr/>,属性有：width(宽度),size(高度),color(颜色)
		-->
		<img  src="../img/tly.jpg"  alt="图片无法加载" title="大美女" width="242"  height="280"><br>
		
		<hr  width="90%" size="5px" color="red"/>
		<h3>超链接</h3>
		<!--超链接标签a
		  必须属性href:定义要打开的网页或其它资源(图片等)的路径
		 可选属性target:定义在什么地方打开链接的文档，默认值_self(在当前窗口中打开链接的文档)   _blank:在新窗口中打开 
		  href="#":表示跳转到当前页面，能够把当前页面刷新一次
		 -->
		<a href="http://www.baidu.com">百度一下</a>
		
		<a href="http://www.baidu.com" target="_blank">百度一下</a><br>yyyy
		 <a href="#tips">查看详情</a>  <a href="#">跳转到当前页面</a>
			<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<!-- 定义一个锚(目标)，必须有name属性或id属性 -->
		  <a name="tips">我就是详情，哈哈</a>
	</body>
</html>

在这里插入图片描述

span及其div标签


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
		  span:通常用于修饰文本，可以给它添加样式，例如style="color: red;"
		  div:把文档分割成若干个独立的部分 ,块级元素
		-->
		  <span style="color: red;">这是span标签</span>我不是span
		  
		  <div style="background-color: yellow;">我是div1</div>
		   <div style="background-color: green;">我是div2</div>
		   <div style="background-color: blue;height: 500px;">我是div3</div>
	</body>
</html>

在这里插入图片描述

列表


<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<!--
			 ul定义无序列表，type属性定义列表项目的标记，默认是disc
				type="disc" 默认黑色圆点

type="circle" 空心圆点

type="square" 方块-->
		<h3>无序列表--使用ul标签包裹</h3>
		<p>知名手机厂商</p>
		<ul type="circle">
			<li>华为</li>
			<li>小米</li>
			<li>三星</li>
			<li>苹果</li>
		</ul>
	<!--	ol定义有序列表，type属性定义项目的标记，默认是数字
		type="A"或"a":表示大写字母或者小写字母
		 type="I"或type="i"：表示罗马大写字母或罗马小写字母
		-->
		<h3>ol定义有序列表，列表中的项目是有顺序的</h3>
		<p>2018手机销量排名</p>
		<ol type="I">
		  <li>华为</li>	
		  <li>苹果</li>
		  <li>小米</li>	
		</ol>
	</body>

</html>

在这里插入图片描述

司天宏
关注
专栏目录
HTML基础标签.md
02-05
HTML基本标签，对于初学者来说这是最基本的内容，有效的掌握基本标签是，学习HTML的第一步，也是至关重要的，
HTML入门（详细）
qq_63525426的博客
05-03 3万+
HTML（全称为“超文本标记语言”）是一种用于创建Web页面的标记语言。它是Web开发的基础，允许开发者定义页面的结构、内容和样式。HTML使用一些标记或“标签”来描述文本和媒体内容的结构和格式，这些标签可以指示网页浏览器如何显示内容，包括标题、段落、列表、超链接、图像、音频、视频等等。HTML还可以与其他Web技术（如CSS和JavaScript）结合使用，以实现更复杂和交互性的Web应用程序。这篇文章只是介绍HTML的基础标签的使用。
HTML基本标签
m0_57898822的博客
04-02 1万+
HTML标签
HTML 基础知识详解与代码示例
最新发布
weixin_63556308的博客
09-05 1337
用于输出一些特殊的字符，因为有些特殊字符不能直接在网页中显示。默认情况下打开新网页时老网页会关闭，可使用。用于传递参数和数据，使用。
HTML基础学习代码
zhuozhuo1998的博客
01-15 2134
HTML基础学习代码
HTML基础教程（非常详细）从零基础入门到精通，看完这一篇就够了。
wangluoanquan111的博客
09-05 1万+
HTML全称Hyper Text Markup Language, 翻译成中文就是超文本标记语言，是一种最基础的网页开发语言, 需要注意的是HTML并不是编程语言, 而是一种标记语言超文本可以理解为超越了文本的意思, 也就是超级文本, 超文本不只是普通的文本内容, 还可以加入图片,视频,声音等内容, 甚至可以从一个文件跳转到另一个文件(超级链接文本)标记语言可以理解为一套标记标签,也就是由许多标记标签组成的语言。
HTML零基础入门教程（详细）
热门推荐
ZONGXP的博客
10-22 23万+
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 指的是超文本标记语言:HyperTextMarkupL...
实验1html基础标签（学生端资料）.zip
02-22
这个实验1的主题是“HTML基础标签”，意味着我们将深入探讨HTML中的一些基本元素和结构，这对于任何想要学习Web开发的人来说都是至关重要的第一步。 HTML由一系列的标签组成，这些标签定义了网页的内容和结构。每个...
HTML5常用基础标签
12-12
### HTML5常用基础标签知识点详解 #### 一、HTML的基本结构 HTML5的基本结构由`<!DOCTYPE html>`声明、`<html>`根元素及其内部的`<head>`和`<body>`元素组成。 - **`<!DOCTYPE html>`**: 定义了文档类型和版本，...
JavaWeb——HTML基础标签table标签与form标签的学习与理解
01-08
使用表格标签制作规整的表格 table标签是表格标签， border属性设置表格的边框厚度， width属性设置表格的宽度， align设置表格的对齐方式， cellspacing设置单元格的间距 tr是行标签， td是单元格标签， th是字体...
html标签基础学习笔记
05-24
html标签基础学习笔记
HTML1.01 HTML标签及规范基础
09-13
HTML1.01 HTML标签及规范基础 本资源主要讲解了HTML的基础知识，包括HTML的概念、发展历程、标签结构、块状元素和行内元素、W3C规范等。同时，本资源还对HTML的功能、版本演进、浏览器内核、动态网页和静态网页进行...
html标签.xmind
06-27
本人在学习中总结的html标签知识，仅用于学习使用，该总结用Xmind编辑汇总，里面总结的知识点较为全面，适合新手，和对前端网页制作感兴趣的同学，当然也适用于生活中用到该知识点的人员。
网页基础（三）HTML基本标签
01-07
但是W3CSchool中使用的是小写标签，因为万维网联盟（W3C）在HTML4中推荐使用小写，在未来(X)HTML版本中强制使用小写。 常用标签有换行水平线预定义文本在下列代码中给出实例 马上十点了 我 是 ...
HTML基础-标签的学习
12-05
本篇文章将详细介绍HTML的基础标签，特别是与列表、表格和表单相关的标签，以及字符实体和语义化标签。 首先，我们来看列表标签。列表在网页设计中广泛用于组织和呈现相关信息。主要有三种类型的列表： 1. **无序...
html基本标签
weixin_44992737的博客
06-04 4672
html基本标签
HTML基础知识（超详细！）
qq_60950941的博客
04-18 2441
本文全面介绍了html的标签以及新增的html5标签，可以帮助人们在最短的时间里打下基础
HTML 基础
icc_hhy的博客
06-24 1293
HTML标签的基础知识及用法整理，主打一个不求甚解！
HTML基础标签详解与示例
在HTML中，基本标签构成了网页的基础框架。`<html>`标签定义整个HTML文档的开始和结束，而`<head>`和`<body>`标签则分别用于设定文档头部信息（如标题）和主体内容。`<title>`标签是用于在浏览器的标题栏中显示页面...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值