前端与 HTML | 青训营笔记

429 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 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 中空格的字符代码)替换文件名中的区域,导致所有链接被破坏。
  • 谷歌搜索引擎把连字符当作单词的分隔符,但不会识别下划线。