Html
前端发展历程
前端开发方向
- web网页开发
- 小程序
- 移动端开发
- UI设计
时间线
- 91年，出现第一个网页，早期的网页主要用于看文档，传论文，学术研究,Tim benners-lee 互联网之父
- 94年，PHP诞生，实现数据的交互和动态页面的模板引擎，为Web2.0时代做了铺垫，lee博士,建立了W3C（指定前端开发规则，包含Html,Css，js等）
- web1.0 纯静态页面
- web2.0 动态页面，数据动态渲染
- 95年：Javascript出现，只能实现动态交互，页面的动画效果
- 99年：ajax技术，异步加载，web2.0 时代到来
- 07年：第一部ipone手机诞生，标志互联网时代的到来
- 14年 Html5版本发布
- 20年：Vue3.0发布，混合开发
前端三件套概述
- Html（超文本标记语言）负责网页基本骨架结构搭建
- CSS 负责对网页样式美化
- Javascritpt 负责页面动态交互效果
Html
概述
Hyper Text Marckup Language 超文本标记语言
- 超文本：通过一系列的超链接，将不同空间的资源连接在一起形成一个网状结构。超文本其实就是超媒体，它不仅包含文本，还包含视频、音频等媒体文件
- 标记：指的是标签，一个文本内容会通过一个标签进行连接
特点
- 可扩展 不同的标签不同的功能
- 简单性 标签的使用
- 跨平台性 基于浏览器
- 通用性 网页写好之后，可以相互嵌套，在浏览器渲染
Html网页文档结构
- html 文档用来描述网页
- html文档包含标签和文本
文档结构
<!DOCTYPE HTML>
<html>
<head>
<meta charset='utf-8'>
<title>我的第一个网页</title>
</head>
<body>
hello world
</body>
</html>
<!DOCTYPE HTML>：代表网页的文档类型，申明了浏览器解析时的解析规则，大小写均可<html>：根标签，每个网页只有一个<head>:网页的头部,tilte 表示网页的标题，显示在浏览器的窗口栏上，利于seo收录<meta charset='utf-8'>：指定网页的编码集<body>：代表网页的主体，书写网页结构和内容的代码
DOCTYPE
- H5 既可以使用兼容模式，也可以使用严格模式
<!DOCTYPE HTML>
- H4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
作用
- 申明文档类型
- 申明html版本，浏览器解析规则版本
- 决定了浏览器的加载模式
浏览器加载模式
- 严格模式（标准模式）：严格按照W3c标准来解析网页
- 混杂模式（兼容模式）：按照自己的规范解析网页
doctype不写？
- 若doctype不写，会导致文档无法判断当前的版本和dtd约束条件，浏览器会采用兼容模式解析网页
- 若doctype书写正确并且dtd的约束条件正确，默认采用严格模式解析网页
开发工具
webstorm
内置了很多插件，不用自己安装，对电脑内存消耗比较大
Hbuilder
小巧的开发工具，内置了部分插件，提供了完善的前端开发语法支持，启动比较慢，电脑性能不好，会出现卡退的现象
记事本
用起来比较麻烦
vs code ——目前市场上比较主流的开发工具
微软开发的软件，不仅可以前端使用，还可以开发java、python等等。轻量化软件，需要插件自己安装，内存消耗不大。
常用插件的安装
Chinese (Simplified) Language Pack for Visual Studio Code汉化Auto Rename Tag自动将结尾标签更改HTML CSS Support在HTMl文档中支持css的提示HTML Snippets自动生成html代码，专门对html代码格式化，比如自动生成html代码结构Image preview在html代码中预览引入的图片的缩略图IntelliSense for CSS class names in HTML可以在html代码中智能提示css代码中class nameLive Server:可以将vscode作为一台服务器，让浏览器来访问，执行html代码实时更新open in browser:可以指定浏览器打开网页，不能实时更新
