亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 4
粉絲 0
評論 0
訪問量 4529
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
Markdown與HTML語義化結構元素學習初體驗
朝與同歌暮同酒
原創(chuàng)
864人瀏覽過

什么是MarkDown

  • markdown是一種輕量級的標記語言。通過簡單的標簽，即可實現(xiàn)內容優(yōu)雅的排版。
  • 常用來快速記錄筆記
  • 一個文檔只有一個大標題

MarkDown的語法

  1. 標題
    標題總共分為六個層級，分別用#，##，###…表示一至六級標題，其中一級標題，字號最大，且一個文檔中只有一個
    ### 這是一個三級標題

    這是一個三級標題

  2. 文本常用的格式標簽
    *斜體*
    斜體
    **加粗**
    加粗
    ~~刪除線~~
    刪除線
  3. 列表
    列表分為有序列表和無序列表，有序列表即有一定的順序，可以用1，2，3等表示順序，無序列表即沒有特定排列順序的列表，列表之間支持嵌套
    有序列表：
    1. 序列1
    無序列表：
    - 無序列表
  4. 引用
    > 這是一條引用

    這是一條引用

  5. 代碼
    代碼的表示分為兩種，分別是單行代碼表示和多行代碼表示
    單行代碼：
    ``：用兩個重音符號包裹
    多行代碼:
    ```html… ```：三個重音符號后，可以加上語言類型，目的是針對不同的語言進行關鍵詞突出顯示
    1. <p>段落</p>
    2. <p>段落</p>
    3. <p>段落</p>
  6. 鏈接
    [名稱](url)
    顯示名稱
    [php中文網](http://ipnx.cn)
    php中文網
    顯示名稱和鏈接
    [php中文網](http://ipnx.cn)<http://ipnx.cn>
    php中文網http://ipnx.cn
    顯示鏈接
    php中文網<http://ipnx.cn>
    php中文網http://ipnx.cn
  7. 圖片
    ![圖片示例](https://gravatar.wp-china-yes.net/avatar/74f66ef04d322203f2af76e345125b19?s=36&d=mm&r=g)
    圖片示例
  8. 分隔條
    不少于三個 —- 字符
    ---

表格
表格的表示具體可見代碼所示:

  1. |姓名|編號|
  2. | ---- | ---- |
  3. |張三|1|
  4. |孫二|2|
姓名 編號
張三 1
孫二 2

HTML基礎

什么是HTML

HTML是一種超文本標記語言，之所以稱為超文本，是因為它是在普通文本的基礎上進行了加強。所謂加強，就是通過屬性定義特殊行為，使用標簽作為頁面元素的標識符，所以標簽與屬性是HTML最重要的兩個特征。但是，由于沒有流程控制，所以HTML不算是一種真正的編程語言。

HTML元素

HTML元素只存在垂直或水平的兩種排列方式，網頁則是由功能不同的元素按一定規(guī)則排列而成的，根據功能與排列的不同可分為三大類:

序號 名稱 描述 舉例
1 塊元素 垂直排列，兩個塊元素不能同時存在同一行，寬高可自定義 <div>,<p>
2 行內元素 可以在同一行排列，寬高由內容排列 <span>,<a>
3 行內塊元素 即可水平排列，寬高又可自定義，多用于外部資源 <img>

標簽的分類

1.單標簽
也稱為空標簽，例如：<img>
2.雙標簽
由起始標簽和結束標簽組成,屬性寫在起始標簽中，例如：<p></p>

常用的HTML標簽

序號 標簽 名稱 描述
1 <h1>-<h6> 標題 通常用來劃分或標注內容中的文本段落
2 <header> 頁眉 一般是由導航, logo 等元素組成
3 <footer> 頁腳 一般是由友情鏈接,聯(lián)系方式,備案號,版權等信息組成
4 <nav> 導航 導航通常是由一個或多個鏈接標簽<a>標簽組成
5 <main> 主體 展示頁面主體內容,建議一個頁面,只出現(xiàn)一次
6 <article> 文檔 本義是文檔, 實際上可以充當其它內容的容器
7 <aside> 邊欄 與主體無關的信息(廣告位, 相關推薦, 閱讀排行等)
8 <section> 區(qū)塊 文檔或主體中的通用小組件
9 <div> 容器 本身無任何語義,通過它的屬性來描述用途

HTML示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <!-- 引用外部css代碼 -->
  7.     <link rel="stylesheet" href="demo1.css" />
  8.     <title>Document</title>
  9.   </head>
  10.   <body>
  11.     <!-- header -->
  12.     <header>
  13.       <h1>&lt;header&gt;</h1>
  14.     </header>
  15.     <div class="container">
  16.       <!-- aside -->
  17.       <aside>
  18.         <h1>&lt;aside&gt;</h1>
  19.       </aside>
  20.       <!-- main -->
  21.       <main>
  22.         <h1>&lt;main&gt;</h1>
  23.         <div>
  24.           <section>
  25.             <h1>&lt;section&gt;</h1>
  26.           </section>
  27.           <section>
  28.             <h1>&lt;section&gt;</h1>
  29.           </section>
  30.         </div>
  31.       </main>
  32.     </div>
  33.     <!-- footer -->
  34.     <footer>
  35.       <h1>&lt;footer&gt;</h1>
  36.     </footer>
  37.   </body>
  38. </html>

其中還用到了引用了外部css代碼:

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  7. body {
  8.   width: 100vw;
  9.   height: 100vh;
  10.   display: grid;
  11.   grid-template-rows: 60px 1fr 60px;
  12.   gap: 10px;
  13. }
  15. header,
  16. footer {
  17.   height: 80px;
  18.   background-color: lightgreen;
  19.   text-align: center;
  20. }
  22. .container {
  23.   display: grid;
  24.   grid-template-columns: 200px 1fr;
  25.   gap: 10px;
  26.   padding: 10px;
  27.   background-color: lightskyblue;
  28. }
  30. .container > aside {
  31.   background-color: lightcyan;
  32.   text-align: center;
  33. }
  34. .container > main {
  35.   display: grid;
  36.   grid-template-rows: 1fr 200px;
  38.   background-color: wheat;
  39.   text-align: center;
  40.   padding: 10px;
  41. }
  42. .container > main > div {
  43.   display: grid;
  44.   grid-template-columns: 1fr 1fr;
  45.   gap: 10px;
  46. }
  47. main div section {
  48.   background-color: violet;
  49. }

顯示效果如下:

總結

今天學習的內容主要分為兩大部分，一部分是MarkDown語法，另一部分是HTML基礎，在開頭還講了軟件的安裝與一些常用插件的安裝。其中MarkDown語法主要是為了記筆記使用，這是一種很便捷的快速記錄方法。另外，在HTML中需要著重記憶的有以下幾點：

  • 表單是除了URL之外，與后端進行交互的唯一入口
  • HTML中有語義標簽，例如<header>,<main>,<aside>,<footer>等。這些標簽的作用，可以全部使用div或其它元素代替。但是推薦在構建頁面的時候，使用語義標簽，這樣更有助于我們的代碼更加有清晰和有條理。即頁面有頁頭，頁面主題和頁尾，而不是 div div div
批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語：總經非常精彩
本博文版權歸博主所有，轉載請注明地址！如有侵權、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網理性發(fā)言，請遵守新聞評論服務協(xié)議
0條評論
作者最新博文
關于我們 免責申明 意見反饋 講師合作 廣告合作 最新更新
php中文網：公益在線php培訓，幫助PHP學習者快速成長！
關注服務號 技術交流群
PHP中文網訂閱號
每天精選資源文章推送
PHP中文網APP
隨時隨地碎片化學習
PHP中文網抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網，和優(yōu)秀的人一起學習！
    全站2000+教程免費學