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

学习目标:

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


学习内容:

1.

~

: HTML 部分标题元素

HTML元素

~

代表标题的六个部分级别。

是最高的部分级别,

是最低的。

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

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

  • 用户代理可以使用标题信息来自动构建文档的目录。
  • 避免使用标题元素来调整文本大小。而是使用CSS font-size属性。
  • 避免跳过标题级别:始终从 开始

    ,然后是

    等等。

  • 每个页面或视图只使用一个。它应该简明扼要地描述内容的总体目的。

  • HTML 规范允许使用多个

    ,但不被视为最佳实践。仅使用一个

    对屏幕阅读器用户有益。

2.

: HTML 段落元素

HTML

元素(或者说 HTML 段落元素)表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本,或以垂直的空白隔离或以首行缩进。另外,

是块级元素。
说明
使用CSS margin属性去改变段落之间的间隙,不要在段落之间插入空的段落元素或者
元素。

3. : HTML 锚元素

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


<a href="http://www.mozilla.com/">
External Link
a>

4.
    : HTML 有序列表元素

HTML

    元素表示有序列表,通常渲染为一个带编号的列表。
    属性

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

      使用说明
      通常,有序列表的条目会和它前面的编号标记一起显示,编号标记可以是数字或者字母。

          元素两者可以无限嵌套,既可以同类嵌套,也可以互相嵌套。
              元素都表示列表。区别在于,
                元素的有序列表的顺序是有意义的。

                <ol>
                  <li>first itemli>
                  <li>second item  
                    <ol>
                      <li>second item first subitemli>
                      <li>second item second subitemli>
                      <li>second item third subitemli>
                    ol>
                  li>            
                  <li>third itemli>
                ol>
                

                5.
                  : HTML 无序列表元素

                HTML

                  元素(或称 HTML 无序列表元素)表示一个内可含多个元素的无序列表或项目符号列表。
                  允许的内容
                  零个或更多个
                • 元素,可以混合使用
                      元素。
                      使用说明

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

                                6. : 图像嵌入元素

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

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

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

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

                                使用 CSS 为附加样式
                                是一个可替换元素。它的 display 属性的默认值是 inline,但是它的默认分辨率是由被嵌入的图片的原始宽高来确定的,使得它就像 inline-block 一样。你可以为设置 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.
                                : 内容划分元素

                                HTML

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

                                8.

                                HTML元素是短语内容的通用行内容器,并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图(通过使用class或者 id 属性),或者这些元素有着共同的属性,比如lang。应该在没有其他合适的语义元素时才使用它。

                                元素很相似,但
                                是一个 块元素 而则是行内元素。


                                学习产出:

                                效果示例图

                                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 DEVELOPERh1>
                                            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-2015p>
                                                <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-2015p>
                                                <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-2015p>
                                                <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-2012p>
                                                <p>***********p>
                                            div>
                                            <div class="detail">
                                                <p style="color: darkgray;">2012-2016p>
                                                <p>********p>
                                            div>
                                            <div class="detail">
                                                <p style="color: darkgray;">2016-2020p>
                                                <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 Technologyp>
                                                <p>HTML / CSS / SASS / PHP / Javascriptp>
                                            div>
                                            <div class="detail">
                                                <p style="color: darkgray;">Databasep>
                                                <p>MySQL / MongoDB / Oracle / ACCESSp>
                                            div>
                                            <div class="detail">
                                                <p style="color: darkgray;">Frameworkp>
                                                <p>Laravel / Codelgniter / Zend/Ruby On Railsp>
                                            div>
                                        div>
                                    a>
                                    <a name="C5" class="awardInfo">
                                        <div class="info">
                                            <h1 style="margin-bottom: 20px;">奖项&证书h1>
                                            <div class="detail">
                                                <p>January 2014p>
                                                <p style="font-weight: bold">***********p>
                                            div>
                                            <div class="detail">
                                                <p>December 2014p>
                                                <p style="font-weight: bold">********p>
                                            div>
                                            <div class="detail">
                                                <p>March 2014p>
                                                <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,前端,css,html5)