学习目标：

1.学习掌握HTML基础知识
2.完成在线简历的制作

学习内容：

1. <h1>~<h6>: HTML 部分标题元素

HTML元素<h1>~<h6>代表标题的六个部分级别。<h1>是最高的部分级别，<h6>是最低的。

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

这些元素只包括全局属性。
使用说明

用户代理可以使用标题信息来自动构建文档的目录。
避免使用标题元素来调整文本大小。而是使用CSS font-size属性。
避免跳过标题级别：始终从开始<h1>，然后是<h2>等等。
<h1>每个页面或视图只使用一个。它应该简明扼要地描述内容的总体目的。
HTML 规范允许使用多个<h1>，但不被视为最佳实践。仅使用一个<h1>对屏幕阅读器用户有益。

2. <p>: HTML 段落元素

HTML <p>元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，<p> 是块级元素。
说明
使用CSS margin属性去改变段落之间的间隙，不要在段落之间插入空的段落元素或者<br>元素。

3. <a>: HTML 锚元素

HTML<a>元素（或称锚元素）可以通过它的 href 属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。<a>中的内容应该指明链接的意图。如果存在 href 属性，当<a>元素聚焦时按下回车键就会激活它。

<!-- anchor linking to external file -->
<a href="http://www.mozilla.com/">
External Link
</a>

4. <ol>: HTML 有序列表元素

HTML<ol>元素表示有序列表，通常渲染为一个带编号的列表。
属性

reversed: 此布尔值属性指定列表中的条目是否是倒序排列的，即编号是否应从高到低反向标注。
start: 一个整数值属性，指定了列表编号的起始值。
type: 设置编号的类型；编号类型适用于整个列表，除非在<ol>元素的 <li>元素中使用不同的 type 属性。

使用说明
通常，有序列表的条目会和它前面的编号标记一起显示，编号标记可以是数字或者字母。
<ol>和<ul>元素两者可以无限嵌套，既可以同类嵌套，也可以互相嵌套。
<ol>和<ul>元素都表示列表。区别在于，<ol>元素的有序列表的顺序是有意义的。

<ol><li>first item</li><li>second item  <!-- closing </li> tag not here! --><ol><li>second item first subitem</li><li>second item second subitem</li><li>second item third subitem</li></ol></li>            <!-- Here's the closing </li> tag --><li>third item</li>
</ol>

5. <ul>: HTML 无序列表元素

HTML<ul>元素（或称 HTML 无序列表元素）表示一个内可含多个元素的无序列表或项目符号列表。
允许的内容
零个或更多个 <li>元素，可以混合使用<ol>与<ul>元素。
使用说明

<ul>元素用来将没有数字顺序的一组数据进行分组，并且它们的数字顺序是没有意义的。举个例子，无序列表的列表项通常通过一个字符进行装饰，这些字符的形式可以是点，圆乃至方形．虽然这个字符没有直接在页面上定义，但是可以用与之相关的 CSS 对其进行操作，例如使用 list-style-type 属性。
在<ol>和<ul>元素中，嵌套列表没有深度和嵌套顺序的限制。
<ol>和 <ul>元素二者都代表一组数据，不过它们彼此是有区别的，ol 元素中的顺序是有意义的。如果想确定你到底需要使用哪一个列表元素，你可以试着去改变数据的顺序。如果想表达的语义改变了，你就需要使用 ol 元素，否则你该使用 ul 元素。

<ul><li>first item</li><li>second item      <!-- Look, the closing </li> tag is not placed here! --><ol><li>second item first subitem</li><li>second item second subitem</li><li>second item third subitem</li></ol></li>                <!-- Here is the closing </li> tag --><li>third item</li>
</ul>

6. <img>: 图像嵌入元素

HTML<img>元素将一份图像嵌入文档。
元素用法

src 属性是必须的，它包含了你想嵌入的图片的文件路径。
alt 属性包含一条对图像的文本描述，这不是强制性的，但对可访问性而言，它难以置信地有用——屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义。如果由于某种原因无法加载图像，普通浏览器也会在页面上显示alt 属性中的备用文本：例如，网络错误、内容被屏蔽或链接过期时。

还有很多其他属性，可以实现各种不同的目的：

Referrer/CORS 控制，保证安全与隐私：详见 crossorigin 属性和 referrerpolicy 属性。
使用 width、height 和 intrinsicsize 设置原始分辨率 (en-US)：这将设置图像应占用的空间，以确保图像被加载之前页面的布局是稳定的。
使用 sizes 和 srcset 设置响应式图像（亦可参考<picture>元素和我们的响应式图像教程）。

使用 CSS 为<img>附加样式
<img>是一个可替换元素。它的 display 属性的默认值是 inline，但是它的默认分辨率是由被嵌入的图片的原始宽高来确定的，使得它就像 inline-block 一样。你可以为<img>设置 border/border-radius、padding/margin、width、height 等等的 CSS 属性。

<a href="https://developer.mozilla.org"><img src="favicon144.png"alt="Visit the MDN site">
</a>

7. <div>: 内容划分元素

HTML<div>元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响。
作为一个 “纯粹的” 容器，<div>元素在语义上不表示任何特定类型的内容。然而，其可以将内容分组，从而可以使用class或是id属性方便的定义内容的格式，也可以在一段文档中划分标记出使用另一种语言书写的内容（使用lang 属性）等等。

8. <span>

HTML<span>元素是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用class或者 id 属性），或者这些元素有着共同的属性，比如lang。应该在没有其他合适的语义元素时才使用它。<span>与<div>元素很相似，但<div>是一个块元素而<span>则是行内元素。

学习产出：

效果示例图

<!DOCTYPE html>
<html>
<head><title>个人简历</title><meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="resume.css">
</head><body><div class="menu"><div class="menuList"><a href="#C1">基本信息</a><a href="#C2">工作经历</a><a href="#C3">教育经历</a><a href="#C4">语言技能</a><a href="#C5">奖项&证书</a></div></div><a name="C1" class="personalInfo"><div class="info"><p>Hi,I'm *** from China.</p><div class="box"><img src="head.png" alt="头像" style="width: 90px; height: 90px; border-radius: 50%;"><h1>WEB DEVELOPER</h1></div><p style="word-break:break-all;">**************************************************************************************************</p></div></a><a name="C2" class="workInfo"><div class="info"><h1 style="margin-bottom: 20px;">工作经历</h1><div class="detail" style="height: 60px;"><p style="color: darkgray;">2014-2015</p><p style="border-bottom:1px solid darkgray;width: auto; display: inline-block;">*** ******</p><p style="color: darkgray;">Web Designer(您的职位)</p></div><div class="detail" style="height: 60px;"><p style="color: darkgray;">2014-2015</p><p style="border-bottom:1px solid darkgray;width: auto; display: inline-block;">****</p><p style="color: darkgray;">UI/UX Designer(您的职位)</p></div><div class="detail" style="height: 60px;"><p style="color: darkgray;">2014-2015</p><div><p style="border-bottom:1px solid darkgray;width: auto; display: inline-block;">****** ******</p></div><p style="color: darkgray;">System Designer(您的职位)</p></div></div></a><a name="C3" class="educationInfo"><div class="info"><h1 style="margin-bottom: 20px;">教育经历</h1><div class="detail"><p style="color: darkgray;">2008-2012</p><p>***********</p></div><div class="detail"><p style="color: darkgray;">2012-2016</p><p>********</p></div><div class="detail"><p style="color: darkgray;">2016-2020</p><p>**********</p></div></div></a><a name="C4" class="skillInfo"><div class="info"><h1 style="margin-bottom: 20px;">语言技能</h1><div class="detail"><p style="color: darkgray;">Web Technology</p><p>HTML / CSS / SASS / PHP / Javascript</p></div><div class="detail"><p style="color: darkgray;">Database</p><p>MySQL / MongoDB / Oracle / ACCESS</p></div><div class="detail"><p style="color: darkgray;">Framework</p><p>Laravel / Codelgniter / Zend/Ruby On Rails</p></div></div></a><a name="C5" class="awardInfo"><div class="info"><h1 style="margin-bottom: 20px;">奖项&证书</h1><div class="detail"><p>January 2014</p><p style="font-weight: bold">***********</p></div><div class="detail"><p>December 2014</p><p style="font-weight: bold">********</p></div><div class="detail"><p>March 2014</p><p style="font-weight: bold">**********</p></div></div></a>
</body>
</html>

*{padding: 0;margin: 0;
}
body{width: 100% !important;
}
.menu{height: 50px;background-color: #eee;display: flex;align-items: center;padding-left: 400px;
}
.menuList{display: flex;flex-direction: row;
}
.menuList a{margin-right: 20px;text-decoration: none;color: rgb(190, 189, 189);
}
.menuList a:visited{color: rgb(139, 139, 139);
}.personalInfo , .educationInfo , .awardInfo{height: 400px;background-color: #fff;padding-left: 400px;display: flex;align-items: center;
}
.workInfo , .skillInfo{height: 400px;background-color: #eee;padding-left: 400px;display: flex;align-items: center;
}
.info{width: 400px !important;
}
.box{width: 400px !important;display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-top: 20px;margin-bottom: 20px;
}
.detail{margin-bottom: 30px;
}
.detail p{margin:0px;
}

HTML练习--做一个在线简历相关推荐

百度前端技术学院--零基础--第二天给自己做一个在线简历吧
百度前端技术学院–零基础–第二天给自己做一个在线简历吧课程目标通过简单的实践,更加清楚地了解HTML是什么,HTML5是什么.学习基本的HTML标签,理解HTML语义化概念任务描述用code ...
html做空白简历,第二天：给自己做一个在线简历吧-IFE
第二天:给自己做一个在线简历吧日期总用时学习目标 2018.07.31 4h 了解HTML 学习目标 HTML5是什么.学习基本的HTML标签,理解HTML语义化概念制作简历学习内容学习笔 ...
php 考试系统倒计时,jQuery_jQuery练习——倒计时，近学生做一个在线考试系统， - phpStudy...
jQuery练习--倒计时近学生做一个在线考试系统,需要加入试卷倒计时功能.很显然最放方便的就是ajax实现.一下子想起上次提到的jQuery,一用果然简单.jQuery中提供了ajax的方便功能. ...
试着模仿LeetCode做一个在线OJ系统（超级阉割版）（附项目测试）
文章目录引言--痛苦的刷题 1.简单的需求 2.读写文件模块 (1)读文件readFile() 输入:文件路径返回值:String (2)写文件writeFile() 输入:文件路径,文件 3.创 ...
如何做一个在线转码小说的爬虫网站
前言作为一个有6年书龄的程序员,不搞一波爬虫来看小说真是对不起自己. 所以,我就又开始了愉快的搞事情之旅. 不过接下来我要做的是在线转码,也就是说不用保存数据库,这样就不用考虑数据库了,23333. ...
百度音乐接口-——可以根据这做一个在线音乐播放器哦
当你在百度去搜索一首歌时,你会发现有种更简单的方法,嘿嘿,安宁ヤ太天真告诉你个秘密, 百度有个不公开的API http://box.zhangmen.baidu.com/x?op=12&cou ...
HTML+CSS做一个个人简历
代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> & ...
java随机抽题系统_在用java做一个在线考试系统，随机抽题遇到了问题，我写了一个随机抽题的方法，不知道在asp按钮中怎么用...
你们看看方法对不对?publicListsuiji(intshitiId,inttimuId,inttimunanyidu,StringtimuLeixing){Stringsql="fro ...
用原生js制作一个动态简历(多动症简历)及在线预览部署过程
本文章同步更新于我的HEXO博客: 我的HEXO博客本项目Fork地址(欢迎Star): https://github.com/ZQ-jhon/resume 本项目预览地址(Preview Addr ...

HTML练习--做一个在线简历