編碼的世界 / 優質文選 / 生涯

HTML5及CSS學習demo1和demo2

2022年5月22日
-   

HTML5及CSS學習
學習路徑： HTML 20% CSS3 50% H5C3 30%包括新增的標簽

各種網頁編程語言的功能


  • 結構 網頁元素整理分類HTML
  • 表現 版式，顏色 大小CSS
  • 行為 網頁交互的編寫後端 JS

瀏覽器工作原理


轉載自Adazheng的博客 感謝博主能寫出這麼好的擬人的文章！
  • 用戶輸入網址（假設是個html頁面，並且是第一次訪問），瀏覽器向服務器發出請求，服務器返回html文件；
  • 瀏覽器開始載入 html 代碼，發現 <head> 標簽內有一個 <link> 標簽引用外部 CSS 文件；
  • 瀏覽器又發出 CSS 文件的請求，服務器返回這個 CSS 文件；
  • 瀏覽器繼續載入 html 中 <body> 部分的代碼，並且 CSS 文件已經拿到手了，可以開始渲染頁面了；
  • 瀏覽器在代碼中發現一個 <img> 標簽引用了一張圖片，向服務器發出請求。此時瀏覽器不會等到圖片下載完，而是繼續渲染後面的代碼；
  • 服務器返回圖片文件，由於圖片占用了一定面積，影響了後面段落的排布，因此瀏覽器需要回過頭來重新渲染這部分代碼；
  • 瀏覽器發現了一個包含一行Javascript代碼的 <script> 標簽，趕快運行它；
  • Javascript腳本執行了這條語句，它命令瀏覽器隱藏掉代碼中的某個（style.display=”none”）。杯具啊，突然就少了這麼一個元素，瀏覽器不得不重新渲染這部分代碼；
  • 終於等到了 </html> 的到來，瀏覽器淚流滿面……
  • 等等，還沒完，用戶點了一下界面中的“換膚”按鈕，Javascript 讓瀏覽器換了一下 <link> 標簽的 CSS 路徑；
  • 瀏覽器召集了在座的各位 <span> <ul> <li> 們，“大夥兒收拾收拾行李，咱得重新來過……”，瀏覽器向服務器請求了新的CSS文件，重新渲染頁面。

    • 可能大家剛開始看這個會十分蒙蔽，不明白他說的是什麼，我相信等大家學完前端的基礎後，回來在看這篇小文會會心一笑

    vscode安裝技巧


    • 現在打開我的學習文件夾要先打開vscode，再把文件夾拖進去，沒有右鍵用打開的那個選項，操作起來十分麻煩，一不小心就把文件夾整個拖到桌面上了
    • 上網查找了一下有沒有解決方法，發現了這篇教程 感謝作者！
    • 這篇教程基本上完美解決了這個問題，現在說一下我通過這個教程時所遇到的坑
      • 因為每個人的安裝路徑都不一樣，所以要修改路徑為盤符到你的code.exe的路徑，如果忘記裝在哪裏可以直接搜索code.exe就可以找到了

    vscode寫博客
    • 這兩個月以來，寫博客真的對我的學習有了很大的提升，這裏我要吹爆 markdown 這個標記語言太適合我們程序猿寫筆記了，這裏我就簡介一下怎麼用 vscode 寫筆記

    之前的時候我使用手寫筆記，結果手抄代碼的感覺你們一定會懂，寫完之後也很少翻開看，遂放棄；之後又嘗試用注釋的方式去寫筆記，但是這種方法很難系統的保存，翻看也十分不方便，也放棄了
    • 首先你要安裝好vscode，然後下載 markdownlint 這個插件然後了解最基本的markdown語法，就可以愉快的寫筆記了！
    • 推薦 菜鳥教程的markdown基本語法
    • 然後在你寫筆記的時候，會出現一些黃色的波浪線，並且有警告，一般都是 MD XX ，這時就是你有書寫不規範的地方，這時只需要對照 markdownlint規則詳細介紹及自定義參數設置 這篇博客就能完美解決這個問題
    • 還有就是vscode默認是不支持數學公式的，需要安裝 Markdown+Math 這個插件
    • 還有一個就是markdown的一個小小的瑕疵，他無法連著圖片文件一起保存，所以就需要圖床
    • 當然在CSDN裏面我們就直接使用它裏面的上傳圖片就可以了，其他好像也有一些方法，例如用GitHub上存儲圖片，這個方面我使用的較少，還是需要大家自己去探索

    HTML5及CSS學習demo2


    本章導讀：主要講了各種標簽的使用方法 包括標題標簽，段落標簽，換行標簽，
    HTML標簽
    <html>
     雙標簽<br />單標簽
    </html>

    • 有包含關系和並列關系

    HTML基本結構
    <html>
     <head>
     <title>網頁的標題</title>
     </head>
     <body>
     網頁的內容部分
     </body>
    </html>

    vscode使用小技巧：
    輸入!並回車，輸出基本模板 alt+B 打開瀏覽器預覽 安裝插件 open in browser，auto remane tag
    各種標簽的講解
    <!DOCTYPE html> <!DOCTYPE>告訴瀏覽器使用的HTML5版本
    <html lang="en"> lang="當前文檔的顯示的語言" 中文"zh-CN"，英語"en"
    <head>
     <meta charset="UTF-8"> charset規定文檔的字符編碼
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 移動端開發的代碼
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
    </head>
    <body>
    </body>
    </html>

    HTML常用的標簽
    • 標題標簽<h1>-<h6>一級標題到6級標題 =md中的#
    • 段落標簽和換行標簽<p></p>段落標簽
    • 換行標簽 單標簽 <br />強制換行(也可以這麼寫<br>)
      小知識：html裏多個空格只會顯示一個空格(回車算一個空格) 段落和換行的區別，段落兩行之間會有空隙，換行不會有空隙

    文本格式化標簽
    • 加粗 <strong>加粗標簽</strong> <b>加粗標簽*2</b> 優先考慮strong
    • 斜體 <em>傾斜標簽</em> <i>傾斜標簽*2</i> 優先考慮em
    • 刪除線 <del>刪除標簽</del> <s>刪除標簽*2</s> 優先del標簽
    • 下劃線 <ins>下劃線標簽</ins> <u>下劃線標簽*2</u> 優先使用ins

    特殊的標簽 div 和 span
    • div 用來布局的 但是他是單獨占一整行
    • span 在一行上顯示多個span

    圖像標簽和路徑
    圖片標簽
    • 圖像標簽<img src="圖像URL" />　單標簽　同一目錄下可以直接用圖片名做url
    • 圖像標簽的參數 (參數之間用空格分開)
      • alt 如果圖片不能顯示用來替換的文字
      • height 圖片高度
      • width 圖片寬度
      • title 鼠標放到圖片上顯示的文字
      • border 邊框寬度 css設定的情況比較多

    路徑
    • 相對路徑 相對於html文件的路徑
      • 同一級的相對路徑 直接寫文件名就可以
      • 下一級路徑 下一級文件夾名/文件名
      • 上一級路徑../文件名
    • 絕對路徑 從盤符開始的路徑
      • 如果找不到的話需要file協議(file:文件路徑)
      • 使用時經常用圖片網址作為絕對路徑

      小知識 相對路徑使用的是/ 絕對路徑使用的是

    超鏈接標簽 a
    • 超鏈接語法格式

    <a herf="" target=""></a>

    • herf 用於鏈接目標的地址(必須)
      • 外部鏈接 兩個標簽中間作為超鏈接開關
      • 內部鏈接 herf直接寫文件名稱就可以(盲猜也是使用相對路徑)
      • 空鏈接 herf可以用空鏈接 用#代替
      • 下載鏈接 如果herf裏是一個zip或文件則默認下載
      • 各種元素都可以做為超鏈接
      • 錨點鏈接 跳到本頁中的某處的鏈接
        • herf屬性裏為’#名字’的形式<a herf="#two">
        • 然後在目標標簽裏<h3 id="two">
    • targrt 鏈接頁面的打開方式 _self為默認值在當前頁打開 _blank為在新窗口打開

    注釋標簽和特殊字符
    • 注釋標簽 <!–這就是注釋–>
    • 快捷鍵ctrl+/
    • 常用特殊字符
      符號名字符代碼
      大於號&gt;
      小於號&lt;
      空格&nbsp;

    熱門文章