html&css系列学习——（一）html框架认识
首先，我们来了解一下html的发展及其特点：
HTML的历史版本发展
- HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。
- HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。
- HTML 3.2：1997年1月14日，W3C推荐标准。
- HTML 4.0：1997年12月18日，W3C推荐标准。
- HTML 4.01(微小改进)：1999年12月24日，W3C推荐标准。
- HTML 5：2014年10月，HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。
HTML的特点：
- 简易性
- 可扩展性
- 平台无关性
- 通用性
然后，打开VScode，开启今日份小白学习，嘿嘿嘿。
创建新的HTML
- 新建xxx.html的文件，输入"!"或"html:5"加tab键生成基本的html5结构
（如果tab键按下去没反应，找到侧边下面的管理->设置->搜索Emmet:Trigger Expansion On Tab，把它勾选上，继续操作）
然后就出现下面这个样子啦！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
结构信息如下：
- 文档头信息
<!-- html5标准网页声明 -->
<!-- 不加这一行，就表示页面采用浏览器本身的解析标准，这样会造成页面在不同的浏览器（IE、火狐等）可能出现不同的显示效果。 -->
<!-- h5的文档声明，声明当前的网页是按照HTML5标准编写的编写网页时一定要将h5的文档声明写在网页的最上边。
如果不写文档声明，则会导致有些浏览器会进入一个怪异模式，进入怪异模式以后，浏览器解析页面会导致页面无法正常显示，所以为了避免进入该模式，一定要写文档声明
-->
<!DOCTYPE html>
- html根标签
<!-- 属性lang是单词language的缩写，意思是语言，”en”代表英语，”zh-CN”代表中文 -->
<!-- html根标签，一个页面中有且只有一个根标签，网页中的所有内容都应该写在html根标签中-->
<!-- 只有两个子标签: head:浏览器设置;body：可视区展示 -->
<html lang="en">
</html>
- head内容
<!-- head标签，该标签中的内容，不会在网页中直接显示，它用来帮助浏览器解析页面的 -->
<head>
<!--meta标签用来设置网页的一些元数据，比如网页的字符集，关键字、简介
meta是一个自结束标签，编写一个自结束标签时，可以在开始标签中添加 一个/-->
<!-- 字符编码，浏览器会根据字符编码进行解析
常见的字符编码有：gb2312、gbk、unicode、utf-8。-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- viewport 设备的屏幕
width=device-width width属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 浏览器选项卡上的名字 -->
<title>Document</title>
<!-- 可以在此处填上属性，用来设置body内容的属性 -->
<style></style>
<!-- 也可以用link属性，另外创建xxx.css页面写body属性 -->
<link href="xxx.css" rel="stylesheet" type="text/css" />
</head>
- body内容
<!-- body标签用来设置网页的主体内容，网页中所有可见的内容，都应该在body中编写 -->
<body>
<!-- 在body里的内容都是显示在浏览器的视图区的 -->
<!-- 在这个结构中，可以来编写HTML的注释注释中的内容，不会在页面中显示，但是可以在源码中查看我们可以通 过编写注释来对代码进行描述，从而帮助其他的开发人员工作,一定要养成良好的编写注释的习惯，但是注释一 定要简单明了 -->
<!-- 元素 -->
<!-- 单标签元素，仅有一个标签:<meta /> 、<img />、<br/> -->
<!-- 双标签元素，由开始标签和结束标签组成:<div></div> <p></p> -->
<div>我是一个div标签</div>
<p>我是一个p标签</p>
<!-- 镜面嵌套 div>div 按enter或tab键-->
<!-- 不要使用交叉嵌套，不美观 -->
<!-- 01 div嵌套 -->
<div>
<div>哦买噶！</div>
</div>
<!-- 02 p嵌套 -->
<p>**<strong>你是风儿，我是沙~</strong>**</p>
<!-- 属性 -->
<!-- 属性应该出现在元素的开始标签内部，
属性名和属性值通过"="分割，
属性与属性之间通过空格分割，
属性名不区分大小写，
属性值区分大小写并且属性值可以使用双引号引起来。
绝大多数标签都具有的属性，如：title、id、class、style... -->
<!-- id：唯一标识 -->
<div id="only" class="two">我是唯一的div</div>
<!-- class：标识一类元素 ，快捷写法：div.two回车-->
<div class="two">我是类元素</div>
<!-- style 样式 -->
<div style="background-color:pink;">我是css属性</div>
<!-- title：描述信息，鼠标悬浮到标签时的提示说明 -->
<div title="我是一个块级元素">我是块级元素</div>
<!-- 字符实体
空白语法：无论出现多少个空白或者换行，浏览器都解析为一个空白；
空格 小于号 < 大于号 > 和号 & 引号 " 撇号 &apos (IE不支持);
分（cent） ¢ 镑（pound） £ 元（yen） ¥ 欧元（euro） €
小节 § 版权（copyright） © 注册商标 ® 商标 ™ 乘号 ×
除号 ÷
-->
<div>空白 语法</div>
<div>空格
小于号 <
大于号 >
和号 &
引号 "
撇号(IE不支持) '
分（cent） ¢
镑（pound） £
元（yen） ¥
欧元（euro） €
小节 §
版权（copyright） ©
注册商标 ®
商标 ™
乘号 ×
除号 ÷</div>
</body>
码完一定要记得保存（ctrl+s）！！！
最后在浏览器打开(alt+b)look~ look~
虽然大部分是照搬老师上课讲的，但很有借鉴意义，嘿嘿嘿~
学习自己写博客的第二次！加油！
6111
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
