如何用有道云笔记制作 h5 html5

发布网友发布时间：2022-04-29 21:01

共2个回答

懂视网时间：2022-05-12 07:37

能够便于开发者阅读和写出更优雅的代码，代码如诗
同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
更好地搜索引擎优化

切记：HTML的职责是描述一块内容是什么（或其意义）而不是它长的什么样子，它的外观应该由CSS来决定。

应用程序标签

【datalist（数据列表）】

datalist数据列表的呈现需要载体

  <input type="text" list="input_list">
  <datalist id="datalist">
  <option value="选项框1"></option>
  <option value="选项框2"></option>
  </datalist>

  <input type="text" list="input_list">
  <datalist id="datalist">
  <option value="选项框1"></option>
  <option value="选项框2"></option>
  </datalist>

【progress（进度条）】

要改变他的样式，需要先将-webkit-appearance设置为none

  <style>
  .my_progress{
   -webkit-appearance:none;
  }
  .my-progress::-webkit-progress-bar{
   //样式
  }
  </style>
  <progress class="my_progress" value="10" max="100"></progress>

【meter（数值显示器）】

很少浏览器支持

  <meter min="0" max="100" low="40" hign="90" optimun="100" value="91"></meter>

显示器的最大最小值：max，min
显示器能够到达的最大最小值：hign，low
显示器的测量范围的最佳值：optimum
显示器显示的当前值：value

【menu（右键菜单）】

火狐兼容

【details（明细）】

点开一个内容可以展开面板，在火狐和谷歌兼容

属性

链接关系描述：用来描述指定链接与当前文档的关系，便于机器理解文档结构

常见的链接关系表

 alternate 文档的可选版本（例如打印页、翻译页或镜像）
 stylesheet 文档的外部样式表
 start  集合中的第一个文档
 next  集合中的下一个文档
 prev  集合中的前一个文档
 contents 文档目录
 index  文档索引
 glossary 文档中所用字词的术语表或解释
 copyright 包含版权信息的文档
 chapter  文档的章
 section  文档的节
 subsection 文档的子段
 appendix 文档附录
 help  帮助文档
 bookmark 相关文档
 nofollow 用于指定 Google 搜索引擎不要跟踪链接
 licence  一般用于文献，表示许可证的含义
 tag  标签集合
 friend  友情链接


 案例

 <link rel="prev" href="#">
 <link rel="next" href="#">
 <a rel="prev" href="#">上一页</a>
 <a rel="next" href="#">下一页</a>

 <link rel="stylesheet" href="style.css">
 <link rel="alternate" type="application/rss+xml" href="http://myblog.com/feed">
 <link rel="shortcut icon" href="favicon.ico">
 <link rel="pingback" href="http://myblog.com/xmlrpc.php">
 <link rel="prefetch" href="http://myblog.com/main.php">

 <a rel="archives" href="http://myblog.com/archives">old posts</a>
 <a rel="external" href="http://notmysite.com">tutorial</a>
 <a rel="license" href="http://www.apache.org/licenses/LICENSE-2.0">license</a>
 <a rel="nofollow" href="http://notmysite.com/sample">wannabe</a>
 <a rel="tag" href="http://myblog.com/category/games">games posts</a>

结构数据标记

高级东西，暂时只有谷歌支持
是为了使得容易抓取网页上的数据

<p itemscope itemtype="http://example.com/hello">
 <p>我叫
 <span itemprop="主人">汪磊</span>。
 </p>
 <p>我养了一条叫
 <span itemprop="狗名">旺财</span>的
 <span itemprop="品种">金毛</span>犬。
 </p>
</p>

 比如抓取出：
 主人：汪磊
 狗名：旺财
 品种：金毛

ARIA

####Accessible Rich Internet Application (无障碍富互联网应用程序)
 主要针对于屏幕阅读设备(e.g. NVDA)，更快更好地理解网页
 不仅仅是为了盲人用户，更多语义化
1.数据注解，类似lable，只不过label是针对表格
2.可以通过aria知道数据的强相关

aria由一套属性组成，属性分为role以及对应的states和properties，
aria将html元素分为六种role，每种有对应的states和properties，
但有一些是共用的，比如

 aria-atomic
 aria-busy(state)
 aria-describedby
 aria-disabled(state)
 aria-dropeffect
 aria-flowto
 aria-haspopup
 aria-hidden(state)
 aria-invalid(state)
 aria-label
 aria-labelledby
 aria-owns
 aria-relevant

 举个伪元素例子，

 <p role="radio" aria-checked="true" aria-label="单选2" tabindex="0">单选tabindex="0"</p>

 这个p模拟了radio的功能，在平时读屏软件是分辨不出来的，
 但是加上role及aria-checked状态，
 在读屏软件（NVDA）中读出来就是：

单选2 单选按钮 选中 第1页 共1项

详细属性见：ARIA财付通设计中心.html

自定义属性 data

通过DOM存储与DOM对象强相关的数据

1.可以给html里的所有dom对象都可以添加一些data-xxx的属性
2.用来记录与当前DOM强相关的数据

<ul id="users">
 <li data-id="1" data-age="18" data-gender="true">张三</li>
 <li data-id="2" data-age="18" data-gender="false">李四</li>
 <li data-id="3" data-age="18" data-gender="true">王二</li>
</ul>

案例一：

 <script>
 //键是ID 值是信息
  var data = {
  01:{
   name:"伟哥哥"，
   age:"18"
  },
  02:{
   name:"伟哥哥"，
   age:"19"
  },
  03:{
   name:"伟哥哥"，
   age:"20"
  }

  //jQuery操作一定要做变量本地化
  var list = document.getElementById("list");
  for(var id in data){
   var item = data[id];
   var liElement = document.createElement("li");
   //liElement.innerHTML = item.name;
   liElement.appendChild(document.createTextNode(item.name));
   liElement.setAttribute("data-age",item.age);
   liElement.setAttribute("data-id",item.id);
   list.appendChild(liElement);//变量本地化

   //此处才将元素加到界面上
   liElement.addEventListener("click",function(){
   //alert(this.name);
   //this 是当前点击的元素
   //alert(this.getAttribute("data-age"));
   console.log(this.dataset["age"]);
   })
  }

  };
 </script>

案例二：

 <body>
  <ul id="users">
  <li class="item" data-id="1" data-age="18" data-gender="true">
   张三
   <pre></pre>
  </li>
  <li class="item" data-id="2" data-age="18" data-gender="false">
   李四
   <pre></pre>
  </li>
  <li class="item" data-id="3" data-age="18" data-gender="true">
   王二
   <pre></pre>
  </li>
  </ul>
 </body>

 <script>
  var ul = document.getElementById('users');

  for (var i = 0; i < ul.children.length; i++) {
  var li = ul.children[i];
  // JS 添加data属性
  i.setAttribute('data-name', li.innerText);
  i.children[0].innerText = '';
  or (var key in li.dataset) {
   li.children[0].innerText += key + ':' + li.dataset[key] + '
';
  }
  }
 </script>

案例三：

  <body>
  <p class="tabs">
   <ul>
   <li data-target=".panel-new">新闻</li>
   <li data-target=".panel-bagua">八卦</li>
   <li data-target=".panel-sport">体育</li>
   </ul>
   <p class="panel-new"></p>
   <p class="panel-bagua"></p>
   <p class="panel-sport"></p>
  </p>
  <script>
  $(function(){
   //写这个是为了有一个单独作用于，避免污染
   //api是应用程序编程接口
   var $lis = $('.tabs>ul>li');
   $lis.on("click",function(){
   //获取目标对象的选择器
   var targetSelector = $(this).data('target');
   var $target = $(targetSelector);
   });
  });
  </script>
  </body>

智能表单

新的表单类型

 <form action="#">
 //repuired表示必须的，表示填写框不能为空，会有提示但是提示不能更改
 <label>text:<input type="text" required></label></br>

 //只能判断中间是否有@
 <label>email:<input type="email" value="ice@wedn.net"></label><br>
 <label>date:<input type="date" min="2014-10-14" max="2020-10-14" value="2016-08-14"></label><br>

 //拖动条，可以获得拉到的地方的数字
 <label>range:<input type="range" min="0" max="50" value="10"></label> <br>
 <label>search:<input type="search" results="10" placeholder="搜点啥？"></label><br>
 <label>tel:<input type="tel" placeholder="(010) 888-888" pattern="^(?d{3})?[-s]d{3}[-s]d{4}.*?$"></label><br>
 <label>color:<input type="color" placeholder="e.g. #bbbbbb"></label><br>
 <label>number:<input type="number" step="1" min="-5" max="10" value="0"></label><br>
 <input type="submit" value="提交">
 </form>

虚拟键盘适配

 手机键盘会根据不同的type类型弹出不同键盘类型
 如打开数字键盘，密码键盘，邮件键盘
 <input type="text" name="txt_text" id="txt_text">
 <input type="number" name="txt_number" id="txt_number">
 <input type="email" name="txt_email" id="txt_email">
 <input type="tel" name="txt_tel" id="txt_tel">
 <input type="url" name="txt_url" id="txt_url">

网页多媒体

音频

 多媒体的dom对象有一些新的方法可以去做播放暂停

单个数据源的方式

默认界面：

 <audio src="music.mp3" controls="controls"></audio>

自定义一个：
 <audio id="audio" src="music.mp3"></audio>
 <button id="btn">播放</button>
 <button id="btn_pause">暂停</button>
 <script>
 var btn = document.getElementById("btn");
 var btn_pause = document.getElementById("btn_pause");
 var audio = document.getElementById("audio");
 btn.addEventListener("click",function(){
  //播放音频
  audio.play();
 });
 btn_pause.addEventListener("click",function(){
  // 暂停音频
  audio.pause();
 });
 </script>

多个数据源的方式

 <audio controls="controls">
  <source src="img/music.mp3" type="audio/mpeg"/>
 </audio>

视频

单个数据源的方式

<video src="fun.mp4" controls="controls"></video>

多个数据源的方式

 <video controls="controls" poster="top.png" autoplay="autoplay">
  不同浏览器支持格式不一样,因为版权问题
  <source src="fun.ogg" type="video/ogg"></source>
  <source src="fun.mp4" type="video/mp4"></source>
  当浏览器不兼容video标签，就会将他以p方式解析
  用第三方组件代替
  <object type="application/x-shockwave-flash" data="http://static.youku.com/v1.0.0557/v/swf/loader.swf" width="100%" height="100%" id="movie_player">
  <param name="allowFullScreen" value="true">
  <param name="allowscriptaccess" value="always">
  <param name="allowFullScreenInteractive" value="true">
  <param name="flashvars" value="VideoIDS=XMTMwNDAzNzM4NA==&ShowId=0&category=85&Cp=0&ev=1&Light=on&THX=off&unCookie=0&frame=0&pvid=1439005764768c9QpaT&uepflag=1&Tid=0&isAutoPlay=true&Version=/v1.0.1080&show_ce=0&winType=interior&Type=Folder&Fid=25977506&Pt=0&Ob=1&plchid=z&openScanCode=1&scanCodeText="限时" 扫码免广告&embedid=AjMyNjAwOTM0NgJ3d3cueW91a3UuY29tAi8=&vext=bc%3D%26pid%3D1439005764768c9QpaT%26unCookie%3D0%26frame%3D0%26type%3D1%26fob%3D1%26fpo%3D0%26svt%3D0%26emb%3DAjMyNjAwOTM0NgJ3d3cueW91a3UuY29tAi8%3D%26dn%3D%E7%BD%91%E9%A1%B5%26hwc%3D1%26mtype%3Doth&pageStartTime=1439005764766">
  <param name="movie" value="http://static.youku.com/v1.0.0557/v/swf/loader.swf">
  <p class="player_html5">
  <p class="picture" style="height:100%">
   <p style="line-height:460px;"><span style="font-size:18px">您还没有安装flash播放器,请点击<a href="http://www.adobe.com/go/getflash" target="_blank">这里</a>安装</span></p>
  </p>
  </p>
  </object>
 </video>

视频播放器相关属性

 属性 值  描述
 autoplay autoplay 如果出现该属性，则视频在就绪后马上播放
 controls controls 如果出现该属性，则向用户显示控件，比如播放按钮
 height pixels 设置视频播放器的高度
 loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放
 muted muted 规定视频的音频

输出应该被静音。【即：静音】 poster URL 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像 preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放如果使用"autoplay"，则忽略该属性 src url 要播放的视频的URL width pixels 设置视频播放器的宽度

字幕

 字幕案例：
 <video id="clip" controls>
  <source src="fun.mp4" type="video/mp4" />
  <track label="English subtitles" kind="subtitles"
  srclang="en" src="video-subtitles-en.vtt" default />
 </video>

 字幕文件内容示例：
 WEBVIT FILE

 1
 00:00:00.000 --> 00:00:12.000 D:vertical A:start

 2
 00:00:12.000 --> 00:00:15.300
 大家好，我是伟哥哥

Canvas

2D

3D (WebGL)

SVG

Scalable Vector Graphics 可缩放矢量图形

svg图片来源：通过AI，文件-->脚本-->将文档存储为SVG

svg可以像标签那样子直接黏贴到页面上，但是我们更希望像图片那样载入进来

可以借助三个标签载入：

 <iframe src="demo.svg" frameborder="0"></iframe> //推荐
 <object data="demo.svg" type=""></object>
 <embed src="demo.svg" type="">


学完ajax之后推荐方式：

 学习完异步请求之后，我们可以遍历所有SVG节点，把src引入进来，本身他是一个document对象，可以把它直接append到文档中。

 window.addEventListener('load',function(){
  var svgs = document.getElementByTagName('svg');
  for (var i = 0;i < svgs.length; i++){
  //console.log(svg[i].dataset);
  var src = $(svgs[i].data('src'));
  //向服务器发送请求 得到svg
  $.get(src,function(data){
   var el = data.documentElement;
   $(document.body).append($(el));
   });
  }
  });
 同时将svg文件里面的style删除，以便我们进行更改样式

补充：

1、sublime server插件安装
安装完不要stop serber，不用的时候直接要退出sublime，不然sublime会崩溃

2、谷歌浏览器开发者工具右上角展开栏的settings，给show useragent shadow DOM选上钩后可以看到虚拟出来的DOM

3.伪类对象
相当于在weigege后面插入一个，并且可以改变他的样式

<style>
.content::after{
 content: 'zuishuai';
 color: #465;
}
</style>
<p class="content">weigege</p>

4.h5新标签
h5新标签因为太新，可能在低级浏览器不能识别，不能识别的标签浏览器会自动识别为p进行加载，可以通过以下方式生成标签
方式一：自己定义

方式二：引入第三方组件html5shiv.js
里面是将所有h5新标签通过方式一的方式进行创建

5.在谷歌控制台输入一次输入下面代码
1.
document.body (回车)
document.body.contentEditable = true; (回车)
然后可以在页面上直接编辑文字
2.
直接在连接处输入
data:text/html, (回车)
可以直接在页面上编辑文字

6.第三方多媒体播放器库：jwplayer

7.专门为移动端使用的组件 zepto？
实现的api与jQuery基本相同
冗余处理兼容的代码都砍掉了
似乎可以代替jQuery

8.！important在老版本是顶不掉行内样式的

9.Markdown
开源项目说明文件都是用这种写的
语法链接：http://wowubuntu.com/markdown/
用普通文本描述富文本的语法
扩展名md，markdown
案例
h标签

HEADER1

HEADER2

HEADER3

段落直接写前面不用加东西

无序列表

前面有空格

有序列表
前面有数字都是有序列表，记得加空格

特定的编辑器可以加javascript代表特定的语法，用于编写代码

10.iframe
相当于挖了一个坑把其他页面载入进来

热心网友时间：2022-05-12 04:45

先将笔记导出成pdf，然后在网上找个pdf转html的工具，转一下就行了

如何用有道云笔记制作 h5 html5

标签

更http://www.gxlcms.com/html/html-yuyihua.html" target="_blank">语义化标签

为什么要有语义化标签

应用程序标签

【datalist（数据列表）】

【progress（进度条）】

【meter（数值显示器）】

【menu（右键菜单）】

【details（明细）】

属性

链接关系描述：用来描述指定链接与当前文档的关系，便于机器理解文档结构

结构数据标记

ARIA

自定义属性 data

智能表单

新的表单类型

虚拟键盘适配

网页多媒体

音频

单个数据源的方式

多个数据源的方式

视频

单个数据源的方式

多个数据源的方式

视频播放器相关属性

字幕

Canvas

2D

3D (WebGL)

SVG

Scalable Vector Graphics 可缩放矢量图形

svg图片来源：通过AI，文件-->脚本-->将文档存储为SVG

svg可以像标签那样子直接黏贴到页面上，但是我们更希望像图片那样载入进来

补充：

HEADER1

HEADER2

HEADER3