第四届字节跳动前端青训营（基础班）Day1之前端简介

本文是字节跳动前端青训营Day1的内容，主要介绍了前端技术栈，包括HTML、CSS和JavaScript，并探讨了前端关注的问题、边界和前沿技术。此外，详细阐述了HTML的基本语法和语义化的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Day1、前端介绍

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

1.前端简介

1.1前端技术栈

HTML（页面结构和内容）
CSS（样式）
JavaScript（行为）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RfUHR0JS-1658682292642)(C:\Users\林夕林\AppData\Roaming\Typora\typora-user-images\image-20220724162418372.png)]

1.2前端关注问题方面

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

1.3前端边界/前沿

node.js、ELECTRON、React Native、Web RTC、WebGL、WebASSEMBLY

1.4开发环境

浏览器：IE/Edge、Chrome、Firefox、Safari等
编辑器：VSCode、Vim、WebStorm等

2.HTML

2.1简介

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

HyperText：图片、标题、连接、表格等
Markup Language：标签（eg：<h1>Title<h1>）及标签上的属性（eg：<img src="1.jpg"/> src即为属性名，引号内为属性值）

<!doctype html>  <!--标记当前使用HTML文件使用版本，浏览器据此选择对应渲染模式-->
<html>   <!--html根标签，所有标签写在其中-->
	<head>  <!--head标签，存放页面源数据，比如页面标题及使用编码-->
		<meta charset="UTF-8">
		<title>网页标题</title>
	</head>
	<body>  <!--body标签内存放给用户真正的内容，比如文字、图片、视频等-->
		<h1>一级标题</h1>
		<p>段落内容</p>
	</body>
</html>

浏览器获取HTML文件后会将代码解析为DOM树

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3m1KyvbA-1658682292643)(C:\Users\林夕林\AppData\Roaming\Typora\typora-user-images\image-20220724165429651.png)]

2.2语法

标签和属性不区分大小写（建议小写）
空标签可以不闭合（eg：input、meta等）
属性值用西文引号包裹（建议双引）
某些属性值可以省略（eg：required、readonly）

标题header：<h1></h1>~<h6></h6>

列表list：<li></li> 和<dl></dl>

有序列表ordered list：<ol></ol>
无序列表unordered list：<ul></ul>
定义列表definition list：
- 标题definition term：<dt></dt>
- 描述definition description：<dd></dd>

实例：

<h2>学生排序</h2>
<ul>
	<li>小叶</li>
	<li>小林</li>
</ul>
<h2>选购清单</h2>
<ol>
	<li>apple</li>
	<li>orange</li>
</ol>
<h2>霸王别姬</h2>
<dl>
	<dt>导演：</dt>
		<dd>陈凯歌</dd>
	<dt>主演：</dt>
		<dd>张国荣</dd>
		<dd>张丰毅</dd>
		<dd>巩俐</dd>
</dl>

链接anchor：<a></a>

重要属性：href（Hypertext Reference 超链接），属性值为链接地址

图片image：<img></img> 音频audio：<audio></audio> 视频video：<video></video>

重要属性：src（source 源），属性值为文件地址/路径

其他属性：alt、controls、width等

输入input：

普通输入：<input> <textarea>

属性：placeholder（占位符，eg：<input placeholder="用户名">）；type（类型），属性值为类型

选择：

通过input的type属性的属性值checkbox（多选）、radio（与name属性结合，单选）实现；

通过<select><option></option></select>实现下拉多选

通过input的list属性与<datalist><option></option></datalist>结合实现提示输入

实例：

<input placeholder="用户名"/>
<input type="range"/>
<input type="number" min="0" max="9"/>
<input type="date" min="2022-07-24"/>
<textarea>文本区域</textarea>

<lable><input type="checkbox"/>apple</lable>
<lable><input type="checkbox" checked/>orange</lable>  <!--checked默认选项-->

<lable><input type="radio" name="sport"/>basketball</lable>  <!--实质通过name属性值实现互斥-->
<lable><input type=radio name="sport">football</lable>

<select>
    <option>1</option>
	<option>2</option>
    <option>3</option>
</select>

<input list="language">
<datalist id="language">   <!--通过list属性值来匹配id属性值-->
	<option>C</option>
	<option>C++</option>
    <option>Python</option>
</datalist>

引用：块引用（长引用）<blockquote></blockquote> 、多用于名字<cite></cite>（短引用）、多用于内容<q></q>（短引用）
code标签：<code></code>，可在外包裹<pre></pre>实现多行代码
强调标签：<strong></strong>常用于严重紧急事物；<em></em>常用于强调语气

<blockquote cite="http://www.baidu.com">   <!--cite属性可标注引用来源-->
    <p>鲁迅曾经说</p>
</blockquote>

<p>我喜欢阅读<cite>《C程序设计基础》</cite></p>
<p><cite>第一章</cite>介绍了<q>C语言</q>的历史</p>

<pre><code>
const int sum(int a,int b)
{return a+b;}</code>
</pre>

<p>投资前做好<strong>风险评估</strong></p>
<p><em>To</em> be,or not to be,<em>that</em> is the question</p>