这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
前端与 HTML学习笔记
观看了课程视频,总结了之前学习html没有注意或者没有涉及到的一些知识点,主要了解了无障碍与语义化的重要性与概念
细碎的知识点
1.<!DOCTYPE html>标记了我们当前的html文件是使用的什么样的版本,如果没有的话,浏览器可能用老旧的版本去渲染,出现很多问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
2.<dt>叫做描述列表
3. <label> <select> <option> <datalist>标签的使用
实现选择多个值
<p>
<label><input type="checkbox">苹果</label>
<label><input type="checkbox">梨</label>
</p>
实现选择一个值
<!-- 通过name属性来实现只能选一个,只能选择一个name -->
<p>
<label><input type="radio" name="fruit">苹果</label>
<label><input type="radio" name="fruit">梨</label>
</p>
实现下拉菜单的选择
<p>
<select>
<option value="">苹果</option>
<option value="">梨子</option>
<option value="">香蕉</option>
</select>
</p>
实现input输入框的提示
<input list="countries">
<datalist id="countries">
<option value="">Greece</option>
<option value="">China</option>
<option value="">America</option>
</datalist>
4.语义化和无障碍的理解
语义化:就是指要用一些语义化标签构建内容,遵循一些具体的语义规则,优势在于代码可读性,可维护性,搜索引擎的规范,提升无障碍性
无障碍并不仅仅说是对残疾人要适配,对于普通人来说在某些情况下也应当考虑,例如在公交车上,在外面光线视线很强的时候等
5.文件命名方式
文件夹和文件名使用小写,用短横线来分隔。
- 许多计算机,特别是网络服务器,是区分大小写的。
- 浏览器、网络服务器和编程语言对空格的处理并不一致。例如,如果你在文件名中使用空格,一些系统可能将其视为两个文件名。一些服务器会用“%20”(URL 中空格的字符代码)替换文件名中的区域,导致所有链接被破坏。
- 谷歌搜索引擎把连字符当作单词的分隔符,但不会识别下划线。