class h5 点击后样式变化_H5学习笔记
目錄
- 什么是HTML:
- 頭部標簽
- H5視頻
- H5音頻
- H5拖放
- H5Web存儲
- H5應用緩存
- H5畫布SVG
- H5畫布canvas
- 全局屬性:
- 事件屬性:
- 顏色、樣式和陰影
- 線條樣式
- 矩形
- 路徑
- 轉換
- 文本
- 圖像繪制
- 像素操作
- 合成
- 畫圖秀秀
- SVG與Canvas 的區別
- H5 與各個主流瀏覽器的兼容性
- H5實例
什么是HTML:
HTML是HyperText Markup Language的縮寫,翻譯成中文是超文本標記語言,用于網頁的創建。
頭部標簽
H5視頻
H5音頻
H5拖放
H5Web存儲
H5應用緩存
H5畫布SVG
H5畫布canvas
什么是 Canvas?
1、HTML5 的 canvas 元素使用 JavaScript 在網頁上繪制圖像。
2、畫布是一個矩形區域,您可以控制其每一像素。
3、canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
全局屬性:
accesskey 規定激活元素的快捷鍵。
class 規定元素的一個或多個類名(引用樣式表中的類)。
contenteditable 規定元素內容是否可編輯。
contextmenu 規定元素的上下文菜單。上下文菜單在用戶點擊元素時顯示。
data-* 用于存儲頁面或應用程序的私有定制數據。
dir 規定元素中內容的文本方向。
draggable 規定元素是否可拖動。
dropzone 規定在拖動被拖動數據時是否進行復制、移動或鏈接。
hidden 規定元素仍未或不再相關。
id 規定元素的唯一 id。
lang 規定元素內容的語言。
spellcheck 規定是否對元素進行拼寫和語法檢查。
style 規定元素的行內 CSS 樣式。
tabindex 規定元素的 tab 鍵次序。
title 規定有關元素的額外信息。
translate 規定是否應該翻譯元素內容。
事件屬性:
onafterprint script 文檔打印之后運行的腳本。
onbeforeprint script 文檔打印之前運行的腳本。
onbeforeunload script 文檔卸載之前運行的腳本。
onerror script 在錯誤發生時運行的腳本。
onhaschange script 當文檔已改變時運行的腳本。
onload script 頁面結束加載之后觸發。
onmessage script 在消息被觸發時運行的腳本。
onoffline script 當文檔離線時運行的腳本。
ononline script 當文檔上線時運行的腳本。
onpagehide script 當窗口隱藏時運行的腳本。
onpageshow script 當窗口成為可見時運行的腳本。
onpopstate script 當窗口歷史記錄改變時運行的腳本。
onredo script 當文檔執行撤銷(redo)時運行的腳本。
onresize script 當瀏覽器窗口被調整大小時觸發。
onstorage script 在 Web Storage 區域更新后運行的腳本。
onundo script 在文檔執行 undo 時運行的腳本。
onunload script 一旦頁面已下載時觸發(或者瀏覽器窗口已被關閉)。
顏色、樣式和陰影
線條樣式
矩形
路徑
轉換
文本
圖像繪制
像素操作
合成
畫圖秀秀
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><!-- 繪制一個紅色長方形,添加坐標值--><canvas id="myCanvas" width="200px" height="100px" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></canvas><!-- 放置xy坐標值 --><div id="cursourxy"></div><!-- 漸變色 --><canvas id="box3" width="200px" height="100px" style="border: 1px solid #666666;"></canvas><!-- 嵌入圖片 --><br /><canvas id="img" height="500px" style="width:500px; border:1px solid #666666;"></canvas><script type="text/javascript">var c=document.getElementById("myCanvas");/* getContext("2d") 對象是內建的 HTML5 對象,擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。 */var cxt=c.getContext("2d");/* 第一部分畫矩形 *//* fillStyle 方法將其染成紅色,fillRect 方法規定了形狀、位置和尺寸。 */cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);//繪制“被填充”的矩形/* 第二部分:給坐標值 */function cnvs_getCoordinates(e){//鼠標指針移動到元素上時觸發。x=e.clientX;y=e.clientY;document.getElementById("cursourxy").innerHTML="坐標值: (" + x + "," + y + ")";}function cnvs_clearCoordinates(){//當鼠標指針移出元素時觸發。document.getElementById("cursourxy").innerHTML="";}/* 畫圓 */cxt.fillStyle="#000000";//顏色cxt.beginPath();//起始一條路徑,或重置當前路徑cxt.arc(70,18,15,0,Math.PI*2,true);//創建弧/曲線(用于創建圓形或部分圓)cxt.closePath();//創建從當前點回到起始點的路徑cxt.fill();//填充當前繪圖(路徑)/* 漸變色 */var box3=document.getElementById("box3");var cxt2=box3.getContext("2d");var grd=cxt2.createLinearGradient(0,0,200,100);//創建線性漸變(用在畫布內容上)grd.addColorStop(0,"#FF0000");//規定漸變對象中的顏色和停止位置grd.addColorStop(1,"#00FF00");cxt2.fillStyle=grd;cxt2.fillRect(0,0,200,100); /* 放入圖片 */var img1=document.getElementById("img");var cxt4=img1.getContext("2d");//創建新的圖片對象var imgx = new Image();//指定圖片的URLimgx.src = "https://img.tupianzj.com/uploads/allimg/190924/29-1Z924142629.jpg";//imgx.src ="img/lyh.png";imgx.width="500px"imgx.height="500px";//瀏覽器加載圖片完畢后再繪制圖片imgx.onload = function(){//以Canvas畫布上的坐標(10,10)為起始點,繪制圖像cxt4.drawImage(imgx, -100, -300); };</script></body> </html>SVG與Canvas 的區別
H5 與各個主流瀏覽器的兼容性
H5實例
<!DOCTYPE html><html><head><!-- 字符編碼,防止網頁亂碼 --><meta charset="UTF-8"><!-- 告訴IE瀏覽器,IE8/9都會以IE8引擎來渲染頁面。它必須顯示在網頁中除 title 元素和其他 meta 元素以外的所有其他元素之前。如果不是的話,它不起作用 --><meta http-equiv="X-UA-Compatible" content="ie=edge"><!-- 編寫發送瀏覽器的頭部信息 --><!-- content-type: text/html;charset=utf-8 --><meta http-equiv="content-type" content="text/html;charset=utf-8" /> <!-- viewport 進行移動界面自適配,并且禁止用戶進行修改適配大小 --><meta name="viewport" content="width=device-width,initial-scale=1,minimumscale=1,maximum-scale=1,user-scalable=no" /><!-- SEO --><!-- keyords 常用于搜索引擎可進行模糊搜索到該網站的關鍵字 --><meta name="keywords" content="8-12個以英?逗號隔開的單詞或詞語"> <!-- description 是網站的相關介紹 --><meta name="description" content="80字以內的?段話,與?站內容相關"><!-- charset:iso-8859-1 --><meta http-equiv="charset" content="iso-8859-1"><!-- expires:31 Dec 2008 --><meta http-equiv="expires" content="31 Dec 2008"><!-- 強制客戶端瀏覽器為google內核 --><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><!-- 設置谷歌內核 --><meta name="renderer" content="webkit"><!-- 標簽為頁面上的所有鏈接規定默認地址或默認目標 --><base href="https://www.baidu.com"/><!-- 跳轉方式 --><base target="_self"><!-- 搜索引擎的索引有幫助 客戶端接受服務器端返回的幾種格式 --><meta name="keywords" content="HTML,ASP,PHP,SQL"><!-- 標題 --><title>HTML5 頁面布局</title><!-- 外部樣式 --><link rel="stylesheet" href="./css/index.css"><!-- 內部樣式 --><style style="text/css">header, section, footer, aside, nav, article, figure, figcaption {display: block;} body {color: #666666;margin: 0px;}.wrapper {width: 940px;margin: 20px auto 20px auto;border: 2px solid #000000;}header {height: 160px;}h1 {color:#000;width: 940px;height: 130px;margin: 0px;}nav, footer {clear: both;color: #FFFFFF;;height: 30px;}nav ul {margin: 0px;padding: 5px 0px 5px 30px;}nav li {display: inline;margin-right: 40px;}nav li a {color: #FFFFFF;}nav li a:hover, nav li a.current {color: #000000;}section.courses {float: left;width: 659px;border-right: 1px solid #EEEEEE;}article {clear: both;overflow: auto;width: 100%;}hgroup {margin-top: 40px;}figure {float: left;width: 250px;height: 240px;padding: 5px;margin: 20px;border: 1px solid #EEEEEE;}figcaption {font-size: 90%;text-align: left;}aside {width: 230px;float: left;padding: 0px 0px 0px 20px;}aside section a {display: block;padding: 10px;border-bottom: 1px solid #EEEEEE;}aside section a:hover {color: #985D6A;}a {color: #DE6581;text-decoration: none;}h1, h2, h3 {font-weight: normal;}h2 {margin: 10px 0px 5px 0px;padding: 0px;}h3 {margin: 0px 0px 10px 0px;color: #DE6581;}aside h2 {padding: 30px 0px 10px 0px;color: #DE6581;}footer {font-size: 80%;text-align:center;color: black;padding: 7px 0px 0px 20px;}</style><!-- 頁面加載之前需要加載的腳本 --><script type="text/javascript"></script></head><body><!-- H5頁面布局 --><div class="wrapper"><header><h1>網站標題</h1><!-- 標簽定義導航鏈接的部分。 --><nav><ul><li><a href="" class="current">首頁</a></li><li><a href="">產品</a></li><li><a href="">服務</a></li><li><a href="">關于我們</a></li><li><a href="">聯系我們</a></li></ul></nav></header><!-- 標簽定義文檔中的節(section、區段)。比如章節、頁眉、頁腳或文檔中的其他部分。 --><section class="courses"><!-- 標簽規定獨立的自包含內容 --><article><!-- 規定獨立的流內容(圖像、圖表、照片、代碼等等) --><figure><img src="https://www.0735it.net/images/kc/javase.jpg" alt="Bok Choi" /><!-- 為 figure 添加標題--><figcaption>Java程序設計</figcaption></figure><!-- 標簽用于對網頁或區段(section)的標題進行組合。 --><hgroup><h2>Java程序設計</h2><h3>面向對象程序設計</h3></hgroup><p>不要必須讓生活跌宕波瀾,要明白平靜無奇才是生活的真。惟有踏踏實實走進生活的人,才能真正品味生活的真諦。</p></article> <article><figure><img src="https://www.0735it.net/images/kc/h5.jpg" alt="Teriyaki sauce" /><figcaption> 精美短文1</figcaption></figure><hgroup><h2> 精美短文1</h2><h3> 精美短文2 + 精美短文3 + 精美短文3</h3></hgroup><p>喬治、赫伯特說過:“一個人如果20歲不英俊,30歲不強壯,40歲不富有,50歲不睿智,那么他這輩子就別想英俊、強壯、富有和睿智了。”這是西方人眼中的生命的季節。</p></article> </section><!-- 標簽定義其所處內容之外的內容。 --><aside><section class="popular-recipes"><h2>xxxxxx</h2><a href="https://www.liyongzhen.com/js" target="_blank">xxxxxxxxxx</a><a href="https://www.liyongzhen.com/jstl" target="_blank">xxxxxxxx</a><a href="https://www.liyongzhen.com/ajax" target="_blank">xxxxxxxx</a><a href="https://www.liyongzhen.com/sql" target="_blank">xxxxxxx</a></section><section class="contact-details"><h2>聯系我們</h2><p>長沙市<br />天罡1號</p></section></aside><!-- 標簽定義文檔或節的頁腳。 --><footer>© 2020 天干物燥</footer></div><!-- .wrapper --><!-- 頁內JS代碼快 --><script type="text/javascript">document.write("<h1>Hello World!</h1>")</script> <!-- 頁面加載之后腳本 --><script type="text/javascript" src="/外部路徑" defer="是否規定延遲" async="規定異步執行腳本" charset="規定外部腳本的編碼"></script></body></html>原文鏈接:H5學習筆記_HMing的博客-CSDN博客
作者:知青先生
出處 :CSDN
《新程序員》:云原生和全面數字化實踐50位技術專家共同創作,文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的class h5 点击后样式变化_H5学习笔记的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: python messagebox输出_
- 下一篇: python中编完类后到实例编写_[零基