當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

class h5 点击后样式变化_H5学习笔记

發布時間：2025/3/21 编程问答 16 豆豆

生活随笔收集整理的這篇文章主要介紹了 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><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"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimumscale=1,maximum-scale=1,user-scalable=no" /><meta name="keywords" content="8-12個以英?逗號隔開的單詞或詞語"> <meta name="description" content="80字以內的?段話，與?站內容相關"><meta http-equiv="charset" content="iso-8859-1"><meta http-equiv="expires" content="31 Dec 2008"><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><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 class="courses"><article><figure><img src="https://www.0735it.net/images/kc/javase.jpg" alt="Bok Choi" /><figcaption>Java程序設計</figcaption></figure><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><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中编完类后到实例编写_[零基