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

一、本堂课重点内容：

前端工作的定义
前端技术栈拆解与分析
HTML 作用解析
HTML 语义化

二、详细知识点介绍：

前端

在了解前端要解决的问题前，首先应该了解什么是前端。前端是通过web技术栈解决多终端（PC,客户端，小程序等）图形用户交互问题。
前端有最基础的技术栈由HTML，CSS，JavaScript，HTTP（网络协议）构成。其中HTML决定了网页的内容，CSS决定了网页的样式而JavaScript决定的是网页的行为。
浏览器通过HTTP协议与服务器进行通讯，从服务器端拿到需要的前端代码再通过渲染呈现出我们想要的网页。
前端应关注以下几个方面：功能，美观，无障碍，安全，性能，兼容性，用户体验。
前端现在不再局限于页面的开发，比如可以通过nodejs开发服务器端的应用。而且前端发展迅速，技术日新月异，只有持续学习才能跟上第一线。

HTML

HTML全称：HyperText Markup Language（超文本标记语言），超文本的意思是不只是文本也包含图片，音乐，链接等内容，Markup是指具有开始和结束标签。比如一级标题用HTML表达就是<h1>一级标题</h1>,效果见下。<h1></h1>就是开始和结束标签。

一级标题

在标签中可以通过设置标签的属性来达到满意的效果。

DOM树形象地展示了html语言的结构

HTML的标签，属性不区分大小写，一般使用小写。属性值推荐使用双引号包裹。
列表标签：ol，有序列表，内容前带有数字排序；ul，无序列表，内容前为黑色小圆点；dl：key-value列表，dt是属性名，dl是值。
链接标签：a标签，其中herf的值为url，target的值决定打开链接的页面是替换原有页面还是在新页面打开。
图像，音频，视频标签：img，audio，video。都具有src属性决定内容来源。
还有输入标签（input），下拉选择标签（select），长引用标签（blockquote），cite标签引用的作品名或者章节，代码标签（code，pre code）用于展现代码部分，强调标签（strong，em）。
HTML的语义化：HTML中的元素，属性以及属性值都拥有某种含义，开发者应遵循语义来编写html。
语义化增强了代码的可读性，可维护性，优化搜索引擎，提升无障碍性。
达成语义化，则需要开发者了解每个标签和属性的含义，找出最契合内容的标签以及不使用可视化工具生成代码。

三、实践练习例子：

HTML简单模板：

<!DOCTYPE html>                      #标记使用的html文件版本，由此决定渲染模式
<html>                               #html标签是根标签，其他标签都在它里面
    <head>                           #头标签储存页面需要的但不需要呈现给用户的数据
        <meta charset="utf-8">       #编码方式
        <title>页面标题</title>      #标题
    </head>
    <body>                          #存储需要呈现给用户的内容
        <h1>一级标题<h1/>           #小标题标签
        <p>页面内容</p>             #内容标签
    </body>
</html>

HTML语义化：图像音频视频标签名为img，audio，video都是它们的英文简写，简单易懂

四、课后个人总结：

介绍了前端的定义及其技术栈，对html中基础标签做了详细的介绍

五、引用参考：

第五届青训营前端与HTML课程

前端与 HTML | 青训营笔记

一级标题