day1 标签基本语法

最新推荐文章于 2024-02-19 23:13:03 发布

小邓子在上海流浪

最新推荐文章于 2024-02-19 23:13:03 发布

阅读量368

点赞数

分类专栏：基础语法文章标签： html5

本文链接：https://blog.csdn.net/qq_57535164/article/details/122310963

版权

基础语法专栏收录该内容

29 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML的基本语法，包括双标签和单标签的使用，以及常见的HTML元素，如标题标签、段落、文字样式、图片和超链接的插入。同时，讲解了如何设置网页图标、超链接的跳转方式，以及如何使用a标签创建文字和图片超链接。

摘要由CSDN通过智能技术生成

day1 标签基本语法

<!--
 html   -   是通过不同的标签给网页提供不同的内容
 1、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>
		<meta charset="utf-8">
		<title>常用标签</title>
		<!-- 设置网页图标 
		link标签  - 导入外部文件
		
		
		(1)rel属性   -  文件的作用，stylesheet-样式表，icon-图标
		(2)type属性  - 导入的文件的类型和文件后缀；
		            text/css - 文本文件/后缀是.css
					image/png  -  图片文件/后缀是.png
		(3)href属性  - 文件路径		
		-->
		<link rel="icon" type="image/png" href="./img/picture.png" />
	</head>
	<body>
		<!-- 1\标题标签 -->
		<h1 id="i1">一级标题</h1>
		<h2>二级标题</h2>
		<h3>三级标题</h3>
		<h4>四级标题</h4>
		<h5>五级标题</h5>
		<h6>六级标题</h6>
		<!-- 2、段落标签：p 
		     一个标签的内容会单独占一行
			 -->
		<p id="i2">人生易老天难老，<b><i>岁岁重阳，</i></b>今又重阳，战地黄花分外香。</p>
		<p>一年一度秋风劲，<b>不似春光，</b>胜似春光，寥廓江天万里霜。</p>
		<!-- 3、行内文字 标签 -->
		<span>作者：毛泽东</span>
		<!-- 4、加粗和倾斜：b i -->
		<b>我是你的father</b>
		<i>你是我的son</i>
		<!-- 5、图片标签 
		     src属性：本地图片地址或者网络图片地址
		 img-->
		<!-- 显示本地图片 -->
		<img src="img/picture.png" / title="本地图片">
		<!-- 显示网络图片 -->
		<img title="网络图片" src="https://www.wanmeizy.com/uploads/ueditor/upload/image/20190513/155771589064749921.jpg" 
		width="100px" height="100px">
		<!-- 6、超链接：  a -->
		<!-- <a href="跳转地址">可见可点击的部分</a> -->
		<!-- （1）target属性 - 跳转方式； _self(默认值，直接在当前网页中加载
		           新的页面，_blank在新的窗口中加载新的页面) -->
		<!--（2） href属性，跳转地址
		          情况一：网页地址 - 跳转到新的网页>
				  情况二： 本地html文件路径 - 打开本地页面（本地跳转）
				  情况三：  网页精确定位
		<!-- 文字超链接 -->
		<a href="http://www.baidu.com" target="_blank">百度</a>
		<!-- 图片超链接 -->
		<a href="http://www.baidu.com">
			<img src="img/picture.png"  >
		</a>
		<a href="./test1.html">第一章</a>
		<br>
		<a href="./test2.html">第二章</a>
		<br>
		<a href="./test3.html">第三章</a>
		<br>
		<div style="background-color: aqua;height: 50rem;">
			
		</div>
		<a href="#i2">回到顶部</a>
	</body>
</html>