百度前端学院_小薇课堂_task_1
任务一目的
- 了解
HTML的定义，概念、发展简史 - 掌握常用
html标签的含义、用法 - 能够基于设计稿来合理规划
html文档结构 - 理解语义化，合理地使用
html标签来构建页面
任务注意事项
- 参考示例图
- 只需要完成HTML代码编写，不需要写CSS
- 示例图仅为参考，不需要完全实现一致，其中的图片、文案均可自行设定
- 尽可能多地尝试更多的HTML标签
在线学习参考资料
- Web相关名词通俗解释
- MDN HTML入门
- 慕课HTML+CSS基础教程视频
效果图
点击查看
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标准的团队都遵循这个标准，可以减少差异化。
原文地址：简书地址
原创文章，未经作者允许不得转载，违者必究，转载请注明出处。
百度前端学院_小薇课堂_task_1相关推荐
- 百度前端学院_小薇课堂_task_4
小薇课堂Task_4 在做这个任务前课参考这篇文章 任务目标 实践HTML/CSS布局方式 深入了解position等CSS属性 任务描述 实现如 示例图(点击打开) 的效果 灰色元素水平垂直居中,有 ...
- 百度前端学院_小薇课堂_task2
任务目的 针对设计稿样式进行合理的HTML架构,包括以下但不限于: 掌握常用HTML标签的含义.用法 能够基于设计稿来合理规划HTML文档结构 理解语义化,合理地使用HTML标签来构建页面 掌握基本的 ...
- 百度前端学院_小薇课堂_task_5
小薇课堂_task_5 任务目的 针对设计稿样式进行合理的HTML架构,包括以下但不限于: 掌握常用HTML标签的含义.用法 能够基于设计稿来合理规划HTML文档结构 理解语义化,合理地使用HTML标 ...
- 百度前端学院_小薇课堂_task3
文末会附上任务三实现效果图.源码以及学习资料 任务目标 掌握HTML/CSS布局的概念 掌握盒模型的概念 掌握position与float的概念以及在布局时的用法 任务描述 使用 HTML 与 CSS ...
- 【百度前端学院学习笔记】Day9 圣杯布局和双飞翼布局
[百度前端学院学习笔记]Day9 圣杯布局和双飞翼布局 圣杯布局(古老而费解的方法) 双飞翼布局(圣杯的改进) 参考资料: In search of the Holy Grail - A list a ...
- 【百度前端学院学习笔记】Day6 浮动/BFC
[百度前端学院学习笔记]Day6 浮动/BFC 一.什么是浮动? 二.普通流 / 浮动 / 绝对定位 三.BFC/Flow Root 3.1 什么是BFC? 3.2 BFC 的特性 3.2.1 特性一 ...
- 当当elastic-job docker快速部署_[小Z课堂]－docker 快速部署 elasticsearch 和 kibana，一键部署...
各位小伙伴,小Z课堂来袭,每天只需看三分钟,你就能用docker 快速部署各种环境.今天就用docker 来部署 elasticsearch 和 kibana.docker的入门请上度娘学习,这里直接 ...
- 百度前端学院小薇学院task7笔记
1.纯css拉菜单默认样式 <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
- 百度for android v5.0,小冰冰传奇百度版下载_小冰冰传奇安卓版下载v5.0.137_3DM手游...
<小冰冰传奇 百度版>游戏的前身为火爆的手游<刀塔传奇>,由于一些问题而不得不改名,并且对游戏内的大量角色和原型都做了一定的改动.该游戏继承了<刀塔传奇>的基本玩法 ...
最新文章
- 一文帮你梳理清楚：奇异值分解和矩阵分解 | 技术头条
- .NET项目开发的几个非常重要的项目设置
- 将C#编译为javascript
- Bugku 杂项（三）
- web.xml加载顺序
- Shell for循环
- [小技巧]你真的了解C#中的Math.Round么？
- LeetCode 565. 数组嵌套
- ie浏览器框架不显示_thinkphp框架下后台验证码不显示
- 仿真建模与仿真程序设计 Python
- 步进电机、伺服电机、舵机的区别与控制（角度、转速）
- 无线传输 android下载,无线文件传输 WiFi File Transfer
- 深度Deepin20 安装软件的依赖问题（sudo apt --fix-broken install）
- Solr评分整理汇总：深入理解Lucene默认打分算法以及常用的三种评分方法
- 新浪体育——篮球足球的直播和战报爬取
- 有趣的python小程序
- 左眼跳灾，右眼跳财？
- java jsp面积怎么算,JSP 课后作业：编写 Tag 文件计算矩形、圆形面积
- UE5 官方案例Lyra 全特性详解 7.资源管理
- shell 判断可执行文件