前端HTML5 +CSS3 1. 基础认知

前端HTML5 +CSS3

老师：黑马程序员

一. HMTL初识

1. 基础认知

1.1.1 认识网页

• 网页由哪些部分组成?
  文字、图片、音频、视频、超链接
• 程序员写的代码是通过什么软件转换成网页的?
  浏览器

1.2.1 五大浏览器

浏览器:是网页显示、运行的平台，是前端开发必备利器

常见的五大浏览器:
IE浏览器、火狐浏览器(Firefox)、谷歌浏览器(Chrome)、 Safari浏览器、欧朋浏览器(Opera)

• 相同的网页在不同浏览器中显示效果会完全一致吗?
  因为不同浏览器渲染引擎不同，解析的效果会存在差异
• 前端工程师日常推荐使用哪一个浏览器?
  谷歌浏览器(Chrome)

1.3.1 为什么需要Web标准

不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异·如果用户想看一个网页，结果用不同浏览器打开效果不同，用户体验极差!

Web标准:让不同的浏览器按照相同的标准显示结果，让展示的效果统一

1.3.2 Web标注的构成

1.3.3 Web标准的记忆方法

Web标准要求页面实现:结构、表现、行为三层分离

2.1.1 HTML的概念

HTML (Hyper Text Markup Language）中文译为:超文本标记语言
专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述

案例:文字变粗案例
体验构建一个网页，需要在网页中显示一个加粗的文字

2.2.1 HTML页面固定结构

• html标签:网页的整体
• head标签:网页的头部
• body标签:网页的身体
• title标签:网页的标题

2.3.1 为什么使用VS Code？

速度快、体积小、插件多

基本使用：

2.3.2 VsCode的快捷键

• 快速生成标签:英文+ tab
• 保存文件: ctrl + s
• 快速查看网页效果:右击→Open in Default Browser快捷键: alt + b
• 快速生成结构标签:! + tab
• 快速复制一整行: ctrl + C
• 快速粘贴一整行: ctrl + V
• 快速删除（剪切)一整行:ctrl + x

3.1.1 什么是注释

注释的作用:

• 为代码添加的具有解释性、描述性的信息，主要用来帮助开发人员理解代码
• 浏览器执行代码时会忽略所有的注释

注释快捷键

ctrl + /

3.2.1 HTML标签的结构

• 标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
• 常见标签由两部分组成，我们称之为:双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
• 少数标签由一部分组成，我们称之为:单标签。自成一体，无法包裹内容。

双标签的属性需要写在开始标签还是结束标签中? 开始标签
标签上可以同时存在几个属性? 多个
标签名与属性之间，属性与属性之间以什么隔开? 空格

3.4.1 HMTL标签与标签之间的关系

• 父子关系(嵌套)
• 兄弟关系(并列)