这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
青训营笔记
本堂课重点内容：
- 课程介绍了前端是什么、要解决的问题和技术栈等。
- 介绍 HTML 的概念、语义化和常用的 HTML 标签。
具体案例：
HTML:
-
HTML元素 = 开始标签 + 结束标签 + 元素内容
-
一些元素只有一个标签，如img、input、br等
-
HTML元素标签不区分大小写
-
元素可以嵌套在其他元素中间
-
元素可以拥有属性，属性包含有元素的额外信息
-
HTML结构标签:
< HTML >：定义HTML文档
< head >：定义关于文档的信息
< title >：定义文裆的标题
< body >：定义文档的主体
< meta >:有关文档本身的元信息，例如：文档的作者，用于查询的关键词，关于文档的描述等
< script >:定义页面中程序脚本的内容
常用的HTML标签:
p标签、h1~h6标签、div标签、ol/ul>li标签、input标签、img等。
注意: p标签、h1~h6标签内容建议只放文字。
- p标签:
<p>Hello 青训营</p>- h1~h6标签:
<h1>青训营</h1>
<h2>青训营</h2>
<h3>青训营</h3>
<h4>青训营</h4>
<h5>青训营</h5>
<h6>青训营</h6>
复制代码
注意 :h1~h6对应不同大小的字体,其中h1最大,同时一个html文档只能有一个h1标签。
-
超链接标签(a标签): 可以给文字,图片,音乐,其他标签添加超链接功能,默认会该表字体颜色以及添加下划线 href 属性. 可以是本地的资源,也可以是网络路径。
<a href="https:baidu.com" target="_self" >百度</a>（1）href：指定访问资源的URL
（2）target:指定打开资源的方式
_self：默认值，在当前页面打开 _blank：在空白页面打开 通常在页面内部跳转使用_self，跳转到外部资源用_blank -
多媒体标签
音频： audio 是一个双标签，它同图片一样，需要使用src属性设置音频查找的路径，支持音频文件的格式有：.mp3、.ogg、.wav后缀的文件
<audio src="audio.mp3" controls="controls"></audio>注意:src属性是音频文件的路径，controls是音频控制条属性：音频加载后不会自动显示播放器的控制条，需要使用controls属性进行设置，属性值也是controls。
视频： 也是一个双标签，视频设置方法与音频非常类似，支持视频文件的格式
- 其他标签:
< hr> ：定义水平线
< b> ：定义粗体文本
< i> ：定义斜体文本
< u> ：定义文本下划线
< center> ：定义文本居中(css完成)
< br>：定义换行
有序列表、无序列表、自定义列表
有序列表 ：就是使用项目符号来标识项目，比如日常我们需要步骤化的操作，可以使用有序列表来表示。
其基本使用方法为
<ol>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ol>
无序列表 ：在 HTML 文档中，所谓无序列表，是指以实心圆 ●（默认）、空心圆 ○、实心方块 ■ 开头的，没有顺序的列表项目。比如，有时候我们会用无序列表的形式来做一个总结，这样会让内容看起来更加清晰。
其基本使用方法为
<ul>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
我们可以使用其type属性来修改列表开头的符号，其取值如下：
| 属性值 | 说明 |
|---|---|
| disc | 实心圆 ● |
| circle | 空心圆 ○ |
| square | 实心方块 ■ |
自定义列表 ：跟前两种列表有些区别，用 dl 标签表示自定义列表，其中的 dt 是代表列表项，而 dd 是列表项的描述。比如：我们需要对列表项的内容进行解释的时候，就可以使用自定义列表了。
基本用法为
<dl>
<dt>列表项一</dt>
<dd>列表项一的描述</dd>
<dt>列表项二</dt>
<dd>列表项二的描述</dd>
</dl>
