01-初识HTML

01-初识HTML

学习目标:

  1. 理解HTML的基本语法
  2. 掌握排版标签实现标题等效果
  3. 相对路径绝对路径
  4. 媒体标签图片、音频、视频
  5. 超链接

一、基础认知

了解网页组成五大浏览器
明确Web标准的构成

1.1 认识网页
  1. 以下网页有哪些部分组成

文字、图片、音频、视频、超链接…

  1. 那么这个网页背后本质是什么?

01-初识HTML_第1张图片

  1. 前端的代码是通过什么软件转换成用户眼中的页面的?

01-初识HTML_第2张图片

1.2 五大浏览器和渲染引擎
1.2.1 浏览器
  1. 浏览器:是网页显示、运行的平台,是前端开发必备利器
  2. 常见的五大浏览器:

IE浏览器、火狐浏览器(Firefox)、谷歌浏览器(Chrome)、Safari浏览器、欧朋浏览器(Opera)

1.2.2 渲染引擎
  1. 渲染引擎(浏览器内核):浏览器中专门对代码进行解析渲染的部分
  2. 浏览器出品的公司不同,内在的渲染引擎也是不同的:

01-初识HTML_第3张图片

  1. 注意点:

• 渲染引擎不同,导致解析相同代码时的 速度、性能、效果也不同的
• 谷歌浏览器的渲染引擎速度快、性能高、效果好,所以更吸引用户的喜爱(推荐)

1.3 Web标准
1.3.1 为什么需要Web标准?
  1. 不同浏览器的渲染引擎不同,对于相同代码解析的效果会存在差异

如果用户想看一个网页,结果用不同浏览器打开效果不同,用户体验极差!

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

01-初识HTML_第4张图片

1.3.2 Web标准的构成
  1. Web标准中分成三个构成:
构成 语言 说明
结构 HTML 页面元素和内容
表现 CSS 网页元素的外观和位置等页面样式(如:颜色、大小等)
行为 JavaScript 网页模型的定义与页面交互
  1. Web标准要求页面实现:结构、表现、行为三层分离

结构:HTML(决定了身体)
01-初识HTML_第5张图片
表现:CSS(决定了样式美观)
01-初识HTML_第6张图片
行为:JavaScript(决定了交互的动态效果)
01-初识HTML_第7张图片

1.4 开发工具

Visual Studio Code(推荐) 、 Webstorm 、 Sublime 、Dreamweaver、 Hbuilder

  1. 推荐插件

    1. 中文插件:Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
    2. 浏览器运行:open in browser
    3. 文件夹样式:vscode-icons
    4. 自动重新加载网页:Live Server
  2. 导入别人发给你的插件压缩包(extensions.zip)

    将压缩包(extensions.zip)解压在 .vscodeextensions文件中

    位置:C:\Users\Administrator(自己电脑用户名)\.vscode\extensions

  3. 常用快捷键

    1. 快速生产网页结构:!(英文感叹号)+tab | enter
    2. 保存:ctrl+s
    3. 运行:alt+b(右击 → Open in Default Browser)
    4. 快速复制一整行:ctrl + c
    5. 快速粘贴一整行:ctrl + v
    6. 快速删除(剪切)一整行:ctrl + x

二、HTML初体验

2.1 HTML初感知

2.1.1 HTML的概念
  1. HTML(Hyper Text Markup Language)中文译为:超文本标记语言

专门用于网页开发的语言,主要通过HTML标签实现网页中的文本、图片、音频、视频等内容

  1. 案例:文字变粗案例

体验构建一个网页,需要在网页中显示一个加粗的文字

文字要变粗
<strong>文字要变粗strong>
<h1>文字要又大又粗h1>

01-初识HTML_第8张图片

2.1.2 构建基本网页的步骤
  1. 文件夹中点击鼠标右击 → 新建文本文档 → 命名为:文字变粗案例.txt
    01-初识HTML_第9张图片
  2. 双击这个文件,输入代码等内容 →记得保存!
  3. 1.在文件上点击鼠标右键 → 重命名 → 修改文件后缀为为.html
    01-初识HTML_第10张图片
  4. 双击文字变粗案例.html ,浏览器会自动打开文件并显示之前输入的内容

2.2HTML骨架结构

2.2.1 HTML页面固定结构
  1. 网页类似于一篇文章:

每一页文章内容是有固定的结构的,如:开头、正文、落款等……
网页中也是存在固定的结构的,如:整体、头部、标题、主体

  1. 网页中的固定结构是要通过特点的 HTML标签 进行描述的

01-初识HTML_第11张图片
01-初识HTML_第12张图片

2.3 注释

  1. 概念:
  • 为代码添加的具有解释性、描述性的信息.比如:产品说明书、电影介绍这种。
  • 浏览器执行代码时会忽略所有的注释
  1. 格式:
  2. 快捷键:ctrl + /

你可能感兴趣的:(前端,html,前端,开发语言)