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

这节课讲了什么？

HTML是什么
html里面比较具有代表性的标签
语义化在写代码中的重要性

什么是前端？

解决GUI人机交互问题
跨终端

- PC/移动端浏览器
- 客户端/小程序
- VR/AR等

Web技术栈

总结来说，前端工程师就是使用web技术栈解决多端图形用户界面交互问题的工程师。

前端应该关注哪一些方面？

美观
功能
安全
无障碍
性能
兼容
体验

前端的边界

开发环境

HTML是什么？

而我们也可以在标签内部直接设置属性。

可以看出img标签是单标签，不需要后面再来一个相同的标签作为结束。

DOM树

把html代码解析成dom结构，每一个节点称为dom节点。可以通过浏览器的调试工具来看到。

HTML语法

标题标签

列表标签

有序列表
无序列表
定义列表（也可以是多对多关系）

链接标签

href：写网页地址

target：默认是在本窗口打开网页地址，_blank属性的意思是在新窗口打开

其他标签

img：图片标签（src：图片地址，alt：替代性文本，用来解释图片含义）
audio：音频标签（controls：显示浏览器默认播放控件）
video：视频标签（controls：显示浏览器默认播放控件）

表单标签

<input placeholder="请输入用户名">
<input type="range">
<input type="number" min="1" max="10">
<input type="date" min="2023-02-10">
<textarea>Hey</textarea>

输入是表单标签在前端的很重要的应用，是我们获取用户数据的一种方式。

表单标签也可以让用户来选择内容。

我们可以通过name的定义来控制复选框的选择。

    <p>
        <label for=""><input type="checkbox">red apple</label>
        <label for=""><input type="checkbox">green apple</label>
    </p>
    <p>
        <label for=""><input type="radio" name="sport" id="">football</label>
        <label for=""><input type="radio" name="sport" id="">basketball</label>
    </p>
    <p>
        <select name="" id="">
            <option value="">apple</option>
            <option value="">pear</option>
            <option value="">banana</option>
        </select>
    </p>
    <input list="countries" />
    <datalist>
        <option value="">US</option>
        <option value="">UK</option>
        <option value="">China</option>
    </datalist>

文本标签

blockquote：快捷引用，也称为长引用，用来引用别人的一段话。cite属性是表示引用来源
cite标签：短引用，名字，标题之类的
q标签：之前提到过的东西，还是短引用，但是q更具体一点
code：代码引用标签，代码引用可短可长，字体不一样
strong：强调标签，表示所指的东西的含义重要
em标签：更强调语气的重读

页面布局标签

语义化是什么？

HTML中元素、属性以及属性值都拥有某些含义
开发者应该遵循予以来开发html

- 有序列表用ul,无序列表用ol
- lang属性表示内容所使用的语言

谁在使用我们写的HTML？

开发者修改、维护页面
浏览器展示页面
搜索引擎提取关键字、排序
屏幕阅读器给盲人阅读内容

我们不仅仅是在写代码，我们在致力于呈现更加优化的页面交互体验，我们都是【非正常人类】，都会有困难的时候，语义化会为我们提供更好的浏览体验。

如何做到语义化？

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

语义化的好处

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

小结

复习了html的语义标签以及其他比较具有代表性的标签发现了更多编写的可能性，对语义化代码具有了更加具象化的理解。

[ 前端与 HTML | 青训营笔记]