HTML结构
在vscode中可用“！”快速生成html初始结构，如下
<!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>
</body>
</html>- <!DOCTYPE html> 声明为 HTML5 文档
- <html> 元素是 HTML 页面的根元素
- <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
- <title> 元素描述了文档的标题
- <body> 元素包含了可见的页面内容
HTML语法规范
- html 标签是由尖括号包围的关键词，例如<html>。
- html 标签大部分时间都是成对出现。例如<html>和</html>，我门称之为双标签。标签对中的第一个标签是开始标签，第二个是结束标签。
- 有些特殊的标签必须是单个标签（极少情况），例如<br>我们称之为单标签
HTML链接（超链接）
HTML使用超链接与网络上另一个文件链接，几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
以下是 HTML 中创建链接的基本语法和属性：
<a href="url">text</a>
- href：指定链接目标的URL，这是链接的最重要属性。可以是另一个网页的URL、文件的URL或其他资源的URL。
- target（可选）：指定链接如何在浏览器中打开。常见的值包括 _blank（在新标签或窗口中打开链接）和 _self（在当前标签或窗口中打开链接）。
- title（可选）：提供链接的额外信息，通常在鼠标悬停在链接上时显示为工具提示。
- rel（可选）：指定与链接目标的关系，如 nofollow、noopener 等。
以下为一个实例：
<a href="https://www.baidu.com/" target="_blank" title="百度">点击跳转</a>在此案例中，href属性的URL值为百度的网址，target值为“_blank”，title的值为“百度”，在代码运行后，页面会有一个“点击跳转”的链接，鼠标悬停在链接上时会显示“百度”，点击后浏览器将在新标签打开百度的页面。
HTML图像与路径
在 HTML 中，图像由<img> 标签定义。
<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。
以下为一个实例
<img src="dog.jpg" alt="这是一条狗">在此案例中，页面会显示一个名为“dog.jpg”的图像，且在这个图像没有加载出来或加载错误的时候，页面会有一段替换文本“这是一条狗”来提示读者。
html文件路径分为相对路径和绝对路径
以下为一个实例
在此实例中，文件的结构大致如下
-TEST
-html
cat.jpg
img.html
-resource
dog.jpg相对路径
若当前文件“img.html”要访问“cat.jpg”文件，则可使用 ./ 访问“cat.jpg”文件，例如<img src="./cat.jpg">
若当前文件“img.html”要访问“dog.jpg”文件，则可使用../来返回到上级文件夹resource，再访问此文件夹下的“dog.jpg”文件,例如<img src="../resource/dog.jpg">
绝对路径
绝对路径从盘符开始查找，例如<img src="C:/TEST/html/cat.jpg">
扫一扫
3570
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
