分类 编程语言 下的文章

描述:每一段的第一个字变大下沉,每一段的第一行的文字颜色发生改变,无论屏幕多大,每一行显示多少文字,都是第一行文字颜色发生改变。鼠标选中文字之后,文字的样式发生改变。
示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首字下沉,第一行文字变色,选中文字样式</title>
    <style>
        body, ul, dl, dt, dd {
            margin: 0;
            padding: 0;
        }

        body {
            font-family: '微软雅黑';
            background-color: #F7F7F7;
            color: #666;
        }

        .content {
            width: 960px;
            margin: 0 auto;
            font-size: 20px;
        }

        p {
            text-indent: 40px;
            line-height: 1.5;
        }

        p:first-child {
            text-indent: 0;
        }

        p:first-letter{
            font-size:40px;
            float: left;
            color:red;
        }

        p::first-line{
            color:blue;
        }
        /* ::selection 表示当前选中的区域 , 通过设置 color  background*/
        p::selection{
            background-color: rgba(255,0,0,0.3);
            color:green;
        }
    </style>
</head>
<body>
<div class="content">
    <p>格物致知是中国古代儒家思想中的一个重要概念,源于《礼记‧大学》八目─格物、致知、诚意、正心、修身、齐家、治国、平天下─所论述的『欲诚其意者,先致其知;致知在格物。物格而后知至,知至而后意诚』此段。致知即获得知识而获得知识的途径在于在于认识。研究万事万物。致知在格物。 格物的意思是认识,研究万事万物的道理,通过对万事万物的认识,研究后才能获得知识,即格物而后知至。致知在格物,格物而后知至强调了格物,致知二着相辅相成,相得益彰的关系。</p>
    <p>美籍华裔物理学家,丁肇中先生的报告中的一篇漫谈式的议论文。作者先阐明格物致知精神在今天的重要性,而后揭示格物致知的真正意义。他曾在论文中提到。现代学术的基础就是实地的探察,就是现在所谓的实验。他在一系列论述中有着重提到科学进展的历史告诉我们,新的知识只能通过实地实验而得到。</p>
</div>
</body>
</html>

CSS3新增了许多灵活查找元素的方法,极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。

属性选择器

其特点是通过属性来选择元素,具体有以下5种形式:

  • E[attr] 表示存在attr属性即可;例如:div[class]
  • E[attr=val] 表示属性值完全等于val;例如:div[class=mydemo]
  • E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置;例如:div[class*=mydemo]
  • E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置;例如:div[class^=mydemo]
  • E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置;例如div[class$=demos]

伪类选择器

  • link、:active、:visited、:hover
  • 以某元素相对于其父元素或兄弟元素的位置来获取无素的结构伪类。
  • 通过E来确定元素的父元素。

    • E:first-child第一个子元素
    • E:last-child最后一个子元素
    • E:nth-child(n) 第n个子元素,计算方法是E元素的全部兄弟元素;
      div>ul>li:nth-child(3){
             color: deeppink;
    }  
    • 第三个元素

    E:nth-last-child(n) 同E:nth-child(n) 相似,只是倒着计算;

    div>ul>li:last-child(2){
           color: deeppink;
    }
    • n遵循线性变化,其取值0、1、2、3、4、... 但是当n<=0时,选取无效。

    选中所有的奇数的li

    li:nth-child(2n-1){
        color: red;
    }
    • 选中所有的7 的倍数的li
    li:nth-child(7n){
        color: red;
      }
    • 选中前面五个

      li:nth-child(-1n+5){
       color: red;
      }
    • 选中后面五个

      li:nth-last-child(-1n+5){
      color: red;
      }
    • 所有的偶数
     li:nth-child(even){
        color:red
    }
    • 所有的奇数
     li:nth-child(odd){
        color:blue;
     }
    • n可是多种形式:nth-child(2n)、nth-child(2n+1)、nth-child(-1n+5)等;
    • E:empty 选中没有任何子节点的E元素;(使用不是非常广泛)没有任何的子元素,包括空格.
  • 目标伪类
    E:target 结合锚点进行使用,处于当前锚点的元素会被选中;

     <li>
        <a href="#title1">CSS (层叠样式表)</a>
     </li>
     <h2 id="title1">CSS (层叠样式表)</h2> 
     h2:target{
       color:red;
     }    

    伪元素选择器

    E:after、E:before 在旧版本里是伪类,在新版本里是伪元素,新版本下E:after、E:before会被自动识别为E::after、E::before,按伪元素来对待,这样做的目的是用来做兼容处理。
    E:after、E:before通过 css 模拟出来html标签的效果,必须有content属性才行;
    E::first-letter文本的第一个字母或字(如中文、日文、韩文等);
    E::first-line 文本第一行; 文本第一行高亮.
    E::selection 可改变选中文本的样式;

描述:
用户点击Tab栏上面的标题,下面的内容跟着改变,用Html5中新的标签及API制作,所以兼容性不好。
示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tab栏的切换</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #F7F7F7;
        }

        .tabs {
            width: 400px;
            margin: 30px auto;
            background-color: #FFF;
            border: 1px solid #C0DCC0;
            box-sizing: border-box;
        }

        .tabs nav {
            height: 40px;
            text-align: center;
            line-height: 40px;
            overflow: hidden;
            background-color: #C0DCC0;
            display: flex;
        }

        nav a {
            display: block;
            width: 100px;
            border-right: 1px solid #FFF;
            color: #000;
            text-decoration: none;
        }

        nav a:last-child {
            border-right: 0 none;
        }

        nav a.active {
            background-color: #9BAF9B;
        }

        .cont {
            overflow: hidden;
            display: none;
        }

        .cont ol {
            line-height: 30px;
        }

    </style>
</head>
<body>
<div class="tabs">
    <nav>
        <a href="javascript:;" data-cont="local">国内新闻</a>
        <a href="javascript:;" data-cont="global">国际新闻</a>
        <a href="javascript:;" data-cont="sports">体育新闻</a>
        <a href="javascript:;" data-cont="funny">娱乐新闻</a>
    </nav>
    <section class="cont" id="local" >
        <ol>
            <li>11111111111111</li>
            <li>11111111111111111111</li>
            <li>111111111111111</li>
            <li>11111111111111111111</li>
            <li>11111111111111111111</li>
            <li>11111111111111111111</li>
            <li>11111111111111111111</li>
        </ol>
    </section>
    <section class="cont" id="global">
        <ol>
            <li>2222222222222222222222</li>
            <li>2222222222222222222222</li>
            <li>2222222222222222222222</li>
            <li>2222222222222222222222</li>
            <li>2222222222222222222222</li>
            <li>2222222222222222222222</li>
        </ol>
    </section>
    <section class="cont" id="sports">
        <ol>
            <li>333333333333333333333333333</li>
            <li>333333333333333333333333333</li>
            <li>333333333333333333333333333</li>
            <li>333333333333333333333333333</li>
            <li>333333333333333333333333333</li>
            <li>333333333333333333333333333</li>
            <li>333333333333333333333333333</li>
        </ol>
    </section>
    <section class="cont" id="funny">
        <ol>
            <li>00000000000000000000000000000</li>
            <li>00000000000000000000000000000</li>
            <li>00000000000000000000000000000</li>
            <li>00000000000000000000000000000</li>
            <li>00000000000000000000000000000</li>
            <li>00000000000000000000000000000</li>
            <li>00000000000000000000000000000</li>
        </ol>
    </section>
    <script>
        // 目标: 默认显示一个 当前的样式
        //  点击导航,实现切换
        //  key 表示的当前显示的是第几个

        (function(key){
//         获取所有的导航
            var navs=document.querySelectorAll('nav a');
//         遍历 给导航 绑定事件,并且添加当前样式
            for(var i=0;i<navs.length;i++){
//            如果是用户指定的当前样式
                if(key==i){
                    navs[i].classList.add('active');
//              拿到要显示内容section的id
                    var secId=navs[i].dataset['cont'];
//               获取对应的section标签
                    document.querySelector('#'+secId).style.display='block';
                }

//            给每一个导航绑定点击事件
                navs[i].onclick=function(){
                    // 排他
                    // 之前有active样式的清除, 之前显示的section 隐藏
                    var  currentNav=document.querySelector('.active');
//                获取对应的内容区域 ,让其隐藏
                    var currentId=currentNav.dataset['cont'];
//                去掉导航的active 样式
                    currentNav.classList.remove('active');
//                对应的内容区域
                    document.querySelector('#'+currentId).style.display='none';

                    //   突出显示自己 导航添加样式  对应的section 显示
//                给自己添加active样式
                    this.classList.add('active');
//                对应的section模块显示出来
                    var myId=this.dataset['cont'];
                    document.querySelector('#'+myId).style.display='block';
                }
            }

        })(0);
    </script>
</div>
</body>
</html>

获取元素

  • document.getElementsByClassName ('class') 通过类名获取元素,以类数组形式存在。
  • document.querySelector(‘div’) 通过CSS选择器获取元素,符合匹配条件的第1个元素。
  • document.querySelectorAll('selector') 通过CSS选择器获取元素,以类数组形式存在。

    类名操作

  • Node.classList.add('class') 添加class
  • Node.classList.remove('class') 移除class
  • Node.classList.toggle('class') 切换class,有则移除,无则添加
  • Node.classList.contains('class') 检测是否存在class
    Node指一个有效的DOM节点,是一个通称。

    自定义属性

    在HTML5中我们可以自定义属性,其格式如下data-*="",例如
    data-info="我是自定义属性",通过Node.dataset['info'] 我们便可以获取到自定义的属性值。
    Node.dataset是以类对象形式存在的
    当我们如下格式设置时,则需要以驼峰格式才能正确获取
    data-my-name="itcast",获取Node.dataset['myName']

在HTML5之前,在网页上播放音频/视频的通用方法是利用Flash来播放,但是大多情况下,并非所有用户的浏览器都安装了Flash插件,由此使得处理音频/视频播放变的非常复杂,并且移动设备的浏览器并不支持Flash插件。

音频

HTML5通过<audio>标签来解决音频播放的问题。

属性:
autoplay 自动播放
controls 是否显不默认播放控件
loop 循环播放
preload 预加载 同时设置autoplay时些属性失效
由于版权等原因,不同的浏览器可支持播放的格式是不一样的,具体如下。

音频格式ChromeFirefoxIE9OperaSafari
OGG支持支持支持支持不支持
MP3支持不支持支持不支持支持
WAV不支持支持不支持支持不支持

推荐的兼容写法

    <audio controls loop>
        <source src="music/yinyue.mp3"/>
        <source src="music/yinyue.ogg"/>
        <source src="music/yinyue.wav"/>
        抱歉,你的浏览器不支持音频标签!
    </audio>

视频

HTML5通过<video>标签来解决音频播放的问题。
属性:
autoplay 自动播放
controls 是否显示默认播放控件
loop 循环播放
preload 预加载,同时设置了autoplay,此属性将失效
width 设置播放窗口宽度
height 设置播放窗口的高度

由于版权等原因,不同的浏览器可支持播放的格式是不一样的,具体如下

格式IEFirefoxOperaChromeSafari
OggNo3.5+10.5+5.0+No
MPEG 49.0+NoNo5.0+3.0+
WebMNo4.0+10.6+6.0+No

推荐的兼容写法

    <video controls autoplay>
        <source src="video/movie.mp4"/>
        <source src="video/movie.ogg"/>
        <source src="video/movie.webm"/>
        抱歉,浏览器要换了!
    </video>

方法:load() 加载、play() 播放、pause() 暂停
属性:

  • currentTime 视频播放的当前进度、
  • duration:视频的总时间
  • paused:视频播放的状态.

事件:

  • oncanplay: 事件在用户可以开始播放视频/音频(audio/video)时触发。
  • ontimeupdate:通过该事件来报告当前的播放进度.
  • onended:播放完时触发

全屏:video.webkitRequestFullScreen();

描述:当用户输入数据后,下拉菜单会自动匹配以输入数据开头的内容,匹配到的会自动加入到下拉菜单中。 支持的浏览器版本为IE9以上。
示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能下拉菜单</title>
    <!--[if lte ie 8]>
    <script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
    <![endif]-->
</head>
<body>
<form action="">
    <input type="text" list="car">
    <datalist id="car">
        <option value="1">1</option>
        <option value="11">11</option>
        <option value="112">112</option>
        <option value="23">23</option>
        <option value="676">676</option>
    </datalist>
</form>
</body>
</html>

伴随着互联网富应用以及移动开发的兴起,传统的Web表单已经越来越不能满足开发的需求,所以HTML5在Web表单方向也做了很大的改进,如拾色器、日期/时间组件等,使表单处理更加高效。

输入类型

email 输入email格式
tel 手机号码
url 只能输入url格式
number 只能输入数字
search 搜索框
range 范围 滑动条
color 拾色器
time 时间
date 日期, 不是绝对的
datetime 时间日期
month 月份
week 星期
注意:部分类型是针对移动设备生效的,且具有一定的兼容性,在实际应用当中可选择性的使用。

表单元素

  • <datalist> 数据列表,与input 配合使用。
    例如:

    <input type=”text” list=”data”>
    <datalist id=”data”>
       <option>男</option>
       <option>女</option>
    </datalist>
  • <keygen> 生成加密字符串
    keygen 元素

    • keygen 元素的作用是提供一种验证用户的可靠方法。
    • keygen 元素是密钥对生成器(key-pair generator)。当提交表单时,会生成两个键, 一个是私钥,一个公钥。
    • 私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。
  • <output> 不可当做数据提交。
  • <meter> 表示度量器,不建议用作进度条
  • <progress></progress>
    <meter value="81" min="0" max="100" low="60" high="80" />

    Max-width 最大值
    Min-width 最小值

    表单属性

  • placeholder 占位符
  • autofocus 获取焦点
  • multiple 文件上传多选或多个邮箱地址
  • autocomplete 自动完成,用于表单元素,也可用于表单自身(on/off)
  • form 指定表单项属于哪个form,处理复杂表单时会需要
  • novalidate 关闭验证,可用于<form>标签
  • required 必填项
  • setCustomValidity用于设置验证不通过时的 提示文字
  • pattern 正则表达式 验证表单
    例如: 手机号:<input type="tel" name="tel" required="required" pattern="^(\+86)?1[3,5,8](\d{9})$">
    表单重写没有提及,自行验证,共包含应用于提交按钮上,如:<input type="submit" formaction="xxx.php">

    表单事件

  • oninput 用户输入内容时触发,可用于移动端输入字数统计
  • oninvalid 验证不通过时触发

在不支持HTML5新标签的浏览器里,会将这些新的标签解析成行内元素(inline)对待,所以我们只需要将其转换成块元素(block)即可使用,但是在IE9版本以下,并不能正常解析这些新标签,但是却可以识别通过document.createElement('tagName')创建的自定义标签,于是我们的解决方案就是将HTML5的新标签全部通过document.createElement('tagName')来创建一遍,这样IE低版本也能正常解析HTML5新标签了,在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载三方的一个JS库来解决兼容问题。

  <!--[if lte ie 8]>
        <script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
  <![endif]-->

描述:HTML5并不仅仅只是做为HTML标记语言的一个最新版本,更重要的是它制定了Web应用开发的一系列标准,成为第一个将Web做为应用开发平台的HTML语言。
HTML5定义了一系列新元素,如新语义标签、智能表单、多媒体标签等,可以帮助开发者创建富互联网应用,还提供了一些Javascript API,如地理定位、重力感应、硬件访问等,可以在浏览器内实现类原生应用,甚至结合Canvas我们可开发网页版游戏。
广义概念:HTML5代表浏览器端技术的一个发展阶段。在这个阶段,浏览器呈现技术得到了一个飞跃发展和广泛支持,它包括:HTML5,CSS3,Javascript,API在内的一套技术组合。
H5范称:HTML + CSS3 + JS。
语法特点:
1、更简洁
2、更宽松

  • 单标签不用写关闭符号
  • 双标签省略结束标签html、head、body、colgroup、tbody可以完全省略
  • 但是实际开发中应规范书写,不建议太随意 !

语义化标签:
语义标签对于我们并不陌生,如<p>表示一个段落、<ul>表示一个无序列表<h1> ~ <h6>表示一系列标题等,在此基础上HTML5增加了大量更有意义的语义标签,更有利于搜索引擎或辅助设备理解HTML页面内容。
传统的做法我们或许通过增加类名如class="header"、class="footer",使HTML页面具有语义性,但是不具有通用性。
HTML5则是通过新增语义标签的形式来解决这个问题,例如<header></header>、<footer></footer>等,这样就可以使其具有通用性。
常用的语义化标签:
<nav> 表示导航
<header> 表示页眉
<footer> 表示页脚
<section> 表示区块
<article> 表示文章 如文章、评论、帖子、博客
<aside> 表示侧边栏 如文章的侧栏
<figure> 表示媒介内容分组 与 ul > li 做个比较
<mark> 表示标记 (带用“UI”,不怎么用)
<progress> 表示进度 (带用“UI”,不怎么用)
<time> 表示日期
本质上新语义标签与<div>、<span>没有区别,只是其具有表意性,使用时除了在HTML结构上需要注意外,其它和普通标签的使用无任何差别,可以理解成<div class="nav"> 相当于 <nav>。不要好奇,它只是一个标签!
尽量避免全局使用header、footer、aside等语义标签。

描述:
此处多库共存指的是:jQuery占用了$jQuery这两个变量。当在同一个页面中引用了jQuery这个js库,并且引用的其他库(或者其他版本的jQuery库)中也用到了$或者jQuery这两个变量,那么,要保证每个库都能正常使用,这时候就有了多库共存的问题。
解决方式:
作用:让jQuery释放对$的控制权,让其他库能够使用$符号,达到多库共存的目的。此后,只能使用jQuery来调用jQuery提供的方法
$.noConflict(); //true两个都交出来,返回值是新的调用方法。
$.noConflict();放弃$的使用权。
var MrLv = $.noConflict(true);放弃两个符号的使用权,同时定义一个新的使用权。