前端与HTML | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的第1天，今天总结的笔记是由韩广军老师讲解的《前端与HTML》课程，也是本次青训营的第一节课。

一、前端有关概念

什么是前端

一句话总结：前端工程师是使用web技术栈解决多端图形用户页面交互问题的工程师

具体体现在：

• 解决GUI（图形界面下的）人机交互问题
• 跨终端
  • PC/移动浏览器
  • 客户端/小程序
  • VR/AR等
• Web技术栈

前端技术栈

分为三个层，也就是我们常说的学习前端必备三件套：

• HTML （内容）负责页面结构、元素，是最基础的
• CSS （样式）负责页面样式
• JavaScript （行为）负责页面交互的动态效果 这三者都是运行在浏览器内，浏览器再通过http协议和服务器进行通信，最后渲染成我们看到的页面

前端应该关注哪些方面？

下面图片写的很直观了，其中最核心的是功能

前端的边界？

随着科技的发展，前端早已远远超出了页面这一个简单的范畴

下面介绍了一些拓展前端开发会用到的网站：

前端开发环境

如下图：

二、介绍HTML

HTML是什么？

一种超文本标记语言

DOM树

由HTML代码解析而来（可以通过右键检查，打开浏览器的调试工具，更加清晰地查看DOM树）

HTML语法

• 标签和属性不区分大小写，推荐小写
• 空标签可以不闭合，比如input、meta
• 属性值推荐用双引号包裹
• 某些属性值可以省略，比如required、readonly

三、一些常用的HTML标签

标题

<h1>~<h6>，其中h1表示字体最大的标题（一级标题），h6表示字体最小的标题（六级标题）。

列表

有三类标签 ，分别为有序列表<ol>、无序列表<ul>、定义列表<dl>。 <dt>表示标题，<dd>表示内容，两者是一个多对多的关系。

链接

<a>，<a>标签中有两个属性，分别为href和target。href属性规定链接指向的页面URL；target属性规定在何处打开链接文档。

多媒体

<img>：图像标签，src表示图片的URL地址，alt表示替换文本属性，用于在图片加载失败的时候显示。

<audio>：音频标签，src表示音频源URL，control属性显示播放控件。

<video>：视频标签，src表示视频源URL，control属性显示播放控件。

输入

使用input，具体实现如下图：

文本类标签

块级引用：<blockquote>，cite属性表示引用文本来源。

短引用：<cite>、<q>，区别是，<cite>一般表示引用作品名字，<q>表示引用作品内容。

代码：<code>,可以输入短代码，也可以输入长代码。使用多行代码时需在前面配合<pre>使用。

强调：<strong>、<em>，<strong>强调事件重要，<em>强调语气。

四、内容整体划分

header：页头，logo，导航

main：页面主体部分

aside：页面内容相关

article：文章正文（也可以没有）

footer:页尾，参考链接，版权信息

五、有关语义化

语义化是什么？

• HTML中的元素、属性及属性值都拥有某些含义
• 开发者应该遵循语义来编写HTML
  • 有序列表用ol；无序列表用ul
  • lang属性表示内容所使用的语言

谁在使用我们写的HTML

• 开发者-修改、维护页面
• 浏览器-展示页面
• 搜索引擎-提取关键词、排序
• 屏幕阅读器-给盲人读页面内容

注意：无障碍性！

语义化的好处

• 代码可读性
• 可维护性
• 搜索引擎优化
• 提升无障碍性

总体原则：传达内容，而不是样式！

如何做到语义化？

• 了解每个标签和属性的含义（推荐看MDN的文档）
• 思考什么标签最适合描述这个内容
• 不使用可视化工具生成代码

六、自己的总结和思考

初次接触前端，我了解到本次课程所讲的HTML这个板块是学习前端最基础的一个步骤，听完并总结完老师的这门课，我知道这还远远不够，我还需要在课后看MDN的文档，深入了解HTML这个板块。