yage

中文

English

中文

English

Appearance

三、HTML 入门 ​

1. HTML 初体验 ​

  1. 第一步：鼠标右键 => 新建 => 文本文档 => 输入以下内容，并保存。

    html
    <marquee>让天下没有难学的技术！</marquee>

  2. 第二步：修改后缀为 .html ，然后双击打开即可。

    这里的后缀名，使用 .htm 也可以，但推荐使用更标准的 .html 。

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

  4. 借助浏览器看网页的 源代码，具体操作：

    在网页空白处：鼠标右键 ==> 查看网页源代码

2. HTML 标签 ​

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

  2. 标签分为：双标签 与 单标签 （绝大多数都是双标签）。

  3. 标签名不区分大小写，但推荐小写，因为小写更规范。

  4. 双标签：<标签名>标签体</标签名>

  5. 单标签：<标签名/> ，备注：/可以省略

  6. 标签之间的关系：并列关系、嵌套关系，可以使用 tab 键进行缩进：

    css
    <marquee>
    让天下没有难学的技术！
    <input>
</marquee>
<input>

3. HTML 标签属性 ​

  1. 用于给标签提供 附加信息。

  2. 可以写在：起始标签 或 单标签中，形式如下： image-20240416184443269

    html
    <marquee loop="1" bgcolor="orange">让天下没有难学的技术！</marquee>
<input type="password">

  3. 有些特殊的属性，没有属性名，只有属性值，例如：

    html
    <input disabled>

  4. 注意点：

    1. 不同的标签，有不同的属性；也有一些通用属性（在任何标签内都能写，后面会详细总结）。
    2. 属性名、属性值不能乱写，都是W3C规定好的。
    3. 属性名、属性值，都不区分大小写，但推荐小写。
    4. 双引号，也可以写成单引号，甚至不写都行，但还是推荐写双引号。
    5. 标签中不要出现同名属性，否则后写的会失效，例如：
      html
      <input type="text" type="password">

4. HTML 基本结构 ​

  1. 在网页中，如何查看某段结构的具体代码？—— 点击鼠标右键，选择“检查”。

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

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

  3. 网页的 基本结构 如下：

    1. 想要呈现在网页中的内容写在 body 标签中。
    2. head 标签中的内容不会出现在网页中。
    3. head 标签中的 title 标签可以指定网页的标题。
    4. 代码
      html
      <html>
    <head>
    	<title>网页标题</title>
    </head>
    <body>
    ......
    </body>
</html>

5. 安装 VSCode ​

  1. 安装中文语言包。
  2. 使用 VSCode打开文件夹的两种方式。
  3. 调整字体大小。
  4. 设置主题。
  5. 安装图标主题： vscode-icons 。

6. 安装 Live Server 插件 ​

  1. 可以更加方便的打开网页。
  2. 打开网页的方式更贴近项目上线。
  3. 代码出现改动后，可以自动刷新。
  4. 根据自己的情况，去配置一下 VSCode 的自动保存。

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

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

7. HTML 注释 ​

  1. 特点：注释的内容会被浏览器所忽略，不会呈现到页面中，但源代码中依然可见。
  2. 作用：对代码进行解释和说明。
  3. 写法：
    html
    <!-- 下面的文字只能滚动一次 -->
<marquee loop="1">Hello</marquee>

<!-- 下面的文字可以无限滚动 -->
<marquee>Hello World</marquee>
  4. 注释不可以嵌套，以下这么写是错的（反例）。
    html
    <!--
    我是一段注释
    <!-- 我是一段注释 -->
-->

8. HTML 文档声明 ​

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

  • 旧写法：要依网页所用的HTML版本而定，写法有很多。

    具体有哪些写法请参考 ：W3C官网-文档声明（了解即可，千万别背！）

  • 新写法：：一切都变得简单了！W3C 推荐使用 HTML 5 的写法。

    html
    <!DOCTYPE html>
或
<!DOCTYPE HTML>
或
<!doctype html>
  1. 注意：文档声明，必须在网页的第一行，且在 html 标签的外侧。

9. HTML 字符编码 ​

  1. 计算机对数据的操作：
  • 存储时，对数据进行：编码。
  • 读取时，对数据进行：解码。

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

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

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

  3. 使用原则是怎样的？

    原则1：存储时，务必采用合适的字符编码 。 否则：无法存储，数据会丢失！

    原则2：存储时采用哪种方式编码 ，读取时就采用哪种方式解码。 否则：数据错乱（乱码）！

    例如下面文字中，包含有：中文、英文、泰文、缅甸文

    html
    我爱你
I love you!
ฉันรักเธอนะ
ကနမ် ကိ ချစ်တယ။

    若使用 ISO8859-1 编码存储，在存入的那一刻，就出问题了，因为 ISO8859-1 仅支持英文！ 为保证所有的输入，都能正常存储和读取，现在几乎全都采用： UFT-8 编码。 所以我们编写 html 文件时，也都统一用 UFT-8 编码。

  4. 总结：

    • 平时编写代码时，统一采用 UTF-8 编码（最稳妥）。

    • 为了让浏览器在渲染 html 文件时，不犯错误，可以通过 meta 标签配合 charset 属性指定字符编码。

      html
      <head>
	<meta charset="UTF-8"/>
</head>

10. HTML 设置语言 ​

  1. 主要作用：
  • 让浏览器显示对应的翻译提示。
  • 有利于搜索引擎优化。

  1. 具体写法：

    html
    <html lang="zh-CN">

  2. 扩展知识： lang 属性的编写规则（作为一个课外扩展知识，了解即可）。

    1. 第一种写法（ 语言-国家/地区 ），例如：
    • zh-CN ：中文-中国大陆（简体中文）
    • zh-TW ：中文-中国台湾（繁体中文）
    • zh ：中文
    • en-US ：英语-美国
    • en-GB ：英语-英国
    1. 第二种写法（ 语言—具体种类）已不推荐使用，例如： zh-Hans ：中文—简体 zh-Hant ：中文—繁体
    2. W3School 上的说明：《语言代码参考手册》、《国家/地区代码参考手册》
    3. W3C官网上的说明：《Language tags in HTML》

11. HTML标准结构 ​

  • HTML标准结构如下：

    html
    <!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>我是一个标题</title>
    </head>
    <body>
    
    </body>
</html>

  • 输入 ! ，随后回车即可快速生成标准结构。

  • 配置 VScode 的内置插件 emmet ，可以对生成结构的属性进行定制。

  • 在存放代码的文件夹中，存放一个 favicon.ico 图片，可配置网站图标。