前端与HTML | 青训营笔记
这是我参与 第四届青训营 笔记创作活动的第1天
课程的重点内容
1. 前端的基本介绍
2. 什么是HTML
3. DOM树的介绍
4. HTML语法
5. HTML的使用应遵循语义化
一、前端的基本介绍
1、什么是前端？
前端的目的：解决GUI人机交互的问题，所有用户总不能去使用程序式的命令去交互，不利于技术的应用推广。
前端是跨终端的，如（PC/移动浏览器、客户端/小程序、VR/AR等）
前端的技术栈：
- HTML（内容）：直接产生页面内容所需要的语言（标记语言、不是编程语言！！！）
- CSS（样式）：通过CSS语法，可以对HTML中所表示的内容进行修饰，如页面布局、字体颜色、字体大小等
- Javascript（行为）：一种编程语言，简称JS，使用JS语言可以构造页面的逻辑，对后端进行访问，如：点击“搜索”按钮，就会触发响应的JS代码逻辑，并运行。因此后续页面才会进行获取到新的数据并展示。
- 网路协议（通信方式）：JS语言可以设计逻辑，但是以什么方式与后端服务器通信，这就需要网络协议了，最常见的HTTP、HTTPS协议。（个人认为网络协议内容，也需要熟练掌握）
二、什么是HTML？
HTML(Hyper Text Markup Language) 全称：超文本标记语言
注意：HTML不是编程语言 （如果你跟HR说：“我会C、C++、HTML、等编程语言”，嘶~画面不敢想象） 它是一种标记语言。
顾名思义：超文本标记语言，它是用来描述网页内容的一种标记语言，其通过自己的标签（如：<h1>、<title>、<head>、<div>、<img>、...）将文本、音频、视频、图片、表格、按钮、等内容显示在网页上。
三、DOM树的介绍
DOM（Document Object Model），文档对象模型。JS程序可以设计操控页面变化的逻辑，这种变化就是基于DOM来运行的。
HTML语言终归是超文本标记语言，只代表内容无法产生逻辑，但是通过DOM就可以将内容和程序语言关联起来（本质上可以理解为DOM是某种程序语言的数据结构，如JS语言。通过程序逻辑，对数据结构内部的数据进行逻辑操作，使之变得有灵魂，没错就是灵魂）
四、HTML语法
-
标题 h1~h6
-
列表 ol：order list，有序列表；ul：unordered list，无序列表 li：list item 列表项
- 连接 带有target="_blank" 属性的会新开一个标签页显示连接中的网址
-
图片、音频、视频 标签内的controls属性，表示了音视频中的播放、全屏等功能
-
输入
placholder：占位符，在没有任何输入的时候，显示指定的文字内容；依据所需选定不同的type属性；textarea：是可以输入大量文字的地方
- 选择框
checkbox框（复选框）、radio框（单选框）
select 点击：下三角状图标，进行选取对应option、input list：可以选取列表内的数据输入
五、HTML的使用应遵循语义化
有许多等效的写法生成同样的结果，如下图，此时语义化就会约束这种现象
语义化：HTML中的元素、属性及属性值都拥有某些含义，而开发者应该遵循语义来编写HTML，如：有序列表用ol，无序列表用ul。
为什么进行语义化：
- 开发者需要修改、维护我们的页面，语义化可以更好的提升代码的可读性、可维护性。
- 浏览器进行页面展示
- 搜索引擎会提取关键词，排序，语义化可以帮助我们更好的进行搜索引擎的优化
- 减少阅读障碍性，如不同颜色、布局等修饰，正确、优雅的修饰会提升很大的阅读效率
本文如有不足，欢迎纠正（本人的第一篇文章）
