前端与HTML ｜ 青训营笔记

这是我参与「第五届青训营 」笔记创作活动的第1天。

今天主要学习的是

1. 前端工作的定义
2. 前端技术栈拆解与分析
3. HTML 作用解析
4. HTML 语义化

HTML结构

HTML常用标签

1. 标题标签 h1~h6

2. 列表标签

• 有序列表

    <ol>
        <li></li>
        <li></li>
    </ol>

• 无序列表

    <ul>
        <li></li>
        <li></li>
    </ul>

• 自定义列表

    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>  

3. 链接标签 a

4. 媒体标签

• img

    <img scr="" alt="" />   \\alt写注释文字

• audio

    <audio scr="" controls ></audio>   \\controls 是否显示控制栏，不用赋值

• video

    <video scr="" controls ></video>

5. 输入标签

• input

    <input placeholder="请输入用户名">
    <input type="range">
    <input type="number" min ="1",max="10" >
    <input type="date">
    <textarea>牛</textarea>

• 多选

    <p>
        <input type="checkbox">
        <input type="checkbox" checked="checked">     //checked设置是否默认选中
    </p>   

• 单选

    <p>
        <input type="radio" name="sport">
        <input type="radio" name="sport">      //name里面值相同代表只能选一个
    </p>
 

• 下拉框

    <p>
        <select name="" id="">
            <option value="">✌耶</option>
            <option value="">噢</option>
            <option value="">嘻</option>
        </select>
    </p> 

• 文本标签
• 其他（内容划分）

语义化

语义化的好处显而易见。要做到语义化，主要就是要注重内容而非形式，内容划分标签也是一种语义化，按照规则写就对了。
语义化有一个好处是可以提升无障碍性，关于这一点我很感兴趣所以深入了解了一下。从项目一开始就考虑到无障碍的问题，并尽早进行测试，但这一问题的解决很难面面俱到，毕竟无障碍的情况也很多，mdn上面提到：“如果有人确实反映您的网站存在无障碍问题，请与他们展开对话，保持同情心，并采取合理的步骤尝试解决问题。”所以这一规则给我一种很温暖的感觉，人文关怀吧。 具体的语义化有以下几个例子：

• 尽可能少的使用无语义的标签div和span；
• 在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
• 不要使用纯样式标签，如：b、font、u等，改用css设置。
• 需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
• 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
• 表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
• 每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

个人总结

1. 关于html大体是一些标签的记忆，较简单。
2. 本次课堂当中提到应当注意提升无障碍性，这是我以前没有学到也没有考虑过的问题，很有意义。