新增加的DOM操作

获取元素：

code block

1
2
3
4
5
6
7
8

1、document.getElementsByClassName ('class')
//通过类名获取元素，以伪数组形式存在。
//填入的类名是不加点的
2、document.querySelector('selector')
//通过CSS选择器获取元素，符合匹配条件的第1个元素。
3、document.querySelectorAll('selector')
//通过CSS选择器获取元素，以伪数组形式存在。
//其他这个写法跟给标签写样式的写法是一样的

类名操作：

1
2
3
4
5
6
7
8

1、Node.classList.add('class') //添加class
2、Node.classList.remove('class') //移除class
3、Node.classList.toggle('class')
//切换class，有则删除，无则添加
4、Node.classList.contains('class') 
//检测是否存在class
//Node指一个有效的DOM节点，是一个通称。
//clss是没有点的。

自定义属性：（这个的思想很重要）

在HTML5中我们可以自定义属性，

• 其格式如下data-*=""，例如data-info=“我是自定义属性”
• 通过Node.dataset['info'] 我们便可以获取到自定义的属性值。
• Node.dataset是以对象形式存在的， 当我们为同一个DOM节点指定了多个自定义属性时，Node.dataset则存储了所有的自定义属性的值。

假设某元素:
<div id="demo" data-name="itcast" data-age="10">
var demo = document.querySelector('#demo');

• 读取 demo.dataset['name']或者 demo.dataset['age']
• 设置demo.dataset['name'] = 'web developer'
  注：当我们如下格式设置时，则需要以驼峰格式才能正确获取
  <div data-my-name="itcast"> 这样获取Node.dataset['myName']。

h5表单

表单的输入类型

• email:

code block

1

<input type="email">//输入邮箱格式

• tel

  1	<input type="tel">//输入手机号码格式

• url

  1	<input type="url">//输入url格式

• number

  1	<input type="number">//输入数字格式

• search

  1	<input type="search">//搜索框（体现语义化）

• range

  1	<input type="range">//自由拖动滑块

• color

  1	<input type="color">//拾色器

• time

  1 2	<input type="time"> 时间 时:分

• date

  1	<input type="date">//日期 年/月/日

• datetime

  1	<input type="datetime">//日期和时间但是浏览器暂不支持

• month

  1	<input type="month">//月份 年--月

• week

  1	<input type="week">//星期 年 -- 周

表单的元素：

1
2
3
4
5
6
7
8
9

<datalist>//数据列表
<option value=”值”>
<keygen>//生成加密字符串
<keygen>
<output>//输出结果
<output>内容</output>
<meter>//度量器
min max low high value
`

3.表单的属性：

• placeholder

  1	<input type="text" placeholder="请输入用户名">//占位符

• autofocus

  1	<input type="text" autofocus>//自动获得焦点

• multiple

  1	<input type="file" multiple>//多文件上传

• autocomplete

  1	<input type="text" autocomplete="off">//自动完成提示

• form

  1	<input type="text" form="某表单ID">//指定表单

• novalidate

  1	<form novalidate></form>（关闭某个验证也是可一的）//关闭验证

• required

  1	<input type="text" required>//必填项

• pattern

  1	<input type="text" pattern="\d">//自定义验证

h5

h5简介

• 我们日常讨论的H5其实是一个泛称，它指的是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台。

• 特点：H5其实是一个泛称，它指的是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台。

• HTML5在语法规范上的特点：
  1、更简洁
  2、更宽松

• 但是我们在实际开发中应规范书写，不建议太随意！并且现在基本所有网站都采用了HTML5的语法规范。

新增加的标签

标签语义

code block

1
2
3
4
5
6
7

<nav> //导航
<header> //页眉
<footer> //页脚
<section> //区块
<article>//文章
<aside>//侧边栏
<progress>//进度条

• 本质上新语义标签与 <div>、<span>没有区别，只是其具有语义性，使用时除了在HTML结构上需要注意外，其它和普通标签的使用无任何差别，可以理解成
  <div class="nav"> 相当于<nav>。不要好奇，它只是一个标签！
  尽量避免全局使用header、footer、aside等语义标签。

新标签的兼容问题：

对于新的标签IE9以下是不兼容的
document.createElement('tagName')创建的自定义标签，于是我们的解决方案就是将HTML5的新标签全部通过document.createElement('tagName')来创建一遍，这样IE低版本也能正常解析HTML5新标签了。（了解）
这个可以用一个新的cc:ie8就可以打出这个这个条件注释

1
2
3
4
5
6

<!-- 条件注释 他是条件成立才会执行里面的JS代码 -->
   <!-- 如果条件不成立就当成注释不执行 -->
   <!-- cc:ie6 -->
   <!--[if lte IE 8]>
         <script src="js/html5shiv.min.js"></script>
   <![endif]-->

问题1：如何解决每次删除东西，在第二次hexo deploy generate 的时候有会从新的出现？

• 解答： 我们所在这个hexo中生成的东西操作都会在hexo目录中的 {}db.json中会生成对应的数据，所以在你就算是删除了这里头的东西不删除的话。还是会有的。。所以你要删了这个东西然后在hexo deploy generate这样就可以了

问题2：如何创建tags和categories文件并且在一级目录下添加index.html文件

• 我们建立的这个hexo是没有tags和categoties 这两个文件的所以要想有的话你需要在hexo目录下运行git bash

code block

1
2
3
4
5
6
7
8
9

$ hexo new page tags
$ hexo new page categories
$ vim source/tags/index.md 
### add line: type: "tags"
$ vim source/categories/index.md
### add line: type: "categories"
$ cd themes/next
### backup themes/next/_config.yml
$ hexo deploy generate

在执行第一句和第二句的时候会创建文件夹和index.md文件
然后更改文件的内容就会在public文件夹中对应的文件夹下就会有index.html;你也能发现在你的source下面的这两个文件夹中多了一个后缀为swp的文件，这就可以了。

问题3：如何解决代码块没有语法高亮？

_config.yml 中

1
2
3
4
5

highlight:
  enable: true
  line_number: true
  auto_detect: true/原本为false改为true 
  tab_replace:

然后在代码的而开头用上code block然后在是用平常用的这个代码块6个点