前端HTML5 +CSS3 1. 基础认知
前端HTML5 +CSS3
老师：黑马程序员
文章目录
- 前端HTML5 +CSS3
- 老师：黑马程序员
- 一. HMTL初识
- 1. 基础认知
- 1.1.1 认识网页
- 1.2.1 五大浏览器
- 1.3.1 为什么需要Web标准
- 1.3.2 Web标注的构成
- 1.3.3 Web标准的记忆方法
- 2.1.1 HTML的概念
- 2.2.1 HTML页面固定结构
- 2.3.1 为什么使用VS Code？
- 2.3.2 VsCode的快捷键
- 3.1.1 什么是注释
- 3.2.1 HTML标签的结构
- 3.4.1 HMTL标签与标签之间的关系
一. 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标签与标签之间的关系
- 父子关系(嵌套)
- 兄弟关系(并列)