初识HTML（前端小白的日常笔记）
一、认识前端
(一)了解前后端开发
1、WEB前端开发
HTML/css/Js.vue/React/NG
.结构>盖房子>搭建结构>网页的结构和布局>html 样式>装修房子>结构的布局与装修>css 逻辑>房子内的东西可以动起来>网页的动态交互>javaScript
WEB后端开发
服务器程序开发，对数据进行操作，逻辑处理，给前端提供数据，开发API借口 java/PHP/C#/javascript/js.Nodejs（服务器程序） 认识网页和网站
什么是网页？
1.网页的专业术语叫做 Web Page 2.打开浏览器查看到的页面，是网络中的一“页” 3.打开浏览器查看到的页面，是网络中的一“页”
什么是网站？
网站是由多个网页组成的
通常一个网站由N个网页组成（N >= 1）
网页是有哪些部分组成的
文字、图片、音频、视频、超链接
我们看到的网页背后本质是什么
前端程序员写的代码
前端的代码是通过什么软件转换成用户眼中的页面的
通过浏览器转化（解析和渲染）成用户看到的网页
第一个网页和现在的网页
世界上第一个网页
上世纪90年代，Berners-Lee上线了世界上第一个网站：
http://info.cern.ch/hypertext/WWW/TheProject.html
现在的网页：
前端发展
- 网页网站开发
- 后台管理系统
- 网页游戏开发
- 移动端页面开发
- 微信小程序、公众号、订阅号
- 微信小游戏
- APP混合式开发
二、网页的组成
网页组成
阶段一：HTML元素； 网页的内容结构 阶段二：HTML元素 + CSS样式； 网页的视觉体验 阶段三：HTML元素 + CSS样式 + JavaScript语言； 网页的交互处理
web标准
构成：结构、表现、行为
HTML:页面元素和内容 CSS:网页元素的外观和位置等页面样式（如：颜色大小等） JavaScript:网页模型的定义与页面交互
三、浏览器介绍
浏览器介绍
我们已经明确知道了网页的组成部分：HTML + CSS + JavaScript。
那么这些看起来枯燥的代码，是如何被渲染成多彩的网页呢？
我们知道是通过浏览器来完成；
浏览器是网页显示、运行的平台，是前端开发必备利器
常见的五大浏览器: IE浏览器、火狐浏览器（Firefox）、谷歌浏览器（Chrome）、Safari浏览器、欧朋浏览器（Opera）
渲染引擎
渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分
浏览器出品的公司不同，内在的渲染引擎也是不同的
Trident （ 三叉戟）：IE、360安全浏览器、搜狗高速浏览器、百度浏览器、UC浏览器；
Gecko（ 壁虎） ：Mozilla Firefox
Presto（急板乐曲）-> Blink （眨眼）：Oper
Webkit ：Safari、360极速浏览器、搜狗高速浏览器、移动端浏览器（Android、iOS）
Webkit -> Blink ：Google Chrome
注意点
渲染引擎不同，导致解析相同代码时的 速度、性能、效果也不同的
谷歌浏览器的渲染引擎速度快、性能高、效果好，所以更吸引用户的喜爱（推荐）
查看网站：tongji.baidu.com/data/browse…
为什么要遵循WEB标准呢？
通过以上浏览器的内核不同，我们知道他们渲染或者排版的模式就有些许差异，显示就会有差别。导致用户在不同的浏览器看到同一个页面是不同的效果。
Web标准：让不同的浏览器按照相同的标准显示结果，让展示的效果统一！
浏览器不同，他们显示页面或者排版就有些许差异
四、第一个网页
1、认识html
超文本标记语言
专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述
HTML元素是构建网站的基石；
什么是标记语言（markup language ）？
由无数个标记（标签、tag)组成
是对某些内容进行特殊的标记，以供其他解释器识别处理
比如使用h2标记的文本会被识别为“标题”进行加粗、文字放大显示
由标签和内容组成的称为元素（element）
什么是超文本（ HyperText ）？
表示不仅仅可以插入普通的文本（Text），还可以插入图片、音频、视频等内容
还可以表示超链接（HyperLink），从一个网页跳转到另一个网页
2，开发第一个网页 – 记事本
1、在代码文件夹中点击鼠标右击 → 新建文本文档 → 命名为：第一个网页.txt 2、双击这个文件，输入代码等内容 → 记得保存！ 3、在文件上点击鼠标右键 → 重命名 → 修改文件后缀为为.html 4、第一个网页.html ，浏览器会自动打开文件并显示之前输入的内容
HTML文件的特点 – 扩展名（后缀名）
因历史遗留问题，Win95\Win98系统的文件拓展名不能超过3字符，所以使用.htm现在
统一使用 .html
3，HTML文件的基本骨架
注意：
我们在以后写代码(html,css,js...)遇到特殊符号,必须都是英文输入下的符号
制作一个网页必须按照html的结构去写.
4，编辑器
常见的前端使用的编辑器：WebStorm、Sublime Text、Visual Studio Code、Atom、HBuilder、IntelliJ IDEA、Dreamweaver
5，HTML的注释
什么是注释？
简单来说，注释就是一段代码说明
注释是只给开发者看的，浏览器并不会把注释显示给用户看
浏览器不会，浏览器执行代码时会忽略所有的注释
注释的意义:
帮助我们自己理清代码的思路, 方便以后进行查阅
与别人合作开发时, 添加注释, 可以减少沟通成本.(同事之间分模块开发)
开发自己的框架时, 加入适当的注释, 方便别人使用和学习.(开源精神)
可以临时注释掉一段代码, 方便调试
注释的快捷键： ctrl+/
五、标签、元素、属性
1，标签
标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
常见标签由两部分组成，称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。
HTML元素不区分大小写，但是推荐小写
2，元素
什么是元素（Element）呢？
元素是网页的一部分
一个元素可以包含一个数据项，或是一块文本，或是一张照片，亦或是什么也不包含
那么HTML有哪些元素呢？
3，元素的属性
属性包含元素的额外信息，这些信息不会出现在实际的内容中
一个属性必须包含如下内容
一个空格，在属性和元素名称之间
如果已经有一个或多个属性，就与前一个属性之间有一个空格
属性名称，后面跟着一个等于号
一个属性值，由一对引号“ ”引起来
属性的分类
有些属性是公共的，每一个元素都可以设置，比如class、id、title属性
有些属性是元素特有的，不是每一个元素都可以设置，比如meta元素的charset属性、img元素的alt属性等
元素的结构总结
4,元素的嵌套关系
六、骨架标签
1、文档说明
HTML最上方的一段文本我们称之为 文档类型声明，用于声明文档类型
<!DOCTYPE html>
作用
HTML文档声明，告诉浏览器当前页面是HTML5页面
让浏览器用HTML5的标准去解析识别内容
必须放在HTML文档的最前面，不能省略，省略了会出现兼容性问题
2、html元素
html元素 表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素，所有其他元素必须是此元素的后代。
lang属性
帮助语音合成工具确定要使用的发音
帮助翻译工具确定要使用的翻译规则
lang=“en”表示这个HTML文档的语言是英文
lang=“zh-CN”表示这个HTML文档的语言是中文
3、head
HTML head 元素 规定文档相关的配置信息（也称之为元数据），包括文档的标题，引用的文档样式和脚本等。
常见配置：
1.网页的标题：title元素 2.网页的编码：meta元素
配置编码
可以用于设置网页的字符编码，让浏览器更精准地显示每一个文字，不设置或者设置错误会导致乱码
一般都使用utf-8编码，涵盖了世界上几乎所有的文字
4、body
body元素里面的内容将是你在浏览器窗口中看到的东西，也就是网页的具体内容和结构，之后学习的大部分HTML元素都是在body中编写呈现的
