一,概念
HTML(HyperText Markup Language)是一种标记语言,用于创建和设计网页内容的结构和样式。它是网页开发的基础,允许开发者通过一系列标签(tags)和属性(attributes)来构建网页的骨架,并赋予网页内容意义和结构。
超文本:链接
标记:标签结构
标签结构
标签要成对出现,中间包裹内容
<>里面放英文字母(标签名)
结束标签比开始标签多 /
标签分类:双标签和单标签标签,带尖括号的文本
如果代码环境在vscode中,我们可以通过!快速创建HTML骨架。
HTML骨架
<html>
<head>
<title>网页标题</title>
</head>
<body>
网页主体
</body>
</html>
● html:整个网页
● head:网页头部,用来存放给浏览器看的信息,例如 CSS
● title:网页标题
● body:网页主体,用来存放给用户看的信息,例如图片、文字
标签的关系
兄弟关系:标签处在同一级上
父子关系:标签为包含关系(嵌套关系)
注释
我们可以通过快捷键ctrl+/来快速注释,注意,HTML和CSS和JS的注释略有不同,注意甄别。
二,标签类别
1.标题标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
h1-h6大小逐级递减,标题标签顾名思义,一般用来写标签,当然,HTML5新增的header标签用来写标题也很不错。
2.段落标签
<p>段落</p>
用来显示文本信息,独占一行,行间具有间隙。
3.换行和水平线
<br>
<hr>
<hr>
<hr>
<hr>
效果如图。
4.文本格式化标签
5.图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="">
</body>
</html>
src:图片路径,可以选择本地也可以链接网络url
alt:图片损坏后的替代
title:提示文本,就是光标移动到屏幕时的文字提醒。
width/height:调节图片大小,同时调的话可能会改变图片比例
6.超链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href=""></a>
</body>
</html>
href:填写超链接,可以是其他html文件路径,也可以是某个标签的id,点击链接跳转到目标位置。
没想好填哪个地址可以用#代替
target:默认是该网页跳转,即覆盖目前网页,target="_blank"是开启一个新窗口。
7.音频标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<audio src=""></audio>
</body>
</html>
8.视频标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<video src=""></video>>
</body>
</html>