HTML5+CSS3学习笔记1 基础环境的配置

P1-P13

浏览器和网页

  • 前端工程师负责编写网页的源代码。
  • 浏览器负责将网页渲染成我们想要的样子。

W3C的建立

  • 伯纳斯李1994年建立了 万维网联盟（W3C）
  • W3C的出现为了 定制网页开发的标准 ，以使同一个网页在不同的浏览器中有相同的效果
  • 所以，我们编写的网页都需要遵循W3C的规范

网页的结构

根据W3C标准，一个网页主要由三部分组成：结构、表现 和 行为。

  • 结构：HTML用于描述页面的结构。
  • 表现：CSS用于控制页面中元素的样式。
  • 行为：JavaScript用于响应用户操作。

HTML

  • HTML：超文本标记语言
  • 它负责网页的三个要素之中的 结构
  • HTML使用 标签 的形式来标识网页中的不同组成部分
  • 所谓超文本指的是 超链接 ，使用超链接可以让我们从一个页面跳转到另一个页面。

第一个网页.html：

<html>
    <head>
        <title></title>
    </head>
    <body>
        <h1>回乡偶书（二首）</h1>
        <h2>其一</h2>
        <h2>贺知章</h2>
        <p>少小离家老大回</p>
        <p>乡音无改鬓毛衰</p>
        <p>儿童相见不相识</p>
        <p>笑问客从何处来</p>
    </body>
</html>

文档声明（doctype）：用来告诉浏览器当前网页的版本。

<!DOCTYPE html>

所有的数据在计算机中存储时都是以二进制形式存储的，文字也不例外。所以一段文字在存储到内存中时，都需要转换为二进制编码。当我们读取这段文字时，计算机会将编码转换为字符，供我们阅读

  • 编码：将字符串转换为二进制码的过程称为编码
  • 解码：将二进制转换为字符的过程称为解码
  • 字符集（charset）：编码和解码所采用的规则称为字符集
  • 乱码问题：如果编码和解码所才用的字符集不同就会出现乱码问题
  • 常见的字符集：ASCII、ISO88591、GB2312、GBK、UTF-8、……

在开发时我们使用的字符集都是 UTF-8 。

可以通过mata标签来设置网页的字符集，避免乱码问题：

<meta charset="utf-8">

HTML参考手册：https://www.w3school.com.cn/html5/index.asp

一个html文件的主要内容：

<!-- 文档声明，声明当前网页的版本 -->
<!DOCTYPE html>

<!-- html的根标签（元素），网页中的所有内容都要写在根元素的里边 -->
<html>

    <!-- head时网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页 -->
    <head>

        <!-- meta标签用来设置网页的元数据，这里meta用来设置网页的字符集，避免乱码问题 -->
        <meta charset="utf-8">

        <!-- title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容 -->
        <title>网页的标题</title>

    </head>

    <!-- body是html的子元素，标识网页的主题，网页中所有的课件内容都应该写在body里 -->
    <body>

        <!-- h1网页的一级标题 -->
        <h1>网页的大标题</h1>

    </body>

</html>

VSCode主题： ayu 。

VSCode插件： Live Server ，可以直接帮你刷新网页。
安装好之后就能右键打开网页（open with live server）

posted @ 2021-02-13 15:55  poetea  阅读(154)  评论(0)  编辑  收藏  举报