一、前端

什么是前端？

解决GUI人机交互问题
跨终端

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

Web技术栈

前端应该关注哪些方面？

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

二、HTML

HTML 超文本标记语言——HyperText Markup Language。

超文本：链接
标记：标签，带尖括号的文本

HTML语法

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

HTML骨架

html：整个网页
head：网页头部，用来存放给浏览器看的信息，例如 CSS
- title：网页标题
body：网页主体，用来存放给用户看的信息，例如图片、文字

 <html>
   <head>
     <title>网页标题</title>
   </head>
   <body>
     网页主体
   </body>
 </html>

标签的关系

父子关系（嵌套关系）：子级标签换行且缩进（Tab键）
兄弟关系（并列关系）：兄弟标签换行要对齐

注释

在 VS Code 中，添加 / 删除注释的快捷键：Ctrl + /注释不会在浏览器中显示。

 <!-- 注释 -->

标题标签

显示特点：

文字加粗
字号逐渐减小
独占一行（换行）

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落标签

显示特点：

独占一行
段落之间存在间隙

<p>段落</p>

换行和水平线

换行：br
水平线：hr

文本格式化标签

常见的文本格式：加粗strong、倾斜em、下划线ins、删除线del等。

图像标签

作用：在网页中插入图片

<img  src="图片的 URL">

图像属性：alt(替换文本)、title(提示文本)、width(宽度)、height(高度)

属性语法

属性名="属性值"
属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序

超链接标签

href 属性值是跳转地址，是超链接的必须属性。

<a href="链接/路径">内容</a>

音频和视频标签

<audio src="音频的 URL"></audio>
<video src="视频的 URL"></video>

音频属性：controls(控制面板)、loop(循环播放)、autoplay(自动播放)

视频属性：controls(控制面板)、loop(循环播放)、autoplay(自动播放)、muted(静音播放)

如果属性名和属性值相同，可以简写为一个单词。

语义化是什么？

HTML中的元素、属性及属性值都拥有某些含义

开发者应该遵循语义来编写HTML

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

谁在使用我们写的HTML

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

语义化的好处

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

如何做到语义化？

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

前端与HTML ｜ 青训营