第二天 给自己做一个在线简历吧
第二天 给自己做一个在线简历吧
课程目标
清楚了解HTML是什么，，HTML5是什么。学习基本的HTML标签，理解HTML语义化概念
任务描述
- 用codepen作为开发工具
- 创建一个在线简历，下面给一些参考：
- 包括“简历”两个字
- 你的姓名
- 你的各种联系方式
- 你的学历
- 项目经验
- 可以参考羡辙的简历
阅读
读书笔记
- 内容的语义表达能力和AI的智能程度决定了极其分析处理Web内容能力的高低。
- 语义网：对未来网络的一个设想，就是能够根据语义进行判断的智能网络，实现人与电脑之间的无障碍沟通。
- HTML语义：元素 + 属性 + 属性值（+ 文档结构）
- 关于各标签的语义化slide
编码
初步想法是做一个list，上面可以填写自己的简历，内容包括：
- 标题：简历/前端开发
- 姓名：张三
- 电话：12345678912
- E-mail：aaa@qq.com
- 专业：软件工程
- 学历：本科
- 毕业学校：XX大学
- 个人技能：
- 了解模块化开发，良好的编码习惯
- 熟悉html、css、js，能独立开发简单页面
- 了解过bootstrap、vue、npm
- 会写sql语句
- 实习经历
- XX公司实习生 2017.07-2017.09
- 工作内容：负责了XX项目，使用了XX技术，解决了XX问题
- 实践项目：
- 项目一：用了什么技术，作出了什么东西
- 项目二：用了什么技术，拿了什么奖
- 项目三：用了什么技术，还有什么地方可以完善的
- 个人展示：
验证
- HTML是什么，HTML5是什么
HTML是超文本标记语言，HTML5是对HTML标准的第五次修订。主要目标是将互联网语义化，以便更好地被人类和机器阅读，并同时提供更好地支持各种媒体的嵌入。
- HTML元素标签、属性都是什么概念？
HTML网页是HTML元素构成的文本文件，HTML元素就是通过使用HTML标签进行定义的。为HTML元素提供各种附加信息的就是HTML属性，属性总是在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语义化是什么，是为了解决什么问题*
语义化，简单来说就是让机器可以读懂内容，其实在很多地方都有体现语义化的概念，就好比我们在给class起名字的时候，都会尽量按照语义化起名字，这样的主要目的是让代码的可读性更高，而web的语义化则是给标签赋予意义，让机器可以理解这段代码的意义是什么，而能更加智能的为人类提供服务。
- 链接是什么概念，对应什么标签
所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个Email地址，一个文件，甚至是一个应用程序。对应的标签是<a></a>
- 常用标签都有哪些，都适合用在什么场景
| 标签 | 场景 |
|---|---|
<h1>-<h6> |
标题 |
<p> |
段落 |
<a> |
超链接 |
<img> |
图片 |
<span> |
行内文本 |
<audio> |
声音 |
<table> |
表格 |
<video> |
视频 |
<canvas> |
画布 |
- 表单标签都有哪些，对应着什么功能，都有哪些属性
<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
- select：创建选项框
注意：同一组的单选按钮，name取值一定要一致，这样同一组的单选按钮才可以起到单选的作用。
- ol、ul、li、dl、dd、dt等这些标签都适合用在什么地方，举个例子
ol：用在有序列表
ul:用在无序列表
li：用在ol或者ul中，代表列表项
dl：定义了定义列表，结合dt（定义列表中的项目）和dd（描述列表中的项目）。
例子：
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
2018/5/5 3:32:00
推荐阅读