HTML5與CSS3權威指南筆記案例1

来源:https://www.cnblogs.com/dashucoding/archive/2018/09/14/9648759.html
-Advertisement-
Play Games

第1章 第2章 與`time`結合使用 多個 元素 元素 元素 添加 元素 元素 網頁 屬性 往後餘生,唯獨有你 簡書作者:達叔小生 90後帥氣小伙,良好的開發習慣;獨立思考的能力;主動並且善於溝通 簡書博客: "https://www.jianshu.com/u/c785ece603d1" 結語 ...


標題圖

第1章

完成圖片中的代碼

<!DOCTYPE html>
<meta charset = "UTF-8">
<title> Search </title>
<form>
<p>
 <label>Search:<input name="search" autofocus></label>
</p>
</form>

完成圖片中的代碼

<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title> Username </title>
</head>
<body>
<form>
<p>
 <label>Username:<input name="search" type="text" id="search"></label>
</p>
<script type="text/javascript">
 document.getElementById(‘search’).focus()
</script>
</form>
</body>
</html>

第2章

完成圖片中的代碼

<!DOCTYPE html>
<meta charset="UTF-8">
<title>HTML5</title>
<p>我是達叔
<br/>你好呀

完成圖片中的代碼

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>contentEditable列表</title>
</head>
<h2>可編輯的列表項</h2>
<ul contentEditable="true">
 <li>列表項1</li>
 <li>列表項2</li>
 <li>列表項3</li>
</ul>

完成圖片中的代碼

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>article元素</title>
</head>
<article>
 <h1>Spinner</h1>
 <object>
 <param name="allowFullScreen" value="true">
<embed src="#" width="600" height="395"</embed>
</object>
</article>

完成圖片中的代碼

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>section元素</title>
</head>
<section>
 <h1>達叔</h1>
 <p><b>dashucoding</b>,你好啊</p>
</section>

完成圖片中的代碼

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>section下article元素</title>
</head>
<article>
 <h1>達叔</h1>
<p><b>dashucoding</b>,你好啊</p>
<section>
 <h2>達叔</h2>
 <p>達叔好啊</p>
</section>
</article>

完成圖片中的代碼

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>包含article元素的section元素</title>
</head>
<section>
 <h1>達叔</h1>
 <article>
  <h2>dashucoding</h2>
  <p>哈哈哈哈哈哈哈</p>
 </article>
<section>

完成圖片中的代碼

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>nav元素</title>
</head>
<body>
<h1>達叔小生</h1>
<nav>
 <ul>
  <li><a href="#">我的主頁</a></li>
  <li><a href="#">我的技術博客</a></li>
 </ul>
</nav>
<article>
 <header>
  <h1>元素</h1>
  <nav>
   <ul>
    <li><a href="#HTML5">歷史</a></li>
    <li><a href="#CSS3">我的設置</a></li>
   </ul>
  </nav>
 </header>
    <section id="HTML5">
        <h1>HTML5</h1>
        <p>HTML5的歷史</p>
    </section>
    <section id="CSS3">
        <h1>CSS3</h1>
        <p>CSS3的歷史</p>
    </section>
   <footer>
    <p><small>版權所有</small></p>
   </footer>
</article>

完成圖片中的代碼

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>文章內的aside元素</title>
</head>
<body>
<header>
 <h1>H1</h1>
</header>
<article>
 <h1>達叔h1</h1>
 <p>哈哈哈哈</p>
 <aside>
  <h1>名詞</h1>
  <dl>
   <dt>dashucoing的dt<dt>
   <dd>dd的表達</dd>
  </dl>
 </aside>
</article>
</body>

完成圖片中的代碼

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>aside元素</title>
</head>
<aside>
 <nav>
  <h2>達叔</h2>
  <ul>
   <li><a href="#">dashucoding</a> a標簽外</li>
   <li><a href="#">達叔小生</a> a標簽外</li><br/>
       <a href="#">恭喜! 您成功開通了博客</a>
  </ul>
 </nav>
</aside>

putdatetime結合使用

完成圖片中的代碼

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>putdate與time</title>
</head>
<article>
 <header>
  <h1>h1的蘋果</h1>
  <p>dashu<time datetime="2010-2-22" putdate>2010-2-22</time></p>
 </header>
 <p>正文</p>
</article>

多個header元素

完成圖片中的代碼

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>多個header元素</title>
</head>
<header>
 <h1>h1網頁標題</h1>
</header>
<article>
 <header>
  <h1>header的h1文章中article的標題</h1>
 </header>
 <p>p標簽正文</p>
</article>

header元素

完成圖片中的代碼

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>header元素</title>
</head>
<article>
    <header>
        <h1>文章標題h1</h1>
        <p><time datetime="2018-03-20">2018年10月25日</time></p>
    </header>
    <p>文章正文</p>
</article>

hgroup元素

完成圖片中的代碼

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>hgroup元素</title>
</head>
<article>
    <header>
        <hgroup>
            <h1>文章主標題h1</h1>
            <h2>文章子標題h2</h2>
        </hgroup>
        <p><time datetime="2017-05-20">2017-05-20</time></p>
    </header>
    <p>文章正文</p>
</article>

添加footer元素

完成圖片中的代碼

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>添加footer元素</title>
</head>
<article>
    文章內容article
    <footer>
        文章的腳註footer
    </footer>
</article>

address元素

完成圖片中的代碼

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>address元素</title>
</head>
<address>  
    <a href=https://huangguangda.github.io/>個人博客</a> 
    <a href=http://www.cnblogs.com/dashucoding/>博客園</a> 
    <a href=https://juejin.im/user/5a16e1f3f265da43128096cb>掘金:</a>  
</address>

網頁

完成圖片中的代碼

<!DOCTYPE html>
<head>
  <title>網頁</title>
  <meta charset="UTF-8">
</head>
<body>
<!-- 網頁標題 -->
<header>
    <h1>網頁標題</h1>
    <!-- 網站導航鏈接 -->
    <nav>
        <ul>
            <li><a href="https://huangguangda.github.io/">首頁</a></li>
            <li><a href="http://www.cnblogs.com/dashucoding/">博客</a></li>
        </ul>
    </nav>
</header>
<!-- 文章正文 -->
<article>
    <hgroup>
        <h1>文章主標題</h1>
        <h2>文章子標題</h2>
    </hgroup>
    <p>文章正文</p>
    <!--文章評論 -->
    <section class="comments">
        <article>
            <h1>評論標題</h1>
            <p>評論正文</p>
        </article>
    </section>
</article>
<!-- 版權信息 -->
<footer>
    <small>版權所有</small>
</footer>
</body>

form屬性

完成圖片中的代碼

<!DOCTYPE html>
<head>
  <title>form屬性示例</title>
  <meta charset="UTF-8">
</head>
<!-- form -->
<form id="testform">
<input type="text">
</form>
<!-- textarea可以 -->
<textarea form="testform"></textarea>

往後餘生,唯獨有你
簡書作者:達叔小生
90後帥氣小伙,良好的開發習慣;獨立思考的能力;主動並且善於溝通
簡書博客: https://www.jianshu.com/u/c785ece603d1

結語

  • 下麵我將繼續對 其他知識 深入講解 ,有興趣可以繼續關註
  • 小禮物走一走 or 點贊

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一、butterknife介紹 ①官網 butterknife ②Field and method binding for Android Views which uses annotation processing to generate boilerplate code for you 【功能】 ...
  • 都說程式猿學習是不分平臺的,做了一輩子的Xaml,也想看看現在最牛逼的移動技術。 看了看Google 的Flutter,好像很牛逼,不怎麼需要Android和IOS基礎(應該還是要的), 不過現在是Beta版本,但是又說跟Fuschia 有關係,又是一個很牛逼的東西。 於是下載來品嘗一下。 先上幾個 ...
  • 概述 .9.PNG是安卓開發裡面的一種特殊的圖片,這種格式的圖片通過ADT自帶的編輯工具生成,使用九宮格切分的方法。點九圖是一種可拉伸的點陣圖,android會自動調整它的大小,來使圖像在充當背景時可以在界面中自適應展示 生成圖片 .9.png只能放在drawable文件夾中,右鍵.png圖片,找到如 ...
  • 參考文章:https://blog.csdn.net/qq_24216407/article/details/72842614 在build.gradle引用了Vlc的安卓包:de.mrmaffen:vlc-android-sdk:3.0.0 編譯一切正常,運行報錯: 大致意思是com.androi ...
  • 《一統江湖的大前端》系列是自己的前端學習筆記,旨在介紹javascript在非網頁開發領域的應用案例和發現各類好玩的js庫,不定期更新。如果你對前端的理解還是寫寫頁面綁綁事件,那你真的是有點OUT了,前端能做的事情已經太多了, , , , , , 甚至 ,什麼火就搞什麼,活脫脫一個 蹭熱點小能手 。 ...
  • 一、Controller的創建 1.name:控制器的名稱(建議參考Java包的命名規範:點的方式進行命名); 2.function:回調函數的構造方法(實際是對象,主要考慮到類的調用); 3.$scope相當於mvvm模式的viewmodel,支持變數、函數; 3.1.$ccope的由來: $in ...
  • Canvas的API提供了 save() 和 restore() 的方法,用於保存及恢復當前canvas繪圖環境的所有屬性。 save()與restore()方法可以嵌套調用 save()方法將當前繪圖環境壓入堆棧頂部,restore()方法從堆棧頂部彈出一組狀態信息,並據此恢復當前繪圖環境的各個狀 ...
  • 和以往一樣,本次項目也放到了 Github 中,歡迎圍觀 star ~ 1. 前言 2. 基本概念 3. REM佈局 4. VW佈局 實現單邊邊框1px 實現多邊邊框1px 實現邊框圓角 實現容器固定縱橫比 5. REM + VW佈局 6. 對比選擇 方案選擇 食用方式 一、前言 說到前端頁面的佈局 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...