HTML5_提供的新功能_less 编译_

时间 2019-11-08

标签 html5 html 提供功能编译栏目 HTML5 繁體版

原文原文链接

HTML5_提供的新功能javascript

class 操做
- ele.classList（注意：高版本的 IE 都不支持）
  - - 获取 <div id="ele" class="... ..."></div>列表
  - ele.classList.add("current");
  - ele.classList.remove("current");
  - ele.classList.toggle("current"); /* 删除返回 false */

元素新属性
conteneditable
- 内容可编辑性
- <div contenteditable="true"></div>

HTML5 容许自定义属性，操做标签上的属性
<div id="ele" data-warhorse="战马"></div>
- 读自定义的属性
  - ele.getAttribute("data-warhorse");
  - ele.dataset.warhorse;
- 写自定义的属性
  - ele.setAttribute("data-warhorse", "战马山庄");
  - ele.dataset.warhorse="战马山庄";

<div id="ele" data-war-horse="战马"></div>
- 读： ele.dataset.warHorse;
- 写： ele.dataset.warHorse = "战马山庄";

属性分为
- <> 标签上的属性 attributes
  - 读： ele.getAttribute("id");
  - 写： ele.setAttribute("id", "big_box");
  - 之后只要看到 Attribute，就是操做 <> 标签上的属性

- 对象上的属性 var obj = {name:"kjf", age="18"}
  - 读： obj.name; 或者 obj["name"];
  - 写： obj.name="God"; 或者 obj["age"]="180000";
    - 动态添加属性： obj.addr="The Hell 1024.";

- 有些属性既是标签上的属性，也是对象上的属性
  - id
  - src

HTML5 表单 <form action="服务器地址">
<input name="test" type =
"email" ?test=951932321%40qq.com
"tel" ?test=138654798
"url" ?test=http
"search" ?test=hfhfghfg 有一个 X 能够将内容清空
"number" ?test=3 有上/下按键调整值的大小
"number" min="-30" max="50" step="10" 每10个调整一次，大于-30，小于50

"range" ?test=30 滑动条，提交数值后回到默认位置（50）
"range" min="-30" max="50" step="10" 每10个调整一次，大于-30，小于50
"color" ?test=%23000000 会出现一个颜色选择器
"datetime-local" ?test=2018-11-10T22%3A00 出现一个日期选择器（年/月/日时分秒）
"time" ?test= 时/分/秒选择器
"date" ?test= 年/月/日选择器
"week" ?test= 某年第n个周选择器
"month" ?test=2018-11 某年第n个月选择器

新属性
placeholder
<input type="text" name="user_name" placeholder="请输入用户名">
<input type="password" name="user_password" placeholder="请输入密码">
改变用户输入文本样式
- input[type="text"] { color: blue; }
改变placeholder 的文本样式
- input[type="text"]::-webkit-input-placeholder { color: olive; }

autocomplete 是否保存用户默认值，默认为 on。
<input type="text" name="user_name" autocomplete="off"> 关闭选择提示为 off

autofocus 自动获取焦点
<input type="text" name="user_name" autofocus="autofocus">

required 验证类，表示此表单项不能为空
<input type="text" name="user_name" required="required">

less 编译（三种 CSS预处理器之一） lesscss.cn

CSS 中出现的计算css

大屏手机，小屏手机____等比计算java

less 概论
其实也是 CSS 样式，只不过是 动态样式语言
增长了变量，Mixin，函数等特性，使得 CSS 更易维护和扩展
less 既能够运行在 客户端，也能够借助 Node.js 在服务器端运行

less 初次使用
less 支持原生 js，node
sass 支持 ruby 环境
stylus 支持 node 开发项目使用

使用 less 让元素 垂直水平居中

/**** 导入 less.js 包 ****/ <script type="text/javascript" src="./js/less.min.js"> 
<style type="text/less">    /**** 修改样式表类型 ****/ @zero: 0; /**** 变量 的定义 ****/
    * {
        margin: @zero;    /**** 变量 的使用 ****/
        padding: @zero;
    }

    #wrap {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto
        
        width: 600px;
        height: 600px;
        background-color: blue; #box {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto
        
                width: 600px;
                height: 600px;
                background-color: blue;
        }
    }
<style>

less 编译工具

http://koala-app.com/node

项目根文件夹下新建一个 "css" 文件夹
建立 index.less 文件，编写 less 代码
@zero: 0;
@grey: #2a2a2a;
将整个项目 css 文件夹拖到 koala 软件中，按 refresh 按键编译

注释

//web

/* */面试

选择器变量
定义

@xzq: wrap;sass

使用

#@{xzq} { background-color: skyblue; }ruby

属性变量
定义

@w: width;服务器

使用

@{w}: 500px;app

url 变量 @url

变量的延迟加载（面试题）
第一种状况

/**** 属性 three 后面是 数字几****/
@var: 0;
.wrap {
    @var: 1;
    .box{
        @var: 2;
        width: @var;
        @var: 3;
    }
    width: @var;
}
/****
    先找最内层的 子元素 .box
    不论定义多少同名变量，老是 生效 最后一个 @var: 3;

    再看上一层 父元素，屏蔽 子元素 进行分析
****/
.wrap{
    width: 1;
}

.wrap .box {
    width: 3;  
}

第二种状况

/**** 属性 three 后面是 数字几****/
@var: 0;
.wrap {
    @var: 1;
    .box{
        width: @var;
    }
    width: @var;
}
/**** ★★★
    先找最内层的 子元素 .box 不论定义多少同名变量，老是 生效 最后一个; 可是若是 子元素 中找不到，则到上一层 父元素 去找 再看上一层 父元素，屏蔽 子元素 进行分析
****/
.wrap{
    width: 1;
}

.wrap .box {
    width: 1;  
}

嵌套选择器
子元素
nth-child
& 表明当前元素前面的全部元素
:hover
交集选择器
元素 class 不只要有 start 还要有 active
混合 mixin（less 函数）的形式
- mixin.less 和 index.less 都为自行编写，而后由 koala 软件编译，生成 index.css 和 mixin.css

mixin.less

.ele_center(@width:100px, @height:100px, @color:#ccc){
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;

    width: @width;
    height: @height;
    background-color: @color;
}

index.css

/**** Mixin ,  CSS Function ****/

/*  封装一个混合
        普通 混合
        参数 混合
        默认值 混合
    Bootstrap 的栅格源码都是用 less 写的

    引入一个外部的 .less 文件
        @import "mixin/mixin.less"

 */
@import "mixin/mixin.less";

#wrap {
    /* 调用混合 */
    .ele_center(@width: 600px, @height: 600px, @color:#110099);

    >#box1 {
        /* 调用混合 */
        .ele_center(@width: 300px, @height: 300px);

        >#box2 {
            /* 调用混合 */
            .ele_center(@color:#808000);
        }
    }
}

HTML5_提供的 新功能_less 编译_

HTML5_提供的新功能_less 编译_