Day1 前端语言串讲 | 青训营

铃至
86 阅读1分钟

前端语言基本能力

HTML

Create the structure

  • 基本语法
  1. Element <tag> ... </tag>
  2. Text (text, <![CDATA[text]]>)
  3. Comment <!--comments-->
  4. DTD Document Type Defination <!Doctype html>
  5. ProcessingInstruction <?a 1?>
  • 标签分类
  1. 文档型 <!DOCTYPE html> <head> <body>
  2. 闭合型
    1. 闭合标签 <p> </P>
    2. 空标签 <br> <img> <input>
  3. 换行型
    1. 块级标签 <div> <h1> <h2>
    2. 行内标签 <span> <a>
  4. H5新元素
    1. 语义化标签 更好地维护结构 用对比不用好，不用比用错好
    2. 媒体标签 <video> <audio> <embed>
    3. 表单标签 <input type = "date"> <input type = "color">
    4. 功能标签<canvas> <progress>

head 标签

Pasted image 20230726103947.png

H5

  • 语义化标签 <Header></header> <nav></nav> <footer></footer>
  • 表单增强
  • 存储 Pasted image 20230726154134.png
  • PWA & AMP Pasted image 20230726154234.png
  • Audio
  • Video
  • 二进制 Buffer, Blob, File, FileReader, Text, ArrayBuffer, TypedArray, DataView Pasted image 20230726154528.png
  • API H5提供了一些API，例如GeoLocation， Drag&Drop等

CSS

stylize the website 基本语法

selector {
	property: value;
	/*more pair here*/
}

Javascript

increase interactivity

JS特点 Pasted image 20230726100301.png

  1. 数据类型 String, Number, Boolean, Null, Undefine, Symbol Object (Array, Function)
  2. 基本语法 var a = 2 + "7";
  3. 对象
var user = {
	name: "user",
	yearOfBirth: 1988,
	calculateAge: function(){
		//function 	
	}
}
  1. 函数
function someName(param1, param2){
	var a = param1 + " love " + param2;
	return a; // optional 
}

someName("A", "B");

Browser

Pasted image 20230726101740.png

Pasted image 20230726101709.png

总结

之后的内容我就是当作了解去听的，也没有记什么笔记。
今天的内容是串讲了前端三件套，其中复习了一下三者各自的特点与基本语法，并讲解了HTML5的相关新特性，和涉及到一些Web内容。
内容很广，涉及的东西很多，但大多只是简单地以串讲的形式带过一下，我还需要不断去学习这其中每一个知识点，丰富完善自己的知识体系。

avatar
文章
阅读
粉丝