前段语言串讲 | 青训营笔记

Hongrui_Jackson
158 阅读8分钟

1前段语言的基本能力

1.1html

  • create the structure->框架
  • 标签和元素

1.2css

1.3JavaScript

  • increase interactivity->交互

  • 借鉴C语言的基本语法

  • 借鉴java语言的数据类型和内存管理

  • 一些基本的语法

    • 7种基本的数据类型

      • String
      • Number
      • Boolean
      • Null
      • Undefined
      • Symbol
      • Object

    • 基本语法

      • var a = 7 + "2"

    • Object

      • var user = {
    name: "asada"
    yearOfBirth: 1988,
    calculateAge: function(){
    }
}

    • Function

      • function someName(param1, param2){
    var a = param1 + "love";
    return a;
}

1.4browser

2前端语言的协作配合

2.1css in html

  • Inline css

<p style="color: blue;">This is a paragraph.</p>

  • Internal css
<head>
    <style type = text/css>
        body {background-color: blue;}
        p {color: yellow;}
    </style>
</head>
  • External css
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

2.2javascript in html

2.3html in js

  • 动态修改
  • jsx

2.4CSS in JavaScript

  • CSS Module（避免冲突）

  • JSS

3html

  • 一门标记语言

3.1HTML DTD（文档类型定义）

  • 标签（元素）element：<tagname>...</tagname>

  • 文本Text

    • Text
    • <![CDATA[text]]>

  • 注释comment

    • <!--comments-->

  • DTD

    • <!Doctype html>

  • 处理信息

    • <?a1?>

3.2全部标签分类

  • 文档型

    • <!Doctype>
    • <head>
    • <body>

  • 闭合型

    • 闭合标签 <p></p>

    • 空标签

      • <br></br>
      • <img>
      • <input>

  • 换行型

    • 块级标签

      • <div>
      • <h1>,<h2>

    • 行内标签

      • <span>
      • <a>

  • H5新元素

    • 语义化标签

    • 媒体标签

      • <video>
      • <audio>
      • <embed>

    • 表单标签

      • <input type="date">
      • <input type="color">

    • 功能标签

      • <canvas>
      • <progress>

3.3HTML head标签

  • title：标题，全局唯一

  • base：向页面所有相对url提供前缀；全局唯一，不建议使用

  • meta：通常是约定好的键值对；例外：charset、http-equiv

  • link：rel决定类型，href决定引入地址

  • script：type指定mime类型，可内嵌代码，可外链文件

3.4HTML body功能性标签

3.5html ARIA

  • ARIA (Accessible Rich Internet Applications) 是一组属性，用于定义使残障人士更容易访问 Web 内容和 Web 应用程序（尤其是使用 JavaScript 开发的应用程序）的方法。

3.6html5表单增强

3.7html5 存储

3.8html5 PWA&AMP

3.9html5 Audio

//创建一个音频上下文
const audioCtx = new (window.AudioContext || window.webkitAudioContext);
//创建一个正弦振荡器
const osci = audioCtx.createOscillator();
//创建一个音量增幅器
const gain = audioCtx.createGain();
//正弦振荡器关联音量增幅器
osci.connect(gain);
//音量增幅器关联音频上下文的音频输出器
gain.connect(audioCtx.destination)
//开始正弦波动
osci.start();

3.9html5 video

const mediaSource = new MediaSource();

const video = document.createElement('video');

video.src = meidaSource;

mediaSource.addSourceBuffer(...);

video.play();

3.10SVG & Canvas

4交互范式

  • MVC

  • MVP

  • MVVM

附:html基本语法

1.引入

1.1简介

  • 认识网页

  • 五大浏览器和渲染引擎

  • Web标准

    • 结构：html：页面元素和内容
    • 表现：css：页面样式
    • 行为：JavaScript：页面交互

1.2HTML页面固定结构

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>网页的标题</title>
  </head>
  <body>
     网页的主体内容
  </body>
</html>

1.3开发工具vscode

！加回车生成骨架

open in browser插件，快速打开网页

2.HTML语法规范

2.1注释

<!--  -->
快捷键  ctrl + /

2.2标签的结构

<strong>strong the sentece</strong>
开始标签
    包裹的内容
结束标签

  • 常见标签由两部分组成：称为双标签

  • 少数标签由一部分组成，称为单标签，自成一体，无法包裹内容

2.3标签的关系

  • 父子关系（嵌套关系）

  • 兄弟关系（并列关系）

2.4排版标签

2.4.1标题标签

代码：h系列标签

只有6个级别

重要程度依次递减

<body>
    <h1>title</h1>
    <h2>title</h2>
    <h3>title</h3>
    <h4>title</h4>
    <h5>title</h5>
    <h6>title</h6>
</body>

  • 独占一行

  • 文字自动加粗

  • 文字都有变大

2.4.2段落标签

<p>这是段落标签</p>

  • 段落之间存在间隙

  • 独占一行

2.4.3换行标签

<br>

 单标签
 让文字强制换行

2.4.4水平分隔线

<hr>
独占一行

2.5文本格式化标签

b或strong   加粗
u或ins    下划线
i或em    倾斜
s或del    删除线


后面的突出重要性的强调的语境，重要是为了给程序员看

2.6媒体标签

2.6.1图片标签

场景：在网页中显示图片

<img src="" alt="">

单标签
img标签需要展示对应的效果需要借助标签的属性进行设置
属性之间没有顺序
属性之间以顺序隔开
可以有多个属性存在

src：目标图片的路径
    若网页和目标图片在同一个文件夹，路径直接写目标图片的名字即可（包括后缀名）
    绝对路径：往往从盘符或者从网络地址
    相对路径：同级或者下一级
    上一级目录：../
        可以叠加使用

alt：是替换文本
    当图加载失败的时候显示该文本
    
title：提示文本
    当鼠标悬停时，才显示的文本
    
width/height：调整大小
    只设置一个会自动等比例缩放

2.6.2音频标签

<audio src="リズと青い鳥 第一楽章「ありふれた日々」.mp3" controls autoplay loop></audio>
controls：
    显示播放控件
loop：
    循环播放
    
目前支持的格式
    mp3，wav，ogg

2.6.3视频标签

<video src=""></video>
其他属性和音频一样

支持的格式
    MP4，webm，ogg

2.7链接标签

a标签


<a href="https://www.bilibili.com/">test</a>

空链接href写#

target：目标网页的打开形式
    _self:默认值，在当前窗口中跳转
    _blank:在新窗口中跳转（保留原网页）

2.8列表标签

2.8.1无序列表

无顺序之分

标签组成：
    ul：表示无序列表的整体，用于包裹li标签
    li：表示无序列表的每一项，用于包含每一行的内容
    
显示特点：
    默认前方会有一个黑点
注意：
    ul只能包含li
    li可以包含任意内容

2.8.3有序列表

有顺序
标签组成：
    ol：有序列表的整体
    li：表示有序列表的每一项，用于每一行的内容
显示特点：
    每一项前默认显示序号标识
注意点：
    ol标签只允许包含li标签
    li标签可以包含任何内容

2.8.4自定义的列表

通常在网页底部的导航中会使用

标签组成：
    dl：用于包裹dl/dd标签
    dt：表示自定义列表的主题
    dd：表示自定义列表的针对主题的每一项内容
显示特点
    dd前会默认显示缩进效果
注意:
    dl标签只允许包含dt/dd标签
    dt/dd标签可以包含任意内容

2.9表格标签

2.9.1表格的基本标签

table：表格整体，可用于包裹多个tr
tr：表格每行，可用于包裹td
td：表格单元格，可用于包裹内容

2.9.2表格基本属性


border：边框宽度
width：表格宽度
height：表格高度

实际开发时针对样式效果推荐用CSS设置

2.9.3表格标题和表头单元格标签

caption：表格大标题，默认在表格整体顶部居中位置显示
th：表头单元格，表示一列小标题，通常位于表格第一行，默认内部文字加粗并居中显示

注意点：
    caption写在table内部
    th标签写在tr标签内部，用于替换td

2.9.4表格的结构标签

头部，主体，底部

thead：表格头部
tbody：表格主体
tfoot：表格底部

表格结构标签内部可包裹tr标签

2.9.5合并单元格

垂直合并，跨行合并rowspan
跨列合并，colspan

写在td里面
不能跨结构标签合并

2.10表单标签

  • 能够使用 表单相关标签和属性，实现网页中表单类网页结构搭建

2.10.1input系列标签

  • 基本概述
input是一个单标签

可以通过type属性值的不同展示不同的效果

type属性值
    text：文本框，用于输入单行文本
    password：密码框，用于输入密码
    radio：单选框，用于多选一
    checkbox：多选框，用于多选多
    file：文件选择，上传文件
    submit：提交按钮，用于提交
    reset：重置按钮，用于重置
    button：默认无功能，之后配合js添加功能
  • input占位符
placeholder：占位符，提示用户输入内容的文本
  • 单选框
type属性值：radio
常用属性：
    name：分组，有相同name属性值的单选框为一组，一组中只能有一个被选中
    checked：默认选中
  • 上传多个文件
multiple
  • 不同的按钮属性
submit：提交按钮，点击后将数据给后端服务器
reset：重置按钮，点击之后恢复表单默认配置
button：普通按钮，默认无功能，之后配合js添加功能
    
    属性value添加按钮的名字

需要配合form标签
    form标签将表单标签一起包裹起来使用

2.10.2button按钮标签

  • button标签
type属性值
    submit
    reset
    button
谷歌浏览器button默认是提交标签
button是双标签更便于包裹其他的文字、图片等

2.10.3select下拉菜单标签

标签组成：父子级
    select标签：下拉菜单的整体
        option标签：下拉菜单的每一项
    
常见属性
    selected：下拉菜单的默认选中

2.10.4textarea文本域标签

可以输入多行文本的表单控件

常见属性
    cols：规定了文本域内可见的宽度
    rows：规定了文本域内可见的行数
注意点
    右下角可以拖拽改变大小
    样式效果往往推荐使用CSS设置

2.10.5label标签

场景：常用于绑定内容与表单标签的关系
标签名：label
使用方法：
    1
        使用label标签把内容包裹起来
        在表单标签上添加id属性
        在label标签的for属性中设置对应的id属性值
    2
        用label标签把内容和表单标签一起包裹起来
        需要吧label标签的for属性删除即可
        
<input type="radio" name="gender" id="10"><label for="10">male</label>
<label><input type="radio" name="gender">female</label>

2.11语义化标签

2.11.1没有语义的布局标签div和span

div标签：一行只显示一个（独占一行）
span标签：一行可以显示多个

2.11.2有语义的布局标签

场景：一般在做手机端网页的时候会使用

暂时无法在飞书文档外展示此内容

2.12字符实体

目标：能通过字符实体在网页中显示特殊的符号

HTML中的空格合并现象
    网页不认识多个空格
常见的字符实体(注意有分号)
    空格： &nbsp;
avatar
文章
阅读
粉丝