HTML基础

Super500000

已于 2022-11-19 17:58:18 修改

阅读量357

点赞数

分类专栏：前端文章标签：前端 html javascript

于 2022-11-19 17:43:32 首次发布

本文链接：https://blog.csdn.net/Super500000/article/details/127939529

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML——构建Web

开始学习HTML

通过使用标签<em>和</em>（在前面放置<em>打开元素，在后面放置</em>关闭元素）——这使得行内容变成斜体强调！
strong是加粗标记
块级元素和内联元素

$- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BkTi9GyA-1668850527804)(C:\Users\16695\AppData\Roaming\Typora\typora-user-images\image-20221116221343327.png)]$
空元素：
- 例如：src
- 不用以结尾
属性：

一个属性必须包含如下内容：

1.一个空格，在属性和元素名称之间（如果已经有一个或多个属性，就与前一个属性之间有一个空格）。

2.属性名称，后面跟着一个等于号。

3.一个属性值，由一对引号 (“”) 引起来。
元素的属性：
- href: 这个属性声明超链接的 web 地址，当这个链接被点击浏览器会跳转至 href 声明的 web 地址。
- title: 标题title属性为超链接声明额外的信息，比如你将链接至的那个页面。例如：title="The Mozilla homepage"。当鼠标悬停在超链接上面时，这部分信息将以工具提示的形式显示。
- target: 目标target属性用于指定链接如何呈现出来。例如，target="_blank"将在新标签页中显示链接。如果你希望在当前标签页显示链接，忽略这个属性即可。

布尔属性：

<!-- 使用 disabled 属性来防止终端用户输入文本到输入框中 -->
<input type="text" disabled>

分析代码：
- <!DOCTYPE html>: 声明文档类型，<!DOCTYPE html> 是最短有效的文档声明。
- <html></html>: <html>元素。这个元素包裹了整个完整的页面，是一个根元素。
- <head></head>: <head>元素。这个元素是一个容器，它包含了所有你想包含在 HTML 页面中但不想在 HTML 页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS 样式，字符集声明等等。以后的章节能学到更多关于元素的内容。
- <head></head>: <head>元素。这个元素是一个容器，它包含了所有你想包含在 HTML 页面中但不想在 HTML 页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS 样式，字符集声明等等。以后的章节能学到更多关于元素的内容。
- <meta charset="utf-8">: 这个元素设置文档使用 utf-8 字符集编码，utf-8 字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。
- <title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
- <body></body>: <body>元素。包含了你访问页面时所有显示在页面上的内容，文本，图片，音频，游戏等等。

`<head>`标签里有什么？Metadata-HTML 中的元数据

head元素和body元素不同，它的内容不会在浏览器中显示，它的作用是保存页面一些元素据。
title元素为文档添加标题，h1是为body添加标题（页面内容）的，h1也叫做网页标题，二者并不同
元数据：<meta>元素
- 指定文档中字符的编码： <meta charest = "utf-8">
- 元素包含了name和content属性：
  name指定了meta元素的类型；说明该元素包含了什么类型的信息
  content指定了实际的元数据内容
在HTML中应用CSS和JavaScript
- 分别使用和

				<script src="my-js-file.js" defer></script>

为文档设置主语言
- 最后，值得一提的是可以（而且有必要）为站点设定语言，这个可以通过添加 lang 属性到 HTML 开始的标签中来实现（参考 meta-example.html），如下所示：
```
<html lang="zh-CN">
```

HTML文本基础

标题和段落
1. 每个段落是通过
  元素标签来定义的
2. 每个标题是通过“标签标题”进行定义的：
```
<h1>我是文章的标题</h1>
```

3.这里有六个标题元素标签 —— <h1>、<h2>、<h3>、<h4>、<h5>、<h6>。每个元素代表文档中不同级别的内容; <h1> 表示主标题（the main heading），<h2> 表示二级子标题（subheadings），<h3> 表示三级子标题（sub-subheadings），等等。

编辑结构层次
1. 我们需要给我们的内容结构标记（也就是确定标题）
2. 灵活应用
  和

列表

有序

<ol>
    <li>豆浆</li>
    <li>油条</li>
</ol>

无序

<ul>
	<li>豆浆</li>
    <li>油条</li>
</ul>

嵌套列表Nesting lists

将一个列表嵌套到另外一个列表是完全可以的

<ol>
  <li>先用蛋白一个、盐半茶匙及淀粉两大匙搅拌均匀，调成“腌料”，鸡胸肉切成约一厘米见方的碎丁并用“腌料”搅拌均匀，腌渍半小时。</li>
  <li>用酱油一大匙、淀粉水一大匙、糖半茶匙、盐四分之一茶匙、白醋一茶匙、蒜末半茶匙调拌均匀，调成“综合调味料”。</li>
  <li>鸡丁腌好以后，色拉油下锅烧热，先将鸡丁倒入锅内，用大火快炸半分钟，炸到变色之后，捞出来沥干油汁备用。</li>
  <li>在锅里留下约两大匙油，烧热后将切好的干辣椒下锅，用小火炒香后，再放入花椒粒和葱段一起爆香。随后鸡丁重新下锅，用大火快炒片刻后，再倒入“综合调味料”继续快炒。</li>
  <li>如果你采用正宗川菜做法，最后只需加入花生米，炒拌几下就可以起锅了。</li>
  <li>如果你在北方，可加入黄瓜丁、胡萝卜丁和花生米，翻炒后起锅。</li>
 </ol>

起强调作用
1. 斜体
2. 加粗
斜体字、粗体字、下划线
- 被用来传达传统上用斜体表达的意义：外国文字，分类名称，技术术语，一种思想……
- 被用来传达传统上用粗体表达的意义：关键字，产品名称，引导句……
- 被用来传达传统上用下划线表达的意义：专有名词，拼写错误……

创建超链接

将文本的内容包裹在元素内，并给它一个href属性（它将包含一个网址）来创建一个基本链接

<p>我创建了一个指向
<a href="https://www.mozilla.org/zh-CN/">Mozilla 主页</a>的超链接。
</p>

结果如下所示：

我创建了一个指向 Mozilla 主页的超链接。

使用title属性添加支持信息，当鼠标悬停在链接上时，标题将作为提示信息出现

<a href="https://www.mozilla.org/zh-CN/" title="了解Mozilla 使命以及如何参与贡献的最佳站点">Mozilla 主页</a>的超链接。

块级链接

你可以将一个图像转换成链接，你只需要把引用图像文件的元素放到标签内

<a href="https://www.mozilla.org/zh-CN/">
  <img src="mozilla-image.png" alt="链接至 Mozilla 主页的 Mozilla 标志">
</a>

统一资源定位符（URL）与路径（path)
1. 统一资源定位符是一个定义了在网络上的位置的一个文本字符串。例如 Mozilla 的中文主页定位在https://www.mozilla.org/zh-CN/.
2. URL 使用路径查找文件。路径指定文件系统中你感兴趣的文件所在的位置。
  1. 指向当前目录：
  - 直接在href中输入文件名
  - ```
  <p>要联系某位工作人员，请访问我们的<a
   href="contacts.html">联系人页面</a>。</p>
```
1. 指向子目录
  - 要先进入子目录再指明要链接到的文件index.html
  - ```
  <p>请访问<a href="projects/index.html">项目页面</a>。</p>
```
  2. 指向上级目录
    - 返回上一级目录级用两个英文点号表示“…”
    - ```
    <p>点击打开<a href="../pdfs/project-brief.pdf">项目简介</a>。</p>
```
文档片段
1. 超链接除了可以链接到其他文档或网址外，还可以链接到HTML文档的特定部分（被称为文档片段），要做到这一点必须要给要链接的元素分配一个id属性
2. 例如，如果你想链接到一个特定的标题，可以这样做：
```
<h2 id="Mailing_address">邮寄地址</h2>
```
  然后链接到那个特定的 id，你可以在 URL 的结尾使用一个井号指向它，例如：
```
<p>要提供意见和建议，请将信件邮寄至<a href="contacts.html#Mailing_address">我们的地址</a>。</p>
```
  你甚至可以在同一份文档下，通过链接文档片段，来链接到同一份文档的另一部分：
```
<p>本页面底部可以找到<a href="#Mailing_address">公司邮寄地址</a>。</p>
```
绝对URL和相对URL
1. 绝对URL：
  - 指向由其在 Web 上的绝对位置定义的位置，包括协议和域名。例如：http://www.example.com/projects/index.html
  - 不管绝对 URL 在哪里使用，它总是指向确定的相同位置。
2. 相对URL：
  - 指向与你链接的文件相关的位置，如果 PDF 文件能够在 projects 的子目录 pdfs 中访问到，相对路径就是 pdfs/project-brief.pdf（对应的绝对 URL 是 http://www.example.com/projects/pdfs/project-brief.pdf）
  - project-brief.pdf 文件和 pdfs 文件夹的位置会因为你移动了 index.html 文件而突然发生变化——这将使你的链接指向错误的位置，因此如果单击它，它将无法工作。
电子邮件链接
1. 当点击一个链接或按钮时，打开一个新的电子邮件发送信息而不是连接到一个资源或页面，这种情况是可能做到的。这样做是使用元素和 mailto:URL 的方案。
  
  其最基本和最常用的使用形式为一个 mailto: 链接，链接指明收件人的电子邮件地址。例如：
```
<a href="mailto:nowhere@mozilla.org">向 nowhere 发邮件</a>
```
  这会创建一个链接，看起来像这样：向 nowhere 发邮件。
2. 指定详细信息
  - 其中最常用的是主题（subject）、抄送（cc）和主体（body）（这不是一个真正的标头字段，但允许你为新邮件指定一个简短的内容消息）。每个字段及其值被指定为查询项。
    
    下面是一个包含 cc、bcc、主题和主体的示例：
```
<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
  Send mail with cc, bcc, subject and body
</a>
```

高阶的文字排版

1. 描述列表

描述列表使用与其他列表类型不同的闭合标签—
(description term) 元素闭合。每个描述都用
(description definition) 元素闭合。让我们来完成下面的标记例子：
```
<dl>
  <dt>内心独白</dt>
    <dd>戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。</dd>
    
  <dt>语言独白</dt>
    <dd>戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。</dd>
    
  <dt>旁白</dt>
    <dd>戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。</dd>
</dl>
```
浏览器的默认样式会在描述列表的描述部分（description definition）和描述术语（description terms）之间产生缩进。MDN 非常严密地遵循这一惯例，同时也鼓励关于术语的其他更多的定义（but also embolden the terms for extra definition）。

下面是前述代码的显示结果：

内心独白

戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。

语言独白

戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。

旁白

戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。
注意：一个术语
可以同时有多个描述

2. 引用

块引用
- 如果一个块级内容（一个段落、多个段落、一个列表等）从其他地方被引用，你应该把它用
  元素包裹起来表示，并且在cite属性里用 URL 来指向引用的资源。
- 浏览器在渲染块引用时会默认增加缩进，作为引用的一个指示符
- blockquote 标签定义块引用。 blockquote 与 /blockquote 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。
- blockquote 元素中的 cite 属性指定了引用的来源
行内引用
- 行内元素使用元素来工作，工作方式一样
引文
- cite属性内容不会被浏览器显示、屏幕阅读器阅读，需使用 JavaScript 或 CSS，浏览器才会显示cite的内容。如果你想要确保引用的来源在页面上是可显示的，更好的方法是为元素附上链接：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bI1NxmTq-1668850527806)(HTML——构建Web.assets/image-20221118103125131.png)]

3. 缩略语

——它常被用来包裹一个缩略语或缩写，并且提供缩写的解释（包含在title属性中）。
title属性当光标移动到项目上会出现提示

<p>我们使用 <abbr title="超文本标记语言（Hyper text Markup Language）">HTML</abbr> 来组织网页文档。</p>

<p>第 33 届 <abbr title="夏季奥林匹克运动会">奥运会</abbr> 将于 2024 年 8 月在法国巴黎举行。</p>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tRHMJFba-1668850527807)(HTML——构建Web.assets/image-20221118103707111.png)]

4. 标记联系方式

<address>用于标记编写HTML文档的人的联系方式，而不是其他内容

<address>
	<p> Page written by <a href="../authors/chao/">chao</a>.</p>
</address>

5. 上标和下标

<sub>是下标，<sup>是上标

<p>咖啡因的化学方程式是 C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>。</p>
<p>如果 x<sup>2</sup> 的值为 9，那么 x 的值必为 3 或 -3。</p>

这些代码输出的结果是：

咖啡因的化学方程式是 C₈H₁₀N₄O₂。

如果 x² 的值为 9，那么 x 的值必为 3 或 -3。

6. 展示计算机代码

<code> 用于标记计算机通用代码。
<pre>: 用于保留空白字符（通常用于代码块）——如果您在文本中使用缩进或多余的空白，浏览器将忽略它，您将不会在呈现的页面上看到它。但是，如果您将文本包含在
标签中，那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来。
<var> : 用于标记具体变量名。
<kbd>: 用于标记输入电脑的键盘（或其他类型）输入。
<samp>: 用于标记计算机程序的输出。

7. 标记时间和日期

HTML支持将时间和日期标记为可供机器识别的格式的元素

<time datetime="2016-01-20">2016 年 1 月 20 日</time>

文档与网站架构

1.文档的基本组成部分

页眉

通常横跨于整个页面顶部有一个大标题和/或一个标志。这是网站的主要一般信息，通常存在于所有网页。
导航栏

指向网站各个主要区段的超链接。通常用菜单按钮、链接或标签页表示。类似于标题栏，导航栏通常应在所有网页之间保持一致，否则会让用户感到疑惑，甚至无所适从。许多 web 设计人员认为导航栏是标题栏的一部分，而不是独立的组件，但这并非绝对；还有人认为，两者独立可以提供更好的无障碍访问特性，因为屏幕阅读器可以更清晰地分辨二者。
主内容

中心的大部分区域是当前网页大多数的独有内容，例如视频、文章、地图、新闻等。这些内容是网站的一部分，且会因页面而异。
侧边栏

一些外围信息、链接、引用、广告等。通常与主内容相关（例如一个新闻页面上，侧边栏可能包含作者信息或相关文章链接），还可能存在其他的重复元素，如辅助导航系统。
页脚

横跨页面底部的狭长区域。和标题一样，页脚是放置公共信息（比如版权声明或联系方式）的，一般使用较小字体，且通常为次要内容。还可以通过提供快速访问链接来进行 SEO。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fvHFPunq-1668850527808)(HTML——构建Web.assets/image-20221118202927865.png)]

2.用于构建内容的HTML

<head> :页眉
<nav>:导航栏
<main>：主内容。
<aside>：侧边栏，经常嵌套在<main>中
<footer>：页脚

3.HTML布局元素细节

<main>存放每个页面独有的内容。每个页面上只能用一次 <main>，且直接位于<body>中。最好不要把它嵌套进其它元素。
<article>包围的内容即一篇文章，与页面其它部分无关（比如一篇博文）。
<section>与 <article> 类似，但 <section> 更适用于组织页面使其按功能（比如迷你地图、一组文章标题和摘要）分块。一般的最佳用法是：以标题作为开头；也可以把一篇 <article> 分成若干部分并分别置于不同的 <section> 中，也可以把一个区段 <section> 分成若干部分并分别置于不同的 <article> 中，取决于上下文。
<aside>包含一些间接信息（术语条目、作者简介、相关链接，等等）。
<header>是简介形式的内容。如果它是<body>的子元素，那么就是网站的全局页眉。如果它是 <article>或<section>的子元素，那么它是这些部分特有的页眉（此 <header> 非彼标题）。
<nav>包含页面主导航功能。其中不应包含二级链接等内容。
<footer>包含了页面的页脚部分。

4.无语义元素

<span>是一个内联的（inline）无语义元素，最好只用于无法找到更好的语义元素来包含内容时，或者不想增加特定的含义时。例如：

<span> 标签本身并不产生任何视觉效果，它只是提供一种途径，令你可以对文档中的一部分进行引用。

这样，你便可以引用部分文本，并对它们设置样式，或用JavaScript对它们进行处理。

<p>国王喝得酩酊大醉，在凌晨 1 点时才回到自己的房间，踉跄地走过门口。<span class="editor-note">[编辑批注：此刻舞台灯光应变暗]</span>.</p>

<div>是一个块级无语义元素，应仅用于找不到更好的块级元素时，或者不想增加特定的意义时。例如，一个电子商务网站页面上有一个一直显示的购物车组件。

警告：<div> 非常便利但容易被滥用。由于它们没有语义值，会使 HTML 代码变得混乱。要小心使用，只有在没有更好的语义方案时才选择它，而且要尽可能少用，否则文档的升级和维护工作会非常困难。

换行与水平分割线

<br>可在段落中换行
- <br> 可在段落中进行换行；<br> 是唯一能够生成多个短行结构（例如邮寄地址或诗歌）的元素。
<hr>在文档中生成一条水平分割线，表示文本中主题的变化（例如话题或场景的改变）。一般就是一条水平的直线。

HTML调试

1.HTML和调试

语法错误：由于拼写错误导致程序无法运行，就像上面的 Rust 示例。通常熟悉语法并理解错误信息后很容易修复。
逻辑错误：不存在语法错误，但代码无法按预期运行。通常逻辑错误比语法错误更难修复，因为无法得到指向错误源头的信息。

2.HTML验证

最好的方法就是让你的 HTML 页面通过 Markup Validation Service。由 W3C（制定 HTML、CSS 和其他网络技术标准的组织）创立并维护的标记验证服务。把一个 HTML 文档加载至本网页并运行，网页会返回一个错误报告。
网页可以接受网址、上传一个 HTML 文档，或者直接输入一些 HTML 代码。