网页概念
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建和设计网页的标准标记语言。它描述了网页的结构和内容，通过标签（tag）来定义网页的各个元素。HTML 是构建网页的基础技术之一，通常与 CSS（Cascading Style Sheets，层叠样式表）和 JavaScript 一起使用，以实现网页的样式和交互功能。
标签形式
在HTML 标签有单标签和双标签两种表现的形式，单标签是自闭合的，不需要闭合标签，而双标签则需要一个闭合标签来标识元素的结束。
单标签:<br> <img> <hr> <input> <meta> <link> <source>
双标签:<div> <p> <a> <h1> <h6> <ul> <li> <ol> <li> <table> <tr> <td> <span> <form>
单标签 (Self-Closing Tags)
单标签 (Self-Closing Tags)
1.换行标签 <br>
<br>2.图像标签 <img>
<img src="image.jpg" alt="Description">3.水平线标签 <hr>
<hr>4.输入标签 <input>
<input type="text" name="username">5.元数据标签 <meta>
<meta charset="UTF-8">6.链接外部资源 <link>
<link rel="stylesheet" href="styles.css">7.定义多媒体资源 <source>
<source src="video.mp4" type="video/mp4">双标签 (Paired Tags)
双标签 (Paired Tags)
1.定义文档中的分区或节 <div>
<div>
<!-- Content here -->
</div>2.段落标签 <P>
<p>This is a paragraph.</p>3.超链接标签 <a>
<a href="https://example.com">Visit Example</a>4.标题标签 <h1> <h6>
<h1>Main Heading</h1>
<h2>Sub Heading</h2>5.无序列表及列表项 <ul> <li>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>6.有序列表及列表 <ol> <li>
<ol>
<li>First item</li>
<li>Second item</li>
</ol>7.表格及其内容 <table> <tr> <td>
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>8.行内容器 <span>
<span>Inline text</span>9.表单标签 <form>
<form action="/submit" method="post">
<!-- Form elements here -->
</form>骨架结构
基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>示例网页</title>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一个段落。</p>
</body>
</html><!DOCTYPE html>：声明文档类型，告诉浏览器这是一个 HTML5 文档。<html>：HTML 文档的根元素，包含所有内容。<head>：头部元素，包含关于文档的信息（元数据），例如标题、字符集和样式表链接等。<meta charset="UTF-8">：定义文档的字符集为 UTF-8。<title>：设置文档的标题，显示在浏览器的标题栏或标签页上。<body>：主体元素，包含网页的可见内容。<title>是<head>标签中必须包含的东西，<title>标签有利于SEO优化。<meta>标签是 HTML 文档中用于指定页面元数据的标签。元数据是关于 HTML 文档的信息，而不是文档的内容本身。<meta>标签通常放置在文档的<head>部分，提供了关于文档的信息，如作者、描述、关键字、字符集等。
meta标签用途和属性
meta标签用途和属性
1.字符集声明
指定文档使用的字符编码。
<meta charset="UTF-8">2.页面描述
提供页面的简要描述，有助于搜索引擎优化 (SEO)。
<meta name="description" content="This is a brief description of the webpage.">3.关键字
提供与页面内容相关的关键字，帮助搜索引擎理解页面主题（现代搜索引擎通常不再使用此信息）。
<meta name="keywords" content="HTML, CSS, JavaScript, web development">4.作者
指定文档的作者。
<meta name="author" content="John Doe">5.视口设置
控制页面在不同设备上的显示和缩放。
<meta name="viewport" content="width=device-width, initial-scale=1.0">6.刷新页面
设置页面自动刷新或重定向。
<meta http-equiv="refresh" content="30"> <!-- 每30秒刷新一次页面 -->
<meta http-equiv="refresh" content="5;url=https://example.com"> <!-- 5秒后重定向到指定URL -->7.兼容性模式
指定IE浏览器使用的渲染模式。
<meta http-equiv="X-UA-Compatible" content="IE=edge">8.内容安全策略
帮助防御跨站脚本 (XSS) 和数据注入攻击。
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">使用示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="This is a sample webpage for demonstrating meta tags.">
<meta name="keywords" content="HTML, meta tags, SEO">
<meta name="author" content="Jane Smith">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sample Meta Tags</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a sample webpage to demonstrate the use of meta tags in HTML.</p>
</body>
</html>结论
<meta> 标签在 HTML 文档中扮演着重要的角色，提供了关于文档的关键信息，有助于搜索引擎优化、跨设备显示以及安全性管理等方面。理解和正确使用 <meta> 标签，可以显著提升网页的性能和可访问性
路径详解
路径主要有三种类型：相对路径和绝对路径以及网络路径。
路径用于指定文件的位置，例如图像、样式表、脚本文件等。
路径结构
路径示例
/project
/images
logo.png
/css
styles.css
index.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>
<!-- 使用相对路径引用CSS文件 -->
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<!-- 使用相对路径引用图像 -->
<img src="images/logo.png" alt="Logo">
<!-- 使用绝对路径引用外部资源 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>
</html>1.相对路径
相对路径是根据文件系统的结构，指向当前文件位置的路径。
相对路径示例
# 相对当前文件的同一目录
<img src="logo.png" alt="Logo"> <!-- 在同一目录下 -->
# 相对当前文件的子目录
<img src="images/logo.png" alt="Logo"> <!-- 在images子目录下 -->
<link rel="stylesheet" type="text/css" href="css/styles.css"> <!-- 在css子目录下 -->
# 相对当前文件的父目录
<!-- 假设在/project/css/styles.css 中引用 /project/images/logo.png -->
<img src="../images/logo.png" alt="Logo"> <!-- 在上一级目录的images子目录下 -->特殊符号
# ./：表示当前目录
<img src="./logo.png" alt="Logo"> <!-- 当前目录 -->
# ../：表示父目录
<img src="../images/logo.png" alt="Logo"> <!-- 父目录的images子目录 -->2.绝对路径
绝对路径是从根目录开始指定文件的位置。
绝对路径示例
<img src="/images/logo.png" alt="Logo"> <!-- 从服务器根目录开始 -->3.网络路径
用于指向不同的网站或网络资源。
网络路径示例
<img src="https://www.example.com/images/logo.png" alt="Logo"> <!-- 完整的URL路径 -->
<link rel="stylesheet" type="text/css" href="https://www.example.com/css/styles.css">工具选择
浏览器
Firefox
Edge
Chrome
开发器
VScode
WebStorm
HbuilderX
1 条评论
打卡