HTML4 笔记

Neo_Arsaka
180 阅读4分钟

一、前序知识

略。

二、 HTML 简介

1. 什么是 HTML？

全称是 HyperText Markup Language（超文本标记语言）

超文本：xx

  1. W3C

全称：World Wide Web Consortium（万维网联盟），创建于 1994 年，是目前 Web 技术领域，最具影 响力的技术标准机构。官网：www.w3.org

  1. WHATWF

全称：Web Hypertext Application Technology Working Group（网页超文本应用技术工作小组）成立于2004年，是一个以推动网络 HTML5 标准为目的而成立的组织。由 Opera、Mozilla 基金会、苹果，等这些浏览器厂商组成。官网：whatwg.org/

三、准备工作

略。

四、HTML 入门

1. HTML 初体验

  1. HTML 文件的后缀名可以用 .htm，但是推荐使用更标准的 .html。

  2. 程序员写的叫源代码，要交给浏览器进行渲染。

  3. 借助浏览器看网页的源代码，具体操作：鼠标右键 ==> 查看网页源代码。

2. HTML 标签

  1. 标签又称为元素，是 HTML 的基本组成单位。

  2. 标签名不区分大小写，但推荐小写，因为小写更规范（最佳实践）。

3. HTML 标签属性

  1. 用于给标签提供附件信息，语法格式：<标签名 属性名="属性值"></标签名>。

  2. 有些特殊的属性，没有属性名，只有属性值，例如： <input disabled>。

  3. 不同的标签，有不同的属性；也有一些通用属性（在任何标签内都能写，后面会详细总结）。

  4. 属性名、属性值，都不区分大小写，但推荐小写（最佳实践）。

  5. 双引号，也可以写成单引号，甚至不写都行，但是推荐写双引号（最佳实践）。

4. HTML 基本结构

  1. 在网页中，如何查看某段结构的具体代码？——鼠标右键==>检查。

  2. 【检查】和【查看网页源代码】的区别：

【查看网页源代码】看到的是：程序员编写的源代码。
【检查】看到的是：经过浏览器 “处理” 后的源代码。
备注：日常开发中，【检查】用的最多。

  1. HTML 基本结构：html、head、body。

  2. VSCode 安装 Live Server 插件

  • 可以更加方便地打开网页。
  • 打开网页的方式更贴近项目上线。
  • 代码出现改动后，可以自动刷新。

注意：务必使用 VSCode 打开的是文件夹，否则 Live Server 插件无法正常工作！

注意：打开的网页必须是标准的 HTML 结构，否则无法自动刷新！

5. HTML 文档声明

  1. 作用：告诉浏览器当前网页的版本。

  2. 写法：

    • 旧写法：要依网页所用的 HTML 版本而定，具体写法请参考 W3C 官网-文档声明（了解即可）。
    • 新写法：W3C 推荐使用 HTML5 的写法：<!DOCTYPE HTML>。

  3. 注意：文档声明必须在网页的第一行，且在 <html>标签的外侧。

6. HTML 字符编码

  1. 计算机对数据的操作：

    • 存储时对数据进行编码。
    • 读取时对数据进行解码。

  2. 编码、解码会遵循一定的规范——字符集。

  3. 字符集有很多种，常见的有（了解）：

    • ASCII：大写字母、小写字母、数字、一些符号，共计128个；
    • ISO 8859-1：在 ASCII 基础上，扩充了一些希腊字符等，共计是256个；
    • GB2312：继续扩充，收录了 6763 个常用汉字、682个字符；
    • GBK：收录了的汉字和符号达到 20000+ ，支持繁体中文；
    • UTF-8：包含世界上所有语言的：所有文字与符号。—— 很常用。

  4. 使用原则：

    • 原则1：存储时务必使用合适的字符编码，否则数据会丢失！
    • 原则2：存储时采用哪种方式编码，读取时就采用哪种方式解码，否则会导致乱码！

  5. 平时写代码时，统一采用 UTF-8 编码（最佳实践）。

  6. 为了让浏览器在渲染 HTML 文件时不犯错误，可以通过 meta 标签配合 charset 属性指定字符编码：<meta charset="UTF-8" />。

7. HTML 设置语言

  1. 主要作用：

    • 让浏览器显示对应的翻译提示。
    • 有利于搜索引擎优化。

  2. 具体写法：<html lang="zh-CN">。

8. HTML 标准结构

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Page Title</title>
    </head>
    <body>
    </body>
</html>

五、 语义化标签

这节内容和思想非常重要！！

  • 概念：用特定的标签，去表达特定的含义。
  • 原则：标签的默认效果不重要（后期可以通过 CSS 随便控制效果），语义最重要！
  • 举例：对于 h1 标签，效果是文字很大（不重要），语义是网页的主要内容（很重要）。
  • 优势：
    • 代码结构清晰，可读性强。
    • 有利于 SEO（搜索引擎优化）。
    • 方便设备解析（如屏幕阅读器、盲人阅读器等）。

五、 HTML 基础

1. 开发者文档

平时最常用的文档：MDN（developer.mozilla.org）。

avatar
文章
阅读
粉丝