-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch.xml
94 lines (94 loc) · 31.3 KB
/
search.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title><![CDATA[最近开发项目的总结]]></title>
<url>%2FmySummary.html</url>
<content type="text"><![CDATA[前言 最近都在开发混合APP的页面，有些一些看似简单的东西一旦动手做起来总是会出现许多各式各样的问题，所以把这些问题记录下来，自己没事翻一翻，或者有个思路去解决。 一、 label 标签模拟单选、复选框在uniapp中或者H5中,按钮的样式都是有限的,为了让按钮看起来更美观，提升用户体验，就不用 input 标签的单选、复选按钮，而是用 label 标签结合 for 属性来模拟。具体代码如下： 12345678910111213141516171819202122232425262728// HTML代码<view class="test"> <input type="checkbox" id="serach-moible"> <label for="serach-moible">苹果</label></view>// CSS 代码.test input{ opacity: 0; }label{ display: block; font-size: 14px; line-height: 14px;}input[type=checkbox]+label::before{ content: ''; background: transparent; border: 1px solid #000; box-shadow: inset 0 0 0 2px #fff; cursor: pointer; display: inline-block; width: 12px; height: 12px; margin-right: 12px; position: relative; top: 2px;}input[type=checkbox]:checked+label::before{ background: #000;} 当你点击 label 时，实际上就是选中了 input 单选按钮，为了这样，你必须要把 input 标签的 id 的值跟 label 标签的 for 属性值保持一致，这样就能通过操作 label 来操作按钮。 二、图片懒加载图片懒加载这项技术可以延迟加载图像，只当图片出现在我们看到的视图中才加载，它的好处是大大提高用户体验，在uniapp中，图片懒加载已经帮我们处理好了，我们只要在image的属性上面加一个lazyLoad就能实现了，但是在正常的H5中，我们需要自己写图片懒加载的技术了 代码如下：12345678910111213141516171819202122232425262728293031<!-- HTML --><div> <img class="lazy-load" data-src="https://source.unsplash.com/random/600" alt=""> <img class="lazy-load" data-src="https://source.unsplash.com/random/700" alt=""> <img class="lazy-load" data-src="https://source.unsplash.com/random/800" alt=""> <img class="lazy-load" data-src="https://source.unsplash.com/random/900" alt=""></div><!-- 引入 lodash 库 --><script src="https://cdn.bootcss.com/lodash.js/4.17.12-pre/lodash.core.min.js"></script> <!-- CSS -->div { margin-top: 350px;}.lazy-load { width: 200px; height: 150px;}<!-- JS -->let lazyImages = [...document.querySelectorAll('.lazy-load')]let inAdvance = 300function lazyLoad() { lazyImages.forEach(image => { <!-- 当图片的视口小于 Windows的偏移 + windows的屏幕高度就赋值 替换真实图片的 URL --> if (image.offsetTop < window.innerHeight + window.pageYOffset + inAdvance) { image.src = image.dataset.src; } })}lazyLoad();window.addEventListener('scroll', _.throttle(lazyLoad, 50))window.addEventListener('resize', _.throttle(lazyLoad, 50)) 三、常用正则表达式整理很多编程语言都有正式，在项目中都会用到的正则表达式，匹配一系列匹配某个句法规则的字符串。经常使用的两个方法是 test() 和 match() 。 以下是在网上收集上项目中常用的1.手机号码1^(13[0-9]|14[0-9]|15[0-9]|166|17[0-9]|18[0-9]|19[8|9])\d{8}$ 2.电子邮件1^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$ 3.字母开头，允许5-16字节，允许字母数字下划线(一般用于账号)1^[a-zA-Z][a-zA-Z0-9_]{4,15}$ 4.密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)1^[a-zA-Z]\w{5,17}$ 5.强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)1^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$ 6.国内电话号码，例如 021-878888221d{3}-d{8}|d{4}-d{7} 7.腾讯QQ号1[1-9][0-9]{4,} 8.邮政编码1[1-9]d{5}(?!d) 9.身份证号码(18位)1^((\d{18})|([0-9x]{18})|([0-9X]{18}))$ 10.日期格式1^\d{4}-\d{1,2}-\d{1,2} 11.IP地址1((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)) 12.汉字1^[\u4e00-\u9fa5]{0,}$ 13.域名1[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.? 14.url地址1[a-zA-z]+://[^\s]* 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$ *常用的就是项目中用test 去匹配某个值之后返回 的布尔值1test() 方法用于检测一个字符串是否匹配某个模式.输入参数为字符串，返回值为布尔值。用法如下 四、uniapp开发的中的问题1.class绑定问题 官方文档已经很明确的说明非H5端不支持 Vue官方文档：Class 与 Style 绑定 中的 classObject 和 styleObject 语法。 -不支持示例：1234567891011121314151617181920212223<template> <view :class="[activeClass]" :style="[baseStyles,overridingStyles]"></view></template><script> export default { data() { return { activeClass: { 'active': true, 'text-danger': false }, baseStyles: { color: 'green', fontSize: '30px' }, overridingStyles: { 'font-weight': 'bold' } } } }</script> 不过我在定义一个icon的组件的时候，有个数组绑定class的问题，自定义了一个icon的组件，部分代码如下12345678910111213141516171819202122232425262728293031323334353637<template><!-- 模拟器中这边的class 会是逗号隔开的，而不是中间是一个空格 --> <text :class="[name, icon]" :style="{'color': color, 'font-size': fontSize}"> </text></template><script> export default { props: { name: { type: String, default: 'iconfont' }, icon: { type: String }, color: { type: String, default: '#666666' }, size: { type: [Number, String], default: 30 } }, computed: { cls(){ return `${this.name} ${this.icon}` }, fontSize(){ return this.size + 'upx' } } }</script><!-- --> 之后解决的帮忙就是利用计算属性12345678<text :class="cls" ></text>computed: { cls(){ return `${this.name} ${this.icon}` }} 2.生命周期那些事 首先我们需要清楚uniapp中生命周期，应用生命周期，页面生命周期，还有组件生命周期： 应用生命周期是项目启动的过程，主要是在App.vue中声明的，包括下面几个： 在onLanch中我们可以获取启动参数,第三方APP传过来的参数，监听推送消息，设置屏幕锁定方向等等。 页面的生命周期用onLoad代替created，onReady代替mounted。组件内使用created与mounted。ps：组件里面就没有onShow了 3.一些典型的问题 出现遮罩后阻止页面滚动，可以在遮罩的touchmove事件中阻止默认事件。@touchmove.prevent=””。 组件内引入图片要使用绝对路径（官方都推荐了）。/static/1.png z-index 覆盖不住要不就是层级不够，要不就是没加定位 长按实践中@longTap 在APP端获取不到定位或者没效果和=可以推荐使用@longpress 富文本解析中组件和api中有俩个方案，但经过使用发现u-parse是官方推荐的 引入新的组件中需要重新重启才可更新编译 总结实践是检验效果的唯一标准，多动手多敲代码多实践，哪怕在简单的东西自己也要亲自去敲一遍才有所了解，有问题就找谷歌和百度。 https://pan.baidu.com/s/1izwf1KV0RbD_aZ3LA3u6ow qE4W]]></content>
<categories>
<category>前端技术</category>
</categories>
<tags>
<tag>html</tag>
<tag>混合开发</tag>
</tags>
</entry>
<entry>
<title><![CDATA[Uni-app的那些坑]]></title>
<url>%2Funiapp.html</url>
<content type="text"><![CDATA[前言 uni-app是hbuilder公司开发的新产品，实现使用vue的语法开发的代码，可以编译到H5、小程序、APP等多端，但是坑也很多，请大家避免。 Uni-app那些坑[1]软件的坑 1.运行的时候动不动要重启2.修改代码后不要等自动编译，尤其是小程序和app，先点击停止，再重新运行 [2]代码的坑 一.模板中的坑 说明使用vue模板开发的坑 1. v-for坑多 关键字不能使用index,否则无法编译通过 123456错误案例<view v-for="index in 6" :key=" index"></view>正确案例，避免使用index<view v-for="i in 6" :key="i"></view> :key不能拼接字符串，否则原生(小程序)编译无法通过 123456错误案例<view v-for="i in 6" :key=" 'item'+i"></view>正确案例，避免使用拼接<view v-for="i in 6" :key="i"></view> v-for 禁止循环数字，如果有需要,请封装对象循环 1小程序、APP、 H5循环无法保持统- -, H5从1开始循环, 小程序和APP从开始循环，太坑了，需要把循环主体改成对象去循环 组件如果使用了slot,那调用的时候slot不能使用v-for ,仅H5支持，其他均不支持 2. 过滤器计算属性的坑不支持部分复杂的 JavaScript 渲染表达式和过滤器目前可以使用的有 + - * % ?: ! == === > < [] .。 解决办法：在数据遍历回来的时候提前用computed计算属性 1234567uni.request({ url: 'http://localhost:3000/apiList', //仅为示例，并非真实接口地址。 success: (res) => { this.apiList = res.data this.apiList.forEach(item => item.date = this.formatTime(item.date)) } }) 123456789<!-- 这种就不支持，建议写 computed --><view>{{ message.split('').reverse().join('') }}</view><!-- 但写在 @event 里面的表达式是都支持的，因为这部分的计算放在了 vdom 里面 --><view> <view v-for="(item, index) in list" :key="index"> <view @click="clickHandle(item, index, $event)">{{ item.value }}</view> </view></view> 二、JS中的坑1.组件不能使用onReady、onLoad等方法，请使用vue的mounted和created 2: uni-app中vuex使用的区别 uni-app中this.$store为undefind ,必须要在main.js中加入这行代码 1Vue.prototype.$store = store 三、css中 的坑在APP.vue中page 可以设置全局页面的样式,如果想在当个页面覆盖的话,直接另起一个style 加入page便可覆盖 四、注意事项1- 非`H5` 端，不能使用浏览器自带对象，比如 document、window、localstorage、cookie 等，更不能使用 jquery 等依赖这些浏览器对象的框架。因为各家小程序快应用都不支持这些对象。没有这些浏览器自带对象并不影响业务开发，uni 提供的 api 足够完成业务。 五、 一些小tips可自定义图标1官方提供的icon图标太少,可以去阿里矢量图那边自定义自己想要的icon 条件编译 在 C 语言中，通过 #ifdef、#ifndef 的方式，为 windows、mac 等不同 os 编译不同的代码 uni-app 参考这个思路，为 uni-app 提供了条件编译手段，在一个工程里优雅的完成了平台个性化实现 。条件编译是利用注释实现的，在不同语法里注释写法不一样，js使用 // 注释、css 使用 / 注释 /。 举个栗子:123456789// #ifdef %PLATFORM%平台特有的API实现// #endif// #ifndef H5// 表示只有 h5 不使用这个 apiuni.createAnimation(OBJECT)// #endif 12345678910111213<!-- #ifdef %PLATFORM% -->平台特有的组件<!-- #endif --><!-- #ifdef MP-WEIXIN --><!-- 只在小程序中生效 --><view> 我是微信小程序 </view><!-- #endif --><!-- #ifdef APP-PLUS --><!-- 只在 app 中生效 --><view> 我是 app </view><!-- #endif -->]]></content>
<categories>
<category>前端技术</category>
</categories>
<tags>
<tag>html</tag>
<tag>混合开发</tag>
</tags>
</entry>
<entry>
<title><![CDATA[JS堆栈内存]]></title>
<url>%2Fjs%E5%A0%86%E6%A0%88%E5%86%85%E5%AD%98.html</url>
<content type="text"><![CDATA[堆栈内存的作用JS 中的内存堆内存和栈内存，所有堆栈内存的处理，浏览器会自行在内部执行 栈内存： 提供一个供 JS 代码自上而下执行的环境（作用域，代码都是在栈内存中执行的） 由于基本类型比较简单，它们都是直接在栈内存中开辟一个位置，直接把值存储进去的 堆内存：引用值对应的空间存储引用类型的（对象：键值对，函数：代码字符串） 堆内存的释放让所有引用堆内存空间地址的变量赋值为 null 即可，当堆内存没有被任何的变量或者其他东西引用时，就会在浏览器执行垃圾回收的时候，被销毁掉。 堆内存释放后，里面存储的值也就会被释放掉。 栈内存的释放全局作用域会在页面关闭或者刷新的时候释放。（栈内存释放后，存储在栈内存中的值也都会销毁。）私有作用域：一般情况下，当函数执行完成，所形成的私有作用域（栈内存）都会自动释放掉，但是也有特殊的情况。 函数执行完成，当前形成的栈内存中，某些内容被栈内存意外的变量一直占用，此时栈内存不能释放，栈内存中存储的基本值也不会被释放，一直保存下来。最典型的就是闭包。 123456789101112var i = 1;function fn(i) { return function(n) { console.log(n + (++i)); }}var f = fn(2); //=> i = 2f() //=> i = 3f(3); //=>7, i = 3 n =3，执行 n + (++i) => 3 + 4 = 7fn(5)(6); //=>12, i = 5 n = 6，执行 n + (++i) => 6 + 6 = 12fn(7)(8); //=>16, i = 7 n = 8，执行 n + (++i) => 8 + 8 = 16f(4); //=>8, i = 3 n = 4，执行 n + (++i) => 4 + 4 = 8]]></content>
<categories>
<category>前端技术</category>
</categories>
<tags>
<tag>JavaScript</tag>
</tags>
</entry>
<entry>
<title><![CDATA[调用摄像头]]></title>
<url>%2Fshexiangtou.html</url>
<content type="text"><![CDATA[前言 今天闲来无事，发现有这个调用摄像头的todo，网上查了一下，果然 js 有调用摄像头的 api，为此自己写一个 demo ，避免忘记。 正文 调用摄像头一共有两种实现方式，一种是使用navigator.getUserMedia（该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性），前面一种已经从 Web 标准中删除，仅为了向后兼容而存在，第二种是使用navigator.mediaDevices.getUserMedia(推荐使用),这两种方法 Safari 貌似都不支持。。。。 第二种navigator.mediaDevices.getUserMedia实现方法:123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>拍照2</title></head><body> <button id="take">拍照</button> <br /> <video id="v" style="width: 640px;height: 480px;"></video> <canvas id="canvas" style="display:none;"></canvas> <br /> <img src="http://placehold.it/640&text=Your%20image%20here%20..." id="photo" alt="photo"> <script> !(function () { // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象 if (navigator.mediaDevices === undefined) { navigator.mediaDevices = {}; } if (navigator.mediaDevices.getUserMedia === undefined) { navigator.mediaDevices.getUserMedia = function (constraints) { // 首先，如果有getUserMedia的话，就获得它 var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口 if (!getUserMedia) { return Promise.reject(new Error('getUserMedia is not implemented in this browser')); } // 否则，为老的navigator.getUserMedia方法包裹一个Promise return new Promise(function (resolve, reject) { getUserMedia.call(navigator, constraints, resolve, reject); }); } } const constraints = { video: true, audio: false }; let videoPlaying = false; let v = document.getElementById('v'); let promise = navigator.mediaDevices.getUserMedia(constraints); promise.then(stream => { // 旧的浏览器可能没有srcObject if ("srcObject" in v) { v.srcObject = stream; } else { // 防止再新的浏览器里使用它，应为它已经不再支持了 v.src = window.URL.createObjectURL(stream); } v.onloadedmetadata = function (e) { v.play(); videoPlaying = true; }; }).catch(err => { console.error(err.name + ": " + err.message); }) document.getElementById('take').addEventListener('click', function () { if (videoPlaying) { let canvas = document.getElementById('canvas'); canvas.width = v.videoWidth; canvas.height = v.videoHeight; canvas.getContext('2d').drawImage(v, 0, 0); let data = canvas.toDataURL('image/webp'); document.getElementById('photo').setAttribute('src', data); } }, false); })(); </script></body></html>]]></content>
<categories>
<category>前端技术</category>
</categories>
<tags>
<tag>html</tag>
<tag>JavaScript</tag>
</tags>
</entry>
<entry>
<title><![CDATA[DOM的映射机制]]></title>
<url>%2FDOM.html</url>
<content type="text"><![CDATA[前言这在我们平常操作 DOM 的时候司空见惯。就比如：我通过获取一个元素来改变其样式，自然而然的反映到 HTML 页面中。 但是，我们操作 JS 对象的时候，本质上操作的是 JS 堆内存，为什么会反映到页面中呢？就是因为浏览器存在这个 DOM 的映射机制。 1. 什么是 DOM 的映射机制？我们使用 JS 从页面获取到的元素对象，或者自己手动创建的已经插入页面的元素对象，与页面中的 HTML 元素是绑定在一起的。也就是说修改其中一个，另一个也会跟着自动修改。这就是 DOM 的映射机制。 2. 形成映射的几种情形改变元素对象的属性这是我们最常用到的一种情形。当我们需要为元素添加自定义属性、或者修改属性等，就可以从页面中获取到元素对象，然后对其进行修改，就能够自动反映到 HTML 页面元素上。 1234567//=> 修改从页面中获取的元素样式Div.style.color = 'red';//=> 修改已经插入页面的元素的属性var p = document.createElement('p');box.appendChild(p);p.dataset.index = 1; 这两种方式得到的元素对象，修改其属性，都能够直接反映到页面中，不需要再次插入页面中。 在元素内部继续添加元素12345678//=> 在其内部插入标签或文本var list = Div.getElementsByTagName('li');console.log(list); // 空的元素集合Div.innerHTML('<li></li>');console.log(list); // 有一个元素集合//=> 添加自己创建的元素对象，同样原理Div.appendChild(p); 在容器中的数据绑定前，我们获取容器中元素，得到一个空的元素集合，容器数据绑定后，我们不需要重新获取，DOM 的映射机制会帮我们把新增加的元素映射到之前获取的空集合中，让其变为有元素的集合。 在页面中追加已有元素12list = Div.getElementsByTagName('li')[0];Div.appendChild(list); appendChild 在追加元素对象的时候，如果这个元素在容器中已经存在，此时并不是克隆一份新的追加到末尾，而是把原有的元素移动到末尾。 其根本原因在于，同一个元素在页面中，只能够有一个位置。把 JS 元素对象插入页面中某个位置，实际上就是把其绑定的 HTML 元素移动到那个位置上。 这里的元素已经存在有两种情形： 元素是从页面中获取到的 创建的元素已经添加过一次，再次添加时因此，就无需手动移除原先的元素，再进行添加。直接插入即可。 3. 特殊情况querySelectAll 获取的集合是静态集合（staticNodeList），不存在上述所谓的映射机制，基于这个方法，数据绑定完成后需要重新获取一次才可以。1234var box = document.querySelectorAll('#box');var box1 = document.getElementById('box');console.log(box); //=> 获取到的是 NodeList 对象console.dir(box1); //=> 而这里获取到的是 HTMLElement 的实例 这个特殊的 NodeList 不存在与 HTML 页面元素的映射，而且没有很多 HTMLElement 实例才拥有的方法。因此，使用这个方法的时候每次操作时，都应该重新获取。 另外，jQuery 中获取的元素同样不存在这些映射，实现映射需要使用其内部的方法，而且要使用原生 HTMLElement 实例的方法，需要通过后面加 [0] 的方法转换为原生元素对象。 另外，由于存在这种映射机制，在使用循环 DOM 中，改变了 DOM 的顺序，那么循环原本的顺序也就改变了。1234[].forEach.call(children, (item)=> { parent.appendChild(item);});//=> 这样做你会发现，循环完成后 children 改变了，不符合预期 因此，真实项目中，不应该过分依赖于 DOM 的映射机制。 生命的意义不仅是活着,而是我们给别人的生命带来了何种不同]]></content>
<categories>
<category>前端技术</category>
</categories>
<tags>
<tag>html</tag>
</tags>
</entry>
<entry>
<title><![CDATA[像素与viewport的概念22212222]]></title>
<url>%2F%E5%83%8F%E7%B4%A0%E4%B8%8Eviewport%E7%9A%84%E6%A6%82%E5%BF%B5.html</url>
<content type="text"><![CDATA[前言 学习移动端、响应式，首先必须明白的就是像素和 viewport 的概念，才能搞清楚出现各种情况的原因。 本文主要介绍物理像素、逻辑像素的概念以及他们之间的关系，viewport 的由来以及设置。下面与大家分享。 一、像素的概念 px ：逻辑像素 ，浏览器使用的抽象单位 dp、pt：物理像素 dpr：设备像素缩放比 ppi：屏幕每英寸的像素数量，即单位英寸内的像素密度|ppi| 120| 160 |240| 320| :—-: | :—-: | :—-: ||dpr| 0.75| 1.0| 1.5| 2.0 ppi 越高，像素数越高，图像越清晰。Retina 屏即高清屏，dpr 大于等于 2。 二、viewport web 初期，网页渲染在手机上，会只显示页面的其中一部分。用户需要通过滑动屏幕才能查看网页的全貌。由于用户体验太差，于是浏览器商就引入了 viewport 的概念。 2.1 手机浏览器的默认行为**- 页面默认先渲染在一个 980px（ios）或其他的 viewport 里面 通过缩放，让用户能看到网页的全貌** 为什么渲染时，要加入 viewport ？直接渲染在小屏幕会导致排版布局等的混乱 2.2 viewport 的概念两个 viewport ：视口（visual） viewport 和布局（layout） viewport ** 视口 viewport 就是用户查看网页的视口（可以理解为屏幕），可以通过缩放来改变其大小 布局 viewport 就是网页渲染的一个底层页面，ios 默认 viewport 为 980 px 指的就是布局 viewport 通过调用document.body.clientWidth查看默认布局 Viewportwindow.innerWidth查看度量 Viewport** 2.3 不使用默认布局 viewport 的原因 不同设备的默认值不同，宽度不可控制 缩放后连接可能因为太小不能准确触控，又有滚动，交互差 font-size:40px=PC 的 12px，不规范 2.4 设置 viewport在 html 中使用元标签meta设置 viewport： 1<meta name='viewport' content='width=device-width,initial-scale=1,user-scalabel=no'> 相关参数 width：设置布局 viewport 的值 initial-scale：设置页面的初始缩放 minimum-scale：最少缩放 maximum-scale：最大缩放 user-scalable：用户能否缩放 最佳设置 使视口 viewport = 设备宽度 = 布局 viewport width = device-width，让布局 viewport 等于设备宽度，也就是说，设置 320px 的元素会铺满 iphone5 的屏幕宽度。 initial-scale =1，设置初始缩放比为 1，使得缩放比因为网页的大小而改变，让视口 viewport = 布局 viewport user-scalable = no，使得视口 viewport = 布局 viewport 保持不变]]></content>
<categories>
<category>前端技术</category>
</categories>
<tags>
<tag>JavaScript</tag>
</tags>
</entry>
<entry>
<title><![CDATA[如果这个城市夜晚没有风]]></title>
<url>%2Flmq.html</url>
<content type="text"><![CDATA[这座城市人很多，每天在路上都能看到好多拉着行李箱的人，不管他们是来到这座城市还是离开这座城市，至少他们都曾努力过 在我想做博客之前，一直到我开始着手做这个博客，其实花了好久时间。而在我着手开始做这个博客，到这个博客完成，其实并没有花多久。也说明了一个道理，就是一定要勇于尝试，关键是要动手。我想起了老师的一句话，一个新鲜的事物，你一定要先去用它，应用驱动学习。 究其原因：第一个，我觉得是自己考虑的太多，没有太大的把握就不会轻易的去尝试，所以我在着手做这个之前花了很多的时间去查，域名空间这些的，而且这些出售这些的服务商也挺多的，我这个人有选择恐惧症。也是怪尴尬的，每次看到一个东西有好多选择的时候，我都去比较，去分析，头痛。。而且我想，域名空间搞好以后，还要自己写页面这些的。关键是还要设计博客风格，页面样式这些的，一想到这些，就感觉是一个不小的工程啊，后来才发现我多虑了。 后来，无意中看到了 Hexo 的 Next 主题的一篇博客，风格样式挺不错的，感谢 Hexo 和 Next 的文档写的如此的棒，以至于每一个人都能根据教程搭建一个自己的博客。这一切是如此的美好]]></content>
<categories>
<category>生活</category>
</categories>
<tags>
<tag>随笔</tag>
</tags>
</entry>
<entry>
<title><![CDATA[HTML语义化]]></title>
<url>%2Fyuyihua.html</url>
<content type="text"><![CDATA[前言HTML是超文本标记（Hyper Text Markup Language）的缩写，在网页设计中又把它称为网页的结构层。它的学习很简单，只要多利用业余时间去记忆、练习，一到两天时间就能掌握，并写出一个简单页面。 这里推荐一个快速入门的网址：http://www.w3school.com.cn/ 一、对于html的学习1. 首先是对html的整体结构的认识，即<!DOCTYPE html>的声明、html标签、head标签、body标签； 2. 其次是对head里面的标签的认识和使用，如meta、link、title、script、style等，在网页的优化上特别重要； 3. 最后是对body里面的标签的认识和使用，这也是网页上面呈现的内容，学html大部分时间都要花在这上面。要对常用标签的含义、用法、性质以及自带的属性都要熟练掌握，不常用标签能知道含义以及用法。 要掌握的精髓就在于在什么样的情况下运用哪个标签才能达到最好的效果。 二、标签语义化1. 其重要作用在于： 2. 网页结构合理 ； 3. 利于开发调试和后期维护（让自己和别人能够比较容易看懂代码）； 4.利于搜索引擎SEO优化。搜索引擎不能识别内容，只能识别标签语义从而知道这部分是什么内容（让搜索引擎能看懂）。有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取； 5.方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）。 但是，必须认识到，并不是说我们只能使用有语义的标签，而应当是在需要有语义，需要被SEO识别的情况下才必须使用有语义标签（如自己网页的主题以及重要内容等）。在不需要的情况下，也根据情况使用无语义标签。如div加CSS的页面布局、span添加一些只为实现效果的块或者描述，不需要有语义，不然也容易造成语义混乱。这是因为由标签传达的含义比浏览器显示文本的方式更为重要 文字1. 在有一段文字显示的情况下，必须使p标签来包含。里面可含有无语义标签div/span以及其他有语义的标签。 如：blockquote块引用，长引用（要添加cite属性引用地址）、q短的行内引用cite定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题著作的标题、address文档作者或拥有者的联系信息、code代码abbr缩写（要添加title标签说明原文）、time时间、mark标注、ruby注释、strong强调 （特别注意，这个标签权重很高，用于特别强调的文本。搜索引擎对其有很高的识别。）、details可展开样式（details里面使用添加标题，后面接展开内容)等等…… 2. 标题使用h1,h2,h3,h4标签,其中h5,h6权重太小一般不使用。其中的样式，即字体大小、颜色等都可以用CSS定义重新定义； 3. 标签中应该使用的是有含义的。基于内容的样式标签会告诉浏览器它所包含的文本具有特定的含义、上下文或者用法。是浏览器和搜索引擎所能识别的。不应该使用纯粹为了设定样式而存在的标签。设定样式应当由样式表（CSS）完成。 图片 如果图片作为HTML的一部分，需要被搜索引擎识别，则用img，不需要，则可以使用背景来显示图片； img标签中的alt和title属性。其中，alt属性用于图片描述，是给搜索引擎看的，图片无法显示时，显示alt中的文字。title属性也用于图片描述，是给用户看的，鼠标移动到图片时显示title中的文字。对于img标签，两个属性都尽量添加。（对于title值，在很多元素中都可以使用，比如在布局中无法完全显示的一条新闻或者消息等，在鼠标移动到上面时显示完全的内容是很好的一种用户体验）； figure元素和figcaption元素。figure元素用于包含图片和图注，figurecaption元素用于表示图注文字。在有图片和图注的情况下，使用这两个元素会使页面语义更好。 表格表格中有table、tr、td、th、caption、thead、tbody、tfoot。语义上，th为表头单元格，caption为表格标题，thead、tbody、tfoot把表格分为三部分。这三样在效果上并不需要用到，但在良好的语义上，尽量使用 表单1. lable绑定控件。lable使用于关联控件，解释控件的意义以及有一定点击效果； 2. placeholder占位符值和value值。表单中文本框的默认值，类似提示文本。在需要用户输入文字的控件中尽量使用； 3. fieldset表单控件分组。（只在有需要的时候使用，多数表单不分组），legend标签为 fieldset 元素定义标题。 新增标签在HTML5中添加了很多结构标签，增强了页面布局结构的语义，下面举例： 1. nav导航 2. section内容块区 3. article 文章 4. aside辅助信息 5. hgroup标题组合 6. footer页脚 7. header头部、标题 8. figure独立的流内容 优秀的人，不是不合群，而是他们合群的人里面没有你]]></content>
<categories>
<category>前端技术</category>
</categories>
<tags>
<tag>html</tag>
</tags>
</entry>
</search>