前端全栈学习第二章
初识 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
- 点赞
- 收藏
- 关注作者
评论(0)