前端全栈学习第二章

举报
子非鱼~ 发表于 2020/06/09 02:44:46 2020/06/09
【摘要】 初识 HTML1、Web 开发1.1 前端开发和后端开发前端开发:侧重于页面的展示及用户交互,涉及 HTML/CSS/JavaScript后端开发:侧重于数据的处理与服务的访问,涉及数据库/服务器层面1.2 开发模式演进过程C/S 架构:客户端/服务器架构 B/S 架构:浏览器/服务器架构静态页面 -> 复杂页面 -> 前后端分离 -> 前端组件/模块化开发1.3 前端开发三大件1、HTM...

初识 HTML

1、Web 开发

1.1 前端开发和后端开发
前端开发:侧重于页面的展示及用户交互,涉及 HTML/CSS/JavaScript
后端开发:侧重于数据的处理与服务的访问,涉及数据库/服务器层面

1.2 开发模式演进过程

C/S 架构:客户端/服务器架构  
B/S 架构:浏览器/服务器架

构静态页面 -> 复杂页面 -> 前后端分离 -> 前端组件/模块化开发

1.3 前端开发三大件

1、HTML: 网页骨架
2、CSS: 网页样式
3、JS: 网页功能与交互

2、WEB 标准

WEB 开发标准:Web 应用开发需要遵循的标准,是一系列标准的集合

2.1 网页的三个标准

1、结构标准 XML/HTML/XHTMLHTML: 定义网页的内容,例如文字/图片/视频等等

2、表现标准 CSS

CSS: 定义网页内容的表现形式,例如字体的颜色/背景/标题大小等等

3、行为标准 DOM/JavaScript

JavaScript: 定义网页上的交互,控制网页的行为,例如弹出弹框/页面打开、关闭/输入内容提示等等

2.2 标准制定

由 W3C 联盟制定

参考:
HTML 5.1 2nd Edition 标准
HTML 5.2 标准
HTML 5.3 标准

2.3 标准制定流程

参考: 6.1.1 Recommendations and Notes

WD(Working Draft/工作草案) -> CR(Candidate Recommendation/候选推荐标准) -> PR(Proposed Recommendation/建议推荐标准) -> REC(Recommendation/推荐标准)

2.4 标准实现

由浏览器厂商,开发支持这些标准的浏览器

3、开发工具

3.1 编辑器

推荐 VSCode: Visual Studio Code 官网

推荐汉化插件:Chinese(Simplified) Language Pack for Visual Studio Code

4、HTML 发展史

HTML(HyperText Markup Language) 超文本标记语言,用来构建网页的一种标记语言

4.1 历史

* 1993 年由互联网工程小组 (IETF) 发布工作草案
* 1995 年发布 HTML 2.0 版本
* 1997/1/14 由 W3C 发布 HTML 3.2 版本
* 1997/12/18 由 W3C 发布 HTML 4.0 版本
* 1999 年由 W3C 发布 HTML 4.01 版本
* 2000 年由 W3C 发布 XHTML 1.0 版本,他是一种更严格的 HTML 代码
* 2014/10 W3C 发布 HTML5
...

4.2 HTML vs XHTML

XHTML: 可扩展超文本标记语言,是一种更严格/更纯洁的 HTML 语言

主要不同点:

1、XHTML 元素必须被正确地嵌套
2、XHTML 元素必须被关闭
3、标签名必须用小写字母
4、XHTML 文档必须拥有根元素

验证 html 文件是否符合标准: Nu Html Checker

4.3 HTML 语义化

HTML 5 中新增了很多语义化标签,不同的 HTML 标签代表了不同的内容

优势

1、使 HTML 结构变得清晰,有利于代码的维护
2、有利于搜索引擎抓取
3、语义化使代码仍具可读性
4、使 HTML 代码变得更简洁,提高页面加载速度
5、有助于屏幕阅读器等设备的识别

5、HTML 标签

5.1 标签

HTML 是由一系列标签组成的,每个标签以 <  > 包裹单词

5.2 标签种类

单标签:只有一个标签就能表达完整含义,例如 <img /><!DOCTYPE html>

双标签:由开始和结束标签一起组成,例如 <div></div><span></span>

5.3 元素

一对标签包含的所有内容,例如 <div>Hello, World!</div>

5.4 属性

标签可以有很多属性,属性总是在开始标签中定义,以名值对的形式出现,其中属性值以双引号包裹

例如:<div class="name">姓名</div>,其中 class 属性的值为 name




【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。