WEB前端学习笔记（一）——HTML

一、基础认知

目标：认识 网页组成 和 五大浏览器 ，明确 Web 标准的构成 ，使用 HTML 骨架 搭建出一个网页。

常见的五大浏览器： IE浏览器、火狐浏览器（Firefox）、谷歌浏览器（Chrome）、Safari浏览器、欧朋浏览器（Opera）。

渲染引擎（浏览器内核）：浏览器中专门 对代码进行解析渲染的部分。

Web标准：让不同的浏览器按照相同的标准显示结果，让 展示的效果统一 ！Web标准要求页面实现：结构、表现、行为三层分离。

HTML（Hyper Text Markup Language）中文译为：超文本标记语言。

➢ 专门用于网页开发的语言，主要通过 HTML标签 对网页中的文本、图片、音频、视频等内容进行描述。

HTML页面固定结构

二、开发工具VS Code

VS Code的基本快捷键：
快速生成标签：英文 + tab
快速生成结构标签：! + tab
选中多行内容：Alt + shift + 鼠标左键
注释快捷键：ctrl + /

三、HTML标签学习

标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为 标签名

常见标签由两部分组成，称之为： 双标签 。前部分叫 开始标签 ，后部分叫 结束标签 ，两部分之间包裹内容。少数标签由一部分组成，我们称之为： 单标签 。

3.1 标题标签h1 → h6

场景：在新闻和文章的页面中，都离不开 标题 ，用来突出显示文章主题

语义：1~6级标题，重要程度依次递减

特点：

        文字都有加粗

        文字都有变大，并且从h1 → h6文字逐渐减小

        独占一行

3.2 段落标签P

场景：在新闻和文章的页面中，用于分段显示

语义：段落

特点：

         段落之间存在间隙

        独占一行

3.3 换行标签br

场景：让文字强制换行显示

语义：换行

特点：

        单标签

        让文字强制换行

3.4 水平线标签hr

场景：分割不同主题内容的水平线

语义：主题的分割转换

特点：

        单标签

        在页面中显示一条水平线

3.5 文本格式化标签

场景：需要让文字加粗、下划线、倾斜、删除线等效果
语义：突出重要性的强调语境

3.6 图片标签img

场景：在网页中显示图片

特点：

        单标签  

        img标签需要展示对应的效果，需要借助标签的属性进行设置！

属性名：src
属性值：目标图片的路径

属性名：alt

属性值：替换文本        

              • 当图片加载失败时，才显示alt的文本

              • 当图片加载成功时，不会显示alt的文本

属性名：title
属性值：提示文本
              •当鼠标悬停时，才显示的文本。注意点：title属性不仅仅可以用于图片标签，还可以用于其他标签

属性名：width和height
属性值：宽度和高度（数字）
注意点：
               • 如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
               • 如果同时设置了width和height两个，若设置不当此时图片可能会变形

3.7 音频标签audio

3.8 视频标签video

3.9 链接标签a

场景：点击之后，从一个页面跳转到另一个页面
称呼： a标签、超链接、锚链接
特点：
        • 双标签，内部可以包裹内容
        • 如果需要a标签点击之后去指定页面，需要设置a标签的href属性

属性名：href
属性值：点击之后跳转去哪一个网页（目标网页的路径）

显示特点：
        • a标签默认文字有下划线
        • a标签从未点击过，默认文字显示蓝色
        • a标签点击过之后，文字显示为紫色（清除浏览器历史记录可恢复蓝色）