一,概念
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>
编辑