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

一、本堂课重点内容

1.前端是什么、要解决的问题和技术栈等

2.介绍 HTML 的概念、语义化和常用的 HTML 标签。

二、详细知识点介绍

第一节：什么是前端？

1.前端的定义

解决图形界面下的人机交互问题

2.前端技术栈

截屏2023-01-15 下午11.46.11.png

3.前端关注的问题

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

对用户体验至关重要

4.前端的边界

Nodejs electron react native Web RTC WebGL WebAssembly

5.开发环境

浏览器编辑器

第二节：HTML

1.什么是HTML？

截屏2023-01-15 下午11.50.37.png

2.标签上设置属性

截屏2023-01-15 下午11.52.09.png

img标签可省略结束标签直接写/

3.完整HTML结构

截屏2023-01-15 下午11.59.21.png

1）浏览器根据此决定渲染模式

2）文档的跟标签

3）head标签：页面标题、编码

4）body标签：展示的内容

截屏2023-01-16 上午12.01.11.png

4.html语法

1）标签和属性推荐小写

2）空标签不闭合直接/ 比如input、meta

3）属性值用双引号

4）某些属性值可以省略，required readonly等

5.标题h1~h6

截屏2023-01-26 下午8.21.44.png

6.列表

1）< ol >有序列表会有序号

2）< ul >会有黑点

3）属性名+属性值< dl >definition list 具体的值

属性名< dt >+数值< dd >

4）链接 < a >标签

截屏2023-01-26 下午8.34.38.png

_blank新窗口打开的页面

7. 插入图片音频视频

截屏2023-01-26 下午8.35.31.png

Img: alt属性表示可替代的文本由于某些原因无法加载所展示的文字

8. 输入信息

截屏2023-01-26 下午8.38.15.png

我们可以规定用户所输入的格式范围日期 textarea表示多行的一个区域

用户可选择一些选项

选多个/选一个

定义不同的type决定用户选择单个（radio) / 多个（checkbox）

select 下拉选择

list 提供给用户提示的一些选项方便用户输入已有的list提供快捷的输入方式

9.不同的引用

截屏2023-01-26 下午8.47.57.png

1)三个引用

< blockquote > 块级引用：大段文字 < cite >书或章节的名字 < q >具体内容

2)代码的引用

< code >的标签

比较长的代码用< pre >引用起来

3)强调的内容

< strong >这个东西紧急加粗部分 < em >语音强调重读的词语斜体部分

10.内容划分

截屏2023-01-26 下午9.01.33.png aside 热点文章推荐等

article 文章有且有很多

footer 放一些参考链接或者版权信息等等

1·.语义化

截屏2023-01-26 下午9 .03.50.png

html 传达内容而不是样式

截屏2023-01-26 下午9.07.01.png

截屏2023-01-26 下午9.11.00.png

截屏2023-01-26 下午9.11.51.png

三、课后实践

添加一组单选按钮

<fieldset>
      <legend>Is your cat an indoor or outdoor cat?</legend>
      <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked > Indoor</label>
      <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
</fieldset>

单选按钮是input元素中其中一种类型。
要使用单选按钮，我们需要把每一个单选的input元素包裹在一个label元素中。这时label元素就会与input元素绑定上。意思就是label中的任何文字，在点击的时候都可以选中这个选项。
所有相关的单选项需要有同一个name属性值才能把这些单选项组成一组选项。
单选项被列为一组后，才能选择这组其中一个单选项时，才会自动去除选中其他这组里面的选项。

添加一组复选框

            <legend>What's your cat's personality?</legend>
            <input id="loving" type="checkbox" name="personality" value="loving" checked > <label for="loving">Loving</label>
            <input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
            <input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic"> Energetic</label>
</fieldset>

表单中，通常用checkbox来建立复选框的表单问题。
checkbox是input元素的其中一种类型。
要使用复选框，我们可以把每一个复选框的input元素包裹在一个label元素中。这时label元素就会与input元素绑定上。意思就是label中的任何文字，在点击的时候都可以选中这个选项。
所有相关的复选框需要有同一个name属性值才能把这些选项组成一组选项。
最佳实践是在label元素上设置一个for属性，其值与输入元素的id属性值相匹配。这允许辅助技术在标签和子input元素之间创建链接关系

四、课后个人总结

将 h1 元素、h2 元素、注释和 p 元素嵌套在 main 元素中。这叫作嵌套。嵌套的元素（子元素）的位置应该放在被他们嵌套的元素（父元素）中新的一行并且右侧保留两个空格的间距的后面。这个间距被称为缩进，它被用来使 HTML 更容易读。 h1 元素、h2 元素和注释比下面代码中的 main 元素多缩进了两个空格。使用键盘上的空格键在 p 元素前面再添加两个空格，使其缩进得当。
开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。内容（Content）：元素的内容，本例中就是所输入的文本本身。元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

五、引用参考

[通过编写猫咪相册应用学习 HTML]

前端与 HTML | 青训营笔记