青训营笔记
这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
重点内容
- 前端的认识
- 什么是HTML
- HTML的语法
- 语义的重要性
笔记部分
- 前端技术栈
前端技术栈包含：JavaScript（行为）CSS（样式）HTML（内容）这三大部分，
再通过http即网络协议在服务端之间来回传输就构成了最基本的前端技术栈
- 介绍
开发环境中一系列的浏览器以及编辑器
- DOM树
其展示了HTML的组成结构使得更方便了为我们的理解
- HTML的定义
HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。
- HTML语法
- 标签和属性不区分大小写，推荐
小写 - 空标签可以
不闭合，比如input、meta - 属性值推荐用
双引号包裹 - 某些属性值可以
省略，比如required、readonly
- 语法
1.在HTML里对标题的格式有着6种类型分别是<h1><2><3><4><5><6>这六种，其对应的大小和格式都是不同的，其效果如下：
这是标题 1
这是标题 2
这是标题 3
这是标题 4
这是标题 5
这是标题 6
2.HTML中对列表的排版是有两种标签，可以利用< ol >去表示这是一个有序列表，而在列表的内容里运用的是< li >其英文是list item意为“元素标签”可表示其1.2.3.的顺序。但是也并非顺序一定需要从1开始排列，我们也可以根据自己的意愿来对列表进行排版，如下: <ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
而还有一种标签为无序列表，是利用< ul >来表示的，如下：
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
3.HTML中是使用使用标签 < a >来设置超文本链接，超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。其HTML中的链接代码表示如下：
<a href="*url*">*链接文本*</a>
注意的是其中使用了href属性来描述链接的地址，而我们还可以在其中使用另一种属性target来使得打开出来的是新窗口而并非是原来的窗口，代码如下：
<a href="https="*url*">*链接文本*<" target="_blank">名称</a>
4.页面中除了上文中列表提起的元素外，还有多媒体的元素，如下：
src链接的是媒体的地址
alt属性为图像的代替文本，主要用于图片不加载或提供给开了省流的用户
controls属性为向用户显示音视频控件（比如播放/暂停按钮）
5.现代的站里不仅仅只提供用户看的信息，其中也包含着让用户输入的空间，其代码和效果如下：
| 标签 | 描述 |
|---|---|
| input | 含有有两种属性，一种是placeholder可描述输入 <input> 字段预期值的简短的提示信息，另一种是type规定要显示的 <input> 元素的类型，如“range”“number”“data” |
| label | 配合input一起使用来达到选择在单选和多选之间选择 |
| select | 选择选项 |
| option | 定义列表中的可用选项 |
| datalist | 可以让你更加方便快捷的找到选项 |
6.文本标签
| 标签 | 描述 |
|---|---|
| blockquote | 长引用，一般是用来直接引用别人的一段话，需配合cite属性来表示来源 |
| cite | 短引用，单独作为标签是用来提示用户其是书籍、电影、绘画等作品标题 |
| q | 短引用，表示再次引用上文的内容 |
| code | 定义计算机代码文本 |
| strong | 加粗体 |
| em | 斜体，用来表示强调 |
7.页面内容的整体划分
8.语义化的好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提高无障碍性
个人总结
通过这节课，让我对于前端技术有了初步的认识以及对HTML有基本的了解，从老师的ppt中深刻的记下了HTML中的基本语法，以及给我们展示HTML中常用的标签。这些点点滴滴的积累能够促成明天更加优秀的我，所以我继续坚持下去。
