百度前端技术学院零基础学院 Day2

最新推荐文章于 2024-08-30 18:59:06 发布

原创最新推荐文章于 2024-08-30 18:59:06 发布 · 315 阅读

0 ·

CC 4.0 BY-SA版权

百度前端技术学院专栏收录该内容

4 篇文章

订阅专栏

第二天：给自己做一个在线简历吧

课程目标

第二天，我们希望你能够通过简单的实践，更加清楚地了解HTML是什么，HTML5是什么。学习基本的HTML标签，理解HTML语义化概念

任务描述

今天我们先暂时不用第一天让你安装的IDE，我们先暂时使用 codepen 作为我们的开发工具，打开 codepen，创建一个新的页面（Create->New Pen）。它有三个代码编写的窗口，分别是HTML，CSS，JS，下方是一个预览效果的窗口。我们今天只会涉及到 HTML 和 CSS。

然后我们在 HTML 窗口中开始输入一些内容吧，我们假设现在要为自己创建一个在线简历，那简历都包含什么呢？给一些参考：

包括“简历”两个字
你的姓名，有可能只有姓名，有可能是姓名：张三这样的模式
你的各种联系方式，比如：手机：18600000000，邮箱：joinefe@baidu.com
你的学历，比如：本科：百度前端学院
项目经验，比如：项目A：项目时间：2017.1-2017.8，项目描述：在项目A中负责了xxxxx

你可以参考自己的简历内容，也可以参考网上一些热门简历内容，比如羡辙的简历（她简历的样式每年校招简历总能看见很多人在复用，所以，希望大家以后做简历的时候换个样式吧，哪怕是换个颜色也是极好的）。

接下来，我们要把这些内容组装进一个HTML里面，这时候，你先不要考虑这个简历会长什么样，你重点要放在一个哲学问题上，就是简历里面的每个内容，它是什么。也许你还没太懂啥意思，所以，先看看下面几个内容。

阅读

首先阅读 W3School的HTML教学把HTML的各个标签再学习一遍，当然看 MDN 或者能力强的同学直接看 W3C 也是没问题的。

接下来，理解一下顾轶灵的如何理解 Web 语义化？，如果没有看太懂，可以再自行搜索一下“Web语义化”相关文章内容

在整个阅读过程中，你可以一边看，一边想想，你之前准备的简历的每个内容，应该用什么样的HTML元素、标签比较合适。

1. HTML是什么，HTML5是什么？

HTML是超文本标记语言，html5是html的最新标准。

2. HTML元素、标签、属性都是什么概念？

（1）元素：
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。HTML 文档是由 HTML 元素定义的。
元素的内容是开始标签与结束标签之间的内容，某些 HTML 元素具有空内容（empty content）。空元素在开始标签中进行关闭（以开始标签的结束而结束），大多数 HTML 元素可拥有属性。
（2）标签：
标签就是<head>、<body>、<table>等被尖括号“<”和“>”包起来的对象，绝大部分的标签都是成对出现的，如<table></talbe>、<form></form>。当然还有少部分不是成对出现的，如<br>、<hr>等。
标签就是用来标记HTML元素的。位于起始标签和结束标签之间的文本就是HTML元素的内容。
（3）属性：
为HTML元素提供各种附加信息的就是HTML属性，它总是以"属性名=属性值"这种名值对的形式出现，而且属性总是在HTML元素的开始标签中进行定义。

属性	值	描述
class	classname	规定元素的类名（classname）
id	id	规定元素的唯一 id
style	style_definition	规定元素的行内样式（inline style)
title	text	规定元素的额外信息（可在工具提示中显示）

3. 文档类型是什么概念，起什么作用？

文档类型即常见的 !DOCTYPE ,是用来声明并帮助浏览器正确识别网页。因为HTML发展至今有许多的不同版本，所以声明不同的文档类型可以让浏览器完全正确地显示出 HTML 页面。

4. meta标签都用来做什么的？

META标签是HTML语言HEAD区的一个辅助性标签，它位于HTML文档头部的<HEAD>标记和<TITLE>标记之间，它提供用户不可见的信息。meta标签通常用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于鉴别作者，设定页面格式，标注内容提要和关键字；还可以设置页面使其可以根据你定义的时间间隔刷新自己,以及设置RASC内容等级，等等。

5. Web语义化是什么，是为了解决什么问题？

简单说来就是让机器可以读懂内容。由编写者对网页内容进行语义化主要可以让不同的人和机器对这段内容的作用和所属有清晰的认识，从而查看或者找到自己需要的内容。

6. 链接是什么概念，对应什么标签？

HTML 使用超级链接与网络上的另一个文档相连。对应a标签。

7. 常用标签都有哪些，都适合用在什么场景？

标签	描述
<h1> to <h6>	定义 HTML 标题。
<p>	定义段落。
<hr>	定义水平线。
<!--...-->	定义注释。
<img>	定义图像。
<ul>	定义无序列表。
<ol>	定义有序列表。
<li>	定义列表的项目。
<div>	定义一个元素块。
<span>	组合文档中的行内元素。

8. 表单标签都有哪些，对应着什么功能，都有哪些属性？

标签	描述
<form>	为用户输入创建 HTML 表单。
<input>	根据不同的 type 属性值，输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
<textarea>	定义多行的文本输入控件。
<button>	定义按钮
<select>	定义选择列表中的选项。
<datalist>	定义下拉列表。