这是我参与「第四届青训营 」笔记创作活动的第1天
一、DOM树
(一)HTML5基本骨架
-
Doctype
Doctype是document type的缩写，处于标签之前，是网页必备的组成部分，没有这个部分可能会造成浏览器显示样式的不同。
-
html标签
定义HTML文档，限定文档的开始点和结束点。
-
head标签
定义文档的头部，包含了描述属性文档的属性和信息，例如title、在web中的位置等，内容多不显示出来。
-
body标签
定义文档主体，包含文档内容，例如文本、超链接、图像、表格和列表等，内容会直接呈现给用户。
-
title标签
定义文档标题，显示在浏览器窗口的状态栏或标题栏,是head标签中必须包含的。
-
meta标签
用来描述王网页文档属性、关键词等。
(二)HTML常用标签
-
标题标签
通过h1--h6定义，h1最大，h6最小。
-
段落标签
通过p标签定义。
-
文本标签
常见的标签：
| 标签 | 描述 |
|---|---|
| b | 粗体文本 |
| em | 着重文字 |
| i | 斜体字 |
| strong | 加重语气 |
| sub | 下标 |
| sup | 上标 |
| del | 删除字 |
4.列表标签
无序列ul-li；有序列表ol-li，都拥有tyoe属性。
5.表单标签
用于采集客户端信息，使网页具有交互功能。基本组成包括：表单标签、表单域、表单按钮。表单标签用form定义，是一个包含表单元素的区域；表单域用input标签定义，包括文本域(text)、单选框(radio)、复选框(checkbox)、下拉列表(select option)等；表单按钮用来提交表单中的信息。
二、语义化
什么是语义化？
- HTML中的元素、属性及属性值都拥有某些含义
- 开发者应该遵循语义来编写HTML
语义化优点
- HTML结构清晰
- 代码可读性好
- 代码可维护性好
- 搜索引擎可根据标签的语言确定上下文和权重
- 移动设备能更完美的展示页面
总结与思考
通过老师的讲解，更加系统的了解了HTML及标签的应用，发现自己对常用标签的掌握量过少，结合老师的讲解拓展了我对HTML的理解。此外，我不太习惯使用markdown文档，以前记笔记要么用笔头，要么整理截图，掘金笔记给我带来了新的体验感，之后我会在加强知识体系的同时，多练习使用markdown文档，不断学习充实自己。
