HTML总讲-CSDN博客

本文链接：https://blog.csdn.net/2202_75375955/article/details/140252832

HTML 元素语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性
空的 HTML 元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。

在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

HTML 提示：使用小写标签

HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

W3School 使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。
常用的几种标签类型
结构性标签（Structural Tags）：
- <html>：定义HTML文档的根元素。
- <head>：定义文档的头部，包含了元数据。
- <body>：定义文档的主体，包含了可见的内容。
标题标签（Heading Tags）：
- <h1> 到 <h6>：定义六级标题，<h1> 是最高级标题，<h6> 是最低级标题。
段落标签（Paragraph Tag）：
- <p>：定义段落。
链接标签（Link Tags）：
- <a>：定义超链接，用于跳转到其他页面或文件。
列表标签（List Tags）：
- 无序列表 <ul> 和列表项 <li>：用于显示项目无特定顺序的列表。
- 有序列表 <ol> 和列表项 <li>：用于显示项目按顺序排列的列表。
图像标签（Image Tag）：
- <img>：用于在页面中嵌入图像。
表格标签（Table Tags）：
- <table>：定义表格。
- <tr>：定义表格中的行。
- <th>：定义表头单元格。
- <td>：定义表格数据单元格。
表单标签（Form Tags）：
- <form>：定义表单。
- <input>：定义输入字段。
- <button>：定义按钮。
- <select>、<option>：定义下拉菜单。
HTML 属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

属性总是以名称/值对的形式出现，比如：name="value"。

属性总是在 HTML 元素的开始标签中规定。
属性为 HTML 元素提供附加信息。
HTML 样式
style 属性用于改变 HTML 元素的样式。
HTML 的 style 属性

style 属性的作用：

提供了一种改变所有 HTML 元素的样式的通用方法。

样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。
关于如何调用

可以做以下测试
思考如何实现文字变色，以及文字在网页中的布局，大小，以及背景颜色

首先按照上一篇文章所示建立一个html文件

<!-- background-color 背景颜色设置为黑色  属于 Markdown注释：-->
<body style="background-color: black;"> 
<h1 style="font-family: monospace;color: aquamarine;font-size:45px;">This is a heading</h1>
<p style="font-family: verdana;color:brown;font-size: 20px;text-align: center;">This is a paragraph</p>
<!--font-family 文本样式   
    color  颜色
    font-size 文字大小
    text-align 文本位置 -->	
    
</body>

结果如上

至于具体样式，根据使用情况的不同，可以上网查询自己想要的样式，推荐网站w3school 在线教程

HTML 文件路径

接下来讲HTML的路径

在前文博主关于web 第一章初识HTML以及HTML四大案例（保姆级教学）中的图片教学就有涉及这一点今天具体讲一下

路径	描述
<img src="picture.jpg">	picture.jpg 位于与当前网页相同的文件夹
<img src="images/picture.jpg">	picture.jpg 位于当前文件夹的 images 文件夹中
<img src="/images/picture.jpg">	picture.jpg 当前站点根目录的 images 文件夹中
<img src="../picture.jpg">	picture.jpg 位于当前文件夹的上一级文件夹中

绝对文件路径

绝对文件路径是指向一个因特网文件的完整 URL

相对路径

相对路径指向了相对于当前页面的文件。

HTML 头部元素

HTML <head> 元素

<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。

以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。

HTML <title> 元素

<title> 标签定义文档的标题。

title 元素在所有 HTML/XHTML 文档中都是必需的。

title 元素能够：

定义浏览器工具栏中的标题
提供页面被添加到收藏夹时显示的标题
显示在搜索引擎结果中的页面标题

具体样例已经在前文中阐述，这里就不做过多讲述了（关于web 第一章初识HTML以及HTML四大案例（保姆级教学））

HTML <base> 元素

<base> 标签为页面上的所有链接规定默认地址或默认目标（target）：

<!DOCTYPE html>
<html>
<head>
  <base href="https://example.com/path/">
  <title>示例页面</title>
</head>
<body>
  <p><a href="page1.html">页面 1</a></p>
  <p><a href="page2.html">页面 2</a></p>
</body>
</html>

两个页面的效果打开后如图所示：

<base> 元素将基础 URL 设置为 https://example.com/path/。
链接 <a href="page1.html">页面 1</a> 和 <a href="page2.html">页面 2</a> 分别解析为 https://example.com/path/page1.html 和 https://example.com/path/page2.html。

<base> 元素应该放置在 HTML 文档的 <head> 部分，并且每个文档只能有一个 <base> 元素。如果出现多个 <base> 元素，则只有第一个会生效。

需要注意的是，<base> 元素影响文档中所有的相对 URL，包括 CSS 文件引用、JavaScript 源文件 URL 和超链接 (<a> 元素)。

（备注：

Example Domain（示例域名）通常被用作文档和示例中的占位符或演示域名。它没有保留给任何特定的组织或个人，通常用于各种类型的文件中，如技术手册、教程和教育材料中，以展示概念。

使用 “Example Domain” 帮助作者提供清晰易懂的示例，而无需引用真实的域名，避免可能因访问或误解真实域名而引起的混乱或意外后果。

实际上，“Example Domain” 是一个虚构的域名，作为普遍认可的占位符，确保示例保持通用性，并避免潜在的商标或所有权问题。

）所以两个页面打开内容是相似的

HTML <link> 元素

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

HTML <style> 元素

您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式：

前文中已详细阐述就不再赘述。

HTML <meta> 元素

元数据（metadata）是关于数据的信息。

典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="悸动445" content="这是 HTML 文档meta的示例描述。">
  <title>示例页面</title>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

会有一个报错，仅供测试。

进入网页界面以后，F12查看网页信息

HTML <script> 元素

后面我们再来详细解读

HTML 布局

使用 <div> 元素的 HTML 布局

注释：<div> 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。

什么是响应式 Web 设计？

RWD 指的是响应式 Web 设计（Responsive Web Design）
RWD 能够以可变尺寸传递网页
RWD 对于平板和移动设备是必需的

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div Container Example</title>
<style>
  .container {
    width: 50%; /* 设置宽度 */
    background-color: lightblue; /* 添加背景颜色 */
    padding: 15px; /* 内边距 */
    margin: 10px auto; /* 外边距，auto 属性会使 margin 居中 */
    border: 2px solid #007bff; /* 边框 */
  }
</style>
</head>
<body>

<div class="container">
  <h1>这是一个标题</h1>
  <p>以下是一些包含在 div 容器中的文本内容</p>
</div>

</body>
</html>

展示结果如上

HTML 代码约定

web 开发者常常不确定在 HTML 中使用的代码样式和语法。

在 2000 年至 2010 年之间，许多 web 开发者从 HTML 转换为 XHTML。

通过 XHTML，开发者不得不编写有效的“格式良好的”代码。

HTML5 在代码验证时会更宽松一点。

请使用正确的文档类型

请始终在文档的首行声明文档类型：

<!DOCTYPE html>

如果您一贯坚持小写标签，那么可以使用：

<!doctype html>

请使用小写元素名

HTML5 允许在元素名中使用混合大小写字母。

我们推荐使用小写元素名：

混合大小写名称并不好
开发者习惯使用小写名（比如在 XHTML 中）
小写更起来更纯净
小写更易书写

关闭所有 HTML 元素

在 HTML5 中，您不必关闭所有元素（例如 <p> 元素）。

看起来不好：

<section>
  <p>This is a paragraph.
  <p>This is a paragraph.
</section>

看起来不错：

<section>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</section>

关闭空的 HTML 元素

在 HTML5 中，关闭空元素是可选的。

允许这样：

<meta charset="utf-8">

也允许这样：

<meta charset="utf-8" />

斜杠（/）在 XHTML 和 XML 中是必需的。

使用小写属性名

HTML5 允许大小写混合的属性名。

我们建议使用小写属性名：

混合属性名并不好
开发者习惯于使用小写属性名（比如在 XHTML 中）
小写属性名看情况更纯净
小写属性名更易书写
属性值加引号

HTML5 允许不加引号的属性值。

我们推荐属性值加引号：
如果属性值包含值，则必须使用引号
混合样式绝对不好
加引号的值更易阅读

这个属性值无效，因为值中包含空格：

<table class=table striped>

这样是有效的：

<table class="table striped">

必需的属性

请始终对图像使用 alt 属性。当图像无法显示时该属性很重要。

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

请始终定义图像尺寸。这样做会减少闪烁，因为浏览器会在图像加载之前为图像预留空间。

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

空格和等号

等号两边的空格是合法的：

<link rel = "stylesheet" href = "styles.css">

但是精简空格更易阅读， But space-less is easier to read, and groups entities better together:

<link rel="stylesheet" href="styles.css">

避免长代码行

当使用 HTML 编辑器时，通过左右滚动来阅读 HTML 代码很不方便。

请尽量避免代码行超过 80 个字符。

空行和缩进

请勿毫无理由地增加空行。

为了提高可读性，请增加空行来分隔大型或逻辑代码块。

为了提高可读性，请增加两个空格的缩进。请勿使用 TAB。

请勿使用没有必要的空行和缩进。没有必要在短的和相关项目之间使用空行，也没有必要缩进每个元素。

HTML 框架

框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

使用框架的坏处：

开发人员必须同时跟踪更多的HTML文档
很难打印整张页面
框架标签（Frame）

Frame 标签定义了放置在每个框架中的 HTML 文档。

在下面的这个例子中，我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中，而 HTML 文档 "frame_b.htm" 被置于第二个列中：
```
<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>
```
HTML Web Server
如果希望向世界发布您的网站，那么您必须把它存放在 web 服务器上。

<!DOCTYPE> 声明

Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。

HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。

<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。

到目前为止基础知识已经过完，不太重要的部分，选择性屏蔽了，有兴趣的同学可以上网查一下。

接下来最后一步做一个项目总结。html的项目。

使用样图：

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 项目总结案例</title>
<style>
  .project {
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
  }
  .project h2 {
    color: #007bff;
  }
  .project img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px auto;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  }
</style>
</head>
<body>

<div class="project">
  <h2>项目一：网页设计</h2>
  <p>这是一个关于网页设计的项目总结。以下是设计的网页示意图：</p>
  <img src="./img/task3_1.jpg" alt="网页设计示意图">
</div>

<div class="project">
  <h2>项目二：移动应用开发</h2>
  <p>这是一个移动应用开发项目的总结。以下是应用的截图：</p>
  <img src="./img/csdn.png" alt="移动应用截图">
</div>

</body>
</html>