##这是我参与「 第五届青训营 」伴学笔记创作活动的第 1 天##
一、说在前面
本节课介绍了HTML的相关概念以及相关代码的内部结构构造以及内容组成，本堂课重点内容主要是介绍：标题、列表、链接、多媒体的插入、输入以及引用。
二、重要知识点介绍
标题
代码：前端与html之标题 - 码上掘金 (juejin.cn)
h1:一级标题，h2:二级标题，以此类推（浏览器默认样式）
列表
代码：前端与html之列表 - 码上掘金 (juejin.cn)
orderlist(ol)，默认加1.、2.、3.等等，是简单的有序列表
unorderlist(无序列表)（ul）:前面有小黑点
(dl) (definedlist)定义列表；（dt）:标题、标签；(dd) ：具体的值；(dt)与(dd)的关系:多对多
链接
代码：前端与html之链接 - 码上掘金 (juejin.cn)
链接： a
href:超链接
target=“blank”:指跳出来的页面不是替换当前窗口打开的，而是打开新的窗口
多媒体的插入
代码：前端与html之多媒体的插入 - 码上掘金 (juejin.cn)
img :图片的标签； 属性src是图片的地址； alt：用文本代替img等多媒体； 当多媒体由于某种原因（网络问题）加载不出来时向用户传达的信息； width宽度
controls：表示该音频或视频是需要用到浏览器默认的播放控物件的（即默认显示）（例如播放按钮、进度条）
输入
代码：前端与html之输入 - 码上掘金 (juejin.cn)
第二行input的运行结果是可拖动的进度条
后面的textare允许输入多行文本，窗口大小可以通过鼠标拖动进行调整
多选: type="checkbox"
单选：type="radio",radio的情况下，相同的name只能选一个，互斥
选项多，下拉选择（select）
最后的input不限制你的输入，但是（option）就是给你一些快捷输入，有下拉框选项，例如：Banana
引用
代码：前端与html之引用 - 码上掘金 (juejin.cn)
blockquote标签：快捷引用/常引用 cite属性：表示这段引用的内容来源于哪
cite标签：短引用,例如作品的名字、章节
q：具体引用的内容，与cite有区别
code：写的代码，若引用多行代码，外面还要包裹一层pre标签
srtong:强调事情含义上的严重、紧急
em:语气强调（例如重读）
！注意区别标签和属性
三、实践练习例子
例：编辑下面的文本框中的内容，使之变成指向任一个你喜欢的 web 地址的链接。首先，添加(a)元素，然后为它添加 href 属性和 title 属性。你可以即时的在输出区域看到你修改的内容。你应该可以看到一个链接，当鼠标移上此链接时会显示 title 属性值，当点击此链接时会跳转到 href 指定的 web 地址。记住：在元素名和属性名之间以及两个属性之间要有一个空格。
想获取更多实践练习可前往下方的学习链接进行学习实践。
四、课后个人总结
总之，对前端有了一个总体的认识，前端由HTML(内容)、CSS(样式)、JS(行为)三部分组成；对HTML有了更深一步的理解和接触，学会区别标签和属性，也了解到更多的学习HTML的渠道。但是想要真正地掌握这一节课的内容必然是需要更多的练习和操作，一起加油吧！
五、学习资料补充
学习链接：
[developer.mozilla.org/zh-CN/docs/…toHTML/Getting_started]
课后资料：
1.MDN 上的 HTML 参考，包含每个标签和属性的详细说明
HTML elements reference - HTML: HyperText Markup Language | MDN
2.最新版的 W3C HTML5 规范
六、引用参考
笔记创作评判标准 & 模版 - 飞书云文档 (feishu.cn)
【前端专场 学习资料一】第五届字节跳动青训营 - 掘金 (juejin.cn)
七、一点疑问
为什么有些代码的运行结果没有换行显示（跟课堂上老师展示的不太一样）？
