HTML-1.html的简单认识
WEB前端的核心部分
前端主要由三部分组成：HTML、CSS、JS（JavaScript）。
如果把一个页面比作人的结构的话：
- html 就相当于人的骨架，你本身固有的一些东西（有四肢、五官等）
- css 就是每个人的体态，外貌（高矮胖瘦、衣服的搭配）
- js 就是每个人的动作，与外界环境或他人的沟通交互（打招呼、跑步、敲代码）
什么是HTML？
官方定义：HTML（Hyper Text Markup Language ）超文本标记语言
注意：HTML中所有的标记都是W3C标准组织已经规范了，不能自己创建标签。并且每个版本都会有一些差异，HTML有很多版本。目前最新使用最多的版本是H5
什么是W3C标准？
万维网联盟（外语缩写：W3C）创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南标准不是某一个标准，而是一系列标准的集合。
HTML特点：
- 简单性：没有复杂的逻辑，你掌握这些标签的作用，合理搭配就可以设计出网页
- 可扩展：HTML标签有很多功能，新增一个标签就可以带来一个新的功能
- 跨平台：网页的运行环境是浏览器，只要保证你的系统有浏览器就可以运行。
- 通用性：页面写好了之后，可以相互的嵌套。一旦网页设计好了后，任何人都可以访问到你的页面。不管你使用什么浏览器都可以访问。
HTML文档的结构
<!--代表网页的文档类型，申明了浏览器解析时候的解析规则-->
<!DOCTYPE html>
<html>
<head>
<!--强制设置字符集，解决汉字乱码-->
<meta charset="utf-8">
<!--声明浏览器渲染方式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--开启理想视口 如果不写该代码，移动端的默认值则为980px viewport为理想视口 device-width为width100%=独立像素 initial-scale 为缩放比例-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 设置网页的关键字 -->
<meta name="keywords" content="嘻嘻嘻嘻">
<!-- 网页描述 -->
<meta name="description" content="设置网页的描述">
<!-- 设置作者 -->
<meta name="author" content="xixixi">
<title>my first page</title>
</head>
<body>
欢迎来到前端大家庭！
</body>
</html>
<!DOCTYPE html>:声明网页的文档类型，告诉浏览器解析的规则及html使用版本（目前使用的是H5版本）。- 注意：必须声明到文档的开头，不区分大小写
- html的版本：
- HTML：1991年，设计出来并没有作为标准。
- HTML+：1993年，非标准，这个版本已经在W3C的草案中。
- HTML2.0：1995年发布，这个版本作为了标准。
- HTML3.2：1997年发布 W3C 推荐标准
- HTML4.0（HTML4.01）W3C 推荐标准，之前的 PC 端网页规范
- HTML5：2012年发布的，新增了很多的新特性。W3C 推荐标准，基于移动终端进行优化
- XHTML：存在一段时间，后来就放弃维护，转向H5，既有html规范，又有xml规范
DOCTYPE有什么用：
- 使用了DOCTYPE可以正确声明文档的类型，有利于浏览器解析
- 可以正确告诉浏览器，我们使用的HTML版本是哪一个。 浏览器根据不同版本对代码有不同解析
- 正确声明DOCTYPE有利于浏览器识别采用哪种模式来运行代码。
###常用的 DOCTYPE 声明版本
html5
<!DOCTYPE html>
HTML 4.01 Transitional
该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Transitional
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集
（Framesets）。必须以格式正确的 XML 来编写标记。 (了解)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
浏览器两种解析模式：
-
严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码（服务于标准规则）。
混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码（服务于旧式规则）。
浏览器为什么有两种解析模式：
浏览器在发展的最初没有标准化，老版本浏览器下面能运行的代码，现在放在新版本浏览器下面无法运行，新版本的浏览器采用W3c的标准。以前写的代码就会不兼容，浏览器为了解决这个问题，所以采用两种模式来解析代码如何区分两种解析模式：如果文档包含严格的 DOCTYPE ，那么它就是以严格模式呈现，否者为混杂模式。
<html></html>:根标签，每个网页有且仅有一个根标签<head></head>:代表网页的头部,head主要写CSS代码和js代码。<title></title>:代表网页的标题，显示在网页窗口栏，SEO优化有用<meta charset="utf-8">:表示网页的编码集，浏览器在解析时会根据这个编码集去解析网页
<body></body>:代表网页的内容区域，主要写网页的结构代码
开发工具
目前市面上有很多的开发工具
- 记事本 （万能工具）
- Hbuilder：
- 内置插件，打开慢，运行易容卡顿，编辑器中内置浏览器的显示效果
- webstorm：
- 内置了很多插件，很多开发中会用到的插件提前安装好了，对电脑内存要求比较大，配置低电脑，容易卡退
- sublime：
- 轻量级的开发工具，插件需要自己下载，按需下载。后期开发的框架搭建环境稍微麻烦一点。
- Dreamweaver：
- 更新太慢，可以直接拖拽组件使用
- vscode：（推荐）
- 微软发布的一个工具，目前市场上前端最主流的开发工具，不仅可以开发前端，还可以开发java、Python等等。轻量化、需要什么插件在工具中即可下载安装，运行效率比较高，内存消耗不大。插件生态非常好，全球程序员一起来维护插件生态。
官网：https://code.visualstudio.com/Download
安装步骤：一直点击next（下一步）
vscode插件安装
chinese汉化Auto Rename Tag自动将结尾标签补全HTML CSS Support在HTML文档中支持CSS的提示HTML snippets自动生成html代码，专门对html代码格式化比如输入HTML5能够生成一个HTML5文件的标准模板代码。Image preview能够在编辑代码时查看所使用图片的缩略图。IntelliSense for CSS class names in HTML可以在HTML代码中智能提示CSS代码中的class 名Live Server可以将vscode作为一个服务器，让浏览器来访问（可以开启一个服务器，执行我们所写 的前端文件，并且实时更新，也就是说，以后可以无需刷新页面就可以查看效果了）open in browser可以指定浏览器打开网页stylelint编写CSS代码时，语法错误智能提示
vscode常用快捷方式
- Ctrl + C 复制
- Ctrl + X 剪切
- Ctrl + V 粘贴
- Ctrl + S 保存文件
- Ctrl + F 查询
- Ctrl + H 替换
- Ctrl + | 分屏显示
- alt+B 默认浏览器快速解析代码
- Ctrl + N 新建文件
- Ctrl + O 打开文件所在路径
- Ctrl + B 侧边栏显示隐藏
- Ctrl + /- 放大 / 缩小
总结
其实没啥总结的：
- 现在的前端开发html页面基本使用快捷键一键生成了，只需要了解每个位置的含义，在需要调整时修改即可
- 开发工具各有优劣，本人推荐使用vscode，插件库也比较齐全；全凭诸君喜好！
381
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
