基本概念与标签
概述与定义
HTML超文本标记语言--HyperText Markup Language
超文本--链接
标记--标签，带尖括号的文本
tips:使用VS CODE开发常用的插件:chinese,open in browser,html css support,eslint
标签
标签一般成对出现，中间包裹内容，<html></html>
分类:
- 双标签：
- 单标签：
换行，
水平线
HTML基本标签
# VS CODE 输入!+回车自动生成基本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
# html--整个网页
# head--网页头部
# title--网页标题
# body--网页主体标签间的关系
明确标签间关系，有利于组织代码，增强美观性，减少错误。
- 父子关系，包含关系，子标签换行且缩进
- 兄弟关系，并列关系，换行
注释
对代码的解释和说明，提高可读性,注释后浏览器不会显示。
单行注释<!--...-->,VSCODE快捷键Ctrl +/
标签分类
标题标签
用于新闻标题，文章标题，网页区域名称，产品名称等等。
标题标签独占一行。
一般h1使用一个网页一次。
h1-h6(双标签)
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>段落标签
p标签(双标签)<p></p>
特点：
独占一行，两个p标签间有空行。
换行和水平线标签
不需要包裹内容的是单标签。
换行:
水平线：
文本格式化标签
| 标签 | 作用 |
|---|---|
| strong | 加粗 |
| em | 倾斜 |
| ins | 下划线 |
| del | 删除线 |
| b | 加粗 |
| i | 倾斜 |
| u | 下划线 |
| s | 删除线 |
strong\em\ins\del标签自带强调含义，较为常用。
图像标签
img标签用于放置图像，src属性指定路径。
<img src="./bizhi02.jpg" alt="">
<img src="./lovejoanicon.jpg" alt="网站logo" width="400" height="400" title="网站logo">属性:
| 属性 | 作用 | 说明 |
|---|---|---|
| alt | 替换文本 | 图像无法显示时显示的文字 |
| title | 提示文本 | 鼠标悬停在图片上显示的文字 |
| width | 图片的宽度 | |
| height | 图片的高度 |
属性名="属性值"
属性写在尖括号里面，标签名后面，标签名和属性之间空格隔开，不区分先后顺序。路径
查找文件时候经过的路线。
- 绝对路径，从盘符开始查找文件
- 相对路径，从当前文件位置查找文件
# ./表示当前文件夹
# ..表示上一级超链接
点击跳转到其他页面或者位置。
<a href="https://www.baidu.com">百度</a>
# href，链接网络地址或者本地文件
<a href="./bizhi01.jpg">图片链接</a>
# 如果在开发时不确定链接地址可以在href中写#空链接
<a href="#">空链接</a>属性
| 属性 | 作用 |
|---|---|
| target | _blank打开新页面, |
音视频标签
音频标签audio
<audio src="音频的URL"></audio>
<audio src="./李玖哲 - 夏天.mp3" controls autoplay loop></audio>属性：
tips:HTML5中如果属性名和值一致，可以简写为一个属性名单词
| 属性 | 作用 | 说明 |
|---|---|---|
| src | 音频URL | 支持MP3,Ogg,Wav |
| controls | 显示音频控制面板 | |
| loop | 循环播放 | |
| autoplay | 自动播放 | 浏览器一般自动禁用,需要自行设置浏览器设置开启权限 |
视频标签vedio
tipes:MP4格式如果浏览器无法显示可能和视频编码格式有关，使用格式工厂转为h264
<video src="./江语晨-浪漫爱(标清).mp4" controls></video>
<video src="./love.mp4" controls autoplay muted></video>| 属性 | 作用 | 说明 |
|---|---|---|
| src(必须选项) | 视频URL | 支持MP4,Ogg,WebM |
| controls | 显示视频控制面板 | |
| loop | 循环播放 | |
| autoplay | 自动播放 | 浏览器支持静音状态下自动播放 |
| muted | 静音播放 |
1 游客 2025-03-28 00:06 回复
555g8VJ70Pi') OR 685=(SELECT 685 FROM PG_SLEEP(15))--
1 游客 2025-03-28 00:05 回复
(select(0)from(select(sleep(15)))v)/*'+(select(0)from(select(sleep(15)))v)+'"+(select(0)from(select(sleep(15)))v)+"*/
1 游客 2025-03-28 00:03 回复
555
1 游客 2025-03-28 00:02 回复
555
@@ch79v 游客 2025-03-28 00:00 回复
555
1-1; waitfor delay '0:0:15' -- 游客 2025-03-27 23:58 回复
555
1 游客 2025-03-27 23:57 回复
555
1 游客 2025-03-27 23:55 回复
555
1 游客 2025-03-27 23:53 回复
www.lovejoan.com
1 游客 2025-03-27 23:53 回复
https://www.lovejoan.com/
1 游客 2025-03-27 23:52 回复
555