IFE 基础学院 第二天:给自己做一个在线简历

2018/08/29 FrontEnd

学习目标:通过简单的实践,更加清楚地了解 HTML 是什么,HTML5 是什么。学习基本的 HTML 标签,理解 HTML 语义化概念。

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

w3school HTML 知识点列表

日期,今天的学习总用时,今天学习的收获是什么

  • 2018.08.29
  • 零碎的几段时间,大概一小时吧
  • 大概了解了 Web 语义化的概念:尽量用合适的标签,少用无意义的(比如 div span),class id 名也要有意义,方便爬虫解析、开发人员阅读、残障人士辅助软件阅读
  • 作业地址:https://codepen.io/shixinzhang/pen/gdwBbP

验证问题

1.HTML是什么,HTML5是什么

HTML (Hyper Text Markup Language) 超文本标记语言,就是用标签标示内容,浏览器可以解析这些标签然后展示内容。

HTML5 是 HTML 的升级版,提供了很多方便的 API,减轻了开发者的开发量。

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

元素标签指的是不同类型的内容需要使用不同类型的标签进行修饰,那样浏览器才知道应该用合适的样式和资源进行展示。

属性指的是某种内容的具体状态值,比如大小、颜色、边框、链接地址等等。

<a href="http://www.w3school.com.cn">This is a link</a>

3.文档类型是什么概念,起什么作用?

文档类型 <!DOCTYPE> 帮助浏览器知道当前 HTML 代码是用的哪个版本写的,方便解析。

HTML 版本:

  • HTML 1991
  • HTML+ 1993
  • HTML 2.0 1995
  • HTML 3.2 1997
  • HTML 4.01 1999
  • XHTML 1.0 2000
  • HTML5 2012
  • XHTML5 2013

最常用的 HTML5 文档声明长这样:

<!DOCTYPE html>
<html>
<head>
<title>...</title>
</head>

<body>
......
</body>

</html>

HTML 4.01 的文档声明长这样:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

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

meta 标签主要用于提供页面的元信息,比如字符编码集,关键字(方便搜索引擎),HTTP 头部信息等。

meta 元素用于位于 head 内部。

meta 标签的属性可以是 name, http-equivscheme,如果使用了前两者,就需要配合使用 content 属性。

name:提供了一些名词,比如 author, description, keywords 等等;某些搜索引擎在遇到这些关键字时,会用这些关键字对文档进行分类。s

http-equiv 指示服务器向浏览器响应发送文档时,要将这些内容添加到 HTTP HEADER 中。当浏览器可以接受并且能使用时,这些字段才有意义。

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<meta charset="utf-8">
	<meta name="keywords" content="HTML,ASP,PHP,SQL">
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
	<meta http-equiv="Refresh" content="5;url=http://www.baidu.com">
</head>
<body>
	<ul>
		<li><font color="red">5秒后重定向到新地址</font> </li>
	</ul>
</body>
</html>

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

“语义化”是说语句可以让人和机器看懂。

Web 语义化是指编写的 Web 代码(HTML CSS JS)简洁易懂,容易被开发者和浏览器、爬虫所阅读、分析。

为了提示 SEO 效率、方便其他设备解析、便于团队开发和维护。

如何理解HTML语义化?

6.链接是什么概念,对应什么标签?

问的是链接还是超链接?应该是超链接的概念吧。跳转地址或者加载的图片地址。

对应 a 标签:

<html>
<body>
<p><a href="/index.html">本地链接</a> 是一个指向本网站中的一个页面的链接。</p>
<p><a href="http://www.baidu.com/">百度</a> 是一个指向万维网上的页面的链接。</p>
</body>
</html>

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

参考自:http://www.divcss5.com/html/h50219.shtml

  • 布局标签: div, aside, header, section, footer, article
  • 文本标签:h1-h6,p, b/strong(加粗), em(斜体), ``u``(下划线), ``s``(删除线), br, hr(水平线)<hr>, span(组合文档中的行内元素), <blockquote>blockquote(块引用)</blockquote>, <pre>pre(预格式化的文本,保持原有格式)</pre>, (下标)sub, (上标)sup
  • 超链接标签 (独苗):a 我的博客地址
  • 多媒体标签: img(图片), audio(音频), video(视频)
  • 列表标签:ul(无序), ol(有序), li(item), dl(配合 dt dd)
  • 表格标签:tabletr, tb 组合使用
  • 表单标签:form (定义提交方式、提交地点、字符集),input(搜集输入信息,类型可以是输入框,单选,多选,也可以是上传文件),button(提交,置灰按钮),select(下拉菜单列表,和 option组合使用)

</select>

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

form, input, button, select, option

9.ol, ul, li, dl, dd, dt 等这些标签都适合用在什么地方,举个例子

  • ol 有序列表,比如排序
  • ul 无序列表,比如同类数据列表,比如导航列表
  • li 列表的某个子项
标题
内容,有缩进

Search

    Table of Contents