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

前端

前端可以这样定义：

解决GUI人机交互问题

跨终端

PC/移动端

客户端/小程序

VR/AR等

Web技术栈

我们可以从以下几个方面来简单了解前端

前端1.png

HTML

HyperText 超文本：图片、标题、连接、表格

Markup Language 标记语言：利用标签区分内容类型等

HyperText Markup Language超文本标记语言是一种用标签描述超文本内容的标记语言。它的基本结构为

<!DOCTYPE html>
<html>
    <head>
    	<meta charset="utf-8">
    	<title>标题</title>
    </head>
    <body>
    	// 页面源代码内容
    </body>
</html>

即文档主体分为head和body两部分。

head

head元素包含了所有的头部标签元素。在head元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

title

网页标签名

body

基本标签

标签名	描述
标题	从h1到h6分为六级标签，逐渐减小
段落	p
换行	br
水平线	hr
字体样式	strong表示粗体，em表示斜体
注释和特殊符号	空格为“&nbsp；”，大于为“&gt；”，小于为“<”，版权符号为“ &copy；”

列表标签

标签名	描述
有序列表	li标签表示列表项，整体用ol标签框起
无序列表	li标签表示列表项，整体用ul标签框起
自定义列表	dt标签表示自定义属性名，dd标签表示属性值，整体用dl标签框起

表格标签

用table标签表示

tr：行标签

td：列标签

colspan=“列数” --》跨列

rowspan="行数" --》跨行

链接标签

链接标签用a表示，其中href表示链接路径，target表示设置窗口打开位置。
链接主要可以分为以下三种：

类型	作用
页面间链接	打开目标网页
锚链接	在目的地做锚标记，目标为跳转到该标记，可用作页面向导跳转功能
功能性链接	如邮件链接等

多媒体元素

标签名	描述
图片标签	用img标签表示。其中，src表示图片地址，alt表示降级显示替代文本，title为鼠标悬停显示文字，width与heigth显示图片大小
音频标签	用audio标签表示，src可以直接引入，也可以通过source标签引入。其中，controls控制视频播放，autoplay控制自动播放
视频标签	用video标签表示。基本参数同音频标签

输入组件

输入组件是前端用户交互的主要部分，可以简单分为以下几个方面

输入.png

文本标签

标签名	描述
blockquote	标记长的引用段
cite	短引用，常用于文章标题
q	短引用，常用于具体引用内容
code	引用代码段，不限长短

内联框架

标签为iframe。它能够将另一个 HTML 页面嵌入到当前页面中。

src 地址链接

name 自定义名称，可作为其他跳转链接的target，src空置

width heigth 定义嵌入页面大小

语义化

所有的元素、属性、属性值都具有各自的含义。因此，遵循语义便于页面（浏览器）自动翻译识别。

语义化.png

前端与HTML｜ 青训营笔记

前端