[19/06/04-星期二] HTML基礎_實體(轉義字符)、圖片標籤(img)、元標籤(meta)、語法規範、內聯框架(iframe)、超連接

時間 2019-11-16

標籤星期二 html 基礎實體轉義字符圖片標籤 img meta 語法規範內聯框架 iframe 連接欄目 HTML 简体版

原文原文鏈接

1、實體(轉義字符)html

　　在HTML中，一些諸如<、> 就是普通的小於號和大於號不能直接使用，由於瀏覽可能會把它當成一個標籤去解析，因此須要一些特殊字符去表示這些特殊字符，瀏覽器

這些字符咱們稱他們叫實體，也叫轉義字符。瀏覽器解析到實體時，會自動將實體裝換成對應的字符。框架

語法： &實體的名字；即"&"符號開頭"；"符號結尾less

如，小於號 <： &lt；全稱：less than 比....小ui

　　大於號 >： &gt；全稱：greater than 比.....大搜索引擎

　　空格： &nbsp；一個&nbsp表明一個空格，全稱：Non-Breaking Space，不帶換行的空格url

　　版權符號 ©：&copy；全稱：copyright，版權，著做權spa

2、圖片標籤(img)code

　　使用img標籤來向網頁中引入外部圖片，img標籤也是個自結束標籤htm

　　屬性： src，設置一個外部圖片的路徑，全稱：source，源文件

　　　　　 alt，能夠用來設置圖片的描述，全稱：alternative，能夠供替代的。當圖片沒被加載出來，會看到文字描述。並且搜索引擎會經過alt屬性來識別不一樣的圖片

　　　　　　　　若是不寫alt屬性，則搜索引擎不會對img中圖片進行收錄。

　　　　　 width，修改圖片的寬度，單位是px 或者是百分比，當寬度或高度若是隻設置一個，另外一個也會等比例調整大小。

　　　　　 height，修改圖片的高度，單位是px 或者是百分比，若是兩個值同時設置，則會按設定的來，實際中除了自適應頁面，不建議設置寬和高。

注意問題：相對路徑：指的是當前資源所在的目錄位置，目標圖片相對於當前html文件的路徑。可使用 "../" 去找圖片的位置

　　　　　絕對路徑：把路徑名寫全包含盤符的路徑，即從盤符開始的路徑。

引伸： ../ 用來返回到上一級目錄，返回幾級目錄就寫幾個../ 如：../../img/SongYi.jpg，表示返回2級目錄去找圖片

圖片的格式：JPEG(就是JPG)：支持的顏色比較多，可是不支持透明，通常使用這種格式來保存照片等顏色豐富的圖片。

　　　　　　GIF:只支持簡單的透明，支持的顏色少，支持動態圖。圖片顏色單一或是動態圖時用這種格式。

　　　　　　PNG:支持顏色多，而且支持複雜的透明，能夠用來顯示顏色複雜的透明的圖片。

使用原則：效果不一致，使用效果好的；效果一致的，使用小的。可是並不絕對。

3、meta標籤

　　使用這個標籤能夠設置網頁的字符集、關鍵字、

　　屬性：charset，設置字符集。如：<meta charset="UTF-8">

　　　　　name="keywords"和content，設置關鍵字。如：<meta name="keywords" content="關雎爾 ,喬欣，歡樂頌" />

　　　　　name="description"和content，設置網頁的描述。如<meta name="description" content="關於歡樂頌中關雎爾的信息" />

　　　　　http-equiv和content，設置網頁的重定向。如<meta http-equiv="refresh" content="5,url=https://www.baidu.com/" /> 表示本網頁5秒後跳到百度首頁

做用：搜索引擎在檢索頁面時，會同時檢索頁面中的關鍵詞和描述，會做爲參考。可是這2個值不會影響網頁在搜索引擎的排名。

4、HTML(嚴格點叫XHTML)的語法規範

　　一、HTML中不區分大小寫，可是通常都使用小寫。 <P> ...</p>是對的

　　二、HTML中的註釋不能嵌套。

　　三、HTML中標籤必須結構完整。要麼成對出現，要麼是自結束標籤。可是若是不寫完整瀏覽器不會報錯，它會盡最大的努力去解析頁面，全部不符合規範的標籤，瀏覽器

會幫你自動添加。可是不建議這麼作，由於有時瀏覽器會修正錯誤。瀏覽器也是被逼的，只是爲了搶佔市場。

　　四、HTML標籤能夠嵌套，可是不能交叉嵌套。

　　五、HTML中屬性必須有值，且值必須加引號(單雙引號都可)。 H5語法新變化，屬性值能夠省略，能夠不使用引號。

5、內聯框架(iframe)

　　使用內聯框架能夠引入一個外部的頁面，使用iframe。可是在實際中不推薦使用，由於內聯框架中的內容不會被搜索引擎所檢索。

　　屬性：src，指向外部一個頁面的路徑，可使用相對路徑。

　　　　　width和height，設置寬和高

　　　　　name，給內聯框架起個名字

6、超連接(a)

　　使用超連接可使咱們從一個頁面跳到另外一個頁面，使用a標籤

　　屬性：href，設置要跳轉到目標地址。能夠寫相對路徑或絕對路徑。若是地址不肯定，能夠寫個"#"做爲佔位符，並且設置爲#，點擊後自動跳到頂部，等於從新打開網頁

　　　　　target，設置在什麼位置打開新的網頁，如在當前窗口打開(_self)，在新窗口打開(_blank)。不寫的話默認在當前網頁

　　　　　　　　　也能夠自定義一個內聯框架的name值(如示例中的_html)，讓超連接在內聯框架中打開。

【代碼示例】

<!DOCTYPE html>
<html>
    <head>
        <!--3、meta標籤：元數據的意思
            除了能夠設置字符集外，還能夠設置關鍵字
        -->
        <meta charset="UTF-8">
        <meta name="keywords" content="關雎爾 ,喬欣，歡樂頌" />
        <meta name="description" content="關於歡樂頌中關雎爾的信息" />
        <!--<meta http-equiv="refresh" content="5;url=https://www.baidu.com/" />-->
        
        <title>html實體和圖片標籤</title>
    </head>
    <body>
        <!--1、實體舉例-->
        a&lt;c  <br />    <!-- &lt;小於號 -->
        m&gt;n  <br />    <!-- &gt;大於號-->
        
        &nbsp;&nbsp;鋤禾日當午，汗滴禾下土。 <!--&nbsp;加一個空格-->
        &copy;版權全部，違反必究。 <br />
        
        <!--2、圖片標籤 img-->
        <img src="../img/QiaoXin.jpg" alt="這是關雎爾的扮演者" width="400px" height="300px"/> 
        
        <!--5、內聯框架 iframe-->
        <iframe src="01 html基礎知識.html" name="_html"></iframe> <br />
        
        <!--6、超連接-->
        <a href="https://www.baidu.com" target="_blank">點我去百度首頁</a>
        <a href="https://www.baidu.com" target="_html">點我在內聯框架打開百度</a>
        
    </body>
</html>

【小練習】

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我的博客</title>
    </head>
    <body>
        <h1 align="center">這是個人我的博客</h1>
        
        <!--這裏就是直接跳到id爲bottom的錨點位置 寫法：#id值-->
        <a href="#bottom" > 直接到底部</a> 
        
        <hr  />
        <h3 align="center">青花瓷</h3>
        
        <center><!--這部分使用center標籤居中，凡是這個標籤中的內容都會居中顯示-->
            <a href="https://baike.baidu.com/item/%E5%91%A8%E6%9D%B0%E4%BC%A6/129156?fr=aladdin">周杰倫</a>
        </center>
                
        <p align="center">素胚勾勒出青花筆鋒濃轉淡</p> <!--這裏使用的是段落中文字居中-->
        <p align="center">瓶身描繪的牡丹一如你初妝</p>
        <p align="center">冉冉檀香透過窗心事我瞭然</p>
        <p align="center">宣紙上走筆至此擱一半</p>
        <p align="center">釉色渲染仕女圖韻味被私藏</p>
        <p align="center">而你嫣然的一笑如含苞待放</p>
        <p align="center">你的美一縷飄散</p>
        <p align="center">去到我去不了的地方</p>
            
        <center> <!--這部分使用center標籤居中，凡是這個標籤中的內容都會居中顯示-->
            <img src="../img/qinghuaci.jpg"  width="400px" height="300px" />
            <p>天青色等煙雨 ，而我在等你</p>
            <p>炊煙裊裊升起， 隔江千萬裏</p>
            <p>在瓶底書刻隸仿前朝的飄逸</p>
            <p>就當我爲碰見你伏筆</p>
        
            <p>
            天青色等煙雨 ，而我在等你 <br /> <!--能夠看到使用br換行與使用p標籤明顯不一樣-->
            月色被打撈起 ，暈開告終局 <br />
            如傳世的青花瓷自顧自美麗<br />
            你眼帶笑意<br />
            </p>
            
            <hr />
                  友情連接：
            <a href="http://www.kugou.com/">酷狗音樂</a> &nbsp;|&nbsp;
            <a href="http://www.iqiyi.com/">愛奇藝</a> <br />
            <p> 
                <a href="#">回到頂部</a> &nbsp;|&nbsp;
                
                <!--聯繫咱們就是一個發送電子郵件的連接
                    寫法：href="mailto:郵件地址"
                    當點擊這個超連接，會打開計算機中的默認的電子郵件客戶端，而且已經將收件人設置爲郵件地址
                    若是沒有就不打開。
                -->
                
                <a href="mailto:XXX@163.com">聯繫咱們</a> 
            </p>
            <!--這裏的id就至關於錨點，在當前頁面設置爲不重複的名字，不能數字開頭-->
            <p id="bottom"> 京ICP證XXXX號-1   京網文【2019】0XXX-XXX號  </p>                  
            <p> &copy; 2019ID長安憶</p>
    
            
        </center>
        
            
        
    </body>
</html>