​一 心得体会

今天的任务是利用HTML制作一份在线简历，先不考虑样式，只从结构和语义化方面着手。对于已经有了前端b编程经验的我来说挺简单的，但是我还是当作我是一个刚入门的菜鸟，在学习过程中发现其实还有很多基础知识被我忽略了，例如meta的强大功能，HTML5表单新增的输入类型，列表标签dl、dt、dd等，这提醒这我不要眼高手低，要潜心学习，稳固基础。

二 相关知识点

问题1 HTML是什么，HTML5是什么？

1. HTML是一个超文本标记语言(Hyper Text Markup Language)，其有一套标记标签，使用这些标记标签来描述网页。
2. HTML5是最新的HTML标准，新增了一些元素，API，同时也删除了部分旧元素，具体可以看相关文档。相较于 HTML4来说，HTML5最大的改进就是新增了强大的图像支持(和 )，多媒体支持(

问题2 HTML文档是什么？

HTML文档其实就是我们看到的网页，其包含HTML标签和纯文本。

问题3 HTML元素、标签、属性都是什么概念？

1. HTML标签是由尖括号包围的关键词，表示其在HTML文档中的含义。元素标签通常成对出现()；成对出现的标签第一个为开始标签(或开放标签)，第二个为结束标签(或闭合标签)，结束标签多了一个/。
2. HTML元素是指从开始标签到结束标签的所有代码(

   包含标签和此文本

   )。注意：如果元素内没有文本，可以直接在开始标签进行关闭(

3. HTML属性相当于HTML元素的修饰符，为该元素提供相应的特性。属性通常以键值对的形式出现(name="value")，并且都是出现在开始标签中。

问题4 文档类型是什么概念，起什么作用？

HTML经历过多个版本的更新，每个版本中元素不尽相同，那么我们如何才能使计算机准确知道当前的版本并正确显示HTML页面呢？为了解决这个问题，引进了文档类型的概念。在HTML文档首行使用来声明该HTML文档的版本，如果版本为HTML5，那么声明代码为；如果为HTML4，那么声明代码为目前创建新网页都尽量使用HTML5的文档类型，维护旧网页可以沿用旧网页的文档类型。

问题5 meta标签都用来做什么的？

meta标签位于HTML头部，携带元信息，不显示在页面上，对于计算机是可读的。其主要作用有以下几点：

1. 声明当前文档所使用的字符编码

1. 注意：鼓励使用UTF-8字符编码，不使用不兼容ASCII的编码规范，必须禁用CESU-8, UTF-7, BOCU-1或 SCSU这些字符，因为其被证实存在跨站脚本攻击(XSS)的风险。
2. 携带相关信息关联到HTTP头部
3. 此处需要用到http-equiv和content属性

注：http-equiv的属性值content-language, content-type, set-cookie已经弃用，请查看最新文档使用替代方案

示意代码如下：

< Meta HTTP-EQUIV="refresh" content="6; url=地址" >

1. 使用name属性携带相关信息

示意代码如下：

< Meta name="author" content="前端唠唠嗑" >< Meta name="keyword" content="关键字" >< Meta name="descript" content="描述内容" >

问题6 Web语义化是什么，是为了解决什么问题

我理解的语义化有两方面：1. 便于计算机识别HTML内容，降低其处理难度，提高效率，与此同时还能搜索程序更好更快的搜索到此文档；2. 便于程序员理解代码以及后期维护——结构良好，语义明确的代码利于阅读和维护。

问题7 链接是什么概念，对应什么标签？

超链接的含义是一个点击跳转相应文档的字，词或者图像。对应的为标签。其使用方式如下。

1. 通过href属性跳转到另一个HTML文档

跳转到相应的地址

1. 跳转文档内的锚点(书签)

设定的锚点跳转锚点

1. 注意：创建锚点时可以用id来替代name属性，也可以用其他元素标签替代a标签。
2. 跳转另一个文档的锚点

另一个文档的锚点

问题8 常用标签都有哪些，都适合用在什么场景？

1. 块级元素：
   ——外框,

   ——段落,

   ——标题,

   • ——列表,
2. 行内元素：——提示性文字,——链接, ——加粗, ——图像,——表格单元

   问题9 表单标签都有哪些，对应着什么功能，都有哪些属性？

   表单一般包裹在

   标签下，主要用于用户输入，获取用户输入的信息并传输给服务器。其输入类型有以下几种：

   1. 文本
   • 单行文本输入
   • 多行文本输入

   2.密码(输入的字符会做掩码处理)

   1. 单选

   MaleFemale

   1. 注：当input的type为radio时，该输入框为单选框，若单选框的name值相同，那么他们是同一组选项，不能同时选取到。
   2. 多选

   I have a bikeI have a car

   1. 注：当input的type为checkbox时，该输入框为单选框，若单选框的name值相同，那么他们是同一组选项，可以同时选取到。
   2. 按钮
   1. 注：点击可以执行相关操作
   2. submit
   1. 此输入类型用于提交表单到服务器
   2. HTML5新增输入类型()
   • color
   • date
   • datetime
   • datetime-local
   • email
   • month
   • number
   • range
   • search
   • tel
   • time
   • url
   • week

   注释：老式 web 浏览器不支持的输入类型，会被视为输入类型 text。

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

   

   ol搭配li构建有序列表，ul搭配li构建无序列表，dl，dd，dt不常用，看了一下介绍dl类似于ol和ul，属于最外层标签；dd类似于li，表示项目内容；而dt类似于序号，只不过内容可以自定义。由以上可以看出dl，dd，dt挺适合做菜单类列表，dt表示菜名，dd表示相应菜品的介绍。

   ​