这是我参与「第五届青训营 」伴学笔记创作活动的第1天
01What-HTML
超文本标记语言（HyperText Markup language）
组成：
- < !doctype html>
-
- 告知浏览器解析器解析规范
- 指定HTML5
- 正确显示-标准模式（stands），否则以兼容模式呈现
- < html>< /html>根标签
- < head>< /head>存放源数据，这里需要补充一下具体内容，也是面试题常问的：
-
- 定义文档字符编码
- 面向搜索引擎的关键字
- 页面描述
- CSS样式
- 其中，meta标签可以做到前三点：
-
-
- 定义文档字符编码
- 面向搜索引擎的关键字
- 页面描述
-
- < body>< /body>主体
语法
- 标签和属性不区分大小写，原生标签小写，框架中的组件大写
- 空标签可以不闭合
-
- input
- meta
- 属性值推荐双引号包裹
- 为true的属性值可省略
-
- required
- readonly
02HTML常见标签
定义列表
除了常见的ol(有序列表)、ul(无序列表)，还有一类列表是k-v的形式，即dl(定义列表)，如以下例子：
- dt表示key，即列表某个属性名的title；dd表示列表的description，即某个列表对应的属性值。
- dt和dd是多对多的关系
链接
- target默认为在当前页面跳转，但可能有些页面不支持iframe嵌套
- target="_blank"可以设置为在新的空白页打开
多媒体
- img
-
- alt属性：未显示时的文字代替选项
- audio
- video
输入
input
- placeholder：占位符
- HTML5新增type特性
-
- range：滑块范围条
- number：输入数字范围，min和max
- date：输入日期，带有calender控件，还能设置min
textarea
多行文字输入，注意它并不是input的一种，而是一种独立标签
选择
input
- 选择类型的input
-
- checkbox
-
-
- 多选
-
-
- radio
-
-
- 单选，互斥
-
-
- datalist-提示型输入
-
-
- 仍然可以自由输入，本质是input
-
select
- 下拉选择标签
- 选项为option标签
引用类标签
- 块级引用blockquote
-
- cite属性表示来源
- 整段内容的引用
- 短引用cite
-
- 一般为作品名字或章节
- 短引用q
-
- 作品具体内容
- 代码引用code
-
- 短代码直接用code
- 多行代码pre嵌套code
03HTML语义化
语义化是什么
- HTML元素、属性和属性值都拥有某些含义
- case
-
- 有序列表ol；无序列表ul
- lang表示语言
语义化的意义
- 开发者：利于维护
- 浏览器：展示页面，例如lang
- 搜索引擎SEO：提取关键词、排序
- 无障碍：
内容结构划分
表示强调的标签
- strong含义重要
- em语气重读
怎么做到语义化
- 了解每个标签和属性含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
