html標籤學習1

html:超文字標記語言

超文字標記語言的結構包括“頭”部分(英語:Head)、和“主體”部分(英語:Body),其中“頭”部提供關於網頁的資訊,“主體”部分提供網頁的具體內容。

<!--這是一段註釋。註釋不會在瀏覽器中顯示。-->
<!DOCTYPE html>     開頭部分
head標籤下主要用
meta標籤 meta標籤下常用
name 主要用於描述網頁,與之對應的屬性值為content,content中的內容主要是便於搜尋引擎機器人查詢資訊和分類資訊用的。    
http-equiv 相當於http的文件頭作用,它可以向瀏覽器傳回一些有用的資訊,以幫助正確地顯示網頁內容,與之對應的屬性值為content,content中的內容其實就是各個引數的變數值。
非meta標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="夢山哥">
<meta name="descripthion" content="夢山哥哥帥">
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com/"><!--2秒後自動跳轉網頁,注意後面的引號,分別在秒數的前面和網址的後面-->
<title>夢山網</title>
<link rel="icon" href="http://www.bitauto.com/favicon.ico">
</head>
<body>

</body>
</html>

 塊級標籤 內聯標籤

body標籤

基礎標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="夢山哥">
    <meta name="descripthion" content="夢山哥哥帥">
    <meta http-equiv="Refresh" content="2"><!--2秒後自動跳轉網頁,注意後面的引號,分別在秒數的前面和網址的後面-->
    <title>夢山網</title>
    <link rel="icon" href="http://www.bitauto.com/favicon.ico">
</head>
<body>
    <h1>hello</h1>   <!--取值範圍1-6 字型從大到小  塊級標籤-->
    <b>hello</b>     <!--加粗 內聯標籤-->
    <em>hello</em>   <!--斜體 內聯標籤-->
    <sub>4</sub>     <!--下角標 內聯標籤-->
    <sup>5</sup>     <!--上角標 內聯標籤-->
    <hr>              <!--下劃線 塊級標籤-->
    <br>              <!--換行 塊級標籤-->
    <p>hello</p>       <!--段落,包裹的內容被換行.並且也上下內容之間有一行空白. 塊級標籤-->
    <strike>hello</strike><!--為文字加上一條中線 內聯標籤-->
</body>
</html>

<div></div> : <div>只是一個塊級元素,並無實際的意義。主要通過CSS樣式為其賦予不同的表現. 
<span></span>: <span>表示了內聯行(行內元素),並無實際的意義,主要通過CSS樣式為其賦予不同的表現.

塊級元素與行內元素的區別
所謂塊元素,是以另起一行開始渲染的元素,行內元素則不需另起一行。如果單獨在網頁中插入這兩個元素,不會對頁面產生任何的影響。
這兩個元素是專門為定義CSS樣式而生的。

圖形標籤: <img>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="夢山哥">
    <meta name="descripthion" content="夢山哥哥帥">
    <meta http-equiv="Refresh" content="2"><!--2秒後自動跳轉網頁,注意後面的引號,分別在秒數的前面和網址的後面-->
    <title>夢山網</title>
    <link rel="icon" href="http://www.bitauto.com/favicon.ico">
</head>
<body>
    <img src="1.jpg" width="200" height="300"title="美女" alt="圖片跑掉了">
    <img src="0.jpg" width="200" height="300"title="美女" alt="圖片跑掉了">
</body>
</html>

 

超連結標籤(錨標籤): <a> </a>

什麼是URL?
URL是統一資源定位器(Uniform Resource Locator)的縮寫,也被稱為網頁地址,是因特網上標準的資源的地址。
URL舉例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html

URL地址由4部分組成
第1部分:為協議:http://、ftp://等 
第2部分:為站點地址:可以是域名或IP地址
第3部分:為頁面在站點中的目錄:stu
第4部分:為頁面名稱,例如 index.html
各部分之間用“/”符號隔開。
<a href="" target="_blank" >click</a>

href屬性指定目標網頁地址。該地址可以有幾種型別:

    絕對 URL - 指向另一個站點(比如 href="http://www.jd.com)
    相對 URL - 指當前站點中確切的路徑(href="index.htm")
    錨 URL - 指向頁面中的錨(href="#top")
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="夢山哥">
    <meta name="descripthion" content="夢山哥哥帥">
    <meta http-equiv="Refresh" content="2"><!--2秒後自動跳轉網頁,注意後面的引號,分別在秒數的前面和網址的後面-->
    <title>夢山網</title>
    <link rel="icon" href="http://www.bitauto.com/favicon.ico">
</head>
<body>
    <a href="https://www.baidu.com/">點我</a>   <!--可接網址-->
    <a href="1.html">點我1</a>                     <!--文件地址-->
    <a href="#abc">點我2</a>                        <!--跳轉到索引地址-->
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
    <div id="abc"></div>
</body>
</html>

 列表標籤

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="夢山哥">
<meta name="descripthion" content="夢山哥哥帥">
<meta http-equiv="Refresh" content="2"><!--2秒後自動跳轉網頁,注意後面的引號,分別在秒數的前面和網址的後面-->
<title>夢山網</title>
<link rel="icon" href="http://www.bitauto.com/favicon.ico">
</head>
<body>
<ol> <!--有序標籤-->
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<ul> <!--無序標籤-->
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<dl> <!--定義標籤-->
<dt>安徽省</dt>
<dd>合肥市</dd>
<dd>六安市</dd>
</dl>
</body>
</html>

 表格標籤 table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="夢山哥">
    <meta name="descripthion" content="夢山哥哥帥">
    <meta http-equiv="Refresh" content="2"><!--2秒後自動跳轉網頁,注意後面的引號,分別在秒數的前面和網址的後面-->
    <title>夢山網</title>
    <link rel="icon" href="http://www.bitauto.com/favicon.ico">
</head>
<body>
    <table border="1" cellpadding="100"><!--border 表格邊框,cellpadding內邊距,-->
        <thead>
            <tr>
                <td>第一列</td>
                <td>第二列</td>
                <td>第三列</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="2">1,2</td> <!--橫向合併單元格-->

                <td rowspan="2">3,6</td>  <!--縱向合併單元格-->
            </tr>
            <tr>
                <td>4</td>
                <td>5</td>

            </tr>
        </tbody>
    </table>
</body>
</html>

 星期一菜譜作業

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="夢山哥">
    <meta name="descripthion" content="夢山哥哥帥">
    <meta http-equiv="Refresh" content="2"><!--2秒後自動跳轉網頁,注意後面的引號,分別在秒數的前面和網址的後面-->
    <title>夢山網</title>
    <link rel="icon" href="http://www.bitauto.com/favicon.ico">
</head>
<body>
   <table border="1">
       <tr>
           <td colspan="7">星期一菜譜</td>
       </tr>
       <tr>
           <td rowspan="2">素菜</td>
           <td colspan="4">青草茄子</td>
           <td colspan="3">花椒扁豆</td>
       </tr>
       <tr>
           <td colspan="4">小蔥豆腐</td>
           <td colspan="3">炒白菜</td>
       </tr>
       <tr>
           <td rowspan="7">葷菜</td>
           <td colspan="4">油燜大蝦</td>
           <td colspan="3">海蔘鮑魚</td>
       </tr>
       <tr>
           <td colspan="4">紅燒肉</td>
           <td colspan="3">烤全羊</td>
       </tr>
   </table>
</body>
</html>

 

關鍵詞:td meta html 標籤 content http body tr title head

相關推薦:

SpringCloud統一配置筆記

2、Qt Project之滑鼠事件監控

SpringBoot (一)

許可權管理demo-pom.xml

zabbix自定義模板——監控TCP連線狀態

ssm整合的pom.xml依賴

020-pom.xml配置文件模板

spring-CXF-maven

HTML語言基礎

JS表格分頁(封裝版)