任务一目的
- 了解
HTML
的定义,概念、发展简史 - 掌握常用
html
标签的含义、用法 - 能够基于设计稿来合理规划
html
文档结构 - 理解语义化,合理地使用
html
标签来构建页面
任务注意事项
- 参考示例图
- 只需要完成HTML代码编写,不需要写CSS
- 示例图仅为参考,不需要完全实现一致,其中的图片、文案均可自行设定
- 尽可能多地尝试更多的HTML标签
在线学习参考资料
效果图
ps:这里演示效果中出了点小bug
,链接的那个样式前面的小黑点没有显示,把源码下载下来,在浏览器中查看能正常显示,与设计稿无异,我感觉应该是设置github
演示的时候的问题,调了好久没调好,希望大神指教。
源码
总结
主要是对
HTML
标签的理解
- 这个任务总体来说没什么难度,学完教程中的内容,完全可以根据设计稿实现HTML
文档结构。
HTML
定义、概念、发展简史
定义
HTML
是用来描述网页的一种语言。HTML
指的是超文本标记语言 (Hyper Text Markup Language)HTML
不是一种编程语言,而是一种标记语言 (markup language)- 标记语言是一套标记标签 (markup tag)
HTML
使用标记标签来描述网页
概念
HTML
标签
HTML
标记标签通常被称为 HTML 标签 (HTML tag)。HTML
标签是由尖括号包围的关键词,比如HTML
标签通常是成对出现的,比如 和
标签对中的第一个标签是开始标签,第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML
文档 = 网页
HTML
文档描述网页HTML
文档包含 HTML 标签和纯文本HTML
文档也被称为网页Web
浏览器的作用是读取HTML
文档,并以网页的形式显示出它们。浏览器不会显示HTML
标签,而是使用标签来解释页面的内容:
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
发展简史
- 现在我们常常习惯于用数字来描述
HTML的版本(如:HTML5),但是最
初的时候我们并没有HTML1,而是
1993年IETF团队的一个草案,并不是成型的标准。 - 两年之后,在1995年HTML有了第二版,即HTML2.0,当时是作为RFC1866发布的。
- 有了以上的两个历史版本,HTML的发展可谓突飞猛进。1996年HTML3.2成为W3C推荐标准。之后在1997年和1999年,作为升级版本的4.0和4.01也相继成为W3C的推荐标准。
- 在2000年基于HTML4.01的ISO HTML成为了国际标准化组织和国际电工委员会的标准。于是被沿用至今,这期间虽然有点小的改动但大方向上终归没有什么变化。
- 从1993-2000之间短短的7年时间,HTML语言有着很大的发展,基于诸多人的努力,终于产生了我们现在用的HTML语言。
html
语义化
- 根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
为什么要语义化?
- 为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看;
- 用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;
- 有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
- 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
- 便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。
原文地址:简书地址
原创文章,未经作者允许不得转载,违者必究,转载请注明出处。