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~
虽然大部分是照搬老师上课讲的,但很有借鉴意义,嘿嘿嘿~
学习自己写博客的第二次!加油!