HTML概述及常用标签

一、简介
1、HTML（Hyper Text Markup Language）中文译为：超文本标记语言
专门用于网页开发的语言，主要通过 HTML标签 对网页中的文本、图片、音频、视频等内容进行描述
浏览器：是 网页显示、运行的平台 ，是前端开发必备利器
五大浏览器
IE浏览器、火狐浏览器（Firefox）、 谷歌浏览器（Chrome）推荐使用！！ 、Safari浏览器、欧朋浏览器（Opera）
Web 标准的构成
构成    语言    说明
结构    HTML    页面元素和内容
表现    CSS    网页元素的外观和位置等页面样式（如：颜色、大小等）
行为    JavaScript    网页模型的定义与页面交互
2、开发工具
Visual Studio Code 、 Webstorm 、 Sublime 、Dreamweaver、 Hbuilder
前端开发神器：VS Code → 速度快、体积小、插件多
VS Code使用前要求
1. VSCode 软件安装完毕
2. Chinese (Simplified) Language Pack for Visual Studio Code 简体中文插件安装完毕
3. open in browser 直接打开浏览器插件安装完毕
 

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的其他快捷键
1. 快速复制一整行：ctrl + c
2. 快速粘贴一整行：ctrl + v
3. 快速删除（剪切）一整行：ctrl + x
3、注释
作用：
为代码添加的具有解释性、描述性的信息，主要用来 帮助开发人员理解代码
浏览器执行代码时会忽略所有的注释
快捷键： 在VS Code中：ctrl + /
4、标签

结构说明：
1. 标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为 标签名
2. 常见标签由两部分组成，我们称之为： 双标签 。前部分叫 开始标签 ，后部分叫 结束标签 ，两部分之间包裹内容
3. 少数标签由一部分组成，我们称之为： 单标签 。自成一体，无法包裹内容。
二、HTML标签
1、排版标签
标题标签

语义：1~6级标题，重要程度 依次递减
特点：
文字都有加粗
文字都有变大，并且从h1 → h6文字逐渐减小
独占一行
注意：h1标签对于网页尤为重要，开发中有特定的使用场景，如：新闻的标题、网页的logo部分
段落标签
<p>我是一段文字</p>
语义：段落
特点：
段落之间存在间隙
独占一行
换行标签
<br>
语义：换行
特点：
单标签
让文字强制换行
水平线标签
<hr>
语义：主题的分割转换
特点：
单标签
在页面中显示一条水平线
2、文本格式化标签
标签    说明
b    加粗
u    下划线
i    倾斜
s    删除线
标签    说明
strong    加粗
ins    下划线
em    倾斜
del    删除线
实际项目开发中选择标签的原则：标签语义化

即：根据语义选择对应正确的标签
如：需要写标题，就使用h系列标签
如：需要写段落，就使用p标签