前端学习 HTML5和CSS3新特性 高级技巧 JavaScript基础语法

前端学习 专栏收录该内容
2 篇文章 0 订阅

##HTML5和CSS3提高
###HTML5的新特性
HTML5的新增特性主要是针对于以前的不足,增加了一些新的标签,新的表单和新的表单属性等;
这些新特性都有兼容性问题,基本是IE9+以上的版本浏览器才支持,如果不考虑兼容性问题,可以大量使用这些新特性;

  1. HTML5新增的语义化标签
    之前布局,基本用div来做,div对于搜索引擎来说,是没有语义的;
    <header>:头部标签
    <nav>:导航标签
    <article>:内容标签
    <section>:定义文档某个位置
    <aside>:侧边栏标签
    <footer>:尾部标签
    注意:
    这种语义化标签主要是针对搜索引擎的;
    这些新标签,页面中可以使用多次
    IE9中,需要把这些元素转换为块级元素
    移动端更喜欢使用这些标签
    HTML5还增加了许多标签

  2. HTML5新增的多媒体标签
    使用他们可以很方便的在页面中嵌入音频和视频,而不再使用flash和其他浏览器插件,主要包含两个:

    1. 音频标签<audio>
      当前<audio>标签支持三种视频格式:MP3,Wav,Ogg,尽量使用MP3格式
      <audio src="URL" controls="controls"> </audio>
    	<audio controls="controls">
    		<source src="audio.mp3" type="video/mp3">
    		<source src="audio.ogg" type="video/ogg">
    		您的浏览器不支持audio标签
    	</audio>
    

    audio常见属性:
    autoplay="autoplay" 音频就绪自动播放(谷歌禁用)
    controls="controls" 向用户显示播放控件
    loop="loop" 播放完是否继续播放该音频,循环播放
    src="URL" 音频URL

    1. 视频标签<video>
      当前<video>标签支持三种视频格式:MP4,WebM,Ogg,尽量使用MP4格式
      <video src="URL" controls="controls"> </video>
    	<video width="320" height="240" controls="controls">
    		<source src="movie.mp4" type="video/mp4">
    		<source src="movie.ogg" type="video/ogg">
    		您的浏览器不支持video标签
    	</video>
    

    video常见属性:
    autoplay="autoplay" 视频就绪自动播放(谷歌禁用,谷歌浏览器需要添加muted来解决自动播放问题)
    controls="controls" 向用户显示播放控件
    width="像素" 设置播放器宽度
    height="像素" 设置播放器高度
    loop="loop" 播放完是否继续播放该视频,循环播放
    preload="auto/none" 预先加载视频/不预先加载(有autoplay属性时会忽略该属性)
    src="URL" 视频URL
    poster="imgURL" 加载等待的画面图片
    muted="muted" 静音播放

  3. HTML5新增的input表单
    验证的时候必须添加form表单域,点击提交按钮就可以验证表单;
    type="email":限制用户输入必须为Email类型
    type="url":限制用户输入必须为URL类型
    type="date":限制用户输入必须为日期类型
    type="time":限制用户输入必须为时间类型
    type="month":限制用户输入必须为月类型
    type="week":限制用户输入必须为周类型
    type="number":限制用户输入必须为数字类型
    type="tel":手机号码
    type="search":搜索框

    type="color":生成一个颜色选择表单

  4. HTML5新增的input表单属性
    required="required":必填,不能为空
    placeholder="":提示文本,存在默认值时不显示
    修改颜色:
    input::placehoder { color: pink;}
    autofocus="autofocus":自动聚焦
    autocomplete="off/on":当用户在字段开始输入时,浏览器基于之前输入过的值,应该显示出在字段中填写的选项。默认已打开,需要放在表单内,同时加上name属性,同时成功提交
    multiple="multiple":可以多选文件提交

###CSS3的新特性

  1. CSS3现状
    新增的CSS3特性有兼容性问题,ie9+才支持
    移动端支持优于PC端
    不断改进中
    应用相对广泛
    现阶段主要学习:新增选择器,盒子模型以及其它特性

  2. 新增选择器

    1. 属性选择器(类选择器,属性选择器,伪类选择器,权重都是0.0.1.0)
      属性选择器可以根据元素特定属性来选择元素,这样可以不借助类或者id选择器。
      E[att]:选择具有att属性的E元素
      E[att="val"]:选择具有att属性且属性值等于val的E元素
      E[att^="val"]:选择具有att属性且属性值以val开头的E元素
      E[att$="val"]:选择具有att属性且属性值以val结尾的E元素
      E[att*="val"]:选择具有att属性且属性值含有val的E元素

    2. 结构伪类选择器
      结构伪类选择器主要根据文档结构来选择元素,常用语根据父级选择器里面的子元素
      E :first-child:匹配父元素中的第一个子元素E
      ul li:frist-chlid(权重0.0.1.2)
      E :last-child:匹配父元素的最后一个E元素
      E :nth-child(n):匹配父元素中的第n个子元素E,n可以是数字(从1开始),关键字(even偶数/odd奇数)和公式(里面只能是n字母,从0开始,3n,2n,n+1(第一个后面),-n+5(前5个))
      E :first-of-type:指定类型E的第一个
      E :last-of-type:指定类型E的最后一个
      E :nth-of-type(n):指定类型E的第n个
      区别:
      nth-child会把所有的子元素排序号,先看序号,之后看前面的E,全部匹配才能选择出来;
      nth-type-of会把指定元素的盒子排列序号;

    3. 伪元素选择器
      利用CSS创建新标签元素,而不需要HTML标签,简化HTML结构(遮罩层,等)
      ::before:在元素内部前面插入内容
      ::after:在元素内部后面插入元素
      注意:
      before和after创建一个元素,但是属于行内元素
      新创建的这个元素在文档树中找不到,所以称为伪元素
      语法element::before{}
      before和after必须有content属性
      before在父元素内容的前面创建元素,after在父元素内容后面插入元素
      伪元素选择器和标签选择器一样,权重为0.0.0.1

      1. 伪元素字体图标(记得加载字体文件)
      	p::before {
      		position: absolute;
      		right:20px;
      		top: 10px;
      		content: "\e91e"
      		font-size: 20px;
      	}
      
      1. 仿土豆效果
      	.demo::before {
      		content: '';
      		position: absolute;
      		top: 0;
      		left: 0;
      		width: 100%;
      		height: 100%;
      		display: none;
      		background-color: rgba(0,0,0,.3);
      	}
      
      	.demo:hover::before{
      		display: block;
      	}
      
      1. 清除浮动
      	.clearfix:agter {
      		content: "";
      		display: block;
      		height: 0;
      		clear: both;
      		visibility: hidden;
      	}
      
  3. CSS3盒子模型
    box-sizing: content-box/boder-box;
    content-box:盒子实际大小等于原大小+padding+border(默认)
    boder-box:盒子实际大小等于指定大小

  4. 图片模糊
    filter: 函数();滤镜
    eg: filter: blur(5px);:blur模糊处理,数值越大越模糊;

  5. calc函数(计算)
    width: calc(100%-80px);'+-*/':可计算

  6. 过渡:
    不使用flash,JS,经常和:hover一起使用,
    transition:要过渡的属性 花费时间 运动曲线 何时开始;
    属性:想要变化的CSS属性,宽高,背景颜色,内外边距等,所有:all;
    花费时间:单位秒
    运动曲线:默认ease(渐慢),liner(匀速),ease-in(加速),ease-out(加速),ease-in-out(先加速后减速)(可以忽略)
    何时开始:延迟触发,默认0s(可忽略)
    谁做过渡给谁加

#JavaScript
JavaScript是一种运行在客户端的脚本语言(Script脚本);
脚本语言:不需要编译 ,运行过程中由js解释器(js引擎)逐行进行解释并执行;
现在也可以基于Node.js技术进行服务器端编程;

##JavaScript的作用

  • 表单动态校验(密码强度检测)(JS产生的最初目的)
  • 网页特效
  • 服务端开发(Node.js)
  • 桌面程序(Electron)
  • APP(Cordova)
  • 控制硬件-物联网(Ruff)
  • 游戏开发(cocos2d-js)

##HTML/CSS/JS的关系

  1. HTML/CSS标记语言–描述类语言
    HTML决定网页结构和内容–身体
    CSS决定网页呈现给用户的模样–衣服
  2. JS脚本语言–编程类语言
    实现业务逻辑和页面控制(决定功能)–动作

##浏览器执行JS过程
浏览器分为两部分:渲染引擎JS引擎
渲染引擎:用来解析HTML与CSS,俗称内核,比如chrome浏览器的blink,老版本的webkit;
JS引擎:也称为JS解释器,用来读取网页中的JavaScript代码,对其处理后运行,比如chrome浏览器的V8;
浏览器本身并不会执行JS代码,而是通过内置JavaScript引擎来执行JS代码,JS引擎执行代码时逐行解释每一句源码,然后由计算机去执行,所以JavaScript语言归脚本语言,会逐行解释执行;

##JS的组成

  1. JS基础
    1. ECMAScript(JavaScript语法)
      ECMAScript是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用广泛,往往被称为JavaScript(网景公司,艾奇)或JScript(微软公司),但实际上后两者是ECMAScript语言的实现和扩展;
      ECMAScript规定了JS的编程与法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准;
  2. JSAPI
    1. DOM(页面文档对象模型)
      文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作(大小,位置,颜色等);
    2. BOM(浏览器对象模型)
      浏览器对象模型(Browser Object Model,简称BOM),是指浏览器对象模型,它提供了独立于内容的,可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框,控制浏览器跳转,获取分辨率等;

##JS学习
###书写位置
JS有3种书写位置:

  1. 行内
    直接写到元素内部
    <input type="button" value="唐伯虎" onclick="alert('秋香姐')">
    1. 可以将单行或少量JS代码在HTML标签的事件属性中(以on开头的属性),如onclick;
    2. 在HTML推荐使用双引号,在JS中使用单引号;
    3. 可读性差,在html中编写大量Js代码时,不方便阅读;
    4. 引号易错,引号多层嵌套匹配时,非常容易搞混;
    5. 特殊情况下才使用;
  2. 内嵌
    <script> </script>
    1. 可以将多行代码写到标签中;
    2. 内嵌JS是学习时常用的方式;
  3. 外部
    <script src="URL"> </script>
    1. 在标签中不能写代码
    2. 适合js代码比较大的情况
    3. 分离

###注释

  1. 单行注释://
  2. 多行注释:/**/

###输入输出
alert(msg):浏览器弹出警示框;
console.log(msg):浏览器控制台打印输出;
var info = prompt(info);:浏览器弹出输入框;

###变量
申请空间存放变量;
先声明再赋值;
var name;
name = 10;
直接初始化;
var name = 18;
多个变量初始化:

var name = '',
	jaj = '',
	dfd = '';

默认值为undefined(未定义);
字母,数字,_,$组成,区分大小写,不能以数字开头,不能是关键字,驼峰命名法(myFristName)

###数据类型
弱类型语言,动态语言:数据类型不确定,运行过程中动态分配,程序运行时同一个变量数据类型可变;
简单数据类型(默认值):Number(0),String(""),Boolean(false),Undefined(undefined),Null(null);
复杂数据类型:object;

Number:
八进制:010;(0开头)
十六进制:0x1f;(0x开头)
最大值:Number.MAX_VALUE;//1.7976931348623157e+308
最小值:Number.MIN_VALUE;//5e-324
(负)无穷大:(-)Infinity;
非数值:NaN;
判断是否是数字:isNaN(参数);
String:
任意文本:’’(推荐)/"";
JS可以单引号双引号互相嵌套:外双内单,外单内双
转义符:
\n,\,’,",\t,\b(空格)
str.lenth;
str1+str2/Number;只要有一个字符串都可以拼接;
‘12’+12=‘1212’
Boolen:
true参与加法运算当1,flase:0;
Undefined,Null:
null+‘1’=null1

typeof var:得到数据类型;
prompt得到的是字符型;

转换数据类型:
num.toString();
String(num);
1+’’;隐式转换
parseInt(string);整数数值/取整/去掉字符单位(120px)
parseFlost(string);浮点数数值/去单位
Number(string);强制转换

    • / ‘12’-0;隐式转换
  • 1
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值