【第二届字节青训营 - 寒假前端场】 前端与HTML学习笔记

前端与HTML

HTML全称是：HyperText Markup Language。
HyperText包含图片、标题、链接、表格等等。

HTML语法注意点：

• 标签和属性不区分大小写，推荐小写
• 空标签可以不闭合，比如input、meta
• 属性值推荐用双引号包裹
• 某些属性值可以省略，比如 required、readonly

常用标签：

标题标签

<h1>~<h6>

列表标签

类型	标签
有序列表	<ol></ol>
无序列表	<ul></ul>
定义列表	<dl></dl>

定义列表：类似键值对的形式。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。一个<dt>可以对应多个<dd>。

链接标签

<a href="" target="_blank"></a>如果加target="_blank"，那么就是在新弹出的窗口中打开。否则就是在原窗口打开。

媒体标签

类型	标签	注意点
图片	<img src="" alt="" width=""></img>	alt（alternative text）:为了在特殊情况，比如省流量状态下或者网络环境差的时候，通过文字形式显示图片内容。
媒体	<video src="" controls></video>	controls 规定浏览器应该为视频提供播放控件。
音频	<audio src="" controls></audio>	controls 规定浏览器应该为音频提供播放控件。

输入标签

<input placeholder=""> placeholder：提供输入字段的提示信息

<textarea>Hey</textarea> ：实现多行输入

<input type="range">: 显示滑动条

<input type="number">：输入数字，可通过min="" max=""设置范围

<input type="date">：输入日期，可通过min="" max=""设置范围

<input type="checkbox"> :设置多选框

<input type="radio">: 设置单项框

<select> ：创建下拉列表。<option>：定义列表中的可用选项。

<input list="">:引用数据列表,<datalist id=""></datalist>中包含输入字段的预定义选项。

<blockquote>:用于块级引用。通过cite说明引用来源。

语义化

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

好处：

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

无障碍的范围很广，不仅仅针对盲人，正常人在某些环境下，如坐公交车、强烈日光下，也会造成阅读操作障碍。

如何做到语义化：

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

参考

MDN：学习 HTML指南与教程