WEB前端-HTML-基础
作为WEB前端的第一篇，先讲讲WEB大体的情况。
学习WEB前端开发，需要了解三把刀：HTML、CSS、JavaScript
HTML：提供最基本的web语言基础
CSS：用过Photoshop的朋友应该了解一个图层的概念，css就是实现各种页面渲染的语言，主要实现的是静态渲染
JavaScript：跟Java没有任何关系，是当今最主流的web脚本语言，主要作用是实现页面的动态化
讲到这里就顺便提一下B/S的最基本的架构图：
严格来讲B/S也属于C/S的一种，只是C变成了被广泛标准化的浏览器，浏览器自带了解释器、处理方法、API等。
今天主要跟大家分享一下HTML的基础知识
HTML（Hyper Text Mark-up Language）–超文本标记语言
简言之 它是制作万维网页面的标准语言。
下面贴一张来自武sir的HTML结构树：
先来贴一段HTML代码最基本的构成：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>DOCTYPE
相当于linux脚本前的#!/bin/bash, DOCTYPE用来告诉浏览器使用什么规范来解释代码。
常用的有HTML 、 XHTML
有和无的区别：
1、BackCompat：标准兼容模式未开启（或叫混杂模式[Quirks mode]）
2、CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode]）这个属性会被浏览器识别并使用，compatMode默认是BackCompat,。
如果没有，浏览器按照自己的方式解析渲染页面，在不同的浏览器就会显示不同的样式。
如果添加了，那么各个厂商的浏览器就会按照W3C的标准解析渲染页面，这样页面内容就不会因为浏览器不同而出现素材渲染不同的情况。
lang
设置页面的语言属性，这里设置了lang=en,这样谷歌在加载页面时就会提示是否翻译，这是html5的写法
charset
设置html文件使用的字符集
< html> < html/>（标签）
由“一套尖括号+标签名”组成
html:超文本标记语言，类似于xml、xhtml，是通过一个个成对的标签来进行配对，实现属性的配置，并将标签里的属性作用于被标记的内容上。
一个完整的html一般分为三部分：
< html> content < html/>：项目标签，一个html里包含首尾，范围最大的一个标签，其中标记着整个头部标签、内容标签
< head>content < head/>: 头部标签，用于页面布局
< body>content < body/>: 内容标签，页面的大部分内容都在此处编写
标签根据闭合形势分为：
1、 自闭和标签
例如 < br /> 只有一套加括号，标签不成对出现；
2、 非自闭和标签
例如 < p> content < p/> 由两套尖括号组成，标签成对出现；
根据标签属性作用域的不同又可以分为：
1、块级标签
例如< div> content< div/> 作用域为中间内容所占的整行；
2、内联标签
例如< span> content< span/>作用域为中间内容本身所占的位置；
PS：具体实例可见最后符的代码，用不同颜色来区分。块级和内联的区分只是最基本的，到了后面，可以通过其他属性来相互实现
注释
html的代码注释方式，其实是一个特殊的自闭和标签：
完整的形势为
<!-- 注释内容 --/>
其他
提一个很书写规范方面的case：
自闭和标签 example: < br/>，请在本套的右尖括号“>”前面加上“/”,表示至此已闭合。为了自己和别人以后方便阅读代码;
非自闭和标签 example：< p> < p/>, 成对的出现的标签，最后一个叫做闭合标签，经常有人写完第一个标签，就开始写内容了，写完内容，就忘了闭合标签，但是在运行html时，并不报错，会显示意想不到的现象，当代码数量巨大时，排查此类错误是非常烦恼并且低级的，请在开始学习是务必养成良好习惯；
另外注意一个格式问题：标签的尖括号“<” 和标签名之间是没有空格的。下一篇再详细讲一讲html的常用标签
最后来段基础代码：
<!DOCTYPE html>
<html lang="en">
<head>
<!--自闭合标签-->
<meta charset="UTF-8">
<!--标签属性 Content=2-->
<meta http-equiv="Refresh" Content="30; Url=https://www.baidu.com"/>
<!--使代码可以兼容IE及其版本-->
<meta http-equiv="x-ua-compatible" content="IE=edge"/>
<!--成对标签-->
<title>mydome</title>
<link rel="shortcut icon" href="http://image.so.com/v?q=%E6%B5%B7%E8%B4%BC%E7%8E%8B%E5%A4%B4%E5%83%8F&src=srp&fromurl=http%3A%2F%2Fwww.3761.com%2Fyule%2Fhtml%2F171109.html#q=%E6%B5%B7%E8%B4%BC%E7%8E%8B%E5%A4%B4%E5%83%8F&src=srp&fromurl=http%3A%2F%2Fwww.3761.com%2Fyule%2Fhtml%2F171109.html&lightboxindex=5&id=1df6633303e906af8df32c6fa44078ed&multiple=0&itemindex=0&dataindex=20"/>
</head>
<body>
<!--块级和内联-->
<div style="background-color:red">块级</div>
<span style="background-color:greenyellow">内联</span>
<!--符号，<左尖括号 空格 >右尖括号-->
<左尖括号 空格 >右尖括号
<!--段落和换行-->
<p>雀巢咖啡<br />巧克力</p>
<p>蜂蜜柚子茶</p>
<!--标题，从1至6，逐个变大，可以通过css的样式来重新定义像素大小-->
<h1>脉动</h1>
<h2>尖叫</h2>
<h3>可乐</h3>
<h4>雪碧</h4>
<h5>醒目</h5>
<h6>芬达</h6>
<h6 style="font-size:45">康师傅</h6>
<!--a标签：超链接，有锚的作用-->
<a href="http://www.baidu.com">百度本页跳转</a>
<a href="http://www.baidu.com" target="_blank">百度分页跳转</a>
<!--寻找本页中对应id的标签，将其标签置顶-->
<a href="#i1">第一章</a>
<a href="#i1">第二章</a>
<a href="#i1">第三章</a>
<!--id可以不写，如果写，则唯一，不可重复-->
<div id="i1" style="height: 500px";>第一章内容</div>
<div id="i2" style="height: 500px";>第二章内容</div>
<div id="i3" style="height: 500px";>第三章内容</div>
</body>
</html>