林夕林呐
林夕林呐

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

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：

    Title

    ）及标签上的属性（eg： src即为属性名，引号内为属性值）

doctype html>  
<html>   
	<head>  
		<meta charset="UTF-8">
		<title>网页标题title>
	head>
	<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>~

列表list：

  • 和

    1. 有序列表ordered list：
      1. 无序列表unordered list：
        • 定义列表definition list：
          • 标题definition term：
          • 描述definition description：

        实例：

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

        链接anchor：

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

        图片image： 音频audio： 视频video：

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

        ​ 其他属性：alt、controls、width等

        输入input：

        • 普通输入：