第六届字节跳动青训营第二课 | 青训营

36 阅读3分钟

本节课程围绕“前端要解决的基本问题”及“什么是 HTML ”两个基本问题展开,层层解析前端技术栈的构成,以及作为前端最为基础的技术 - HTML 基础语法和基本功能,在实际研发过程中如何做到 HTML 语义化

什么是前端:

1、解决GUI人机交互问题

2、跨终端:

①PC/移动浏览器

②客户端/小程序

③VR/AR等

3、Web技术栈

前端工程师是使用Web技术栈解决多端图形-用户界面交互问题的工程师

前端技术栈:

HTML、CSS、JS都是运行在浏览器里的,浏览器通过HTTP协议和服务器通信,浏览器通过HTTP协议在服务器上获取前端代码,然后渲染成页面;同时浏览器也可以把用户的一些数据和行为通过HTTP协议提交到服务器端;因此我们说HTML、CSS、JS和一些网络协议构成了前端技术栈最基础的内容。

前端应该关注的方面:

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

 

前端的边界:

已经超出页面的范畴,目前可以做到:服务器端:、客户端应用、ptp的在线传输、多人会议、3D游戏等。

  image.png

开发环境:

浏览器:IE、Chrome、Firefox、Safari

编辑器:VSCode、Vim、WebStorm

 

HTML:
HTML是HyperText Markup Language的缩写

HyperText:超文本,不局限于普通文本,可以包括图片、标题、链接、表格等形式

Markup Language:用一个开始标签和一个结束标签来表示一段内容;例如:< h1>文本内容< /h1>就是一个标签

我们可以在标签上设置一些属性,比如我们要表示图片,可以使用标签< img src=”photo.jpg”/>属性名src用以表示标签的URL,””中的内容即为属性值;注意,img标签中已经包含一个属性值,不需要再嵌套其他内容,在此情况下,我们可以省略结束标签,直接在该标签中加上’/’

标记了当前html文件使用的版本,最终浏览器据此决定使用哪种渲染模式,如果不主动标记,浏览器会使用“怪异模式”来渲染页面,使得页面实际展示效果不符合预期。

< html>是文档的根标签,其他所有标签都写在标签内

< head>标签中会写一些页面的元数据,即一些页面需要但无需展示给用户的信息,例如页面的标题、编码等

< body>标签中写的就是需要呈现给用户的内容

 

浏览器处理HTML的流程:
浏览器在取得HTML之后,会把代码解析成一个DOM树,

image.png

树中的结点关系对应HTML中标签的包含关系

HTML语法:

image.png

< ol>(order list)是一个有序列表,列表项使用< li>(list item)表示,默认会有排序效果

< ul>(unordered list)是一个无序列表,列表项也用< li>表示

< dl>(defination list)是一个定义列表,列表项有< dt>(definationed title)定义标题和

(definationed description)定义描述

 

链接:

链接用< a>(anchor)表示,属性名有href(超链接),其属性值即为要跳转的链接;可以添加target=”_blank”使链接为打开新标签而非替换当前页面;

多媒体:

< img>图片标签:

alt(alternative text替代性文本)属性名表示当图片加载失败或因某些原因无法加载的时候显示给用户的文本

< audio>音频标签

< vidieo>视频标签