html基础

最新推荐文章于 2025-03-31 09:50:29 发布

windrainjs

最新推荐文章于 2025-03-31 09:50:29 发布

阅读量232

点赞数

分类专栏： May 文章标签： html 前端

本文链接：https://blog.csdn.net/qq_45751796/article/details/122226786

版权

May 专栏收录该内容

26 篇文章

订阅专栏

html基础

标签基本语法

html - 通过不同的标签来给网页提供不同的内容
html中的标签有双标签和单标签两种
1)双标签
<标签名属性1=属性值1属性2=属性值2 …>标签内容</标签名>
2)单标签
<标签名属性1=属性值1-属性2=属性值2·…>·或者<标签名-属性1=属性值1-属性2=属性值2·…/>
说明:
    a.标签名不是程序员自己命名的,而是html提前规定好的
    b.每个标签是单标签还是双标签是确定的,不能修改
    c.不管属性值的本质是什么数据，属性值都必须写在双引号里面
    d.双标签的标签内容可以是任何内容，包括:只要文字、其他一个或者多个，一层或者多层标签、标签和文字的组合

常用标签

<!-- 版本说明 -->
<!DOCTYPE html>
<!-- 
 html标签 - 代表整个网页
 head标签 - 网页顶部，主要负责网页图标和网页标题的显示
 body标签 - 网页内容的显示
 -->
<!-- 

 -->
<html>
	<head>
		<!-- 设置网页编码方式 -->
		<meta charset="utf-8" />
		<!-- 设置网页标题 -->
		<title>day——one</title>
		<!-- 设置图标
		link标签	-	导入外部文件
			1)rel属性	-	文件的作用
			2)type属性	-	导入的文件的类型和文件后缀;
						text/css  -  文本文件/后缀是.css
						image/png  -  文本文件/后缀是.png
			3)href属性	-	文件路径
		 -->
		<link rel="icon" type="image/png" href="./img/2.png"/>
	</head>
	<body>
		<!-- 1.标题标签: h1~h6 -->
		<h1 id=b>标题1</h1>
		<h2>标题2</h2>
		<h3>标题3</h3>
		<h4>标题4</h4>
		<h5>标题5</h5>
		<h6>标题6</h6>
		<!-- 2.p标签 
		一个p标签的内容会单独占一行
		-->
		
		<!-- 3.行内文字标签:span -―>
		
		<!-- 4.加粗和倾斜:b、i(行内的)—->
		
		<!-- 5.图片标签: img
		 src属性: 本地图片地址或者网络图片地址(决定要显示的是哪张图片)
		 title属性: 当鼠标移动到图片上显示的内容
		 -->
		<!--显示本地图片-->
		<img src='./img/1.png' title="本地图片">
		<!--显示网络图片-->
		<img src='https://www.baidu.com/img/PCfb_5bf082d29588c07f842ccde3f97243ea.png' title="网络图片">
		<!-- 6.超链接 : a
		target属性	-	跳转方式; _self(默认值,直接在当前网页中加载新的页面)、_blank(在新的窗口中加载新的页面)
		href属性	-	跳转地址
			情况一:网页地址	-	跳转到新的网页
			情况二:本地html文件路径	-	打开本地页面(本地跳转)
			情况三:id选择器  ―  网页精确定位
		-->
		<!-- 文字超链接 -->
		<a href="http://www.baidu.com">百度</a>
		<!-- 图片超链接 -->
		<a href="http://www.baidu.com">
			<img src='./img/1.png' title="本地图片">
		</a>
		<!-- 描点超链接 -->
			<a href="#b">跳转到id=b标签的位置</a>
	</body>
</html>