HTML入門

時間 2021-04-02

標籤 css html java 瀏覽器安全網絡運維字體動畫欄目 HTML 简体版

原文原文鏈接

　　"超文本"就是指頁面內能夠包含圖片.鏈接等非文字內容.css

"標記"就是使用標籤的方法將須要的內容包括起來.例如<a>www.itcast</a>html

HTML能幹什麼?java

　　HTML用於編寫網頁.平時上網經過瀏覽器咱們看到的大部分頁面都是由html編寫的.在瀏覽器訪問網頁時,能夠經過"右鍵/查看網頁源代碼"看到具體的html代碼.瀏覽器

　　網頁內容包含:HTML代碼.css代碼.javaScript代碼等內容.安全

　　Html代碼:用於展現須要顯示的數據網絡

　　CSS代碼:使顯示的數據更加好看.運維

　　javaScript代碼:使整個頁面顯示的數據具備動畫效果.字體

網頁根據內容是否改變分爲:靜態頁面,動態頁面動畫

　　靜態頁面:編寫以後在瀏覽器再也不改變的網頁,HTML就是用於編寫靜態網頁的.ui

　　動態頁面:會根據不一樣的狀況展現不一樣的內容.例如:登陸成功後右上角顯示用戶名

HTML語言的特色:

　　HTML文件不須要編譯,直接試音瀏覽器閱讀便可.

　　HTML文件的拓展名是*.html或*.htm

　　HTML結構都是由標籤組成的:

　　　　標籤名預先定義好的,咱們只須要了解其功能便可.

　　　　標籤名不區分大小寫.

　　　　一般狀況下標籤由開始標籤和結束標籤組成.

　　　　若是沒有結束標籤,建議以/結尾.

　　HTML結構包括兩部分:頭head和body

HTML入門代碼

　　我這裏使用的是HBuilder這個軟件.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>標題</title>
    </head>
    <body>
        這裏是正文
    </body>
</html>

以上使用的標籤組成了HTML頁面的基本結構,現將全部標籤進行陳述:

<html>這個頁面的根標籤,理論上一個頁面只須要一個,由頭和體組成.

<head>頭標籤,用於引入監本.導入樣式.提供元信息等.通常狀況下頭標籤的內容在瀏覽器端都不顯示.

<body>體標籤,是整個網頁的主體,咱們編寫的html代碼基本上都在此標籤體內.

　　使用瀏覽器進行打開.

註釋特色:

　　瀏覽器查看時,不顯示,右鍵查看源代碼能夠進行查看.

　　註釋標籤不能嵌套.　　

　　註釋特殊用法,爲不一樣的瀏覽器提供了不一樣的解決方案(瞭解)

基本標籤:

標題標籤<hr/>

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

　　size屬性:水平線的高度,單位像素.

　　noshade屬性:沒有陰影,取值:noshade表示顯示純色.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>標題</title>
    </head>
    <body>
        <!--顯示水平線-->
        <hr />
        <hr size="5"/>    
        <hr noshade="noshade" />
        
        這裏是正文
    </body>
</html>

效果圖是這樣的:

字體標籤

用於設置字體尺寸,字體顏色等.

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

　　color屬性:設置字體的顏色

　　　　顏色的取值:#xxxxx或colorname

　　　　#xxxxxxx表示使用紅綠藍三原色設置顏色.

　　　　紅綠藍分別取值:00-FF,此處使用16進制.(FF就是十進制的255)

　　　　#000000表示黑色.#FFFFFF白色

　　　　#FF0000紅色,#00FF00綠色,#0000FF藍色

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>標題</title>
    </head>
    <body>
        <!--字體-->
        <font size="7">我個頭大</font>
        <font color="#FF0000">我很紅</font>
        <font color="blue">我是藍色的</font>
    </body>
</html>

效果:

格式化標籤:

粗體

斜體

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>標題</title>
    </head>
    <body>
        <b>我很粗</b>
        <i>我很斜</i>
    </body>
</html>

段落標籤:

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

插入單個換行

<!DOCTYPE html>
<html>

<body>


同義詞 FSF（自由軟件基金會）通常指自由軟件基金會 
自由軟件基金會（Free Software Foundation，FSF）是一個致力於推廣自由軟件、促進計算機用戶自由的美國民間非盈利性組織。 它於1985年10月由理查德·斯托曼創建。其主要工做是執行GNU計劃，開發更多的自由軟件，完善自由軟件理念。

</body>

</html>

效果爲:

使用剛學到的幾個標籤處理文本

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>標題</title>
    </head>

    <body>
        <!--使用標籤進行處理的文本-->
        <p>
        <h1>公司簡介</h1><br/>
 <font color="red" size="5"><b>view of headquarters sunset</b></font><br/>
華爲是全球領先的ICT（信息與通訊）基礎設施和智能終端提供商，致力於把數字世界帶入每一個人、每一個家庭、每一個組織，構建萬物互聯的智能世界。<br/>
咱們在通訊網絡、IT、智能終端和雲服務等領域爲客戶提供有競爭力、安全可信賴的產品、解決方案與服務，與生態夥伴開放合做，持續爲客戶創造價值，釋放我的潛能，豐富家庭生活，激發組織創新。華爲堅持圍繞客戶需求持續創新，加大基礎研究投入，厚積薄發，推進世界進步。華爲成立於1987年，是一家由員工持有所有股份的民營企業，目前有18萬員工，業務遍佈170多個國家和地區。

<h1>咱們爲世界帶來了什麼？</h1><br/>

爲客戶創造價值。華爲和運營商一塊兒，在全球建設了1,500多張網絡，幫助世界超過三分之一的人口實現聯接。<br/>華爲攜手合做夥伴，爲政府及公共事業機構，金融、能源、交通、製造等企業客戶，提供開放、靈活、安全的端管雲協同ICT基礎設施平臺，推進行業數字化轉型；爲雲服務客戶提供穩定可靠、安全可信和可持續演進的雲服務。華爲智能終端和智能手機，正在幫助人們享受高品質的數字工做、生活和娛樂體驗。

推進產業良性發展。華爲主張開放、合做、雙贏，與客戶合做夥伴及友商合做創新、擴大產業價值，造成健康良性的產業生態系統。<br/>華爲加入360多個標準組織、產業聯盟和開源社區，積極參與和支持主流標準的制定、構建雙贏的生態圈。咱們面向雲計算、NFV/SDN、5G等新興熱點領域，與產業夥伴分工協做，推進產業持續良性發展。

促進經濟增加。華爲不只爲所在國家帶來直接的稅收貢獻，促進當地就業，造成產業鏈帶動效應，更重要的是經過創新的ICT解決方案打造數字化引擎，推進各行各業數字化轉型，促進經濟增加，提高人們的生活質量與福祉。

推進社會可持續發展。<br/>做爲負責任的企業公民，華爲致力於消除全球數字鴻溝，在珠峯南坡和北極圈內，在西非埃博拉疫區、日本海嘯核泄漏、中國汶川大地震等重大災難現場，都有華爲人的身影；推動綠色、低碳的環保理念，從產品規劃、設計、研發、製造、交付以及運維，華爲向客戶提供領先的節能環保產品和解決方案；華爲「將來種子」項目已經覆蓋108個國家和地區，幫助培養本地ICT人才，推進知識遷移，提高人們對於ICT行業的瞭解和興趣，並鼓勵各國家及地區參與到建設數字化社區的工做中。

爲奮鬥者提供舞臺。<br/>華爲堅持「以奮鬥者爲本」，以責任貢獻來評價員工和選拔幹部，爲員工提供了全球化發展平臺、與世界對話的機會，使大量年輕人有機會擔當重任，快速成長，也使得十幾萬員工經過我的的努力，收穫了合理的回報與值得回味的人生經歷。

<h1>咱們堅持什麼？</h1><br/>

華爲30年堅持聚焦在主航道，抵制一切誘惑；堅持不走捷徑，拒絕機會主義，踏踏實實，長期投入，厚積薄發；堅持以客戶爲中心，以奮鬥者爲本，長期艱苦奮鬥，堅持自我批判。<br/>

咱們不會辜負時代慷慨賦予咱們的歷史性機遇，爲構建萬物互聯的智能世界，勇往直前。<br/>    
</p>
    </body>

</html>

效果圖以下

圖片標籤<img>

<img>在html頁面中引入一張圖片

　　src:指定須要顯示圖片的url(路徑)

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

　　width:設置圖像的寬度

　　height:定義圖像的高度.

　　title:鼠標移上時顯示.

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>標題</title>
    </head>

    <body>
        <!--對照片進行處理-->
        

<img src="img/article(1).gif" alt="剁手節" width="100px" height="100px" title="美奴">


    </body>

</html>

圖片沒有路徑時顯示

移動到照片上時:

列表標籤<ol><ul>

<ol> :定義有序列表

　　　　type列表類型,取值A.a.I.i,1等

<ul>:定義無序列表

　　　　type符號的類型.取值:disc實心圓,square方塊,circle空心圓.

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

<!DOCTYPE html>
<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>

效果爲:

超連接標籤<a>

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

　　href:用於肯定須要顯示頁面的路徑(URL)

　　　　target:肯定以何種方式打開href所設置的頁面,經常使用取值:blank,self等.

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

　　　　_self默認,使用href肯定的頁面替換當前頁面.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>標題</title>
    </head>
    <body>
        <!--超連接-->
        <a href="http://www.baidu.com">百度</a>
    </body>
</html>

而後會轉到:

表格標籤<table><tr><td>

<table>是父標籤,至關於這個表格的容器.

　　border表格邊框的寬度

　　width表格的寬度

　　cellpadding單元邊沿與其內容之間的空白

　　cellspacing單元格之間的空白

　　bgcolor表格的背景顏色

<tr>標籤用於定義行.

<td>標籤用於定義表格的單元格(一個列)

　　colspan單元格可橫跨的列數

　　rowspan單元格可橫跨的行數

　　align單元格內容的水平對齊方式.取值:left左,right右,center居中.

　　nowrap單元格中的內容是否折行.

<th>標籤用於定義表頭,單元格內的內容默認居中加粗.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>標題</title>
    </head>
    <body>
        <!--表格-->
        <table border="1px"width="100px" height="100px">
            <tr>
                <td rowspan="3">
                    1
                </td>
                <td>
                    2
                </td>
                <td>
                    3
                </td>
            </tr>
            <tr>
            
                <td>
                    2
                </td>
                <td>
                    3
                </td>
            </tr>
            <tr>
            
                <td>
                    2
                </td>
                <td>
                    3
                </td>
            </tr>
            
        </table>
    </body>
</html>