前端开发是现今互联网时代的一种重要的编程开发方式，主要是指利用HTML、CSS、JavaScript等Web技术，创建出符合用户体验的网页前端界面及交互。前端技术不仅仅只是一门技术，更是一门艺术，需要创建出最佳的用户体验。所以它不止对技术有要求，开发者的沟通能力和对客户群体需求的了解也是同样重要的。

一、课堂知识

1.前端

什么是前端？

解决GUI（图形交互界面）人机交互问题
跨终端

PC/移动浏览器
客户端/小程序
VR/AR等

Web技术栈

前端技术栈

HTML（内容）
CSS（样式）
JavaScript（行为）

HTML、CSS、JavaScript它们三个看上去是三种不同的技术，但在实际过程中是相互搭配使用的。HTML是用来标记内容的，重在内容组织上，是超文本标记语言的简称。它用各种标签将页面中的元素组织起来，告诉浏览器如何显示其中的内容。CSS是用来修饰内容样式的，重在内容样式美化展示上，是层叠样式表的简称，简单地说就是负责HTML页面中元素的展现及排版。JavaScript是用来做交互的，是一种脚本语言，既可以运行在客户端也能运行在服务器端。主要是用来扩展文档交互能力的，使静态的HTML具有一定的交互行为。如果把HTML比作身体，那CSS就好比是衣服，而JavaScript则意味着人能做的一些高级动作。

前端应该关注哪些方面？

功能、美观、性能、安全、无障碍、兼容、体验

2.HTML(HyperText Markup Language，超文本标记语言)

HTML语法

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

语义化是什么？

HTML中的元素、属性及属性值都拥有某些含义
开发者应遵循语义来编写HTML

有序列表用ol；无序列表用ul
lang属性表示内容所使用的语言

谁在使用我们写的HTML？

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

语义化的好处

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

如何做到语义化？

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

二、课后学习

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image" />
  </body>
</html>

<doctype html>— 文档类型。用于保证文档正常读取。
<html></html> — 该元素包含整个页面的内容，也称作根元素。
<head></head> — 该元素的内容对用户不可见，其中包含例如面向搜索引擎的搜索关键字（keywords)、页面描述、CSS 样式表和字符编码声明等。
<meta charset="utf-8"> — 该元素指定文档使用 UTF-8 字符编码，UTF-8 包括绝大多数人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容，还可以避免以后出现某些问题，没有理由再选用其他编码。
<title></title> — 该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。
<body></body> 该元素包含期望让用户在访问页面时看到的内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。

嵌套元素

<p>My dog is <strong>very</strong> cute.</p>

把元素放到其他元素之中——这被称作嵌套。如果我们想要表明我们的小狗很可爱，可以将 very 一词嵌套在 [<strong>] 元素中，意味着这个单词被着重强调

空元素

不是所有元素都拥有开始标签、内容和结束标签。一些元素只有一个标签，通常用来在此元素所在位置插入/嵌入一些东西。这些元素被称为[空元素]。例如：元素 [<img>]是用来在页面插入一张指定的图片。

块级元素与内联元素

在 HTML 中有两种你需要知道的重要元素类别，块级元素和内联元素。

块级元素在页面中以块的形式展现。一个块级元素出现在它前面的内容之后的新行上。任何跟在块级元素后面的内容也会出现在新的行上。块级元素通常是页面上的结构元素。例如，一个块级元素可能代表标题、段落、列表、导航菜单或页脚。一个块级元素不会嵌套在一个内联元素里面，但它可能嵌套在另一个块级元素里面。
内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行。它通常与文本一起使用，例如，[<a>]元素创建一个超链接，[<em>] 和 [<strong>] 等元素创建强调。

属性

属性包含

一个空格，它在属性和元素名称之间。如果一个元素具有多个属性，则每个属性之间必须由空格分隔。
属性名称，后面跟着一个等于号。
一个属性值，由一对引号（""）引起来。

前端与HTML | 青训营