前端与 HTML

HTML是什么？

HyperText 超文本 Markup Language 标记语言

超文本： 不是简单地纯文字的东西，它可以包含图片、标题、链接、表格这些更丰富的一些格式

标记语言：用来表示这些不同的格式。 用一个开始标签和一个结束标签，这种成对出现的标签来表示一段内容的格式 <h1>文章标题</h1>

HTML语法

• 标签和属性不区分大小写，推荐小写

  ​ 自定义组件用大写表示、原生标签用小写表示

• 空标签可以不闭合，比如 input、meta

  ​ 这些标签里面不会再嵌套其他内容，可以不写结束标签，在开始标签最后写一个/，例如：<img sre="photo.jpg" />

• 属性值推荐用双引号包裹

• 某些属性值可以省略，比如 required、readonly

一些HTML标签

1. 定义列表

HTML <dl> 元素 （或 HTML 描述列表元素）是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键 - 值对列表)。

<dl>
    <dt>key:</dt>
    <dd>value</dd>
    <dt>key:</dt>
    <dd>value</dd>
</dl>

2. audio、video标签的controls属性

<audio
    src="/assets/music.ogg"
    controls
></audio>

controls 是否显示控制面板

如果声明了该属性，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。

3. label与input

   将一个 <label> 和一个<input>元素相关联可以扩大元素的可点击区域

• 关联标签的表单控件称为这个标签的已关联标签的控件。一个 input 可以与多个标签相关联。
• 点击或者轻触（tap）与表单控件相关联的 <label> 也可以触发关联控件的 click 事件。

4. input标签类型

输入（表单输入）元素 - HTML（超文本标记语言） | MDN (mozilla.org)

5. pre 标签

<pre>元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。(紧跟着 <pre> 开始标签后的换行符也会被省略)

语义化是什么？

• HTML中的元素、属性及属性值都拥有某些含义
• 开发者应该遵循语义来编写HTML

语义化的好处

• 代码可读性
• 可维护性
• 搜索引擎优化
• 提升无障碍性

如何做到语义化？

• 了解每个标签和属性的含义
• 思考什么标签最适合描述这个内容
• 不使用可视化工具生成代码