Day2前端学习之路——HTML基本知识

课程目标：

通过制作自己的简历，更加清楚地了解HTML是什么，HTML5是什么。学习基本的HTML标签，理解HTML语义化概念

任务一：回答问题

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

HTML是一种被广泛使用的用来创建网页的超文本标记语言。

HTML5是最新的HTML标准，拥有更丰富的语义、图形以及多媒体元素等内容。

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

HTML不是编程语言，是标记语言，所以要使用标记标签来描述网页

属性是用来提供HTML标签更多的信息。

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

在第一行我们总会有<!DOCTYPE>。这个<!DOCTYPE>就是用来声明该文档的类型的，只有这样浏览器才能知道你的文件类型，然后正确的显示网页。在互联网上有许多不同的文档，只有了解文档的类型，浏览器才能正确的显示文档。提前声明文档类型可以帮助浏览器正确的显示网页，

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

meta标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。

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

HTML的每个标签都有它特定的含义，web语义化是指使用语义恰当的标签，是页面具有良好的结构，页面元素有含义，能够让人和搜索引擎都容易理解。

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

<a>元素可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。

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

body:在网页上要展示出来的页面内容一定要放在body标签中
p:如果想在网页上显示文章，这时就需要p标签了，把文章的段落放到p标签中。标签的默认样式，段前段后都会有空白，如果不喜欢这个空白，可以用css样式来删除或改变它。
span:标签是没有语义的，它的作用就是为了设置单独的样式用的。
br:在需要加回车换行的地方加入br，br标签作用相当于word文档中的回车。在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行，就必须输入br。没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有br、hr和img。
div:在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个div标签中，这个div标签的作用就相当于一个容器。什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。用id属性来为div提供唯一的名称，必须唯一。
img:插入图片,img src=”图片地址” alt=”下载失败时的替换文本” title = “提示文本” src：标识图像的位置；alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；图像可以是GIF，PNG，JPEG格式的图像文件。

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

Tags	Description	Attributes	Link
`<form>`	定义表单	`action`, `autocomplete`, `method`, etc.	form
`<input>`	定义输入域	`autofocus`, `type`, `min`, etc.	input
`<textarea>`	定义textarea	`autofocus`, `cols`, `form`, `required`, etc.	textarea
`<label>`	定义表单控件的名称	`for`, `form`	label
`<fieldset>`	定义fieldset	`disabled`, `form` , `name`	fieldset
`<legend>`	为以下元素定义标题：`<fieldset>`、`<figure>`、`<details>`	支持html5的事件和全局属性	legend
`<select>`	标签创建下拉列表	`data`, `form` , `name`, 'multiple', etc.	select
`<optgroup>`	定义选项组	`lable`, `disabled`	optgroup
`<option>`	定义下拉列表中的选项	`lable`, `disabled`， `selected`, `value`	option
`<button>`	定义按钮	`name`, `disabled`， `autofocus`, etc.	button

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

1). <ul> 无序列表：适用于只是列举一系列东西，但是没有轻重缓急或者先后顺序之分之分。比如说：我在写简历时候列举我的技能时候就可以用无序列表
2). <ol>有序列表：适合于有先后顺序或者优先级的列表，比如说我列一下做意大利面的步骤，这个时候就有顺序而言了，需要用有序表阐述清楚步骤的先后顺序
3). <li> 定义列表项，<ul>和<ol>都是用它
4). <dl>, <dt>， <dd> 放在一起使用。<dl>用来定义定义列表，而<dt>是用来定义定义列表中的每一项， <dd> 则是定义定义的描述信息。

任务二：理解web语义化

参考问题五的回答

任务三：制作简历

https://codepen.io/cttv2/pen/gObvBrv?editors=1100#0