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>

内容划分

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

header部分：页头
- nav部分
main部分：主体
- article部分：文章正文
aside部分
footer部分：页尾，参考链接/版权/备案等

语义化是什么？

HTML中的元素、属性及属性值都拥有某些含义
开发者应遵循语义来编写HTML
- 有序列表ol；无序列表ul
- lang属性表示内容所使用的语言

谁在用我们写的HTML？

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

语义化的好处

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

传达内容，而不是样式

<p style="font-size:32px">前端工程师的自我修养</p> ×

<h1>前端工程师的自我修养</> √

如何做好语义化

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

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

字节前端青训营-深入css
目录概念初始值计算值布局(Layout)是什么? 布局相关技术: display属性常规流Normal Flow 行级排版上下文块级排版上下文 Flex Box是什么? Flexibili ...
Android基础第六天｜字节跳动第四届青训营笔记
这是我参与「第四届青训营」笔记创作活动的的第6天端智能技术演进与实践文章目录端智能技术演进与实践课程回顾 01 什么是端智能技术 1.1 端智能是什么? 1.2 为什么要做端智能? 1.3 ...
第五届字节跳动青训营 - 寒假专场【前端后端】
青训营是字节跳动 ByteTech 社区发起的技术系列培训 & 人才选拔项目,面向在校大学生,旨在培养优秀且具有职业竞争力的开发工程师.青训营全程完全免费,不收取费用. 面向人群:在校大学 ...
字节跳动青训营--前端day7
文章目录前言一.Node.js 的应用场景 (why) 1. 前端工程化 2. web服务端应用 3. Electron跨端桌面应用二.Node.js 运行时结(what) 1. V8 ,lib ...
第五届字节跳动青训营寒假 —— 前端专场
第五届字节跳动青训营寒假 -- 前端专场文章目录第五届字节跳动青训营寒假 -- 前端专场青训营 - 前端练习题每日一练编程题前端编程题 [342. 4的幂](https://leetcod ...
前后端免费学，字节跳动青训营-暑假专场报名启动
亲爱的小伙伴,你准备好了吗? 第六届字节跳动青训营,来咯! 无论你是初学者还是有一定经验都可以在青训营找到属于自己的位置全方位课程讲解 & 项目实践指导让你轻松掌握「前端 or 后端」技 ...
前后端免费学｜第六届字节跳动青训营报名啦
线上活动,全程免费报名时间:2023年6月2日 - 2023年7月10日报名地址:点我报名,暑假一起学技术呀... 前言其实去年我就想参加青训营的,但是那时的我刚转完专业,觉得自己太菜了,单方面 ...
字节跳动青训营笔试题解
文章目录前言一.单选题二.多选题三.编程题 T1.旋转数组最大值题目思路代码 T2.社交圈题目思路代码四.简答题题目思路前言第五届字节跳动青训营-后端专场笔试题解,简单做 ...
字节跳动青训营笔记01
大家好,这里是我参加字节跳动[第五期青训营]的第一篇笔记.一小时多的课程里实现了快速入门Go语言,简要介绍了Go的优点,语法,包括与C语言的异同,以及map.切片等常用的数据结构:后半节课程主要介绍了 ...

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