国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出

這篇具有很好參考價(jià)值的文章主要介紹了前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方,請(qǐng)大家不吝賜教,您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

點(diǎn)擊前往前端開發(fā)基礎(chǔ)專欄:

HTML5 + CSS3 開發(fā)

一、開發(fā)環(huán)境搭建

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

  • 這里google瀏覽器不能用我們就使用電腦自帶的微軟瀏覽器就可以了!
下載 VS Code

VS Code 官網(wǎng)下載地址

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

  • 這里根據(jù)自己電腦的操作系統(tǒng)進(jìn)行下載!

安裝步驟如下: (是在不知道如何操作,可以找個(gè)教程一步一步來(lái)) 安裝這個(gè)還是是非常簡(jiǎn)單的,一直下一步就可以了。

安裝完畢后,雙擊打開安裝包運(yùn)行進(jìn)行安裝

  1. 接受協(xié)議,然后點(diǎn)擊下一步
  2. 選擇你需要安裝到的目錄路徑,自己自定義也可以,默認(rèn)也行
  3. 可以勾選桌面快捷方式,點(diǎn)擊下一步
  4. 然后就直接點(diǎn)擊安裝即可
1. 2 插件的下載
    1. 漢化版插件
      前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3
    1. 安裝瀏覽器運(yùn)行插件
      前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3
1.3 項(xiàng)目和文件的下載

可以先自己創(chuàng)建一個(gè)文件夾目錄,然后拖住文件夾對(duì)這 vscode 圖標(biāo)打開,或者 打開 vscode 然后拖進(jìn)來(lái)

也可以在文件中打開找到我們創(chuàng)建的文件夾
前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3
前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

二、 什么是 HTML

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

2.1 標(biāo)簽的語(yǔ)法

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

2.2 代碼演示:
<!-- 
    * 1.演示標(biāo)簽的寫法
       * 雙標(biāo)簽(成對(duì)出現(xiàn))
        - 注意: 標(biāo)簽是成對(duì)出現(xiàn)的,并且結(jié)束標(biāo)簽還需需要加上 /
        - 語(yǔ)法格式: <>內(nèi)容</>

       * 單標(biāo)簽
        - 單標(biāo)簽區(qū)分就在于不需要包裹內(nèi)容的:  <>  
-->

<!-- 1、雙標(biāo)簽代碼 -->
<strong>文字加粗標(biāo)簽</strong>

<!-- 2、單標(biāo)簽代碼 -->
<hr>
2.3 小結(jié)

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

三 、HTML基本骨架

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

3.1 快捷鍵生成HTML骨架

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

  • 我們創(chuàng)建文件后 空白的,所以這里我們直接使用快捷鍵進(jìn)行生成骨架就OK了。
3.2 代碼展示
<!-- 
    * 2. HTML骨架生成快捷鍵演示
         - ! (英文狀態(tài)下) 配合 Enter 或者 Tab進(jìn)行生成    
 -->
 

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我是網(wǎng)頁(yè)標(biāo)題</title>
 </head>
 <body>
    body標(biāo)簽中的標(biāo)簽內(nèi)容都是可以給用戶看的哦!寫在這里。
 </body>
 </html>
  • 瀏覽器運(yùn)行后的效果圖:

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

3.3 小結(jié)

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

四、標(biāo)簽之間的關(guān)系

4.1 標(biāo)簽之間的兩種關(guān)系

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

代碼示例:
<!-- 
    * 3. 標(biāo)簽之間的關(guān)系
        -  1. 父子關(guān)系(嵌套關(guān)系)


        -  2. 兄弟關(guān)系(并列關(guān)系)

        -  細(xì)節(jié): 其實(shí)我們可以通過(guò)觀察編輯器的縮進(jìn)進(jìn)行區(qū)分之間的關(guān)系
 -->

 <!-- 1. 創(chuàng)建一個(gè)父級(jí)標(biāo)簽 -->
 <html>
    <!-- 2. 創(chuàng)建一個(gè)子級(jí)標(biāo)簽 -->
    <head></head>
    <!-- 3. 創(chuàng)建第二個(gè)子級(jí)標(biāo)簽 --> 
    <body></body>
 </html>
 <!-- html  是父級(jí)標(biāo)簽,里面兩個(gè)是子級(jí)標(biāo)簽。 head 和  body 之間是并列標(biāo)簽 -->

3.3 小結(jié)

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

五、注釋

5.1 什么是注釋

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

5.2 代碼示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注釋代碼演示</title>
</head>
<body>
    <!-- 
            * 4. 注釋的演示: Ctrl + / 添加注釋或者刪除注釋 
    -->
    <!-- <div>我不想被看見,也可以把我注釋掉</div> -->
    <div>我沒有被注釋,可以被發(fā)現(xiàn)哦!</div>
</body>
</html>
5.3 小結(jié)

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

六、標(biāo)題標(biāo)簽

6.1 標(biāo)題標(biāo)簽
6.2 代碼示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>演示標(biāo)題標(biāo)簽</title>
</head>
<body>
    <!-- 
            * 5. 演示標(biāo)題標(biāo)簽:
                -- 語(yǔ)法: 雙標(biāo)簽  -- >  <h 1 - 6>標(biāo)題內(nèi)容</h 1 - 6>
     -->
    <h1>我是一級(jí)標(biāo)題</h1>
    <h2>我是二級(jí)標(biāo)題</h2>
    <h3>我是三級(jí)標(biāo)題</h3>
    <h4>我是四級(jí)標(biāo)題</h4>
    <h5>我是五級(jí)標(biāo)題</h5>
    <h6>我是六級(jí)標(biāo)題</h6>
</body>
</html>
  • 效果展示:

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

6.3 小結(jié)

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

七、段落標(biāo)簽

在HTML中,段落標(biāo)簽(<p>)用于定義文本中的段落。
它是塊級(jí)元素,意味著每個(gè)段落會(huì)以新行開始,并且在瀏覽器中默認(rèn)會(huì)有上下間距。每一對(duì)<p>標(biāo)簽之間的內(nèi)容會(huì)被視為一個(gè)獨(dú)立的段落。
1
7.1 段落標(biāo)簽的特點(diǎn)

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

7.2 代碼示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>演示段落標(biāo)簽</title>
</head>
<body>
    <!-- 
            * 6. 演示段落標(biāo)簽 p 標(biāo)簽
                語(yǔ)法:<p>這是一個(gè)段落。</p>
     -->
     <p>這是第一個(gè)段落。</p>
     <p>這是第二個(gè)段落。</p>
</body>
</html>
7.3 小結(jié)

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

八、 換行與水平線標(biāo)簽

8.1 換行與水平線標(biāo)簽

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

8.2 代碼示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>換行與水平線標(biāo)簽</title>
</head>
<body>
    <!-- 
            *  演示: 換行與水平線標(biāo)簽
                - 語(yǔ)法: 換行:<br>  水平線:<hr>
    -->
    
    第一行文字
    <br>
    第二行文字
    <hr>
</body>
</html>
  • 不使用換行的效果
    前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

  • 使用換行的效果
    前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

8.3 小結(jié)

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

九、 文本格式化標(biāo)簽

9.1 什么是文本格式化標(biāo)簽

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3
*##### 9.2 標(biāo)簽語(yǔ)法和作用

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

9.3 代碼示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>演示文本格式化標(biāo)簽</title>
</head>
<body>
    <!-- 
            * 演示文本格式化標(biāo)簽
             - 加粗、傾斜、下劃線、刪除線

     -->
    <strong><b>strong 加粗</b></strong>
    <b>b 加粗</b>
    <em>em 傾斜</em>
    <i>i 傾斜</i>
    <ins>ins 下劃線</ins>
    <u>u 下劃線</u>
    <del>del 刪除線</del>
    <s>s 刪除線</s>
    </body>
</html>
小結(jié)

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

十、圖像標(biāo)簽

10.1 圖像標(biāo)簽

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

10.2 代碼示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>演示圖片標(biāo)簽的使用</title>
</head>
<body>
    <!-- 
            * 演示圖片標(biāo)簽的使用
                - 語(yǔ)法: 單標(biāo)簽: <img>
     -->
     
     <img src="../image/image.png" alt="">

</body>
</html>
	
10.3 小結(jié)

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

十一、 圖片標(biāo)簽 - 屬性

11.1 圖片的屬性

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

11.2
	    <!-- alt: 替換文本,圖片無(wú)法加載,替換成文字 -->
    <img src="../Image/image.pngs" alt="我是替換文字">

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

	    <!-- title: 提示文本: 鼠標(biāo)懸停圖片顯示的文字 -->
    <img src="../Image/image.png" title="我是 title 文字">

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

	    <!-- width: 圖片的寬度 沒有單位的數(shù)值-->
    <img src="../Image/image.png" width="200">

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

	    <!-- width: 圖片的寬度 沒有單位的數(shù)值-->
    <img src="../Image/image.png" height="200">

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

11.3 小結(jié)

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

十二、 路徑

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

12.1 相對(duì)路徑

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

12. 3 代碼示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>演示路徑的使用</title>
</head>
<body>
    <!-- 
            * 路徑分為兩種: 1. 相對(duì)路徑   2. 絕對(duì)路徑
                    - 相對(duì)路徑: 相對(duì)當(dāng)前文件的路徑  ./   ../   描述
                    - 絕對(duì)路徑: 相對(duì)電腦的盤符或者根路徑進(jìn)行描述的路徑 (這里不多做介紹)
     -->

     <img src="../Image/image.png" alt="">
</body>
</html>
  • src的屬性值:就是描述的圖片路徑,是一個(gè)相對(duì)路徑。
12. 3小結(jié)

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

  • 絕對(duì)路徑這里就不做介紹了,因?yàn)榇蠹译娔X里面時(shí)時(shí)刻刻用的都是絕對(duì)路徑。

十三、超鏈接標(biāo)簽

13. 1 什么是超鏈接前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3
13.2 代碼示例:
    <!-- 
                * 演示超鏈接標(biāo)簽的使用
                    - 語(yǔ)法: <a gref="屬性值"></a>
     -->
    <a href="www.baidu.com">點(diǎn)擊跳轉(zhuǎn)到百度!</a>

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

13.3 小結(jié)

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

十四、音頻標(biāo)簽

14.1 音頻標(biāo)簽

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

14.2 代碼示例:
    <!--audio音頻標(biāo)簽: 
       + 屬性說(shuō)明:
           - src 屬性是我們需要渲染的音頻路徑 
           - controls: 顯示音頻控制面板    
           - loop;循環(huán)播放
           - autoplay: 自動(dòng)播放
   -->
   <audio src="../audio/周深 - 小美滿.mp3" controls></audio>
  • 效果展示:

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

十五、視頻標(biāo)簽

15.1 視頻標(biāo)簽概述

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

15.2 代碼示例:
    <!-- 
        * 演示 視頻標(biāo)簽的使用:

                - 語(yǔ)法: video 雙標(biāo)簽
                - 屬性: src : 必須屬性  controls 顯示視頻控制面板 loop 循環(huán)播放 muted 靜音播放 autoplay 自動(dòng)播放
     -->


     <video src="../video/test" controls loop autoplay muted></video>

綜合案例一 - 個(gè)人簡(jiǎn)介

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

代碼示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>余承東 - 個(gè)人簡(jiǎn)介</title>
</head>
<body>
    <h1>余承東</h1>
    <hr>
    <p>華為常務(wù)董事、終端BG CEO、智能汽車解決方BU 董事長(zhǎng)、智能終端與智能汽車部件IRB主任</p>
    <img src="../Image/01 yuchengdong.webp" alt="" width="150" height="150">
    <h3>學(xué)習(xí)經(jīng)歷</h3>
    <p>
        <a href="https://baike.baidu.com/item/%E4%BD%99%E6%89%BF%E4%B8%9C/3767904?fromModule=search-result_lemma-recommend">余承東</a> ,1969年生,安徽省六安市霍邱縣人,本科畢業(yè)于西北工業(yè)大學(xué),清華大學(xué)碩士,1993年加入華為。
        現(xiàn)任華為董事會(huì)成員、常務(wù)董事、終端BG CEO、智能汽車解決方案BU 董事長(zhǎng) [22]、智能終端與智能汽車部件IRB主任。   
    </p>

    <h3>主要成就</h3>
    <p>
        余承東(Richard Yu)是華為消費(fèi)者業(yè)務(wù)CEO,他在華為的發(fā)展中發(fā)揮了重要的領(lǐng)導(dǎo)作用。以下是余承東的一些主要成就:

領(lǐng)導(dǎo)華為消費(fèi)者業(yè)務(wù)的蓬勃發(fā)展:余承東領(lǐng)導(dǎo)下的華為消費(fèi)者業(yè)務(wù)在過(guò)去幾年取得了巨大的成功。華為智能手機(jī)品牌迅速崛起,成為全球最大的智能手機(jī)制造商之一。他的領(lǐng)導(dǎo)下,華為在設(shè)計(jì)、技術(shù)創(chuàng)新、攝影能力和性能方面取得了顯著突破。

推動(dòng)華為手機(jī)的技術(shù)創(chuàng)新:余承東致力于推動(dòng)華為手機(jī)的技術(shù)創(chuàng)新,使其成為市場(chǎng)上的領(lǐng)先者。他推動(dòng)了華為在攝影領(lǐng)域的研發(fā)和創(chuàng)新,使華為手機(jī)成為具有卓越圖像質(zhì)量和攝影能力的設(shè)備。華為的攝影技術(shù)在業(yè)界廣受贊譽(yù),并在多個(gè)國(guó)際評(píng)測(cè)中獲得高分和獎(jiǎng)項(xiàng)。

推廣華為品牌的全球化:余承東在推廣華為品牌的全球化方面發(fā)揮了重要作用。他引領(lǐng)華為在全球范圍內(nèi)擴(kuò)大市場(chǎng)份額,尤其是在歐洲、亞洲和拉丁美洲等地。余承東在推出華為P系列和Mate系列等高端產(chǎn)品時(shí),通過(guò)全球營(yíng)銷和品牌活動(dòng)增強(qiáng)了華為在國(guó)際市場(chǎng)上的知名度和認(rèn)可度。

推動(dòng)5G技術(shù)的發(fā)展:作為華為高層領(lǐng)導(dǎo),余承東積極推動(dòng)5G技術(shù)的研發(fā)和部署。他在全球范圍內(nèi)倡導(dǎo)并推廣5G技術(shù)的重要性,并與合作伙伴共同推進(jìn)5G網(wǎng)絡(luò)建設(shè)。華為在5G領(lǐng)域取得了顯著的突破,并成為全球5G技術(shù)和網(wǎng)絡(luò)設(shè)備的主要供應(yīng)商之一。

強(qiáng)調(diào)用戶隱私和數(shù)據(jù)安全:余承東一直非常關(guān)注用戶隱私和數(shù)據(jù)安全的重要性。他強(qiáng)調(diào)了華為對(duì)用戶數(shù)據(jù)隱私的承諾,并采取了多種措施來(lái)確保華為產(chǎn)品和服務(wù)的安全性。余承東通過(guò)加強(qiáng)安全研發(fā)、開放透明合規(guī)等措施,加強(qiáng)了華為在數(shù)據(jù)安全方面的聲譽(yù)。

這些是余承東在華為的主要成就之一。作為華為消費(fèi)者業(yè)務(wù)的領(lǐng)導(dǎo)者,他在推動(dòng)華為品牌的全球化、技術(shù)創(chuàng)新、市場(chǎng)份額擴(kuò)大和用戶數(shù)據(jù)安全方面發(fā)揮了重要作用。
    </p>

    <h3>社會(huì)任職</h3>
    <p>
        余承東除了在華為的職位外,還擔(dān)任了一些社會(huì)任職。以下是一些他的社會(huì)任職經(jīng)歷:

中國(guó)信息通信研究院學(xué)術(shù)委員會(huì)委員:余承東是中國(guó)信息通信研究院(China Academy of Information and Communications Technology)學(xué)術(shù)委員會(huì)的委員。該機(jī)構(gòu)是中國(guó)信息通信技術(shù)產(chǎn)業(yè)的研究和咨詢機(jī)構(gòu),致力于推動(dòng)信息通信技術(shù)的發(fā)展和創(chuàng)新。

深圳市電子商務(wù)協(xié)會(huì)副會(huì)長(zhǎng):余承東擔(dān)任深圳市電子商務(wù)協(xié)會(huì)的副會(huì)長(zhǎng)。深圳市電子商務(wù)協(xié)會(huì)是深圳市電子商務(wù)行業(yè)的專業(yè)組織,旨在促進(jìn)深圳電子商務(wù)的發(fā)展和合作。

中國(guó)電子商務(wù)協(xié)會(huì)常務(wù)理事:余承東是中國(guó)電子商務(wù)協(xié)會(huì)的常務(wù)理事。中國(guó)電子商務(wù)協(xié)會(huì)是中國(guó)電子商務(wù)行業(yè)的全國(guó)性組織,致力于推動(dòng)電子商務(wù)的發(fā)展和規(guī)范。

這些社會(huì)任職經(jīng)歷展示了余承東在信息通信技術(shù)和電子商務(wù)領(lǐng)域的參與和貢獻(xiàn)。通過(guò)擔(dān)任這些職位,他能夠與行業(yè)內(nèi)的專業(yè)人士和機(jī)構(gòu)合作,推動(dòng)相關(guān)領(lǐng)域的發(fā)展和合作。
    </p>
</body>
</html>
  • 效果展示
    前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

綜合案例二 - Harmony OS簡(jiǎn)介

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3

代碼示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HarmonyOS 簡(jiǎn)介</title>
</head>
<body>
    <h1>Harmony OS</h1> 
    <p>HarmonyOS 讓分布式成為開發(fā)的“樂趣”
        統(tǒng)一OS,彈性部署
        一套操作系統(tǒng),滿足大大小小所有設(shè)備的需求,小到耳機(jī),大到車機(jī),智慧屏,手機(jī)等,讓不同設(shè)備使用同一語(yǔ)言無(wú)縫溝通。
    </p>

    <span><a href="https://www.huawei.com/cn/">華為</a> 公司打造的 全場(chǎng)景、分布式智能終端操作系統(tǒng)</span>
    <h3>主要功能</h3>
    <p>
        
HarmonyOS 是華為公司推出的一款操作系統(tǒng),旨在為各種設(shè)備提供統(tǒng)一的操作體驗(yàn)。它的主要功能包括:

分布式架構(gòu):HarmonyOS 支持分布式架構(gòu),能夠靈活運(yùn)行在各種設(shè)備上,包括智能手機(jī)、平板電腦、智能手表、智能電視、汽車信息娛樂系統(tǒng)等。

統(tǒng)一開發(fā):開發(fā)者可以使用一套統(tǒng)一的開發(fā)工具和開發(fā)語(yǔ)言來(lái)開發(fā)應(yīng)用程序,無(wú)需為不同設(shè)備專門開發(fā)不同版本的應(yīng)用。

多終端協(xié)同:支持多終端協(xié)同工作,用戶可以在不同設(shè)備之間無(wú)縫切換應(yīng)用,實(shí)現(xiàn)多設(shè)備之間的數(shù)據(jù)共享和同步。

流暢體驗(yàn):HarmonyOS 提供流暢的操作體驗(yàn),支持快速啟動(dòng)應(yīng)用程序和快速響應(yīng)用戶操作。

安全性:注重用戶數(shù)據(jù)安全和隱私保護(hù),采用了多種安全技術(shù)來(lái)保護(hù)用戶數(shù)據(jù)不受惡意攻擊和侵?jǐn)_。

資源共享:支持設(shè)備之間的資源共享,例如共享網(wǎng)絡(luò)連接、共享文件等。

智能化服務(wù):結(jié)合人工智能技術(shù),為用戶提供更智能、更個(gè)性化的服務(wù),如語(yǔ)音助手、智能推薦等。

高效能力:優(yōu)化系統(tǒng)資源管理,提高系統(tǒng)運(yùn)行效率,從而延長(zhǎng)設(shè)備的續(xù)航時(shí)間和使用壽命。

生態(tài)系統(tǒng)建設(shè):積極建設(shè) HarmonyOS 生態(tài)系統(tǒng),吸引開發(fā)者和合作伙伴參與,共同推動(dòng) HarmonyOS 生態(tài)的發(fā)展。
    </p>
    <!-- 添加視頻 -->
    <video src="../video/HarmonyOS.mp4" autoplay="true" controls loop="true" width="100%"></video>
</body>
</html>
效果展示

前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出,前端開發(fā)基礎(chǔ)(H5 + C3),html,html5,css3文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-853146.html

到了這里,關(guān)于前端開發(fā)基礎(chǔ)(HTML5 + CSS3)【第一篇】:HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì),實(shí)戰(zhàn)寫的出的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來(lái)自互聯(lián)網(wǎng)用戶投稿,該文觀點(diǎn)僅代表作者本人,不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請(qǐng)注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符,請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋,一經(jīng)查實(shí),立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請(qǐng)作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包