HTML5的特性,發展,及使用

1.html基礎知識

# 01.使用html輸出Hello world!

// 001.改變字體: file -> Default Setting -> Colors & Font

// 002.設置自動換行: file -> Default Setting -> Editor -> General

// 003.中國的編碼格式: GBK, GB2312, UTF-8

# 02.HTML中常見標籤

" 001.H家族: 標題標籤

// h1, h2, h3, h4, h5, h6 (字體依次變小): <h1>我是H1</h1>

"  002.容器標籤: 所見即所得

// <div>我是容器標籤</div>

" 003.橫線標籤

// <hr>

" 004.表單標籤: 輸入框標籤

// 輸入框: <input>

// 換行: <br>

// <input placeholder="我是佔位文字">

// <input value="我是默認文字">

// <input type="password">

// <input type="text">

// <input type="file">

// <input type="color">

// <input type="date">

// <input type="checkbox">

" 005.圖片標籤: 絕對路徑: http:, https:, ftp / 相對路徑: 資源在項目當中

// <img src="imgs/apple.jpg" width="50%" alt="蘋果">

// <img src="https://www.baidu.com/img/bd_logo1.png" alt="百度logo">

" 006.段落標籤

// <p>我是段落標籤</p>

" 007.超連接標籤

// <a hre = "http://www.baidu.com" target="_blank">百度一下,你就知道</a>

" 008.列表標籤

' 無序列表

// <ul type = "circle">

//    <li>111111</li>

//    <li>111111</li>

//    <li>111111</li>

// </al>

' 有序列表

// <ol = type = "A">

//    <li>111111</li>

//    <li>111111</li>

//    <li>111111</li>

// </ol>

# 03.新聞詳情頁

//    文章<

//    頭部<

//    標題標籤<>

//    標題標籤<>

//    圖片<>

//    >

//    正文<

//    組<

//    段落<>

//    段落<>

//    圖片<>

//    >

//    組<

//    標題標籤<>

//    段落<>

//    >

//    >

//    尾部<

//    標題標籤<>

//    段落<>

//    >

//    >

# 04.HTML5中新增的特性

// <meter value="30" max="100"></meter>

// 進度條: <progress value="30" max="100"></progress>

// 視頻播放器: <video src="Source/BigBuck.m4v" controls="controls" autoplay="autoplay" loop="loop"></video>

// 音頻播放器: <audio src="Source/music.m4a" controls="controls"></audio>

 

2.CSS的基礎語法

# 01.行內樣式(內聯樣式)

// 容器標籤: <div style="color: red; font-size: 20px">我是容器標籤</div>

// 段落標籤: <p style="color: blue; font-size: 30px">我是段落標籤</p>

# 02.頁內樣式

// HTML是一門鬆散的解釋性的語言

// CSS遵照的原則: 1.就近原則 2.疊加原則

// 建立index.css樣式供調用

// 改變原有類型: <link rel="stylesheet" href="css/index.css">

# 03.外部樣式

// 告訴網頁這個外部資源用來當作什麼(樣式)

// <link rel="stylesheet" href="css/index.css">

 

3.HTML標籤的類型

# 01.塊級標籤

" 001.獨佔一行,內容的寬度和高度能夠隨意更改

# 02.行內標籤

" 001.一行內能夠顯示多個行內標籤,內容的寬高只能隨內容的尺寸而改變

# 03.行內-塊級標籤

" 001.一行內能夠顯示多個行內-塊級標籤,而且內容的寬高能隨意改變sw