这篇学习资料详细介绍了HTML的基础元素，包括标题<h1>~<h6>、段落<p>、锚点<a>、有序列表<ol>、无序列表<ul>、图像<img>、内容分组<div>和行内元素<span>。学习者将通过这些内容掌握HTML基本语法，并能动手制作一份在线简历。重点强调了元素的语义使用、样式控制以及可访问性实践。
学习目标：
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;
}
扫一扫
435
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
