VUE 移動端進入頁面監聽滑動或點選事件後,超過規定時間沒有任何操作,重置頁面
阿新 • • 發佈:2021-01-12
瀏覽器核心
- 渲染引擎
- JS引擎(現在基本不常用)
- 瀏覽器核心主要有四個:
- Trident (IE核心)
- Gecko(Firefox火狐核心):開源
- Webkit (safari蘋果核心)
- Blink(chrome谷歌核心):其實是Webkit的分支
Web標準
- 由W3C與其他標準化組織制定的一系列標準
- 結構標準:用來進行分類;分為XML和XHTML兩部分
- 表現(樣式)標準:外觀樣式;以css為主
- 行為標註:網頁模型定義及互動的編寫;主要有DOM和ECMAScript
HTML初始
HTML骨架格式
<html> <head> <title>Document</title> </head> <body> </body> </html>
標籤分類
- 雙標籤:<標籤名> </標籤名>;如上所示HTML骨架格式中都是雙標籤格式
- 單標籤:<標籤名/>; 如<br/>換行符
標籤關係
- 巢狀標籤
- 並列標籤
文件型別
- <!DOCTYPEhtml>(HTML5的文件型別格式)
字符集
- <metacharset="UTF-8">(HTML5的字符集格式)
HTML標籤的語義化
- 指標籤的含義
HTML常用標籤分類
- 排版標籤:主要和css搭配使用
- 標題標籤:h1 h2 h3 h4 h5 h6
- 段落標籤:p
- 水平線標籤:hr
- 換行標籤:br
- div、span標籤:沒有語義
- 影象標籤:img
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!--標題標籤:h1|h2|h3|h4|h5|h6 --> <h1>不想做禿頭少女!!!</h1> <h2>不想做禿頭少女!!!</h2> <h3>不想做禿頭少女!!!</h3> <h4>不想做禿頭少女!!!</h4> <h5>不想做禿頭少女!!!</h5> <h6>不想做禿頭少女!!!</h6> <!-- 段落標籤:p --> <p>段落標籤,用來對文字進行分段</p> <!-- 水平線標籤:horizontal 單標籤 hr --> <hr/> <!-- 換行標籤:br 單標籤 --> <br/> <!-- 影象標籤:img 單標籤 --> <!-- alt 與 title 的區別: 1、alt:當圖片無法顯示是,會被alt中的文字所替換 2、title:當滑鼠懸停在圖片上時,顯示title中的文字 --> <img src="圖片路徑" alt="這是一張圖片" title="哈哈哈"/> </body> </html>
頁面展示如下
標籤屬性
- width
- height
- 、、、
連結標籤 | 錨點定位 | base標籤
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 連結標籤: 1、必須有 href 屬性;並且 href 中存放的是連結地址url 2、連結地址必須以 http:// 或 https:// 開頭 3、內部連結只需要在 href 中寫入頁面名稱即可:如 demo.html ;字尾名 .html 必須有 --> <a href="https://www.baidu.com/">百度</a><br><br> <!-- 錨點定位: 1、也是 a 標籤;與連結標籤不同的是 href 屬性中的內容; href = " # 所要定位的標籤中id的內容 " 2、需要定位的標籤中 id 屬性格式:id = " 所要定位的標籤中id的內容 " --> <a href="#baidu">百度</a><br><br> <a href="#chrome">谷歌</a><br><br> <a href="#web">新浪微博</a><br><br> <h3>百度簡介</h3> <p>全球最大的中文搜尋引擎、致力於讓網民更便捷地獲取資訊,找到所求。百度超過千億的中文網頁資料庫,可以瞬間找到相關的搜尋結果。</p> <h3>谷歌簡介</h3> <p>雙核高速瀏覽器_雙核智慧瀏覽器免費下載!純淨無捆綁,拒絕卡頓,智慧雙核,秒開網頁,雙核高速瀏覽器_由軟體管家提供下載,快速更安全!</p> <h3 id="web">新浪微博簡介</h3> <p>隨時隨地發現新鮮事!微博帶你欣賞世界上每一個精彩瞬間,瞭解每一個幕後故事。分享你想表達的,讓全世界都能聽到你的心聲!</p> <!-- base標籤:target 1、target = "_blank" :以新頁面開啟所要連結的頁面,不覆蓋原有頁面 2、target = "_self" :覆蓋原有頁面開啟所要連結的頁面 3、當連結頁面過多時,可以使用 base 標籤一次性將所有連結介面的 target 屬性設定為想要的值 --> <base target = "_blank"/> <a href="https://www.baidu.com/" target="_self">百度</a><br><br> <a href="https://www.google.cn/" target="_blank">谷歌</a><br><br> <a href="https://weibo.com/">新浪微博</a><br><br> <a href="https://www.zhihu.com/signin?next=%2F">知乎</a><br><br> </body> </html>
特殊字元
-  :空格符
- <:<
- >:>
- 、、、
相對路徑
- 同級路徑:img.pg
- 下一級路徑:images/img.jpg
- 上一級路徑:../img.jpg
- 絕對路徑:
- 本地:右鍵-屬性 獲取圖片或檔案的句絕對路徑(不推薦使用)
- 瀏覽器:在瀏覽器中複製圖片等的路徑
列表標籤
- 無序列表:沒有順序級別之分,是並列的
<ul> <li>並列</li> <li>並列</li> </ul>
#注意:
1、<ul>標籤中只能放<li>標籤!
2、<li>標籤中可以容納所有元素
3、無序列表有其自己特有的屬性樣式:
- 並列
- 並列
- 有序列表:按照一定的順序排列定義
<ol> <li>父母</li> <li>孩子</li> </ol>
#同無序列表一樣,有序列表的特有樣式如下:
- 父母
- 孩子
- 自定義列表
<dl> <dt>定義標題</dt> <dd>對所定義的標題進行描述、解釋</dd> </dl>
#一般網站底部描述可用