Web前端基礎(2):HTML(二)

時間 2019-11-17

標籤 web 前端基礎 html 欄目 HTML 简体版

原文原文鏈接

1. body中的相關標籤

1.1 標題標籤：hn

HTML提供<hn>系列標籤，用於修飾標籤，包含：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>。<h1>定義最大的標題。<h6>定義最小的標題。html

例如：瀏覽器

<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
    </head>
    <body>
        <!-- 標題標籤 -->
        <h1>小灰灰</h1>
        <h2>小灰灰</h2>
    </body>
</html>

1.2 水平線標籤：hr

<hr/>：標籤在HTML頁面中建立一條水平分隔線，用於定義內容中的主體變化。字體

size屬性：水平線的高度，單位像素。spa

noshade屬性：沒有陰影，取值，noshade，表示顯示純色。code

例如：htm

<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
    </head>
    <body>
        <!-- 水平線 -->
        <hr />
        <hr size="5" />
        <hr noshade="noshade" />
    </body>
</html>

1.3 字體標籤：font

<font>：用於設置字體尺寸、字體顏色等。blog

size屬性：設置字體的大小。可能的值：從1到7的數字。瀏覽器默認值是3。圖片

color屬性：設置字體的顏色。utf-8

　　顏色的取值：#xxxxxx或colornameci

　　　　#xxxxxx表示使用紅綠藍三原色設置顏色。

　　　　　　紅綠藍分別取值：00--ff，此處使用16進制。(ff就是十進制的255)

　　　　　　#000000 黑色，#ffffff 白色

　　　　　　#ff0000 紅色，#00ff00 綠色，#0000ff藍色

　　　　　　紅綠藍2位取值相同能夠省略成1位。例如：#112233簡化成#123

　　　　colorname使用英文單詞肯定顏色。red紅色，blue藍色，green綠色

例如：

<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
    </head>
    <body>
        <!-- 字體-->
        <font size="7">我最大</font>
        <font color="#ff0000">我最紅</font>
        <font color="blue">我最藍</font>
    </body>
</html>

1.4 格式化標籤：b、i

<b>：粗體。

<i>：斜體。

例如：

<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
    </head>
    <body>
        <!-- 格式化-->
        <b>粗體</b>
        <i>斜體</i>
    </body>
</html>

1.5 段落標籤：p、br

<p>：定義段落。p標籤會自動在其先後建立一些空白。

<br/>：插入單個換行。

例如：

<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
    </head>
    <body>
        <!-- 段落-->
        <p>我是段落1</p>
        <br />
        <p>我是段落2</p>
    </body>
</html>

1.6 圖片標籤：img

<img>：在html頁面中引用一張圖片。

src：指定須要顯示圖片的URL（路徑）。

alt：圖片沒法顯示時的替代文本。

width：設置圖像的寬度。

height：定義圖像的高度。

實例：

<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
    </head>
    <body>
        <!-- 顯示圖片 -->
        <img src="img/1.jpg" alt="我躲起來了" width="200px" height="200px" title="鼠標移上顯示"/>
        <img src="img/0.jpg" alt="我躲起來了" width="200px" height="200px" title="鼠標移上顯示"/>
    </body>
</html>

1.7 列表標籤：ul、ol

<ol>：定義有序列表。

　　type：列表類型，取值：A、a、I、i、1等。

<ul>：定義無序列表。

　　type：符號的類型，取值：disc 實心圓、square 方塊、circle 空心圓。

<li>：定義列表項。是<ul>或<ol>的子標籤。

例如：

<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
    </head>
    <body>
        <!-- 列表標籤 -->
        <ul type="circle"> <!-- 以「空心圓」顯示無序列表 -->
            <li>無序</li>
            <li>無序</li>
            <li>無序</li>
        </ul>
        
        <ol type="I"> <!-- 以大寫阿拉伯數字顯示序號 -->
            <li>有序</li>
            <li>有序</li>
            <li>有序</li>
        </ol>
    </body>
</html>

1.8 超連接標籤：a

<a>：標籤是超連接，是在html頁面提供一種能夠訪問其餘位置的實現方式。

href：用於肯定須要顯示頁面的路徑（URL）。

target：肯定以何種方式打開href所設置的頁面。經常使用取值：_blank、_self等。

　　_blank：在新窗口中打開href肯定的頁面。

　　_self：默認。使用href肯定的頁面替換當前頁面。

例如：

<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
    </head>
    <body>
        <!-- 超連接 -->
        <a href="http://www.baidu.com" target="_self">
            訪問百度，以默認方式打開
        </a><br />
        <a href="http://www.cnblogs.com" target="_blank">
            訪問博客園，以新窗口方式打開
        </a><br />
    </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。