<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ??碼云GVP開源項目 12k star Uniapp+ElementUI 功能強大 支持多語言、二開方便! 廣告
                # HTML 入門 # 復習 1. 上網原理: 本質是數據傳輸! 每個網址對應一個具體文件,根據網址URL,響應資源(html.css,js,圖片)等到用戶本地,瀏覽器解析 2. 存文本: 只有內容無樣式!! 無語義! 3. HTML: 超文本標記語言! 4. 標簽 ``` <h1><h1> 標題語意, h是 headline標題的縮寫 <p></p> p 是paragraph 段落的意思 HTML中除了語義,其他什么都沒有:沒有樣式、沒有交互、沒有行為。 所以HTML不能讓文本居中、字號調整、顏色改變、字體…… ```` # 目標 *編號為本節重難點* ![](https://box.kancloud.cn/b1fe60dc4e645ffd9b4d167c059bb3ec_436x305.png) - 常見標簽(h,p,img,a,hr,div,span,文本小標簽,注釋和特殊字符,ol,ul,dl) # 基本環境 > 一些基本的電腦常識需要了解! 文件后綴名,瀏覽器等 這里還是要重復下上章節的內容!簡單了解下電腦基礎知識 - 不同文件有不同后綴: *.jpg 圖片 *.mp3 網頁 *.txt 文本 - 網頁 *.html - 默認文件后綴名不顯示,需要手動設置顯示 雙擊我的電腦-- 工具---文件夾選項--- 查看---去掉勾選"隱藏已知文件擴展名" ![](https://box.kancloud.cn/57efe3f19f79a6ab040b5b8e2b1417a3_831x344.png) - 瀏覽器 瀏覽網頁的軟件叫"瀏覽器", 常用瀏覽器有很多,有自己獨立核心技術"內核"的瀏覽器有如下幾個,其余都是盜版! ![](https://box.kancloud.cn/20642d14c8f0c6d8d4c4f288506ff779_325x63.png) | 瀏覽器 | 簡介 | | --- | --- | | IE | 微軟,用戶量最大 | | FireFox | 火狐, 最專業 | | Google & Safari |谷歌和蘋果, 最炫 都是 webkit內核 | | Opera | 歐朋, 最小巧,歐美常用 | # 第一個網頁 > 網頁本質上是文本文檔! 以下步驟可以快速建立第一給自己的網頁! 1. 新建一個txt文件: 2. 改后綴名為*.html 3. 輸入內容,保存用瀏覽器打開 ![](https://box.kancloud.cn/7fb852b28b389d3bbe13bcbd98929010_132x47.png) ![](https://box.kancloud.cn/598695dd6780fd360b30cfc50b020fd6_178x43.png) ![](https://box.kancloud.cn/fe0b47fed0a05059e97a999b5ccf0199_530x262.png) 也就是說,html本質上和txt沒有任何區別,他們都是純文本文件。 我們強行把這個文件的拓展名,從txt更改為html,我們會發現小圖標就變成瀏覽器的小圖標了: 在“打開方式”中,用記事本可以編輯它。 現在要養成 `編輯器里面編輯 → 保存ctrl+s → 瀏覽器里面刷新F5` 的習慣。 # 使用標簽為網頁添加效果 > 以上3步可快速建立一個最簡單網頁! 本質上是一個文本! 如何為網頁添加特殊效果呢? 接了下我們為網頁添加一對特殊格式的字符 ``` 我的第一個網頁 <h1>靜夜思</h1> ``` 保存,瀏覽,可發現"靜夜思" 標題別加粗放大! 這就是一個標題! ![](https://box.kancloud.cn/9e8835d789996dc1c1c1f3ee717dba04_149x275.png) 總結: > h1就標識"靜夜思"為標題! 在網頁中這種成對存在的特殊符號叫"標簽/標記" 基本語法: <起始標簽>內容</結束標簽> 標簽一般成對存在,必須閉合! / 標示閉合符號 網頁中正因為添加了各種標簽才擁有了豐富的效果! 所以網頁全稱"超文本標簽語言" Hyper Text Markup Langulare 超級 文本 標記 語言 > # 制作一個標準網頁 [傻傻的才記憶] > 以上我們制作的是一個最簡單的網頁,一個標準網頁結構如下: ## 標準結構 ![](https://box.kancloud.cn/7c429d0a129390ca3c4c94a3dad9b3d8_320x358.png) ``` 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3<head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <title>Document</title> 6</head> 7<body> 8 9</body> 10</html> ``` 我們詳細講解! ## 文檔聲明頭 第一行 就是文檔聲明頭,DocType Declaration。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規范。 ![](https://box.kancloud.cn/2162399d77566d40f8b43802bb5dcac4_658x340.png) 到底有哪些規范呢? 首先我們先確定一件事兒,我們`現在學習的是HTML4.01`這個版本,這個版本是IE6開始兼容的。HTML5是IE9開開始兼容的。但是IE6、7、8這些瀏覽器還不能過早的淘汰,所以這幾年網頁還是應該用HTML4.01來制作。后面將知道手機、移動端的網頁,就可以使用HTML5了。 HTML4.01里面有兩大種規范,每大種規范里面又各有3種小規范。所以一共6種規范(見下面): HTML4.01里面規定了普通、XHTML兩大種規范。 HTML覺得自己有一些規定不嚴謹,比如,標簽是否可以用大寫字母呢? ``` <H1></H1> ``` 所以,HTML就覺得,把一些規范嚴格的標準,又制定了一個XHTML1.0。在XHTML中的字母X,表示“嚴格的”。 總結一下,一共有6種DTD,說白了,HTML第一行語句一共有6種: ![](https://box.kancloud.cn/b3c0ca9558557d6e920ec26fe76d7287_596x256.png) strict表示“嚴格的”,這種模式里面的要求更為嚴格。這種嚴格體現在哪里?有一些標簽不能使用。 比如,u標簽,就是可以讓一個本文加上下劃線,但是這和HTML的本質有沖突,因為HTML只能負責語義,不能負責樣式,而u這個下劃線是樣式。所以,在strict中是不能使用u標簽的。 1 <u>嘻嘻嘻嘻嘻</u> 怎么給文本增加下劃線呢?今后的css將使用css屬性來解決。 Transitional表示“普通的”,這種模式就是沒有一些別的規范。 Frameset表示“框架”,在框架的頁面使用 ## 字符集 > 字庫規模 : urf-8 > gbk(只有漢字) ``` <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> ``` 字符集用meta標簽定義,meta表示“元”。“元”配置,就是表示基本的配置項目。 charset就是charactor set“字符集”的意思。這個meta不用背,誰背誰傻,自動生成的。 中文能夠使用的字符集兩種: ``` 第一種:UTF-8 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 第二種:gb2312 <meta http-equiv="Content-Type" content="text/html;charset=gb2312"> 也可以寫成gbk <meta http-equiv="Content-Type" content="text/html;charset=gbk"> ``` 什么是字符集?活字印刷術,所有的漢字都有一個個小印章,需要哪個字,就取哪個字。 ![](https://box.kancloud.cn/ef63f9c6fb3fd82a9bcd5106c62d1083_226x150.png) 但是,有兩個人都發明了字庫。老王發明了一個,老李也發明了一個。 比如同一個漢字,“傳”字在老王的字庫里面是第2個大盤子第4行第43列的。 而這個漢字“傳”在老李的字庫里面是第5個大盤子第6行第13列的。 計算機,不能直接存儲漢字,而是存儲的是編碼,所以,計算機記錄“傳”這個字,就是這么記錄的: 老王:20443 老李:50613 > 有兩個字庫UTF-8和gb2312。 UTF-8是國際通用字庫,里面涵蓋了所有地球上所有人類的語言文字, 比如阿拉伯文、漢語、鳥語…… gb2312 是國標,是中國的字庫,里面僅涵蓋了漢字和一些常用外文, 比如日文片假名,和常見的符號。 `字庫規模: UTF-8(字全) > gb2312(只有漢字)` 我們用meta標簽可以聲明當前這個html文檔的字庫,但是一定要和保存的類型一樣,否則亂碼!(重點) ![](https://box.kancloud.cn/99afedb29a7c2d9120f9f36a1ed8ea8d_577x318.png) 當我們不設置的時候,sublime默認類型就是UTF-8。而一旦更改為gb2312的時候,就一定要記得設置一下sublime的保存類型: 文件→ set File Encoding to → Chinese Simplified(GBK) ![](https://box.kancloud.cn/29f8d9fc0af8ed835603ae3086ee2487_680x347.png) 注意,由于UTF-8里面保存了世界上所有人類語言,所以描述一個漢字需要的碼更多。 UTF-8里面存儲一個漢字3個字節。而gb2312中存儲一個漢字2個字節。 `保存大小: UTF-8(更臃腫、加載更慢) > gb2312 (更小巧,加載更快)` ![](https://box.kancloud.cn/8af4fda02581491fb1db096263e0fd16_553x94.png) 列出2個使用情形: 1) 你們公司是做日本動漫的,經常出現一些日語動漫的名字,網頁要使用UTF-8。如果用gb2312將無法顯示日語。 2) 你們公司就是中文網頁,極度的追求網頁的顯示速度,要使用gb2312。如果使用UTF-8將每個漢字多一個byte,所以5000個漢字,多5kb。 我們親測: ● qq網、網易、搜狐都是使用gb2312。這些公司,都追求顯示速度。 ● 新華網藏語頻道,使用的是UTF-8,保證字符集的數量。 我們的課程,一律使用UTF-8,因為我們懶,懶得改了。 瀏覽器就是通過meta來看你是什么字符集的,比如你保存的時候meta寫的,和聲明的不匹配,那么瀏覽器就是亂碼。 ## 關鍵字和頁面描述 > meta除了可以設置字符集,還可以設置關鍵字和頁面描述。,有利于SEO優化 ``` <meta name="Keywords" content="網易,郵箱,游戲,新聞,體育,娛樂,女性,亞運,論壇,短信" /> <meta name="Description" content="網易是中國領先的互聯網技術公司,為用戶提供免費郵箱、游戲、搜索引擎服務,開設新聞、娛樂、體育等30多個內容頻道,及博客、視頻、論壇等互動交流,網聚人的力量。" /> ``` 只要設置的Description頁面描述,那么百度搜索結果,就能夠顯示這些語句,這個技術叫做SEO,search engine optimization,搜索引擎優化。 ![](https://box.kancloud.cn/8733f3ede552fd8321dd2ab17e60638d_458x157.png) 抽象一下: ``` <meta name=”” content=”” /> ``` name就是“名字”的意思,content是“內容”的意思。 也就是說,我們定義了一個名字是“Description”(描述)的meta。內容是網易是中國領先…… 定義關鍵詞: ``` <meta name="Keywords" content="網易,郵箱,游戲,新聞,體育,娛樂,女性,亞運,論壇,短信" /> ``` 這些關鍵詞,就是告訴搜索引擎,這個網頁是干嘛的,能夠提高搜索命中率。讓別人能夠找到你,搜索到你。 Keywords就是“關鍵詞”的意思。 ## title > 網頁標題 ``` <title>愛奇藝-全球領先的在線視頻網站-海量正版高清視頻在線觀看</title> ``` title也是有助于SEO搜索引擎優化的: ![](https://box.kancloud.cn/f21f819f7b4906d7523160433cab34ed_230x34.png) ## body 用戶可見的內容都必須寫在body中 總結: 網頁的head標簽里面,表示的是頁面的配置,有什么配置? 字符集、關鍵詞、頁面描述、頁面標題。 今后我還能看見一些配置:IE適配、視口、iPhone小圖標等等…… ## 補充:網站小圖標 > head 中也可以加入網站小圖標 ``` <link rel="shortcut icon" href="圖標.ico"> ``` ![](https://box.kancloud.cn/7b7d64cf19e35821bfcc88321c8272d4_235x36.png) # 常用標簽簡介 > 常用標簽: 標題,段落,水平線,換行,圖片 ## . 標題系列 ` h1-h6` 是 headline標題的縮寫 ```` <h1>靜夜思</h1> <h2>靜夜思</h2> <h3>靜夜思</h3> <h4>靜夜思</h4> <h5>靜夜思</h5> <h6>靜夜思</h6> ```` 效果如圖: h1-h6,標題標簽,字體加粗放大,逐漸變小 ![](https://box.kancloud.cn/d6481ae2fefcd93d9a1b0b3c29e33779_165x269.png) ## 段落 `p ` p是`paragraph` 段落的縮寫段落會自動換行 ``` HTML標簽是分等級的,HTML將所有的標簽分為兩種:容器級、文本級。 顧名思義,容器級的標簽,里面可以放置任何東西;文本級的標簽里面, 只能放置文字、圖片、表單元素。 ```` p標簽是一個文本級標簽。從學習p的第一天開始,就要死死記住:p里面只能放文字、圖片、表單元素。其他的一律不能放。 ![](https://box.kancloud.cn/b8120db08c1d6f0bb8c2ca443aba939c_154x38.png) Chrome瀏覽器 是世界上HTML5支持最好的瀏覽器。提供了非常好的開發工具,非常適合我們開發人員使用。審查元素功能的快捷鍵是F12。 Chrome的英語原意“硅”,是谷歌公司的產品 審查元素功能: ![](https://box.kancloud.cn/0998040a8ed0b43073a916bfce43c00c_680x371.png) 試著把h放到p到里: ``` <p> 我是一個小段落 <h1>我是一個主標題</h1> </p> ``` 瀏覽器不允許你這么做,我們使用Chrome的F12審查,你會發現,瀏覽器自己把p封閉掉了,不讓你去包裹h1。 ![](https://box.kancloud.cn/7c09232dec4efc9df40489b1ee6c39d3_286x91.png) `所以,再次強調,p是一個文本級的標簽,p里面只能放文字、圖片、表單元素。` ``` 正確的: <h3>個人經歷</h3> <p> 我是一個主標題 </p> ```` ## 水平線 ``` <hr> ``` ## 換行 ```` <br/> ```` ## 塊 表示頁面中一個區域,稍后可添加寬高! ``` <div>內容</div> ``` ## 行標簽 表示一行中的一個或一部分,用戶為一行中特定部分添加效果! ``` <span>內容</span> ``` ## 注釋和特殊符號 注釋: ``` <!--- 要注釋的內容 --> ``` 特殊符號/實體 | 符號 | 介紹 | | --- | --- | | &ngbsp; | 空格 | | &gt; | 大于號 | | &lt; | 小于號 | | &quot; | 引號 | | &copy; | 版權@符號 | | &reg; | 注冊商標 | ## 圖片 > 網頁中能用的圖片類型: jpg/jpeg, gif, png,bmp, 類型之間區別css課程會講解! 不能插入的圖片類型 *.psd, ai HTML頁面不是直接插入圖片,而是插入圖片的引用地址,所以也要把圖片上傳到服務器上,語法: - 語法 ``` <img src="圖片路徑" alt="錯誤提示" > ``` img 是英文`image` 圖片的簡寫 src 是應為`source` 資源的簡寫, 千萬那別寫成 scr src是 img標簽的屬性, 雙引號中是屬性的值! 這個標簽和我們之前學的,都不一樣,因為這個標簽不是“對兒”。自封閉標簽,也稱為單標簽。 為什么?原因很簡單,如果是對兒,里面就要有內容,表示給這個內容增加語義。比如 ``` <h1>哈哈哈哈,我是主標題啦!!!</h1> ``` 圖片就是一個圖片,不需要給什么文字增加語義,所以就是自己一個人活得挺好! - alt 屬性 alt是英語alternate“替代”的意思,就表示不管因為什么原因,當這個圖片無法被顯示的時候,出現的替代文字。 ![](https://box.kancloud.cn/9440806ebe56ae3dfa519a655efd7696_270x178.png) - 相對路徑 HTML中插入圖片,所以現在有兩個文件,一個html文件,一個是jpg文件。 我們關心的就是這兩個文件的相對位置。即使這個網站項目,被用u盤拷給了別人,只要相對路徑不變。圖片一定能夠正常顯示。 當圖片在文件夾里面的時候 ![](https://box.kancloud.cn/4f6b08b3e355d062cc88ff43ce937bf4_254x128.png) ``` <img src="images/baby.jpg" alt="巴黎結婚照" /> ``` 如果在很深的文件夾中,也不怕,可以一直羅列下去: ``` <img src="images/jiehunzhao/baby.jpg" alt="巴黎結婚照" /> ``` 如果情況變得復雜,我們的圖片在淺一層的文件夾中: ![](https://box.kancloud.cn/432ec22b1d3dc7cc85a1051909cbe62d_255x180.png) ``` <img src="../3.jpg" alt="" /> ../ 標示上層目錄 ``` 如果是上兩級: ``` <img src="../../3.jpg" alt="" ``` 相對路徑不會出現這種情況: ``` aaa/../bbb/1.jpg ../要么不寫,要么就寫在開頭。 ``` ![](https://box.kancloud.cn/ccd78943ef76a8fd5127001ccce7f61a_158x76.png) ![](https://box.kancloud.cn/a6de90f8a046562234b232896bc69977_353x219.png) ``` 標準答案: <img src="../../photo/1.png" /> ``` 解釋: 現在document是最大的文件夾,里面有兩個文件夾work和photo。work中又有一個文件夾叫做myweb。myweb文件夾里面有index.html。 所以index.html在myweb文件夾里面,上一級就是work文件夾,上兩級就是document文件夾。通過document文件夾當做一個中轉站,進入photo文件夾,看到了1.png。 表示一個區域! ## 超連接 >一個網站,是由很多html網頁組成的,html網頁之間能夠通過超級鏈接互相跳轉,從而形成了“網”。 ``` <a href="頁面地址" title='標題' target='目標打開位置'>圖片或/文字</a> <a href="1.html">結婚照</a> ``` 效果圖,字體顏色變色,自動添加下劃線,鼠標滑過變小手 ![](https://box.kancloud.cn/ce945de0663abc6b073f1a5eb23035ed_82x40.png) a是英語anchor“錨”的意思,就好像這個頁面往另一個頁面扔出了一個錨。是一個文本級的標簽。 ![](https://box.kancloud.cn/7dfca246ad886927d770f64c4fb71738_183x114.png) href是英語hypertext reference超文本地址的縮寫。讀作“喝瑞夫”,不要讀作“喝夫”。 - 屬性 title ![](https://box.kancloud.cn/ea55bfc3d948413174f4923ba9590907_309x86.png) ``` title是懸停文本,相當于圖片標題 <a href="09_img.html" title="很好看哦">結婚照</a> ``` - 屬性 target ``` target 是否在新窗口中打開 target實際上是“目標”的意思。 blank就是“空白”的意思,就表示新建一個空白窗口。為毛有一個_ ,就是規定,沒啥好解釋的。 <a href="09_img.html" title="很好看哦" target="_blank/_self">結婚照</a> ``` 也就是說,如果不寫target=”_blank”或 "_self "那么就是在當前窗口打開,如果寫了,就是在新的空白標簽頁中打開。 清楚img和a標簽的各自的屬性: ``` <img src="1.jpg" /> <a href="1.html"></a> ``` - 網頁內的錨點 頁面當中可以有錨點,所謂的錨點,就是一個小標記,這個小標記是用戶不可察覺的,用戶不知道這里有一個標記。 相當于頁面之間定位!!!網頁太長時用! 錨點用name屬性來設置,一個a標簽如果name屬性(或者id屬性),那么就是頁面的一個錨點。 ``` <a name="錨點名">我的作品</a> 或者: <a id="錨點名">我的作品</a> 使用: 網頁名#錨點名 ``` ![](https://box.kancloud.cn/9ff59ebcc4cf099b27dba13f85722496_515x289.png) 如果有一個超級鏈接,指向頁面中的錨點,那么就是: ``` <a href="#wdzp">點擊我就查看我的作品</a> ``` ![](https://box.kancloud.cn/69a3dcd2228bab620a929985512c361d_519x272.png) - a 是一個文本級標簽 比如一個段落中的所有文字都能夠被點擊,那么應該: ``` <p> <a href="">段落段落段落段落段落段落</a> </p> ``` a的語義要小于p,a就是可以當做文本來處理,所以p里面相當于放的就是純文字。 ## 有序列表 ## 無序列表 ## 自定義列表 # 如何豐富標簽效果? > 標簽的核心是搭建網頁結構 "語義化"內容, 無豐富的效果! 真實網站效果是非常豐富的!我們通過屬性或 樣式 關鍵字來控制表情的效果! ## 屬性概念 屬性概念源于生活! 生活物體(學名叫對象),的名詞或形容詞的描述叫"對象" 比如: 人: 姓名,性別,年齡, 生日,身高,體重等.... 網頁編程時,每個標簽都可以當初一個物體.也有自己的屬性! 比如: 圖片: 寬 width,高 height ,字體顏色:,字體大小等 ## 屬性語法 ``` <起始標簽 屬性1="值1" 屬性2="值2" ...></結束標簽> 不同屬性之間通過空格隔開, 屬性值用""引起來 ``` 案例: ``` 圖片控制寬高 <img src="路徑" width="100px" height="100%"/> div控制寬高 <div width="100px" height="200px"></div> <h1 align="left/center/right">靜夜色</h1> ````` 注意: 屬性控制的樣式是有限的,能力的方式是使用 樣式關鍵字: style (風格/樣式) ``` 就不起作用! <h1 color="red">靜夜思</h1> ``` ## style關鍵字 屬性寫在style關鍵字中! 屬性和值之間用 冒號隔開, 多個之間用分號隔開! 這個是萬能的!后期工作寫法略微變化! ``` <起始標簽 style="屬性1:值1;屬性2:值2;..."></結束標簽> ``` 案例: ``` <div style="width:100px;height:100px;background-color:red;">快1</div> // margin:0 auto; div居中 <div style="width:100px;height:100px;background-color:red; margin: 0 auto;">快2</div> //字體居中 <div style="width:100px;height:100px;background-color:red; text-align:center">快2</div> <img style="width:100px;height:100px"/> //行標簽 字形,大小,粗細 歡迎 <span style="color:red;font-size:30px;font-family:'宋體';font-width:'bold';"> 張局長</span> 來視察 ``` ## 標簽常用屬性 以下是常用的屬性,可以完成我們網頁80%的工作流 ,可先記住 | 常用屬性 | 說明 | | --- | --- | | width | 寬度 單位 %或px | | height | 高度 | | border | 邊框 broder:1px solid red | | color | 字體顏色 | | background-color | 背景顏色 | | font-size | 字體大小 | | align/text-align/margin:0 auto; | 居中屬性 | | float | 浮動 | # 編程規范 1. HTML內容結構要求符合語義化 1. 標簽必須被正確地嵌套。 2. 標簽必須被關閉。 3. 標簽名必須用小寫字母。 4. 屬性值必須用引號擴起來 5. 要注意縮進,提高可度性 # 總結: 1. 基本環境 2. 標簽能為頁面添加效果 3. 常用標簽 4. 屬性和style控制外觀 5. 常用屬性 6. 規范 難點: 標簽,為表情添加樣式
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看