抱歉，您的浏览器无法访问本站
本页面需要浏览器支持（启用）JavaScript
了解详情 >

HTML_1 - 基本概念

2023年2月14日
noteHTML

HTML(HyperText Markup Language)超文本标记语言不是传统的编程语言，是用来告知浏览器如何组织页面的标记语言，可以类比 Markdown 语法。

HTML 由元素(elements)组成，元素用来包围不同部分的内容，浏览器会根据不同元素的不同要求进行渲染，以展示出不同的美观画面。

<p>My cat is very grumpy</p>

这段话整体是一个元素，将文字封装成了段落。元素的两端是标签(tags)，由不带斜杠的 <p> 开始到带斜杠的 </p> 结束，一对标签对一个元素整体形成一个封装。

HTML 标签不会区分大小写。为了一致性和可读性，最好统一使用小写。

Element示例
Element示例

HTML 元素

基本的 HTML 元素构成如下:

<em> 我家猫咪超可爱！</em>

我家猫咪超可爱！

浏览器会将这段话渲染成斜体。

元素分类

HTML5 对元素的类别进行了更细致的分类，也为了不与 CSS 类型相混淆。但如下分类更便于理解。

块级元素

块级元素在页面中以块的方式出现，单独成段。类似于 <p> 标签的元素。

块级元素通常用于展示页面结构化的内容，如段落、列表、导航、页脚等。以 block 形式展现的块级元素不会被内联元素嵌套，但可以嵌套在其他的块级元素当中。

<p>我家猫咪超可爱！</p>

内联元素

内联元素不成段，出现在块级元素之内并环绕文档。类似于 <em> 标签的元素。

内联元素不会导致换行，其出现在文字之间。

<em>这是斜体</em>
元素间的嵌套

元素可以自由嵌套。

<p><em> 我家猫咪<strong>超</strong>可爱！</em></p>

我家猫咪超可爱！

需注意，最后打开哪个标签，就要先关上哪个标签，是 LIFO 的堆栈顺序。

另外，块级元素内可以有内联元素，但是内联元素内包含块级元素会产生歧义。

空元素

不使用 开始tag-内容-结束tag 形式的，只有一个标签的元素称为空元素。空元素可以在元素所在位置嵌入一些东西。如元素 <img> 可以嵌入图片

<img scr="https://library.lyrikp.art/layout/loading2.GIF">

属性

属性写在标签里面，用来描述这是一个“什么样”的标签。

开始标签的内容被扩写为 <元素名 属性="值">

<p class="editor-note">我家猫咪超可爱！</p>

上述例子中 class 属性赋予元素一个识别 id，这个名字此后可以被用来识别这个元素的样式信息和其他信息。

<a> 锚元素（超链接）的属性示例

href
用来声明超链接的 url，如 href="https://lyrikp.art/"

title
为超链接注明额外信息，鼠标悬停的时候显示，如 title="信息提示"

target
用来指定链接呈现的方式。target="_blank" 在新标签页先打开；本页跳转忽略此属性。

<p>点击<a href="https://lyrikp.art/posts/TypescriptNote/" title="TypeScript" target="_blank">这里</a>跳转 TypeScript 笔记</p>

点击这里跳转 TypeScript 笔记

HTML 的单双引号都可以使用，但要保持一致，且两者可嵌套。

布尔属性

布尔属性的值总是和属性名相同，也可以忽略不写。

如 disabled="disabled" 禁用。

<input type="text">
<input type="text" disabled="disabled">
<input type="text" disabled>

生成了第二、第三个无法输入的文本框。

HTML 构成

基本 HTML 页面构成
基本 HTML 页面构成

在上面的例子中，有些写法可以使固定的

  1. <!DOCTYPE html> 用来声明文档类型，开头一定这么写。
  2. <html></html> 包裹整个页面，是根元素。
  3. <head></head> 容器，含所有不显示在页面的内容，比如 CSS、字符集声明、脚本等。
  4. <meta charset="utf-8"> 在上个容器中，设定文档使用 utf-8 字符集编码。基本上 utf-8 编码能解决大多数文本问题。
  5. <body></body> 正文内容，显示在页面内的可读部分。

HTML 中连续出现的空格会被合并为 1 个，嵌套中出现的分行和空白是为了增强可读性。

特殊字符

在 HTML 中，< > " ' & 是特殊字符，为语法本身的一部分。当需要再正文中包含这些字符的时候，需要使用特殊编码避免其被识别为代码。

原义字符 特殊编码
< &lt;
> &gt;
“ &quot;
‘ &apos;
& &amp;

HTML 注释

注释被了浏览器忽略，对用户不可见。

使用 <!--注释内容--> 的形式标记注释。

开头容器 <head>

<head> 元素不会在浏览器中显示出来，其作用是保存页面的元数据。

<head>
    <meta charset="utf-8">
    <title>测试页面</title>
</head>

这是一个非常简短的 head 元素，大型页面的 head 会包含很多元数据，可以使用 右键 → 检查 的开发者工具查看网页的 head 信息。

head 部分通常有以下几个部分的元素：

  • <title> 标签栏标题
  • <meta> 元数据。定义文字编码、关键字等
  • <link rel="stylesheet" href="xx.css"> 调用 CSS 样式文件
  • <script scr="xx.js"> 调用 JS 脚本
  • <html lang="zh-CN"> 设定主语言
  • <style> 样式文件引用
  • <base> 默认超链接位置

网页栏标题<title>

<title> 为文档添加一个标题，显示在浏览器的标签分页栏。

title 出现的位置
title 出现的位置

在浏览器添加书签时，该内容也会被用作建议的书签名。

元数据<meta>

元数据即描述数据的数据。元数据标签用来规定整个页面相关的内容。

<!-- 作者 -->
<meta name="author" content="Likey">

<!-- 为网页定义描述内容 -->
<meta name="description" content="这是是一个详细的描述">

<!-- 为搜索引擎定义关键字 SEO用 -->
<meta name="keywords" content="笔记 & html">

<!-- 每 30s 刷新页面 -->
<meta http-equiv="refresh" content="30">

<!-- 定义文档字符编码 -->
<meta charset="UTF-8">

有些 <meta> 特性已不再适用，因为有些网站会通过设置大量关键词 keyword 标签来误导搜索引擎。

元数据标签不会显示在客户端，只会被了浏览器所解析，用于浏览器的页面加载、搜索引擎关键词或者其他 Web 服务的调用。

调用 CSS/JS

CSS 层叠样式表用来修饰网页，JS 脚本用来让网站实现交互式功能。这二者在现代网页中不可或缺。

<link rel="stylesheet" href="css路径"> 对 CSS 文件进行调用，通常出现在文档的头部，即 <head> 元素中。

元素包含 2 个标签：

  • rel="stylesheet" 表明该链接是样式表
  • href="css路径" 指出样式表文件的路径
<link rel="stylesheet" href="/css/烟火.css">

<link> 是一个空元素，不需要结束标记。

<script> 调用 JS

<script src="js路径" defer></script> 来调用 JavaScript 脚本以实现网页的动态交互功能。

defer 标签的作用是让脚本的在 HTML 解析完成之后再进行加载，以避免脚本访问某元素时其还未被加载出来报错。

<script src="firework.js" defer></script>

<script></script> 并非空元素，需要结束标记。

<link> 元素在 head 中加载，<script> 元素不一定在 head 中。

语言属性 lang

语言通过 lang属性 加载在 HTML 的 head 标签中。

<!-- 设置主语言 -->
<html lang="zh-CN">

主语言设置有助于搜索引擎更有效的索引，例如在大部分搜索引擎都有的“特定语言中的搜索结果”功能。

也可以分段设置不同的语言，在每一个段落里面添加 lang 属性即可。

<p>Japanese example: <span lang="ja">雨上がりの空を好きでいよう。</span></p>

该属性和 <meta> 中的设置相区分：<meta> 设置的时文字编码，lang 属性规定了语言种类。

样式 <style>

<style> 标签定义 HTML 的样式文件地址（导入式），也可以在其中直接添加样式内容进行渲染（内嵌式）。

该标签引用 CSS 的时候需要添加 type="text/css" 属性。

<!-- 导入式引用css -->
<head>
    <style type="text/css">
        @import"css的地址";
    </style>
</head>

<!-- 内嵌式引用css -->
<head>
    <style type="text/css">
        body{background-color: white;}
        p{color:red;}
    </style>
</head>

导入式引用会在最后加载，如果网页较大，会先出现乱排版的文档，闪烁后再加载成功。

style 也可以作为属性出现在其他标签里面，从而规定当前标签内的样式，如 <p style="background-color:red;color:white;">内容</p>

内容

默认超链接 <base>

<base> 标签定义了默认连接的地址，与 <a> 标签的使用方法相同，但不需要结束标记。

<head>
    <base href="https://lyrikp.art/" target="_blank">
</head>

更新于2023年3月20日

前端

HTML

  评论

评论