從0開始接觸html--第一天學習內容總結

来源:https://www.cnblogs.com/hao-yu/archive/2018/08/25/9523113.html
-Advertisement-
Play Games

第一天 總結: 細節: 文本標簽: 代碼實現: 列表標簽: 代碼實現: 特殊字元: 代碼實現: 分區標簽: 分區標簽自身沒有顯示效果，可以充當容器的作用，用於包含多個功能相關元素，可以進行元素的整體控制。 div：塊級分區元素，獨占一行 span：行內分區元素，和其它行內元素共占一行 開發頁面時通常 ...


第一天

總結:

  1. h1-h6 p 段落 hr br
  2. 有序 ol li 無序 ul li 定義列表 dl dt dd
  3. 塊級元素：獨占一行，h1-h6 p hr div
  4. 行內元素：共占一行, em和i strong和b u del和s span
  5. 塊級分區元素：div header nav article footer
  6. 行內分區元素：span
  7. 特殊字元： 空格：&nbsp   小於號:<  &lt    大於號:>  &gt
  8. 圖片 <img alt="圖片不能正常顯示的時候顯示此內容" src="路徑" width/height="100px / 50%" title="滑鼠懸停時顯示的內容">
  9. 圖片地圖

細節:

文本標簽:

  1. h1-h6 內容標題標簽，內容獨占一行 屬性：align=left/right/center
  2. p 段落標簽 內容獨占一行
  3. hr 水平分割線
  4. br 換行

代碼實現:

<!-- 文檔聲明,告訴瀏覽器使用哪個版本的標準解析此頁面,
此寫法是最高版本h5的寫法 -->
<!DOCTYPE html>
<html><!-- 除了聲明所有的標簽都在html標簽內部 -->
    <head><!-- 頭:裡面的內容是給瀏覽器看的 -->
        <!-- 告訴瀏覽器頁面的字元集 -->
        <meta charset="UTF-8">
        <!-- 頁面標題,顯示在瀏覽器的選項卡中 -->
        <title>文本標簽</title>
    </head>
    <body><!-- 體:裡面的內容是給用戶看的 -->
        <h1 align="center">我是老大</h1>
        <h2 align="right">我是老二</h2>
        <h3>我是老三</h3>
        <h4>我是老四</h4>
        <h5>我是老五</h5>
        <h6>我是老六</h6>
        <hr>
        <p>我是段落標簽1</p>
        <p>我是段落標簽2</p>
        <p>我是段落標簽3</p>
        開始學習HTML了<br>你開心嗎?
    </body>
</html>

 

 

 

列表標簽:

  1. ul 無序列表 子標簽<li></li>
  2. ol 有序列表  屬性:type=1/a/A/i/I  reverserd="reverserd"  start="10" 子標簽<li></li>
  3. dl 定義列表 子標簽:<dt></dt>   <dd></dd>
  4. 有序列表和無序列表之間可以相互嵌套

代碼實現:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表標簽</title>
</head>
<body>
    <h3>無序列表:</h3>
    <ul type="square"><!-- type="square/circle/disc"前面的小標記樣式 -->
        <li>劉備</li>
        <li>貂蟬</li>
        <li>項羽</li>
        <li>狄仁傑</li>
        <li>呂布</li>
    </ul>
    <h3>有序列表:</h3>
    把大象關進冰箱需要幾步?
    <ol reversed="reversed" start="10"><!-- 從10開始倒序 -->
        <li>打開冰箱門</li>
        <li>把大象裝進冰箱</li>
        <li>關上冰箱門</li>
    </ol>
    
    <h3>定義列表</h3>
    <dl><!-- defined定義  list列表 -->
        <dt>冷盤</dt><!-- defined  title標題 -->
        <dd>大拌菜</dd><!-- defined  data數據 -->
        <dd>花毛一體</dd>
        <dd>拍黃瓜</dd>
        <dt>炒菜</dt>
        <dd>宮保雞丁</dd>
        <dd>木須肉</dd>
        <dd>小炒肉</dd>
    </dl>
    
    <h3>列表嵌套:</h3><!-- 嵌套有兩種方式 -->
    <ol>
        <li>ol1</li>
        <li>ol2
        <!-- 1.嵌套在<li></li>裡面 -->
            <ul>
                <li>第二層1</li>
                <li>第二層2</li>
                <!-- 2.嵌套在<li></li>下麵 -->
                    <ol>
                        <li>第三層1</li>
                        <li>第三層2</li>
                        <li>第三層3</li>
                    </ol>
                <li>第二層3</li>
            </ul>
        </li>
        <li>ol3</li>
    </ol>
</body>
</html>

 

 

 

特殊字元:

  1. 空格:&nbsp;
  2. <     :&lt;
  3. >     :&gt;

代碼實現:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>特殊字元</title>
</head>
<body>
我愛&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;學習<br>
&lt;我愛學習&gt;
</body>
</html>

 

 

分區標簽:

  1. 分區標簽自身沒有顯示效果，可以充當容器的作用，用於包含多個功能相關元素，可以進行元素的整體控制。

  2. div：塊級分區元素，獨占一行

  3. span：行內分區元素，和其它行內元素共占一行

  4. 開發頁面時通常會分為三大區

    頭部

    體部

    腳部

  5. H5標準中新增的分區標簽 作用和div一樣 但是更直觀

　　　　頭部

　　　　導航

　　　　文章，正文腳部

代碼實現:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>塊級元素和行內元素</title>
</head>
<body>
<h3>分區標簽</h3>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
    <span>span1</span>
    <span>span2</span>
    <span>span3</span>
    <h3>H5新增分區標簽</h3>
    <header>頭部區域</header>
    <nav>導航區域</nav>
    <article>正文區域</article>
    <footer>腳步區域</footer>
</body>
</html>

 

 

 

圖片img:

  • 路徑分為兩種：

  1. 相對路徑： 訪問站內資源使用相對路徑 a.圖片和頁面同一目錄，直接寫圖片名稱 b.圖片在頁面的上級目錄, ../圖片名 c.圖片在頁面的下級目錄, 文件夾名/圖片名

  2. 絕對路徑： 訪問其它網站的資源使用絕對路徑，以http開頭，存在風險，如果目標圖片路徑發生改變則不能顯示

  • 常用屬性：

  1. alt: 當圖片不能正常顯示的時候顯示此內容

  2. title： 當滑鼠在圖片上懸停的時候顯示此內容

  3. width/height: 設置圖片的寬度和高度，可以設置像素px或百分比%，如果只設置寬度則高度等比例縮放

  • 支持的圖片格式： jpg/jpeg不支持透明色 png支持透明色 GIF動圖

代碼實現

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 當圖片不能正常顯示的時候顯示此內容 -->
<!-- 圖片路徑
1.相對路徑:顯示站內資源使用相對路徑
    a.圖片和頁面同一目錄,直接寫圖片名稱 a.jpg
    b.圖片在頁面的上級目錄, ../water.jpg(上兩級../../xxx)
    c.圖片在頁面的下級目錄, abc/tiger.jpg
2.絕對路徑:通常以http開頭,訪問站外資源使用絕對路徑,
         訪問站外資源也稱為圖片盜鏈
         目標圖片路徑發生改變,則不能正常顯示
 -->
 <!-- 支持的圖片格式:jpg/jpeg不支持透明色   png支持透明色  gif動圖 -->
 <!-- title:滑鼠懸停時顯示的內容 -->
 <!-- width/height 值為像素px或百分比,
 如果只設置寬,則高度會等比縮放 -->
<img alt="這是一個美女" src="a.jpg">
<img alt="這是一片風景" title="這是標題" width="50%"  src="../water.jpg">
<img alt="這是一隻老虎" width="50%" src="abc/tiger.jpg">
<img src="https://goss.veer.com/creative/vcg/veer/800water/veer-152360031.jpg">
</body>
</html>

 

 

圖片地圖:

  • 常用屬性：
  1. shape： 形狀，常用rect矩形 和 circle圓形
  2. coords：坐標 矩形四個值(x1,y1,x2,y2) 圓形三個值(x,y,半徑)
  3. href: 值為路徑，可以寫相對路徑和絕對路徑，路徑可以指向頁面，也可以指向文件，如果瀏覽器支持打開此格式的文件則直接瀏覽（圖片，pdf等）如果不支持打開則下載此文件

代碼實現:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<img src="a.jpg" width="500px" usemap="#mymap">
<!-- 圖像地圖標簽 -->
<map name="mymap" id="mymap">
<!-- area:區域  shape:形狀  rect:矩形  coords:坐標
     對角線兩個點的坐標(x1,xy1,x2,y2) -->
<area alt="文字介紹" shape="rect" coords="0,0,100,100" href="demo06.html">
<area alt="文字介紹" shape="circle" coords="200,200,100" href="../water.jpg">
</map>
</body>
</html>

 

 

 

回顧練習:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>回顧總結練習</title>
</head>
<body>
    <h1>這是h1</h1>
    <h2>這是h2</h2>
    <h3>這是h3</h3>
    <h4>這是h4</h4>
    <h5>這是h5</h5>
    <h6>這是h6</h6>
    <hr><!-- 水平分割線 -->    
    <p>段落標簽1</p>
    <p>段落標簽2</p>
    <p>段落標簽3</p>
    測試換行<br>測試換行    
    <h3>無序列表</h3>
    <ul type="circle">
        <li>吃飯</li>
        <li>睡覺</li>
        <li>敲代碼</li>
    </ul>
    <h3>有序列表</h3>
    <ol type="1" start="8" reversed="reversed">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>JQuery</li>
    </ol>
    <h3>定義列表</h3>
    <dl>
        <dt>歌星</dt>
        <dd>周傑倫</dd>
        <dd>劉德華</dd>
        <dd>張學友</dd>
        <dt>影星</dt>
        <dd>周星馳</dd>
        <dd>成龍</dd>
        <dd>李連傑</dd>
    </dl>
    <h3>列表嵌套</h3>
    <ul>
        <li>我的訂單</li>
        <ul>
            <li>全部訂單</li>
            <li>待付款</li>
            <li>待收貨</li>
            <li>待評價</li>
            <li>退貨退款</li>
        </ul>
        <li>我的優惠券</li>
        <li>收貨地址</li>
        <ul>
            <li>地址管理</li>
        </ul>
        <li>賬號管理</li>
        <ul>
            <li>我的信息</li>
            <li>安全管理</li>
        </ul>
    </ul>
    <h3>分區標簽</h3>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
    <span>span1</span>
    <span>span2</span>
    <span>span3</span>
    <h3>H5新增分區標簽</h3>
    <header>頭部區域</header>
    <nav>導航區域</nav>
    <article>正文區域</article>
    <footer>腳步區域</footer>
    <h3>塊級元素</h3>
    div,h1-h6,p,hr
    <h3>行內元素</h3>
    span,<em>斜體</em> <i>斜體</i>
    <strong>加粗</strong> <b>加粗</b>
    <u>下劃線</u>
    <del>刪除線</del> <s>刪除線</s><br>
    <h3>圖片標簽</h3>
    <img alt="這是圖片" title="圖片" width="50%" src="../water.jpg" usemap="#mymap">
    <h3>圖片地圖</h3>
    <map name="mymap" id="mymap">
        <area shape="rect" coords="0,0,100,100" href="http://www.baidu.com">
        <area shape="circle" coords="150,50,50" href="http://www.baidu.com">
    </map>
    
</body>
</html>

 


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

-Advertisement-
Play Games
更多相關文章
  • 環境變數NLS_LANG
    NLS_LANG是一個環境變數，用於定義語言，地域以及字元集屬性。對於非英語的字元集，NLS_LANG的設置就非常重要。NLS：‘National Language Support (NLS)’ 當我們設定一種nls的時候實際上我們是為oracle在存放數據時指定了他的語種所特有的一些表達形式，比如 ...
  • 大數據學習路線（完整詳細版）
    大數據學習路線java(Java se,javaweb)Linux(shell,高併發架構,lucene,solr)Hadoop(Hadoop,HDFS,Mapreduce,yarn,hive,hbase,sqoop,zookeeper,flume)機器學習(R,mahout)Storm(Storm ...
  • SQLServer約束介紹
    約束定義 對於資料庫來說，基本表的完整性約束分為列級約束條件和表級約束條件： 列級約束條件 列級約束條件是對某一個特定列的約束，包含在列定義中，可以直接跟在該列的其他定義之後，用空格分隔，不用指定列名。 表級約束條件 表級約束條件 表級約束條件與列定義相互獨立，不包括在列定義中，通常用於對兩個或兩個 ...
  • 程式中使用百度地圖
    在程式中使用百度地圖提供的功能之前需要做以下的準備工作 1.申請 API Key 在下麵這個網址註冊成為百度開發者 http://developer.baidu.com/user/reg 然後創建應用，創建完成會出現如下界面： 至此我們就獲取到了API KEY 2.下載百度地圖Android版的SD ...
  • js求數組的最大值--奇技淫巧和笨方法
    寫這篇文章的原因我目前做的項目很少用到演算法，於是這方面的東西自然就有點兒生疏。最近的一次編碼中遇到了從數組中獲取最大值的需求，當時我不自覺的想到了js的sort()函數，現在想來真是有些“罪過”，當時自己內心還覺得有些得意：“嗯，我用js的內置方法解決了一個通常需要用排序演算法才能解決的問題，代碼簡短 ...
  • css隨堂筆記（三）
    Css隨堂筆記（三） 1 關於背景圖片 A 設置背景圖片：background-image：url(“圖片的路徑”)； B 背景圖片位置： background-position：1 方位名詞 背景位置： 1.如果只設置一個方位詞，另外一個預設居中 2.如果設置的值是兩個方位詞，與順序無關 2 數值 ...
  • JQuery阻止預設行為
    有時候用戶的操作未滿足某些條件時，需要阻止某些元素的預設行為，如鏈接的跳轉和表單的提交等，jQuery 提供了 preventDefault() 方法來實現。當用戶未填寫用戶名時，阻止表單提交： Demo： 如果不使用 return false;或event.preventDefault(); 還是 ...
  • webpack必知必會
    細節 url-loader和file-loader是什麼關係？ file-loader用於將文件路徑打包為另一個url，url-loader封裝了file-loader。使用url-loader時，只需要安裝url-loader即可，不需要安裝file-loader，因為url-loader內置了f ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 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 ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類