推荐学习使用网站
HTML使用实例
头部
<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
<!DOCTYPE html>
<!-- 声明文档类型和HTML版本，这里虽然没有直接写出DOCTYPE声明，但通常我们会包含它，例如：<!DOCTYPE html> -->
<html>
<head>
<!-- 定义文档的头部信息 -->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<!-- 设置文档的内容类型和字符集。注意：gb2312是较旧的字符编码，现代网页建议使用UTF-8。 -->
<meta http-equiv="Content-Language" content="zh-cn" />
<!-- 设置文档的语言，这里指定为简体中文。 -->
<title>标题不会显示在文档区</title>
<!-- 设置网页的标题，这个标题会显示在浏览器的标签页上，而不是在网页的内容区域。 -->
</head>
<body>
<!-- 定义网页的主体内容 -->
<p>这段文本会显示出来。</p>
<!-- 这是一个段落标签，里面的文本“这段文本会显示出来。”将会在页面上显示。 -->
</body>
</html>HTML 头部元素
| 标签 | 描述 |
|---|---|
| <head> | 定义关于文档的信息。 |
| <title> | 定义文档标题。 |
| <base> | 定义页面上所有链接的默认地址或默认目标。 |
| <link> | 定义文档与外部资源之间的关系。 |
| <meta> | 定义关于 HTML 文档的元数据。 |
| <script> | 定义客户端脚本。 |
| <style> | 定义文档的样式信息。 |
布局
<div> 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。
W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
-
<!DOCTYPE html>
<html>
<head>
<style>
/* 头部样式 */
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
/* 导航栏样式 */
#nav {
line-height:30px; /* 行高设置，使文本垂直居中 */
background-color:#eeeeee;
height:300px; /* 导航栏高度 */
width:100px; /* 导航栏宽度 */
float:left; /* 浮动到左侧 */
padding:5px; /* 内边距 */
}
/* 内容区域样式 */
#section {
width:350px; /* 内容区域宽度 */
float:left; /* 浮动到左侧，与导航栏并排 */
padding:10px; /* 内边距 */
}
/* 页脚样式 */
#footer {
background-color:black;
color:white;
clear:both; /* 清除浮动，确保页脚位于所有浮动元素下方 */
text-align:center;
padding:5px; /* 内边距 */
}
</style>
</head>
<body>
<!-- 头部区域 -->
<div id="header">
<h1>大标题</h1>
</div>
<!-- 导航栏区域 -->
<div id="nav">
侧边1.0<br>
侧边2.0<br> 
响应式设计
TML 响应式 Web 设计（Responsive Web Design, RWD）是一种网页设计方法，它使得网站能够根据不同的访问设备（如桌面电脑、平板电脑、智能手机等）的屏幕尺寸和分辨率来自动调整布局、图片大小、字体等，从而提供最佳的浏览体验。实现响应式 Web 设计通常不仅仅依赖于 HTML，而是结合 CSS（特别是 CSS3 媒体查询）和 JavaScript（可选）来完成。
响应式设计的关键元素
-
流体网格（Fluid Grids）：
使用百分比（%）而不是固定像素（px）来定义布局的宽度，使得布局能够随着浏览器窗口大小的变化而伸缩。 -
媒体查询（Media Queries）：
CSS3 引入的媒体查询允许你根据不同的媒体类型和条件应用不同的样式规则。例如，你可以根据屏幕宽度来应用不同的样式表。 -
灵活的图片（Flexible Images）：
使用max-width: 100%;和height: auto;的 CSS 规则来确保图片能够根据其容器的宽度自动缩放，避免图片过大导致布局破坏。 -
灵活的视频（Flexible Videos）：
类似于图片，视频也需要适应不同的屏幕尺寸。可以使用 CSS 来确保视频能够在其容器中正确显示。 -
响应式排版（Responsive Typography）：
字体大小也应该根据屏幕尺寸自动调整。使用相对单位（如 em 或 rem）来定义字体大小，并结合媒体查询来设置不同屏幕尺寸下的字体大小。
响应式设计可以自己创建，也可以通过Bootstrap来创建。
Bootstrap是一个由Twitter开发的免费开源Web开发框架，它基于HTML、CSS和JavaScript，旨在通过为模板设计提供一套语法来简化响应式、移动优先网站的Web开发过程。如需学习更多有关 Bootstrap 的知识，可以阅读W3school网站的 Bootstrap 教程。
计算机代码
在HTML中，如果想展示计算机代码（比如C++, Python, JavaScript等语言的代码），可以使用<pre>和<code>标签来保持代码的格式，包括空格、换行符以及缩进。这些标签结合使用可以很好地在网页上显示源代码的样式。
<kbd> 标签用于表示用户输入的内容，特别是通过键盘输入的内容。当你想在文档中指示用户按下某个键或按键组合时，可以使用这个标签。浏览器通常会以稍微不同的样式显示<kbd>标签内的内容，以突出它是键盘输入。
<samp> 标签用于表示计算机程序的输出样本。这通常包括命令行输出、脚本输出或其他计算机程序产生的文本。<samp>标签内的文本应该被展示为“样本输出”，并且浏览器可能会以特定的样式（如等宽字体）来显示它，以区分于普通文本。
<pre>标签用于预格式化的文本。它保留了文本中的空格、制表符和换行符。这意呀着，当你将代码放入<pre>标签中时，它将按照你在HTML源代码中编写的那样展示。
<code>标签用于表示代码片段。它通常与<pre>标签一起使用，以提供代码的语义化和格式化的表示。虽然<code>标签本身不会改变文本的格式，但它告诉浏览器这段文本是代码，这有助于搜索引擎优化（SEO）和屏幕阅读器等辅助技术理解内容。
<!DOCTYPE html>
<html>
<head>
<title>计算机代码格式示例</title>
<style>
/* 可选：为代码添加一些样式 */
pre {
background-color: #f4f4f4;
border: 1px solid #ddd;
padding: 10px;
overflow: auto; /* 如果代码超出容器宽度，添加滚动条 */
}
code {
font-family: monospace; /* 使用等宽字体 */
}
</style>
</head>
<body>
<h2>示例代码</h2>
<pre><code>
#include <iostream>
int main() {
std::cout << "Hello, World!" << std::endl;
return 0;
}
</code></pre>
</body>
</html>实体
HTML 字符实体（Character Entities）是HTML中用于表示那些难以通过标准键盘输入或者在HTML中有特殊含义的字符的代码。这些字符实体可以是一个或多个字符，并且以&符号开始，以;符号结束。使用字符实体可以避免在HTML代码中直接使用某些特殊字符时可能导致的解析错误或显示问题。
HTML5引入了一些新的字符实体，主要用于表示一些数学符号、技术符号以及特殊字符等，但这些新的字符实体在日常的HTML编码中并不常用。
使用字符实体是确保HTML文档正确解析和显示的重要手段之一。不过，在编写HTML时，如果可能的话，也推荐使用字符的Unicode编码（以\u开头的四位十六进制数），因为这样可以更直接地表示字符，并且在一些编程语言和工具中更加通用。但是，请注意，在HTML文档中直接使用Unicode编码字符时，需要确保文档的编码（如UTF-8）能够支持这些字符。
如需完整的实体符号参考，请访问W3school网站的 HTML 实体符号参考手册。
符号
表情符号
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <!-- 设置文档的字符编码为UTF-8，确保Emoji能够正确显示 -->
</head>
<body>
<h1>放大的 Emoji</h1> <!-- 页面标题，显示"放大的 Emoji" -->
<!-- 以下段落将使用较大的字体尺寸来显示几个Emoji -->
<p style="font-size:48px">
😀 😄 😍 💗
<!-- 这些Emoji分别是：笑脸、大笑的脸、爱心脸和红色心 -->
</p>
</body>
</html>需要仔细查看的，请访问W3school网站 HTML 字符集参考手册。
字符集
HTML 编码，特别是字符集（Character Set）或字符编码（Character Encoding），是网页中用于表示文本字符的系统。字符集定义了可以使用的字符以及这些字符在计算机中的表示方式。在HTML文档中，通过<meta>标签的charset属性来指定文档的字符编码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<p>这里可以包含任何Unicode字符，包括中文、日文、韩文等。</p>
</body>
</html>URL
URL 也被称为网址。
URL 可以由单词组成，比如 “w3school.com.cn”，或者是因特网协议（IP）地址：192.168.1.253。大多数人在网上冲浪时，会键入网址的域名，因为名称比数字容易记忆。
- scheme - 定义因特网服务的类型。最常见的类型是 http
- host - 定义域主机（http 的默认主机是 www）
- domain - 定义因特网域名，比如 w3school.com.cn
- :port - 定义主机上的端口号（http 的默认端口号是 80）
- path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
- filename - 定义文档/资源的名称
编者注：URL 的英文全称是 Uniform Resource Locator，中文也译为“统一资源定位符”。
在HTML中，URL通常用于以下几种情况：
-
超链接（Hyperlinks）：使用
<a>标签创建超链接时，href属性包含目标资源的URL。当用户点击链接时，浏览器会导航到该URL指定的地址。<a href="https://www.example.com">访问Example网站</a> -
图片（Images）：在
<img>标签中使用src属性指定图片的URL。浏览器会加载并显示该URL指向的图片。<img src="https://www.example.com/image.jpg" alt="示例图片"> -
脚本（Scripts）和样式表（Stylesheets）：在
<script>和<link>标签中，分别使用src和href属性指定外部JavaScript文件和CSS样式表的URL。浏览器会加载这些资源以执行脚本或应用样式。<!-- 外部JavaScript --> <script src="https://www.example.com/script.js"></script> <!-- 外部CSS样式表 --> <link rel="stylesheet" href="https://www.example.com/styles.css"> - 表单（Forms）：在
<form>标签的action属性中，可以指定表单数据提交到的URL。当表单提交时，浏览器会将表单数据发送到该URL。<form action="https://www.example.com/submit-form" method="post"> <!-- 表单内容 --> </form>
测试
学习完成了吗，可以点击以下链接进行检测哦。
HTML 测验：现在就开始测验！祝您好运。
126
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
