学废HTML初始第二篇

HTML初体验

雷迪斯and the乡亲们  欢迎你们来到 奇幻的编程世界

上一篇我们学习了， 基础概念铺垫（了解）

1. 认识网页:文字、图片、视频、音频、超链接（ 超链接  点击文字 或者图片链接到其他的页面 ）

2.五大浏览器和渲染引擎   

3.Web标准。

（可以回顾一下我的上一篇，俗话说的好：滴水石穿，积水成渊嘛！贵在积累和回顾）不忘初心方得始终！！！好 ,废话不多说，教学走一波

HTML的概念

（1）HTML中文译为：超文本标记语言   专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述（如：文字变粗案例等   后面还有好多，只后我会一 一讲解到！）

（2）网页体验-构建基本网页的步骤：

1.    在代码文件夹中点击鼠标右击 → 新建文本文档 → 命名为:百敲成神.txt (温馨提示： 命名自由发挥哈，没有具体要求  .txt文本格式      .html超文本标记语言）

 2.双击这个文件 百敲成神.txt，输入咱们想表达的代码等内容，（随意发挥就行，三八二十四的洒洒水而已啦，当然了要分情况，我这娱乐效果，看一下就可以啦！） → 记得保存！（Ctrl+s）

3.    在文件上点击鼠标右键 → 重命名 → 修改文件后缀为为.html

   

4.双击百敲成神.html ，浏览器会自动打开文件并显示之前输入的内容

HTML骨架结构

HTML页面固定结构

 网页类似于一篇文章：  每一页文章内容是有固定的结构的，如：开头、正文、落款等 ……网页中也是存在固定的结构的， 如：整体、头部、标题、主体。网页中的固定结构是要通过特点的 HTML标签 进行描述的

•      html标签：网页的整体 •      head标签：网页的头部

•      body标签：网页的身体 •      title标签：网页的标题

开发工具的使用

刚刚通过文本编辑器（如：记事本，  完全可以编写网页源代码）但是效率 ……不忍直视

实际开发中，注重开发的 效率和便捷性 ，因此我们会使用一些开发工具

开发工具有很多：   Visual Studio Code 、 Webstorm  、 Sublime 、 Dreamweaver、  Hbuilder  前端开发神器：  VS Code → 速度快、体积小、插件多

VS Code创建网页的步骤（学了这么多，想必大家已经迫不及待了吧，下面就开始上咱们的实操课）

1.    双击打开VS Code软件

2.    将day01代码文件夹用鼠标左键按住不放，拖拽到VS Code窗口中，文件夹会显示在左侧目录上

3.    点击目录上的+新建文件按钮创建页面，注意： 文件后缀名需要是.html

VS Code的基本快捷键（现在是什么年代？快餐时代，时代都变了。那咱们搞点快捷键不过分吧）

1.    快速生成标签：英文 + tab

2.    保存文件：  ctrl + s

•      注意1：写完文件之后务必需要保存文件，否则网页无变化

•      注意2：可以设置自动保存省去每次保存的麻烦

3.     快速查看网页效果：右击 → Open in Default Browser

•      快捷键：  alt + b

•      注意： 必须安装了open in browser 插件

4.    快速生成结构标签：  ! + tab

•      注意1： !必须是英文的，中文!无效

•      注意2：必须保证当前文件后缀名是.html，否则无效

•      VS Code自动生成的骨架多了其他标签，之后会介绍

VS Code的其他快捷键

1.    快速复制一整行：  ctrl + c

2.    快速粘贴一整行：  ctrl + v

3.    快速删除（剪切）  一整行：  ctrl + x ……       

其他快捷键会在学习过程中用到一个介绍一个，大家先需要把基础快捷键操作记牢！ ！！