iT邦幫忙

2023 iThome 鐵人賽

DAY 12
0

根據上次跟大家初步的討論HTML的入門內容,今天也要教大家5個HTML你可以學習的方向與例子 :

  1. HTML5的新特性: 學習HTML5的新特性,如語意化標籤(semantic tags)例如**<header><nav><section><article>,以及多媒體元素<video><audio>**等。HTML5引入了一系列新的元素和API,使網頁開發更強大和互動性更高。
<header>
    <h1>網頁標題</h1>
</header>
<nav>
    <ul>
        <li><a href="#">首頁</a></li>
        <li><a href="#">關於我們</a></li>
        <li><a href="#">聯絡我們</a></li>
    </ul>
</nav>
<section>
    <h2>關於我們</h2>
    <p>我們是一支充滿創意的團隊...</p>
</section>
<article>
    <h2>最新新聞</h2>
    <p>我們的公司剛剛宣布了一個重要的新項目...</p>
</article>

  1. 表格和表單: 深入研究HTML表格元素,了解如何創建複雜的數據表格,並使用表單元素**<form><input><select><textarea>**來設計互動式表單,以收集和提交用戶數據。
<table>
    <tr>
        <th>姓名</th>
        <th>年齡</th>
    </tr>
    <tr>
        <td>John Doe</td>
        <td>30</td>
    </tr>
    <tr>
        <td>Jane Smith</td>
        <td>25</td>
    </tr>
</table>

<form action="/submit" method="post">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name" required>
    <br>
    <label for="email">電子郵件:</label>
    <input type="email" id="email" name="email" required>
    <br>
    <input type="submit" value="提交">
</form>

  1. HTML嵌套和文檔結構: 瞭解HTML的嵌套結構,包括如何正確巢狀標籤以構建複雜的頁面結構。學習如何使用區塊層級元素和內聯元素,以及如何遵循良好的文檔結構實踐。
<div>
    <header>
        <h1>網頁標題</h1>
    </header>
    <main>
        <section>
            <h2>內容部分1</h2>
            <p>這是第一個內容區塊。</p>
        </section>
        <section>
            <h2>內容部分2</h2>
            <p>這是第二個內容區塊。</p>
        </section>
    </main>
    <footer>
        <p>© 2023 作者名稱</p>
    </footer>
</div>
  1. 多媒體和嵌入內容: 了解如何嵌入多媒體內容,如圖像、音頻和視頻,並掌握多媒體元素的屬性和最佳實踐。此外,學習如何使用**<iframe>**來嵌入外部內容,例如嵌入式地圖或社交媒體帖子。
<img src="image.jpg" alt="圖片描述">
<video src="video.mp4" controls></video>
<iframe src="(網址)" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
  1. CSS和HTML的互動: 瞭解HTML和CSS之間的關係,學習如何使用CSS來美化和排版網頁。進一步了解CSS選擇器和屬性,以更精確地控制頁面的外觀和風格。此外,學習關於CSS框模型、布局和媒體查詢的更多內容,以實現響應式設計。(註:之後會跟大家說明!!)
<head>
    <link rel="stylesheet" href="styles.css">
</head>

上一篇
Day 11-HTML 入門
下一篇
Day 13-CSS 入門
系列文
菜鳥行銷PM教你30天用Wordpress成為個性化網站大師30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言