HTML/CSS的基本使用

来源:https://www.cnblogs.com/God-Li/archive/2018/03/15/8452098.html
-Advertisement-
Play Games

本篇博客主要介紹一下HTML/CSS的基本使用，關於它們的介紹便不在贅述，讀者可自行google或百度。 一、HTML 先來簡單介紹一下HTML標簽： HTML 標簽是由尖括弧包圍的關鍵詞，比如 <html> HTML 標簽通常是成對出現的，比如 <b> 和 </b> 標簽對中的第一個標簽是開始標簽 ...


　　本篇博客主要介紹一下HTML/CSS的基本使用，關於它們的介紹便不在贅述，讀者可自行google或百度。

一、HTML

　　先來簡單介紹一下HTML標簽：
　　　　HTML 標簽是由尖括弧包圍的關鍵詞，比如 <html>
　　　　HTML 標簽通常是成對出現的，比如 <b> 和 </b>
　　　　標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽
　　　　開始和結束標簽也被稱為開放標簽和閉合標簽

　　首先在寫每個HTML的文檔之前需要一個基本模板，一般的HTML編輯器都會自動生成。

<!DOCTYPE html>
<!--在html文檔中註釋寫成這種格式-->
<!--一般的html標簽都是成對出現-->

<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Title</title>
</head>
<body>

</body>
</html>

 　　註1：如<html lang="en">，html是標簽名稱，lang是html標簽的屬性。

　　 註2：在HTML文檔中，在<head>標簽內設置一個文件的編碼，標題等，在<body>標簽內寫文檔的內容等。

 　　註3：在HTML中，存在自閉和標簽，例如上面的<meta />標簽，自閉和標簽不需要結束標簽，通常自閉和標簽在結束時寫一個'/'與普通標簽區別。

一、<head>標簽內的常用標簽：

<!DOCTYPE html>

<html lang="en">
<head>
    <!--設置編碼-->
    <meta charset="UTF-8" />

    <!--刷新和跳轉只能使用一個-->
    <!--設置每隔3秒自動刷新-->
    <!--<meta http-equiv="Refresh" content="3" />-->
    <!--設置5秒後自動跳轉-->
    <!--<meta http-equiv="Refresh" content="5; url=https://www.baidu.com" />-->

    <!--設置標題-->
    <title>Hello</title>
    <!--設置圖標-->
    <link rel="shortcut icon" href="image/abc.jpg">

    <!--設置關鍵字，供搜索引擎使用，當用戶搜索這些關鍵字時，搜索引擎可將你的網頁鏈接提供給用戶-->
    <meta name="keywords" content="博客園,html,w3c" />

    <!--簡要描述網站的信息，寫一下網站是乾什麼的-->
    <meta name="description" content="此網頁用與學習html/css的基本使用" />

</head>
<body>
    <h1>hello world</h1>
</body>
</html>

　　註1：在html中可以告訴瀏覽器當前文檔的語言，如上述代碼中<html lang="en">，就是告訴瀏覽器這個文檔時英文的，比如當使用Chrome瀏覽器打開一個英文網頁時瀏覽器會彈出是否翻譯的詢問視窗，瀏覽器辨別網頁內容是什麼語言時就會用到這個屬性，不做強制要求。

　　註2：上述代碼中所說的標題和圖標如下圖，Hello是標題，它前面的那個是圖標。

二、<body>標簽內的常用標簽：

 1 <!--塊級標簽：-->
 2 <!--block元素(塊級標簽)的特點是：-->
 3 <!--　　　　總是在新行上開始；-->
 4 <!--　　　　高度，行高以及頂和底邊距都可控制；-->
 5 <!--　　　　寬度預設是它的容器的100%，除非設定一個寬度-->
 6 <!--　　　　<div>, <p>, <h1>, <form>, <ul>和<li>是塊元素的例子。-->
 7 <h1></h1>
 8 <h2></h2>
 9 ……
10 <h6></h6> --- 標題標簽，預設效果，加大加粗，從h1到h6加大字型大小不同。
11 <p></p> --- 段落標簽，被p標簽所包裹的內容獨占一段，段落與段落之間有間距。
12 <div></div> --- 預設無效果，是最常見的塊級標簽。
塊級標簽 
1 <!--內聯標簽-->
2 <!--inline元素(內聯標簽)的特點是：-->
3 <!--　　　　和其他元素都在一行上；-->
4 <!--　　　　高，行高及頂和底邊距不可改變；-->
5 <!--　　　　寬度就是它的文字或圖片的寬度，不可改變。-->
6 <!--　　　　<span>, <a>, <label>, <input>, <img>, <strong>和<em>是inline元素的例子。-->
7 <span></span> --- 預設沒有任何效果。
內聯標簽  
1 <!--最常用的特殊符號：-->
2 
3 <br /> --- 換行標簽，在一般的文本文檔中使用\r或\r\n做換行符，在HTML文檔中使用此標簽。
4 
5 < ------ &lt;
6 > ------ &gt;
7 空格 ------ &nbsp;
特殊符號 
註1：在html中，一些特殊符號是無法直接顯示的，比如要把<p>顯示在網頁上，可以這樣寫--------- &lt;p&gt;
　　 像這些特殊符號需要使用特殊的代碼來表示，我們可以查閱HTML特殊字元編碼對照表。

 練習使用一下上面的標簽(編輯成一個HTML文檔，用瀏覽器打開)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>標題一</h1>
    <h2>標題二</h2>
    <h3>標題三</h3>
    <h4>標題四</h4>
    <h5>標題五</h5>
    <h6>標題六</h6>
    <p>123</p><p>456</p><p>678</p>
    <p>hello<br />world</p>

    <span>abc</span><span>def</span>
    <div>hij</div><div>klm</div>
    <div>asdfsfafsaf</div>
</body>
</html>

三、表單標簽：

　　在html中常常使用表單標簽來向伺服器端提交數據。html中的表單標簽是<form></form>，其中間包裹的內容就是向服務端提交的數據(比如用戶的賬號密碼，在某網站要發表的文章等)。

from標簽內標簽---input標簽系列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div>
    <!--在form標簽中，屬性action寫將表單數據提交到哪個URL，method寫以哪種方法提交（get/post）-->
    <form action="http://localhost:8888/index" method="get">
        <div>
            <!--input標簽中，type="text"時，輸入框內可輸入任意文本內容-->
            <!--當input做輸入框時，name屬性必須設置，後臺程式使用name的值提取表單數據-->
            <input type="text" name="user" />
        </div>

        <div>
            <!--input標簽中，type="password"時，輸入框內輸入密碼-->
            <input type="password" name="password" />
        </div>

        <div>
            <!--當input做輸入框時，可使用value屬性為輸入框提供預設值-->
            <input type="text" name="email" value="[email protected]" />
        </div>

        <p>
            <span>請選擇性別：</span>
            <!--使用input標簽做單選按鈕，屬性設置type="radio" name="gender"幾個選項的name必須一樣-->
            <!--當checked="checked"時，該項預設選中-->
            男：<input type="radio" name="gender" value="F" checked="checked" />
            女：<input type="radio" name="gender" value="M"/>
            <br />
            <span>愛好：</span>
            <!--使用input標簽做覆選按鈕，屬性設置type="checkbox" name="hobby"幾個選項的name必須一樣-->
            <!--當checked="checked"時，該項預設選中-->
            籃球：<input type="checkbox" name="hobby" value="1" checked="checked" />
            游泳：<input type="checkbox" name="hobby" value="2" />
            閱讀：<input type="checkbox" name="hobby" value="3" checked="checked" />
            唱歌：<input type="checkbox" name="hobby" value="4" />
        </p>


        <div>
            <!--input標簽中，type="button"時，為普通按鈕，預設無任何功能，可用CSS為其添加功能-->
            <!--當input做按鈕時，value的值顯示在按鈕上-->
            <input type="button" value="按鈕" />
        </div>

        <div>
            <!--input標簽中，type="reset"時，為重置按鈕，重置當前表單的所有內容-->
            <input type="reset" value="重置">
            <!--input標簽中，type="submit"時，為提交按鈕，在瀏覽器中點擊後向伺服器端提交表單數據-->
            <input type="submit" value="提交" />
        </div>
    </form>

    <p>
        <!--當要上傳文件時，form標簽的enctype="multipart/form-data"屬性需設置-->
        <form enctype="multipart/form-data">
            <!--input標簽做文件上傳按鈕，type="file"-->
            上傳文件：<input type="file" name="filename" /><br />
            <input type="submit">
        </form>
    </p>

</div>
</body>
</html>

from標簽內標簽---其他標簽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <!--在form標簽中，屬性action寫將表單數據提交到哪個URL，method寫以哪種方法提交（get/post）-->
    <form action="http://xxx.xxx.xxx/xxx" method="get">
        <div>
            <span>城市:</span>
            <!--下拉選擇框使用select標簽,單選-->
            <select name="city">
                <!--選項使用option標簽，提交選項的value的值-->
                <option value="BeiJing">北京</option>
                <!--預設選中，使用selected="selected"屬性-->
                <option value="ShangHai" selected="selected">上海</option>
                <option value="GuangZhou">廣州</option>
                <option value="ShenZhen">深圳</option>
            </select>
            <br />
            <span>城市(多選)：</span>
            <!--下拉選擇框使用select標簽,多選使用multiple="multiple"屬性, size為預設顯示幾條選項-->
            <select name="city" multiple="multiple" size="4">
                <!--選項使用option標簽，提交選項的value的值-->
                <option value="BeiJing">北京</option>
                <!--預設選中，使用selected="selected"屬性-->
                <option value="ShangHai" selected="selected">上海</option>
                <option value="GuangZhou">廣州</option>
                <option value="ShenZhen">深圳</option>
            </select>
            <br />
            <span>城市(分組選):</span>
            <!--下拉選擇框使用select標簽,單選-->
            <select name="city">
                <!--使用optgroup標簽對選項進行分組-->
                <optgroup label="中國">
                    <!--選項使用option標簽，提交選項的value的值-->
                    <option value="BeiJing">北京</option>
                    <!--預設選中，使用selected="selected"屬性-->
                    <option value="ShangHai" selected="selected">上海</option>
                    <option value="GuangZhou">廣州</option>
                    <option value="ShenZhen">深圳</option>
                </optgroup>

                <optgroup label="美國">
                    <!--選項使用option標簽，提交選項value屬性的值-->
                    <option value="1">華盛頓</option>
                    <!--預設選中，使用selected="selected"屬性-->
                    <option value="2" selected="selected">紐約</option>
                    <option value="3">洛杉磯</option>
                </optgroup>
            </select>
        </div>

        <p>
            <!--多行文本輸入，使用textarea標簽-->
            <textarea name="docs">預設值</textarea>
            <input type="submit" />
        </p>
    </form>


</div>

</body>
</html>

四、a標簽的用途

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--a標簽做超鏈接，target="_blank"，用一個新標簽頁打開超鏈接內容-->
    <a href="https://www.baidu.com" target="_blank">百度</a>
    <br />

    <div>
        <!--a標簽做錨，href="#目標標簽的ID值"-->
        <a href="#1">第一節</a>
        <a href="#2">第二節</a>
        <a href="#3">第三節</a>
        <a href="#4">第四節</a>
    </div>

    <div>
        <!--在一個HTML文檔中，標簽的id值不能相同-->
        <div id="1" style="height: 800px;">第一節的內容</div>
        <div id="2" style="height: 800px;">第二節的內容</div>
        <div id="3" style="height: 800px;">第三節的內容</div>
        <div id="4" style="height: 800px;">第四節的內容</div>
    </div>
</body>
</html>

 body標簽內的圖片標簽和列表標簽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<!--將圖標標簽包裹在a標簽之內，當用戶點擊圖片時跳轉到指定鏈接-->
<a href="https://www.baidu.com">
    <!--img是圖片標簽，屬性src是圖片的位置，屬性title的值在滑鼠指針懸停在圖片上時顯示，當圖片未載入成功顯示alt的值-->
    <img src="image/1.png" title="山" alt="風景" style="height: 200px"/>
</a>

<!--列表標簽由三種，ul,ol,dl-->
<ul>
    <li>ul列表標簽的樣式</li>
    <li>ul列表標簽的樣式</li>
    <li>ul列表標簽的樣式</li>
</ul>

<ol>
    <li>ol列表標簽的樣式</li>
    <li>ol列表標簽的樣式</li>
    <li>ol列表標簽的樣式</li>
</ol>

<dl>
    <dt>dl列表標簽的樣式</dt>
    <dd>hello world</dd>
    <dd>hello world</dd>
    <dd>hello world</dd>
    <dt>ol列表標簽的樣式</dt>
    <dd>hello world</dd>
    <dd>hello world</dd>
    <dd>hello world</dd>
</dl>
</body>
</html>

　　上面三種列表的樣式如下圖：

                                                                                

 

body標簽內的表格標簽：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<!--table標簽是表格標簽，border="1"是顯示表格邊框，不寫則不顯示-->
<table border="1">
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 360加固apk並自動簽名
    我們知道Android加混淆之後，代碼的安全性得到了提高，即使你hook，反編譯得到的也是亂碼的，對於閱讀性造成了影響，為了增強代碼的破解難度，我們通常退對apk進行加固，常見的有騰訊，360，愛加密等。今天說說用360怎麼一鍵加固apk。 加固保為移動應用提供專業安全的保護，可防止應用被逆向分析、 ...
  • 微信小程式初探【類微信UI聊天簡單實現】
    微信小程式最近很火，火到什麼程度，只要你一打開微信，就是它的身影，幾乎你用的各個APP都可以在微信中找到它的複製版，另外官方自帶的跳一跳更是將它推到了空前至高的位置。對比公眾號，就我的感覺來說，有以下區別： 公眾號略顯繁瑣：我首先要關註才能看到內容，而小程式不用(個人對微信公眾號研究不深，不對之處還 ...
  • Css Secret 案例Demo全套
    Css Secret 案例全套 "github地址" "案例地址" 去年買了一本CSS揭秘的css專題書，該書揭示了 47 個鮮為人知的 CSS 技巧，主要內容包括背景與邊框、形狀、 視覺效果、字體排印、用戶體驗、結構與佈局、過渡與動畫等。去年買入時，就決定將裡面所有Demo案例全部擼一遍，作為自己 ...
  • Css問題 margin float 文檔流 背景圖底部充滿
    今天來整理一下做網頁遇到的問題吧 1.插入背景圖片並使圖片居於div底部充滿整個行。 屬性： background-position：背景位置屬性用於設置背景圖像的位置，這個屬性只能應用於塊級元素和替換元素。其中替換元素包括img、input、textarea、select。 語法取值有兩種：長度和 ...
  • javascript模塊化編程-立即執行函數（IIFE）
    IIFE 全拼Imdiately Invoked Function Expression，立即執行的函數表達式。 語法 使用上面的寫法，外部代碼無法讀取內部的_count變數。 括弧的意義 1、包住function(){}的括弧的意義 這個括弧的目的，是為了把function(){}轉化為表達式。方 ...
  • css自適應佈局之“聖杯雙飛翼”
    首先，這個這麼扯淡又裝逼的名字不知道是誰起的，大意就是說：中間的內容隨著瀏覽器寬度的不同，進行寬度自適應操作，而兩邊的內容固定寬度。 來，上個代碼演示一下： 然後出來的效果是這樣的： 這個大塊頭的中間部分確實可以隨著瀏覽視窗寬度的改變而改變： 但是，卧槽，很獵奇啊有木有？！中間的主體叉在兩側內容上方 ...
  • html中常見的小問題（1）
    問題：自適應高度的塊級元素內添加圖片後，其高度會比圖片高度多出一塊 簡單代碼如下： 效果圖如下： 1、我們可以發現div的高度比圖片的高度多出來了幾個像素，這是為什麼呢？ 這是因為img標簽為行塊級標簽，它既有塊級標簽的特性，也有行級標簽的特性。這就需要我們理解行級標簽中vertical-align ...
  • 幾種常用的清除浮動影響的方法
    這是css裡面一個比較常見的操作，現在稍微小小地總結一下，雖然沒什麼技術含量，但也可以作為一種複習。 1，給父級元素添加overflow:hidden可以清除浮動； 2，給父級元素添加after偽類，並定義其樣式如下： 這種寫法比較高大上，推薦使用； 3，在父容器的末尾添加一個毫無意義的子標簽，然後 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類