HTML标签学习

最新推荐文章于 2024-02-29 05:30:00 发布

南岸青栀*

最新推荐文章于 2024-02-29 05:30:00 发布

阅读量2.8k

点赞数 9

分类专栏：前端学习

本文链接：https://blog.csdn.net/qq_43710889/article/details/115573130

版权

HTML标签学习

文章目录

HTML标签学习

head标签学习

网页标题标签

<title>HTML学习</title> <!-- 告诉浏览器我们需要什么标题来显示页 -->

编码格式标签

<meta charset="utf-8" /> <!-- H5网页解析编码标签 -->
<meta http-equiv="content-type" content="text/html; charset=utf-8"><!-- H4网页解析编码标签 -->

网页搜索优化标签

	<title>HTML学习</title> <!-- 告诉浏览器我们需要什么标题来显示页 -->
	<meta name="Description" content="本网页是关于HTML的head的学习，666，哈哈哈"/> <!-- 网页描述 --> 
	<meta name="Keywords" content="azb,lll,xxx"/> <!-- 网页关键字 -->
	<meta name="author" content="安老师"/> <!-- 网页作者 -->

网页指定跳转标签

<meta http-equiv="refresh" content="5;url = https://www.baidu.com"/><!-- 表示五秒后跳转指定URL -->

其他标签

CSS或js引入的标签

body标签学习

body文本标签

1.标题标签

h1到h6：会将其中的数据加粗显示，并且显示依次减弱，标题标签自带换行功能（块级标签）

属性：align ： center right left

		<h1 align="center">我是标题</h1>
		<h2 align="center">我是标题</h2>
		<h3 align="middle">我是标题</h3>
		<h4 align="right">我是标题</h4>
		<h5>我是标题</h5>
		<h6>我是标题</h6>

在这里插入图片描述

2.水平线标签

hr:会在页面中显示一条水平线,默认居中显示

属性:

width="宽度”设置水平线的宽度
size=“高度”
设置水平线的高度
color="颜色”设置水平线的颜色

<hr width="200px" size="20px" color="red" align="left">
<hr width="40%">

在这里插入图片描述

3.段落标签

p:会将一段数据作为整体进行显示,主要是进行css和js操作时比较方便.会自动换行(块级元素)

特点:段间距比较大

4.换行符标签

br:告诉浏览器需要在此位置换行

5.空格符标签

&nbsp:告诉浏览器在此位置增加空格

6.权重标签

b:会将内容加黑显示
i :会将内容斜体显示
u:会将内容增加下划线
del :增加中划线

权重标签可以随意叠加

注：

1标签的属性是对标签的功能进一步的补充 ,可以由开发人员自由指定标签的属性值,来达到想要的显示效果。
2像素单位占据的是电脑屏幕的大小，百分比占据的是浏览器窗口的大小。

		<p>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u>东方网·演兵场4月6日报道</u>：<br>多家央媒近日集中报道了入列一年多的首艘国产航
			母山东舰，披露了其社区化生活、官兵伙食和近防装备等诸多细节。演兵场注
			意到
		</p>
		<p>
			<b>东方网</b>·演兵场<i>4月6日</i>报道：多家央媒近日集中报道了入列一年多的首艘国产航
			母山东舰，<del>披露了其社区化生活、官兵伙食和近防装备等诸多细节。演兵场注
			意到</del>
		</p>
		<b><i><u><del>今天适合学习d</del></u></i></b>

文本标签全部代码

<html>
	<head>
		<meta charset="utf-8"/>
		<title>body标签学习</title>
	
	</head>
	<body>
		<h1 align="center">我是标题</h1>
		<h2 align="center">我是标题</h2>
		<h3 align="middle">我是标题</h3>
		<h4 align="right">我是标题</h4>
		<h5>我是标题</h5>
		<h6>我是标题</h6>
		<hr width="200px" size="20px" color="red" align="left">
		<hr width="40%">
		<p>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u>东方网·演兵场4月6日报道</u>：<br>多家央媒近日集中报道了入列一年多的首艘国产航
			母山东舰，披露了其社区化生活、官兵伙食和近防装备等诸多细节。演兵场注
			意到
		</p>
		<p>
			<b>东方网</b>·演兵场<i>4月6日</i>报道：多家央媒近日集中报道了入列一年多的首艘国产航
			母山东舰，<del>披露了其社区化生活、官兵伙食和近防装备等诸多细节。演兵场注
			意到</del>
		</p>
		<b><i><u><del>今天适合学习d</del></u></i></b>
		
	</body>
</html>

body列表标签

1.无序列表

ul
li :该标签中书写列表内容,一个1i标签代表列表中的一行数据

特点:默认数据前有一个黑圆圈符号.

2.有序列表

ol
li :该标签中书写列表内容,一个1i标签代表列表中的一行数据

特点:

会自动的给列表进行顺序编码,格式从小到大并且是连续的。

属性:type:可以改变顺序编码的值，可以是1 a A I, ,默认使用阿拉伯数字进行顺序编码

3.自定义列表

dl
dt :数据的标题
dd:数据的具体内容,一个dd表示一条数据、

列表标签全部代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>body标签（列表标签）</title>
	</head>
	<body>
		<h3>列表的学习</h3>
		<hr >
		<h3>无序列表</h3>
		<ul>
			
			<li>北京</li>
			<li>广州</li>
			<li>上海</li>
			<li>西安</li>
		</ul>
		<h3>有序列表</h3>
		<ol type="A">
			<li>xx</li>
			<li>hh</li>
			<li>ll</li>
			<li>qq</li>
			
		</ol>
		<dl>
			<dt>java</dt>
			<dd>python</dd>
			<dd>go</dd>
			<dd>shell</dd>
			<dt>hh</dt>
			<dd>aa</dd>
			<dd>xx</dd>
			<dd>ll</dd>
		</dl>
	</body>
</html>

图片标签学习

img src :

图片路径

最低0.47元/天解锁文章

南岸青栀*

关注

9
点赞
踩
16

收藏

觉得还不错? 一键收藏
打赏
6
评论
HTML标签学习

HTML标签学习文章目录HTML标签学习head标签学习body标签学习body文本标签1.标题标签2.水平线标签3.段落标签4.换行符标签文本标签全部代码body列表标签1.无序列表2.有序列表3.自定义列表列表标签全部代码图片标签学习代码粘贴超链接标签学习a标签锚点学习代码粘贴表格标签的学习表格的合并代码粘贴表格标签练习（绘出求职简历表）内嵌标签的学习框架标签的学习form表单标签的学习from表单域标签学习注册页面练习head标签学习网页标题标签<title>HTML学习&lt
复制链接

扫一扫