当前栏目: [前端开发基础]您现在的位置是:成都seo > 前端学习 > 前端开发基础 > 正文

学习HTML5+CSS3阶段作用是什么

2020-04-02 00:43前端开发基础 人已围观文章来源:未知文章作者:admin

简介学习HTML5+CSS3阶段作用是什么(第一天) 1.学习本阶段的作用 1.了解什么是网页 2.了解浏览器和浏览器内核 3.能够使用photoshop来量取设计图和相关操作 4.具备网页开发的能力、 5.对于后面阶段的知识能够起到启下的作用 本阶段的学习目标 1.掌握HTML/HTML5 2.掌握CSS/CSS3 3.能够基本使用Photoshop 4.掌握HTML+css布局(网页布局) 阶段课程信息 阶段名称 总时长 模块个数 小结个数 难易程度 建议学习天数 HTML5+CSS3 32.9小时 4个 40个 ★★ 24天(每天2小时) 阶段中知识的重难...

学习HTML5+CSS3阶段作用是什么(第一天)
 
 
1.学习本阶段的作用
 
1.了解什么是网页
2.了解浏览器和浏览器内核
3.能够使用photoshop来量取设计图和相关操作
4.具备网页开发的能力、
5.对于后面阶段的知识能够起到启下的作用
 
本阶段的学习目标
1.掌握HTML/HTML5
2.掌握CSS/CSS3
3.能够基本使用Photoshop
4.掌握HTML+css布局(网页布局)
 
阶段课程信息
阶段名称 总时长 模块个数 小结个数 难易程度 建议学习天数
HTML5+CSS3 32.9小时 4个 40个 ★★ 24天(每天2小时)
 
阶段中知识的重难点
1.CSS选择器
2.盒模型
3.CSS三大特征
4.浮动和清除浮动
5.CSS四种定位
6.CSS进阶
7.CSS3
8.案列/项目网页布局
 
阶段中包含案例/项目展示
学成在线 品优购
 
阶段模块与学习方法建议
模块名称 模块难度 掌握程度 学习方法建议
HTML 掌握 代码多敲多练,从而记住常用HTML标签
CSS ★★ 掌握 代码多敲多练,从而记住常用CSS属性用法
HTML5+CSS3 ★★ 掌握 代码多敲多练,理解用法
品优购电商项目 ★★★ 熟练 1.培养网页布局分析能力
2.代码至少敲一遍以上
3.必须熟练使用HTML+CSS进行网页布局(网页布局分析能力)
 
 
阶段中技术点之前的联系
 
HTML/HTML5 + CSS/CSS3 = 网页布局
 
成功的路上并不拥挤,因为坚持的人并不多 加油
 
 
基础班目标
 
1.基础班主要学习PC端网站布局
 
2.最终网站:品优购静态网站
 
3.目的:精通网页布局,也是我们前端人员的必备技能。为后面学习javaScript打下坚实基础。
 
基础班学习路线
 
HTML5 基础 课时:20% 学习HTML5基础,主要学习最常见的没有兼容性的HTML标签
 
CSS3基础 课时:50% 学习CSS3基础,主要学习最常用而没有兼容性的CSS样式,利用前面学习的标签完成传统PC端网页布局。
 
H5C3提高 课时:10% 学习HTML5新增的标签。CSS3样式,有一定兼容性,可以与未来更好的接轨
 
项目-品优购电商网站 课时: 20% 综合以前学习知识点,贴近于实际开发,制作品优购电商网站,完成首页,列表页,注册页制作。 目的:学习网页制作实际开发制作流程规范
------------------------------------------
3.2
 
 
HTML 简介导读
能够说出网页基本组成
 
能够说出什么是HTML
 
能够说出常用浏览器
 
能够说出web标准三大组成部分
-----------------------------------
3.3
1.什么是网页
1.网站是指在因特尔网上根据一定的规则,使用HTML等制作的用于展示特定内容相关的网页集合。
2.网页是网站中的一“页”,通常是HTML格式的文件,他要通过浏览器来阅读。
3.网页是构成网站的基本元素,它通常有图片,链接,文字,声音,视频等元素组成。通常我们看到的网页,常见以.htm或,html后缀结尾的文件,因此将其俗称HTML文件.
 
2.什么HTML
1.HTML指的是超文本标记语言(HYper Text Markup Language),他是用来描述网页的一种语言
2.HTML不是一种编程语言,而是一种标记余元(markup language)
3.标记语言是一套标记标签(markup tag)
 
所谓超文本,有2层含义:
1.他可以加入图片,声音,动画,多媒体等内容(超越了文本限制)
2.它还可以从一个文件跳转到另一个文件,与世界各地主机文件链接(超级链接文本)
 
3.网页的形成
1.网页是有网页元素组成的,这些元素是利用html标签描述出来,然后通过浏览器解析来显示给用户的。
 
前端人员开发代码-》 浏览器显示代码(解析,渲染)-》 生成最后web页面
 
网页总结:
网页是构成网站的基本元素,它通常有图片,链接,文字,声音,视频等元素组成。通常我们看到的网页,常见以.htm
网页生成制作:有前端人员数学HTML文件,然后浏览器打开,就能开到网页。
HTML:超文本标记语言,用来制作网页的一门语言。有标签组成。比如:图片,链接,文字,声音,视频等元素组成
 
-----------------------------
3.4
1.常用的浏览器
浏览器是网页显示,运行平台。常用的浏览器有IE,火狐(Firefox),谷歌(Chrome).safari和oPera等平时称为5大浏览器
 
2.浏览器内核
浏览器内核(渲染引擎):负责读取网页内容,整理讯息,计算网页显示方式并显示页面.
 
浏览器 内核 备注
IE Trident IE,猎豹安全,360极速浏览器,百度浏览器
firefox Gecko 火狐浏览器内核
Safari Webkit 苹果浏览器内核
Chrome/Opera Blink Chrome/opera浏览器内核.Blink其实就是Webkit分支
 
目前国内一般浏览器都会采用Webkit/Blink内核,如360.UC,QQ.搜狗等
------------------------------------------------------
3.5 web标准
web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C(万维网联盟)是国际最著名的标准化组织。
1.为什么需要web标准
1.让web的发展前景更广阔的
 
2.内容能被更广泛的设备访问
 
3.更容易被搜索引擎搜索
 
4.降低网站流量费用
 
5.使网站更易于维护
 
6.提高页面浏览速度
 
2.web标准的构成
 
主要包括结构(Structure),表现(Presentation)和行为(Behavior)三个方面
 
标准 说明
结构 结构用于对网页元素进行整理和分类,现阶段主要学的是HTML
表现 表现用于设置网页元素的版式,颜色,大小等外观样式,只要指的是CSS
行为 行为是指网页模型的定义及交互的编写,现阶段主要学习的是javaScript
 
Web标准提出的最佳体验方案:结构,样式,行为相分离
 
简单理解:结构写到HTML文件中,表现写到CSS文件中,行为写到JavaScript文件中。
 
结构:类似于身体
表现:类似于外观装饰
行为:类似于动作
 
相比较而言。结构更重要一些。
--------------------------------------------------------
3.6
HTML标签导读;
 
任务
1.能够说出标签的书写注意规范
 
2.能够写出HTML骨架标签
 
3.能够写出超链接标签
 
4.能够写出图片标签并说出alt和title的区别
 
5.能够说出相对路径的三种形式
 
学习HTML主要内容
 
1.HTML语法规范
 
1.HTML标签是有尖括号包围的关键词,列如<html>
 
2.html标签通常是成对出现的,列如<html>和</html>.我们称为双标签。标签对中的第一个标签是开始标签。第二个是结束标签
 
3.有些特殊的标签必须是单个标签(极少情况),例如<br />,我们称为单标签。
----------------------------------------------------
 
1.2 标签关系
 
双标签关系可以分为两大类:包含关系和并列关系
 
包含关系 (父子关系)
 
<html>
<body></body>
</html>
 
并列关系 (兄弟关系)
<head></head>
<body></body>
 
 
2.HTML基本结构标签
-------------------------------------------------
<html>
<head>
<title>第一个页面</title>
<body>键盘敲乱,月薪过万</body>
</head>
</html>
 
----------------------------------------------------
3.开发工具
 
VScode
1.双击打开软件
 
2.新建文件(Ctrl+N)
 
3.保存(Ctrl+S),注意移动要保存为.html文件
 
4.Ctrl+加号键,Ctrl+减号键,可以放大缩小视图
 
5.生成页面骨架
 
输入 !按下table键
 
6.利用插件在浏览器中预览页面: 点击鼠标右键,在弹出口中点击“Open Default Browser”
 
----------------------------------------------------------------------------------------
网页开发工具
 文档类型声明,作用就是告诉浏览器使用哪种HTML版本来显示网页
 
1.
<!DOCTYPE html>
 
这句话代码的意思是:当前页面采取的是HTML5版本来显示网页
 
注意:
1.<!DOCTYPE>声明位于文档中的最前面的位置,出于<html>标签之前
 
2.<!DOCTYPE>不是一个HTML标签,他就是文档类型声明标签
 
 
2.lang语言种类
 
用来定义当前文档显示的语言
 
1. en定义语言为英文
 
2.zh-CN定义语言为中文
 
简单来说,定义为en 就是英文网页,定义为zh-CN就是中文网页
 
其实对于文档显示来说,定义成en的文档也可以显示中文,定义为zh-CN的文档也可以显示英文
 
这个属性对浏览器和搜索引擎(百度,谷歌等)还是有作用的
 
 
3.字符集
 
字符集(character set)是多个字符的集合。以便计算机能够识别和储存各种文字
 
在<head>标签内,可以通过<mate>标签的charset属性来规定HTML文档应该使用哪种字符编码
 
<mate charset="UFT-8">
 
charset常用的只有: GB2312. BIG5 ,GBK和UTF-8,其中UTF-8也被称为玩过吗,基本包含全世界所有国家需要用到的字符
 
注意:上面语法是必须要写的代码,否则可能引起乱码的情况。一般情况下,统一使用“UTF-8”编码,尽量统一写成标准的“UTF-8",不要写成“uft8或者UTF8”
 
 
总结:
1.以上三个代码vscode自动生成,基本不需要我们重写
 
2.<!DOCTYPE html>文档类型声明标签,告诉浏览器这个页面采取html5版本来显示页面。
 
3.<html lang="en">告诉浏览器或者搜索引擎这是一个英文网站,本页面采取应为来显示
 
4.<mate charset="UTF-8" />必须写 采取utf-8来保存文字。如果不写就会乱码。具体原理后面分析。
 
----------------------------------------------------------
4.HTML常用标签
1.标签的语义
学习标签是有技巧的,重点是记住每个标签的语义。简单理解就是指标签的含义,即这个标签是用来干嘛的。
 
根据标签的语义,在合适的地方给一个最为合理标签,可以让页面结构更清晰。
 
--------------------------------------------------------
4.2标题标签 <h1> - <h6>
为了使网页更具有语义化,我们经常在页面中用到标题标签。HTML提供6个等级的网页标题,即<h1> - <h6>
 
 
4.3段落标签
在网页中,要把文字有条理地显示出来,就需要将这些文字分段显示。在HTML标签中,<p>标签用于定义段落,他可以将整个网页分词若干个段落
 
<p>我是一个段落</p>
 
标签语义:可以吧HTML文档分割为若干段落
 
特点:
1.文本你在一个段落中会根据浏览器窗口大小自动换行。
2.段落和段落之间保有空隙
 
4.4换行标签
 
在HTML中,一个段落中的文字会从左到右依次排列。知道浏览器窗口的右端,然后才自动换行。如果希望某段文本强制换行显示,就需要使用换行标签<br />
 
<br />
 
单词break的缩写,打断,换行
 
标签语义:强制换行
 
特点:
1<br />是个单标签
 
2 <br />标签只是简单地开始新的一行,跟段落不一样,段落和段落之前会插入一些垂直的间隔(间距较大)
 
 
 
 
5.HTML中的注释和特殊字符
 
 
 
 
 

Tags:

说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:没有了

下一篇:HTML基础学习第二天

相关文章

本栏推荐

标签云

站点信息

  • 文章统计96篇文章
  • 标签管理标签云
  • 微信公众号:扫描二维码,关注我们