百度前端技术学院--零基础--第二天给自己做一个在线简历吧

最新推荐文章于 2022-04-16 19:20:26 发布

鹿啦鹿啦

最新推荐文章于 2022-04-16 19:20:26 发布

阅读量491

点赞数

文章标签： html

本文链接：https://blog.csdn.net/m0_45317318/article/details/107088772

版权

百度前端技术学院–零基础–第二天给自己做一个在线简历吧

课程目标
通过简单的实践，更加清楚地了解HTML是什么，HTML5是什么。学习基本的HTML标签，理解HTML语义化概念
任务描述

用codepen作为开发工具
创建一个在线简历，下面给一些参考：
包括“简历”两个字
你的姓名，有可能只有姓名，有可能是姓名：张三这样的模式
你的各种联系方式，比如：手机：18600000000，邮箱：joinefe@baidu.com
你的学历，比如：本科：百度前端学院
项目经验，比如：项目A：项目时间：2017.1-2017.8，项目描述：在项目A中负责了xxxxx
可以参考羡辙的简历

阅读

编码
我的简历内容如下：(采用无序列表标记)

标题：简历
姓名：啦啦
电话：123456789
E-mail：123@qq.com
专业：软件工程
学历：本科
毕业学校：XX大学
项目经验：
A项目：xxxx
B项目：xxxxx

实现代码如下：

 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>啦啦的简历</title>
  </head>
  <body>
    <h2>简历</h2>
    <ul>
      <li> 姓名：啦啦</li>
      <li>电话：123456789</li>
      <li>E-mail：123@qq.com</li>
      <li> 专业：软件工程</li>
      <li> 学历：本科</li>
      <li> 毕业学校：XX大学</li>
      <li>项目经验：
        <ul>
          <li>A项目：xxxx</li>
          <li>B项目：xxxx</li>
          </ul>
          </li>
          </ul>
          </body> 
          </html>

验证

HTML是什么，HTML5是什么
HTML 指的是超文本标记语言，它不是一种编程语言，而是一种标记语言。
HTML5 是最新的 HTML 标准，它是专门为承载丰富的 web 内容而设计的，并且无需额外插件
HTML元素标签、属性都是什么概念？
HTML 标签可以拥有属性。
属性总是以名称/值对的形式出现，比如：name=“value”。
属性提供了有关 HTML 元素的更多的信息。
例如：<h1 id="header">hello world</h1>，其中<h1></h1>就是标签，id就是属性，header就是属性值。
文档类型是什么概念，起什么作用？
doctype（文档类型），用来说明web设计中所用的html或xhtml的类型，指出浏览器或者其他阅读程序按照什么样的规则（W3C所发布的一个文档类型定义即DTD）集去解释文档中的标记。doctype使浏览器按照DTD指定的渲染方式对页面进行渲染。
meta标签都用来做什么的？
元数据（medata）是关于数据的信息。<meta>标签提供关于HTML文档的元数据。它不会显示在页面上，但是对于机器是可读的。可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他web服务。
Web语义化是什么，是为了解决什么问题
其实简单说来就是让机器可以读懂内容。
让机器的理解能力越来越接近人类，人能看懂、听懂的东西，机器也能理解。
链接是什么概念，对应什么标签？
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
我们通过使用 <a> 标签在 HTML 中创建链接。
有两种使用 <a> 标签的方式：
通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签
常用标签都有哪些，都适合用在什么场景

<h1>...</h1> 标题字大小（h1~h6）

<b>...</b> 粗体字

<strong>...</strong> 粗体字(强调)

<i>...</i> 斜体字

<em>...</em> 斜体字(强调)

<center>…</center> 居中文本

<ul>…</ul> 无序列表

<ol>…</ol> 有序列表

<li>…</li> 列表项目

<a href=”…”>…</a> 超链接

<font> 定义文本字体尺寸、颜色、大小

<sub> 下标

<sup> 上标

<br> 换行

<p> 段落
表单标签都有哪些，对应着什么功能，都有哪些属性
<form>标签用于为用户输入创建HTML表单。表单用于向服务器传输数据。form元素为块级元素，其前后会产生折行。

包含的属性：

action：定义表单被提交时发生的动作，提交给服务器处理程序的地址
method：定义表单提交数据时的方式（get/post/put/delete……）。
enctype：编码类型，即表单数据进行编码的方式，允许表单将什么样的数据提交给服务器
name：表单的名称

表单控件：

input
- type：文本框(text)、密码框(password)、复选框(checkbox)、单选按钮(radio)、按钮（submit、reset、button）等
- value：控件的值即要提交给服务器的数据
- name：控件的名称，服务器要用
- disabled：该属性只要出现在标签中，表示的是禁用该控件，不能提交给服务器
- readonly：只能看，不能改，但是可以被提交给服务器
textarea 多行文本域
- name
- readonly：只读
- cols：列数，相当于宽度
- rows：行数，相当于高度
select和option选项框
- select：创建选项框
- name
- size：取值大于1的话，则为滚动列表，否则就是下拉选项框
- multiple
option
- value
- selected
ol, ul, li, dl, dd, dt等这些标签都适合用在什么地方，举个例子

ol：用在有序列表

ul:用在无序列表

li：用在ol或者ul中，代表列表项

dl：定义了定义列表，结合dt（定义列表中的项目）和dd（描述列表中的项目）。

例子：

<dl>
   <dt>计算机</dt>
   <dd>用于大型运算的机器 ... ...</dd>
   <dd>可以进行网上冲浪</dd>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

```
学习目标
这是第二天的学习，继续坚持噢~相信你

鹿啦鹿啦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度前端技术学院--零基础--第二天给自己做一个在线简历吧

第二天给自己做一个在线简历吧课程目标通过简单的实践，更加清楚地了解HTML是什么，HTML5是什么。学习基本的HTML标签，理解HTML语义化概念任务描述用codepen作为开发工具创建一个在线简历，下面给一些参考：包括“简历”两个字你的姓名，有可能只有姓名，有可能是姓名：张三这样的模式你的各种联系方式，比如：手机：18600000000，邮箱：joinefe@baidu.com你的学历，比如：本科：百度前端学院项目经验，比如：项目A：项目时间：2017.1-2017.8
复制链接

扫一扫