从零开始学前端

131 阅读3分钟

导读

其实已经断断续续的学习一段时间了,只是现在觉得基础很不扎实,因为昨天的一场笔试直接让我用原生Javascript写页面实现动态加载,然后愣住了没有头绪了,不知道该从何下手不知道该怎么写了,怎么处理了。让我对自己的知识产生了一个很大的怀疑觉得之前的时间是不是白费了呢!但是我也不想就这也认输这样就承认自己不行不可以!

从头开始新的融会贯通

  • 回顾一下HTML 通过掘金大佬的总结的文章总结一下知识点

html篇--这可能是目前较为全面的html面试知识点了吧 「2021」高频前端面试题汇总之HTML篇

先看这两篇吧! 小伙伴们可以给我推荐一下。我现在的状态接是一边学习一边找实习,找不到的话等放假了就再看看吧!

常见的HTML5语义化标签

<header></header> 页面头部标签

<nav></nav> 导航栏

<section></section> 区域块 有语义化的Div 应该是类似于Vue的template 但是Vue中的template不会在页面显示只是起到一个分块的作用吧

<main></main> 主要区域

<article></article> 定义文章的内容

<aside></aside> 侧边栏 可以使用侧边栏写弄一些广告啊之类的

<footer></footer>底部区域 一般是写一些公司成立时间和其他之类的东西

HTML5的新特性

1.audio 音频 <audio src = '' contorls(控制面板) autoplay(自动播放) loop(循环播放)='true'></audio>

2.video 视频 <video src = '' poster='imgs/baron.jpg' controls></video>

- poster 指定的视频没有下载完毕指定视频的第一帧画面
- controls控制面板
-  width 设置视频的占比宽度
- height 设置视频的占比高度
- source指定视频源 不同的浏览器对视频的格式不一样
`
    <video>
      <source src='baron.mp4' type='video/mp4'></source>
    </video>
  `
  

3.表单

-   email :能够验证当前输入的邮箱地址是否合法

-   url : 验证URL

-   number : 只能输入数字,其他输入不了,而且自带上下增大减小箭头,max属性可以设置为最大值,min可以设置为最小值,value为默认值。

-   search : 输入框后面会给提供一个小叉,可以删除输入的内容,更加人性化。

-   range : 可以提供给一个范围,其中可以设置max和min以及value,其中value属性可以设置为默认值

-   color : 提供了一个颜色拾取器

-   time : 时分秒

-   data : 日期选择年月日

-   datatime : 时间和日期(目前只有Safari支持)

-   datatime-local :日期时间控件

-   week :周控件

-   month:月控件
表单属性
- placrholder :提示信息
- autofocus :获取焦点
- required:不能为空
- multiple: 选择多个文件
-form = "表单ID"
表单事件
 - oninput : 输入框发生变化时会触发的事件
 - oninvalid :验证不通过时触发
 

4.web存储方式 HTML5有两种在客户端存储数据的新方法 :

 - localStorage 没有时间限制的数据存储
 - sessionStorage 针对session的数据存储

5.画布

- <canvas>通过JavaScript绘制图像

6.拖放

- 抓取对象拖到另一个位置

7.SVG

-SVG指可伸缩矢量图形

8.地理定位

-Geolocation

今天就先这样吧 算是把HTML复习了一下