语法

概述

1、标签和属性不区分大小写，推荐使用小写，因为许多react，vue的框架使用大写 2、空标签可以不闭合，如input，meta 3、属性值用双引号包裹 4、一些属性值可以省略，如required，readonly

dom树

从document出发到HTML，分支为head与body。head都包括meta与title，在网页标签出现。body有h1标签与p标签，为网页展示正文。而dom树则为浏览器生成的表示其逻辑关系的一大工具。

标题

标题分为h1到h6，六级标题，其大小不同：eg：< h1>aaa< /h1>

列表

• ol有序列表：li作为内容标签
• ul无序列表：li作为内容标签
• dl自定义列表：以dt作为标题标签，以dd作为内容标签

链接

以a作为主标签，用href=“连接”引用网址，用target="_blank"作为新窗口打开标志，中间有链接名称

超文本

• 图片：img src=“ ”（图片）alt=“”（无法加载时的预备）width=“”（图片宽度）
• 音频：audio src=“”controls（控件）
• 视频：video src=“”controls（控件）

输入

• 有占位符：placehoder=“”
• 变化条类：type=“range”
• 范围：type=“number” min=“1” max=“10”
• 日期框：type=“date”min=“2023-07-27”
• 文本区域：textarea
• input选择：checkbox：多选 radio：单选：需要附加name来达到互斥效果
• select：下拉选择，以option定义选项
• input list = “”：有下拉选择的输入框：需要datalist id=“”，以option作为选项，可以快捷填充

引用

• 引用文本块：blockquote cite = “”
• 引用书籍等cite 书名 /cite
• q引用前文内容
• code引用代码
• strong用于强调
• em用于突出语调

语义化

有含义的元素、属性及属性值，便于使用

好处

• 可读性
• 可维护性
• 搜索引擎优化：便于区分优先级

如何做到

• 了解标签及属性含义
• 编写时考虑标签含义
• 不使用可视化工具生成代码