html基本语法_

作者：小桥流水78 | 2024-07-18 12:52:07

踩

html基本语法

html概述

●HTML 指的是超文本标记语言 (HyperText Markup Language)。
超文本:是指页面内可以包含图片、链接、声音,视频等内容
标记:标签(通过标记符号来告诉浏览器网页内容该如何显示)

<!-- 
    ctrl+shift+/生成注释
	声明html语言的版本，主要是告诉浏览器，使用的是html的哪一个版本为标准来解析网页
	!DOCTYPE html  <-- html5
 -->
 
<!DOCTYPE html>  
<!-- 
   <html>  是网页的根标签，若有的都需要写在此标签中，标记语言必须要有一个根标签
		<head>  网页的头
			<meta charset="utf-8" />  设置网页的字符集
			<title></title>  网页标题
			<link href="img.baidu.icu" rel="icon">  标题处图标rel="icon"指明文件类型
									让搜索引擎使用的
		<head>
   </html>
 -->
<html>
	<head>
		<meta charset="utf-8" />
		
		<title>百度一下，你就知道</title>
		<link href="img.baidu.ico" rel="icon">
		<style type="text/css">
		
		</style>
		<script type="text/javascript">
		
		</script>
	</head>
	<body>
		body是网页的身体  网页显示的所有内容都显示在此标签中
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

在这里插入图片描述

属性
标签可以拥有属性。属性进一步说明了该标签的显示或使用
特性。如：
1.属性的格式：属性名 = “属性值“
2. 属性的位置：<标签名属性名 = “属性值“ >xxx</标签名>
3. 添加多个属性：<标签名属性名 = “属性值“ 属性名 = “属性值“ >xxx </标签名>

基本常用标签

在这里插入图片描述
段落、换行、列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		html是网页的骨架，所有关于网页的样子的修饰，css是专门负责修饰网页外观的语言
		标题标签  align="center"  控制文字在标签行内的水平位置，值=left（默认）center right
		段落  <p></p>
		换行  <br/>
		列表  <ul> 和<ol> 
				 -->
		 <h1 align="left">一级标题</h1>
		 <h2 align="center">二级标题</h2>
		 <h3 align="right">三级标题</h3>
		
		<!-- 在段落中换行需要使用<br/>  -->
		 <p>
		 			 这是一个段落这是一个段落这是一个段落<br/>
					 这是一个段落这是一个段落这是一个段落<br/>
					 这是一个段落这是一个段落这是一个段落<br/>
					 这是一个段落这是一个段落这是一个段落<br/>
					 这是一个段落这是一个段落这是一个段落<br/>
		 			 
		 </p>
		
		<!-- 无序列表<ul><li></li></ul>  前面没有序号，有一个默认的图标，后期使用css替换图标 -->
		 <ul>  
			 <li>列表内容</li>
			 <li>列表内容</li>
			 <li>列表内容</li>
		 </ul>
		 <!-- 有序列表，默认是1，2，3  type="A"可设置序号的样式 -->
		 <ol>
		 	 <li>列表内容</li>
		 	 <li>列表内容</li>
		 	 <li>列表内容</li>
		 </ol>
		 <ol type="A">
			 <li>列表内容</li>
			 <li>列表内容</li>
			 <li>列表内容</li>
		 </ol>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

运行效果
在这里插入图片描述

超链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		 <a> 表示超链接 
		 href="指定链接地址 必须要有链接"  、
		  target="_blank"   在新窗口打开链接地址   默认是在当前窗口打开
		 -->
		1
2
3
4
5
6
7
8
9
10
11
12

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小桥流水78/article/detail/845746