HTML5入门

最新推荐文章于 2024-07-11 18:01:24 发布

weixin_30949361

最新推荐文章于 2024-07-11 18:01:24 发布

阅读量2.9k

点赞数 2

文章标签： php javascript 5g ViewUI

原文链接：http://www.cnblogs.com/ZheOneAndOnly/p/11264585.html

版权

HTML5的初步认识

一、HTML5的初步认识

关于html5的一些历史可以通过这篇博客了解：https://www.cnblogs.com/fly_dragon/archive/2012/05/22/2513716.html

1.为HTML5建立的一些规则：

新特性应该基于HTML、CSS、DOM以及JavaScript
减少对外部插件的需求（比如flash）
更优秀的错误处理
更多取代脚本的标记
HTML5应该独立于设备
开发进程应对公众透明

2.HTML5新特性

用于绘画的canvas元素svg
用于媒介回放的video和audio元素
对本地离线存储的更好的支持：localStorage、sessionStorage
新的特殊内容元素，比如article、footer、header、nav、section
新的表单控件，比如calendar、date、time、email、url、search（）
input type = text button file radio checkbox（html）

新的的特殊内容元素：article、footer、header、nav、section本质上与div没什么区别，只是为了更加方便的阅读代码而产生的语义化标签：(article与section的区别一个相当于div一个相当于p)

<header>头部、首部标签</header>
<nav>导航</nav>
<article>文章（div）</article>
<section>章节(p)</section>
<footer>底部</footer>

在HTML5中还允许自定义标签，自定义的标签属于行级元素，类似span。

<student></student><span></span>

2.HTML5新属性

Contenteditable用户能否修改页面上的内容
Draggable支持拖放
Hidden隐藏
Contextmenu为元素设定快捷菜单（目前无浏览器支持contextmenu属性）
data-val自定义属性

2.1contenteditable的属性值为boolean类型，当值为true表示当前元素内容可以编辑，默认为false不能编辑：

<div contenteditable="true">这个div可以编辑：</div>

实现效果：

以下是基于contenteditable属性实现的富文本编辑器的代码：

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6     <title>富文本编辑器【Rich Text Editor】</title>
  7     <link rel="stylesheet" href="">
  8     <script type="text/javascript">
  9         var oDoc,sDefTxt;
 10         function initDoc(){
 11             oDoc = document.getElementById("textBox");
 12             sDefTxt = oDoc.innerHTML;
 13             if(document.compForm.switchMode.checked){
 14                 setDocMode(true);
 15             }
 16         }
 17         function formatDoc(sCmd, sValue){
 18             if(validateMode()){
 19                 document.execCommand(sCmd, false, sValue);
 20                 oDoc.focus();
 21             }
 22         }
 23         function validateMode(){
 24             if(!document.compForm.switchMode.checked){
 25                 return true;
 26             }
 27             alert("Uncheck\"Show Html\".");
 28             oDoc.focus();
 29             return false;
 30         }
 31         function setDocMode(bToSource){
 32             var oContent;
 33             if(bToSource){
 34                 oContent = document.createTextNode(oDoc.innerHTML);
 35                 oDoc.innerHTML = "";
 36                 var oPre = document.createElement("pre");
 37                 oDoc.contentEditable = false;
 38                 oPre.id = "sourceText";
 39                 oPre.contentEditable = true;
 40                 oPre.appendChild(oContent);
 41                 oDoc.appendChild(oPre);
 42                 document.execCommand("defaultParagraphSeparator", false, "div");
 43             }else{
 44                 if(document.all){
 45                     oDoc.innerHTML = oDoc.innerText;
 46                 }else{
 47                     oContent = document.createRange();
 48                     oContent.selectNodeContents(oDoc.firstChild);
 49                     oDoc.innerHTML = oContent.toString();
 50                 }
 51                 oDoc.contentEditable = true;
 52             }
 53             oDoc.focus();
 54         }
 55         function printDoc(){
 56             if(!validateMode()){
 57                 return ;
 58             }
 59             var oPrntWin = windowl.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes");
 60             oPrntWin.document.open();
 61             oPrntWin.document.write("<!doctype html><html><title>Print<\/title><\/head><body οnlοad=\"print();\">" + oDoc.innerHTML + "<\/body><\/html>");
 62             oPrntWin.document.close();
 63         }
 64     </script>
 65     <style type="text/css">
 66         .intLink { 
 67             cursor: pointer; 
 68         }
 69         img.intLink { 
 70             border: 0; 
 71         }
 72         #toolBar1 select { 
 73             font-size:10px; 
 74         }
 75         #textBox {
 76           width: 540px;
 77           height: 200px;
 78           border: 1px #000000 solid;
 79           padding: 12px;
 80           overflow: scroll;
 81         }
 82         #textBox #sourceText {
 83           padding: 0;
 84           margin: 0;
 85           min-width: 498px;
 86           min-height: 200px;
 87         }
 88         #editMode label { 
 89             cursor: pointer;
 90         }
 91     </style>
 92 </head>
 93 <body οnlοad="initDoc();">
 94     <form name="compForm" method="post" action="sample.php" οnsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;">
 95     <input type="hidden" name="myDoc">
 96     <div id="toolBar1">
 97         <select οnchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;">
 98             <option selected>- formatting -</option>
 99             <option value="h1">Title 1 &lt;h1&gt;</option>
100             <option value="h2">Title 2 &lt;h2&gt;</option>
101             <option value="h3">Title 3 &lt;h3&gt;</option>
102             <option value="h4">Title 4 &lt;h4&gt;</option>
103             <option value="h5">Title 5 &lt;h5&gt;</option>
104             <option value="h6">Subtitle &lt;h6&gt;</option>
105             <option value="p">Paragraph &lt;p&gt;</option>
106             <option value="pre">Preformatted &lt;pre&gt;</option>
107         </select>
108         <select οnchange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;">
109             <option class="heading" selected>- font -</option>
110             <option>Arial</option>
111             <option>Arial Black</option>
112             <option>Courier New</option>
113             <option>Times New Roman</option>
114         </select>
115         <select οnchange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;">
116             <option class="heading" selected>- size -</option>
117             <option value="1">Very small</option>
118             <option value="2">A bit small</option>
119             <option value="3">Normal</option>
120             <option value="4">Medium-large</option>
121             <option value="5">Big</option>
122             <option value="6">Very big</option>
123             <option value="7">Maximum</option>
124         </select>
125         <select οnchange="formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;">
126             <option class="heading" selected>- color -</option>
127             <option value="red">Red</option>
128             <option value="blue">Blue</option>
129             <option value="green">Green</option>
130             <option value="black">Black</option>
131         </select>
132         <select οnchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;">
133             <option class="heading" selected>- background -</option>
134             <option value="red">Red</option>
135             <option value="green">Green</option>
136             <option value="black">Black</option>
137         </select>
138         <div id="toolBar2">
139             <img class="intLink" title="Clean" οnclick="if(validateMode()&&confirm('Are you sure?')){oDoc.innerHTML=sDefTxt};" src="https://img-blog.csdnimg.cn/2022010619064239859.gif" />
140             <img class="intLink" title="Print" οnclick="printDoc();" src="https://img-blog.csdnimg.cn/2022010619064266390.png">
141             <img class="intLink" title="Undo" οnclick="formatDoc('undo');" src="https://img-blog.csdnimg.cn/2022010619064228029.gif" />
142             <img class="intLink" title="Redo" οnclick="formatDoc('redo');" src="https://img-blog.csdnimg.cn/2022010619064217479.gif" />
143             <img class="intLink" title="Remove formatting" οnclick="formatDoc('removeFormat')" src="https://img-blog.csdnimg.cn/2022010619064350006.png">
144             <img class="intLink" title="Bold" οnclick="formatDoc('bold');" src="https://img-blog.csdnimg.cn/2022010619064385244.gif" />
145             <img class="intLink" title="Italic" οnclick="formatDoc('italic');" src="https://img-blog.csdnimg.cn/2022010619064353498.gif" />
146             <img class="intLink" title="Underline" οnclick="formatDoc('underline');" src="https://img-blog.csdnimg.cn/2022010619064395144.gif" />
147             <img class="intLink" title="Left align" οnclick="formatDoc('justifyleft');" src="https://img-blog.csdnimg.cn/2022010619064479688.gif" />
148             <img class="intLink" title="Center align" οnclick="formatDoc('justifycenter');" src="https://img-blog.csdnimg.cn/2022010619064482673.gif" />
149             <img class="intLink" title="Right align" οnclick="formatDoc('justifyright');" src="https://img-blog.csdnimg.cn/2022010619064431564.gif" />
150             <img class="intLink" title="Numbered list" οnclick="formatDoc('insertorderedlist');" src="https://img-blog.csdnimg.cn/2022010619064460010.gif" />
151             <img class="intLink" title="Dotted list" οnclick="formatDoc('insertunorderedlist');" src="https://img-blog.csdnimg.cn/2022010619064470787.gif" />
152             <img class="intLink" title="Quote" οnclick="formatDoc('formatblock','blockquote');" src="https://img-blog.csdnimg.cn/2022010619064597520.gif" />
153             <img class="intLink" title="Delete indentation" οnclick="formatDoc('outdent');" src="https://img-blog.csdnimg.cn/2022010619064538788.gif" />
154             <img class="intLink" title="Add indentation" οnclick="formatDoc('indent');" src="https://img-blog.csdnimg.cn/2022010619064592017.gif" />
155             <img class="intLink" title="Hyperlink" οnclick="var sLnk=prompt('Write the URL here','http:\/\/');if(sLnk&&sLnk!=''&&sLnk!='http://'){formatDoc('createlink',sLnk)}" src="https://img-blog.csdnimg.cn/2022010619064510130.gif" />
156             <img class="intLink" title="Cut" οnclick="formatDoc('cut');" src="https://img-blog.csdnimg.cn/2022010619064650324.gif" />
157             <img class="intLink" title="Copy" οnclick="formatDoc('copy');" src="https://img-blog.csdnimg.cn/2022010619064666366.gif" />
158             <img class="intLink" title="Paste" οnclick="formatDoc('paste');" src="https://img-blog.csdnimg.cn/2022010619064650240.gif" />
159         </div>
160         <div id="textBox" contenteditable="true"><p>Lorem ipsum</p></div>
161         <p id="editMode"><input type="checkbox" name="switchMode" id="switchBox" οnchange="setDocMode(this.checked);" /> <label for="switchBox">Show HTML</label></p>
162         <p><input type="submit" value="Send" /></p>
163     </form>
164 </body>
165 </html>

富文本编辑器代码

2.2关于Draggable属性实现元素拖拽：

　　2.2.1属性：draggable: auto | true | false

　　2.2.2拖拽事件：

dragstart 在元素开始被拖动时触发
dragend 在拖动操作完成时触发
drag 在元素被拖动时触发

　　2.2.3释放区域事件：

dragenter 被拖动元素进入到释放区所占据得屏幕空间时触发
dragover 当被拖动元素在释放区内移动时触发
dragleave 当被拖动元素没有放下就离开释放区时触发
drop 当被拖动元素在释放区里放下时触发

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>菜鸟教程(runoob.com)</title>
 6 <style>
 7 .droptarget {
 8     float: left; 
 9     width: 100px; 
10     height: 35px;
11     margin: 15px;
12     padding: 10px;
13     border: 1px solid #aaaaaa;
14 }
15 </style>
16 </head>
17 <body>
18 
19 <p>在两个矩形框中来回拖动 p 元素:</p>
20 <div class="droptarget">
21     <p draggable="true" id="dragtarget">拖动我!</p>
22 </div>
23 <div class="droptarget"></div>
24 <p style="clear:both;"><strong>注意：</strong>Internet Explorer 8 及更早 IE 版本或 Safari 5.1 及更早版本的浏览器不支持 drag 事件。</p>
25 <p id="demo"></p>
26 <script>
27 /* 拖动时触发*/
28 document.addEventListener("dragstart", function(event) {
29     //dataTransfer.setData()方法设置数据类型和拖动的数据
30     console.log(event.dataTransfer);
31     event.dataTransfer.setData("Text", event.target.id);
32     // 拖动 p 元素时输出一些文本
33     document.getElementById("demo").innerHTML = "开始拖动 p 元素.";    
34     //修改拖动元素的透明度
35     event.target.style.opacity = "0.4";
36 });
37 //在拖动p元素的同时,改变输出文本的颜色
38 document.addEventListener("drag", function(event) {
39     document.getElementById("demo").style.color = "red";
40 });
41 // 当拖完p元素输出一些文本元素和重置透明度
42 document.addEventListener("dragend", function(event) {
43     document.getElementById("demo").innerHTML = "完成 p 元素的拖动";
44     event.target.style.opacity = "1";
45 });
46 /* 拖动完成后触发 */
47 // 当p元素完成拖动进入droptarget,改变div的边框样式
48 document.addEventListener("dragenter", function(event) {
49     if ( event.target.className == "droptarget" ) {
50         event.target.style.border = "3px dotted red";
51     }
52 });
53 // 默认情况下,数据/元素不能在其他元素中被拖放。对于drop我们必须防止元素的默认处理
54 document.addEventListener("dragover", function(event) {
55     event.preventDefault();
56 });
57 // 当可拖放的p元素离开droptarget，重置div的边框样式
58 document.addEventListener("dragleave", function(event) {
59     if ( event.target.className == "droptarget" ) {
60         event.target.style.border = "";
61     }
62 });
63 /*对于drop,防止浏览器的默认处理数据(在drop中链接是默认打开)
64 复位输出文本的颜色和DIV的边框颜色
65 利用dataTransfer.getData()方法获得拖放数据
66 拖拖的数据元素id(“drag1”)
67 拖拽元素附加到drop元素*/
68 document.addEventListener("drop", function(event) {
69     event.preventDefault();
70     if ( event.target.className == "droptarget" ) {
71         document.getElementById("demo").style.color = "";
72         event.target.style.border = "";
73         var data = event.dataTransfer.getData("Text");
74         event.target.appendChild(document.getElementById(data));
75     }
76 });
77 </script>
78 
79 </body>
80 </html>

来自一个手册得完整示例

　　》》示例链接：https://www.runoob.com/try/try.php?filename=tryjsref_ondrag_all

2.3Hidden实现的元素隐藏本质上就是基于display的样式属性none实现的，这个隐藏的元素依然存在于文档结构中，只是display属性被设置为none了而已。

2.4自定义属性：

<div data-val="demo"></div>
document.getElementsByTagName('div')[0].getAttribute('data-val');//demo

转载于:https://www.cnblogs.com/ZheOneAndOnly/p/11264585.html

weixin_30949361

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫