前端筆記1 - 簡書

代碼:

<html>
<head>
    <title>這是一個非常好的網(wǎng)頁</title>
</head>
<body>
    <h1>這是我的第一個網(wǎng)頁</h1>
</body>
</html>


<!--
html根標簽属铁，一個頁面中有且只有一個根標簽黍瞧，網(wǎng)頁中的所有內(nèi)容都應該寫在html根標簽中
-->
<html>
<!--
    head標簽掏膏，該標簽中的內(nèi)容蠢箩，不會在網(wǎng)頁中直接顯示链蕊，它用來幫助瀏覽器解析頁面
-->
<head>
    <!--
        title網(wǎng)頁的標題標簽，默認會顯示在瀏覽器的標題欄中
        搜索引擎在檢索頁面時谬泌，會首先檢索title標簽中的內(nèi)容
        它是網(wǎng)頁中對于搜索引擎來說最重要的內(nèi)容滔韵，會影響到網(wǎng)頁在搜索引擎中的排名
    -->
    <title>網(wǎng)頁的標題</title>
</head>
<!--
    body標簽用來設置網(wǎng)頁的主體內(nèi)容，網(wǎng)頁中所有可見的內(nèi)容掌实，都應該在body中編寫
-->
<body>
    <!--
        在這個結構中陪蜻，可以來編寫HTML的注釋
        注釋中的內(nèi)容，不會在頁面中顯示贱鼻，但是可以在源碼中查看
        我們可以通過編寫注釋來對代碼進行描述宴卖，從而幫助其他的開發(fā)人員工作
        一定要養(yǎng)成良好的編寫注釋的習慣滋将，但是注釋一定要簡單明了
    -->
    <!--
        屬性：
    可以通過屬性來設置標簽如何處理標簽中的內(nèi)容
    可以在開始標簽中添加屬性
    屬性需要寫在開始標簽中，實際上就是一個名值對的結構
    屬性名="屬性值"症昏，一個標簽中可以同時設置多個屬性随闽，屬性之間用空格隔開
    -->
    <h1>這是我的<font color="red" size="7">第二個</font>網(wǎng)頁</h1>
</body>
</html>


<!--
h5的文檔聲明，聲明當前的網(wǎng)頁是按照HTML5標準編寫的
編寫網(wǎng)頁時一定要將此聲明寫在網(wǎng)頁的最上邊
如果不寫文檔聲明肝谭，則會導致有些瀏覽器進入一個怪異模式掘宪，導致瀏覽器無法正常解析顯示網(wǎng)頁
所以為了避免進入該模式，一定要寫文檔聲明
-->
<!DOCTYPE html>
<html>
<head>
    <title>這是一個非常好的網(wǎng)頁</title>
</head>
<body>
    <h1>這是我的第一個網(wǎng)頁</h1>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
    <!-- 
    需要告訴瀏覽器攘烛，網(wǎng)頁所采用的編碼字符集
    meta標簽用來設置網(wǎng)頁的一些元數(shù)據(jù)魏滚，比如網(wǎng)頁的字符集、關鍵字坟漱、簡介
    meta是一個自結束標簽鼠次，編寫一個自結束標簽時，可以在開始標簽中添加一個/
    -->
    <meta charset="utf-8" />
    <title>設置字符集</title>
</head>
<body>
    <h1>這是一個非常漂亮的網(wǎng)頁</h1>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>常用的標簽</title>
</head>
<body>
    <!--
        標題標簽：
            在HTML中靖秩，一共有六級標題標簽须眷，h1~h6
            在顯示效果上h1最大，h6最小沟突，但是文字的大小我們并不關心
            使用HTML標簽時花颗，關心的是標簽的語義，我們使用的標簽都是語義化標簽
            6級標題中惠拭，h1的最重要扩劝，表示一個網(wǎng)頁中的主要內(nèi)容，h2~h6重要性依次降低
            對于搜索引擎來說职辅，h1的重要性僅次于title棒呛，搜索引擎檢索完title，會立即查看h1中的內(nèi)容
            h1標簽非常重要域携，它會影響到頁面在搜索引擎中的排名簇秒，頁面只能寫一個h1
            一般頁面中標題標簽只使用h1、h2秀鞭、h3趋观，h3以后的基本不使用
    -->
    <h1>一級標題</h1>
    <h2>一級標題</h2>
    <h3>一級標題</h3>
    <h4>一級標題</h4>
    <h5>一級標題</h5>
    <h6>一級標題</h6>
    
    <!--
        段落標簽：
            段落標簽用于表示內(nèi)容中的一個自然段
            使用p標簽來表示一個段落
            p標簽中的文字默認會獨占一行，并且段與段之間會有一個間距
    -->
    <p>我是一個p標簽锋边，我用來表示一個段落</p>
    <p>我是一個p標簽皱坛，我用來表示一個段落</p>
    <!--
        在HTML中，字符之間寫再多的空格豆巨，瀏覽器也會當成一個空格解析剩辟，
        換行也會當成一個空格解析
        在頁面中可以使用br標簽來表示一個換行，br標簽是一個自結束標簽
    -->
    <p>
        鋤       禾日當午，<br />
        汗滴禾下土贩猎，<br />
        誰知盤中餐熊户，<br />
        粒粒皆辛苦<br />
    </p>
    
    <!--
        hr標簽也是一個自結束標簽，可以在頁面中生成一條水平線
    -->
    <hr />
    
</body>
</html>


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>實體</title>
</head>
<body>
    <!-- 
        在HTML中融欧，一些如<敏弃、>這種特殊字符是不能直接使用的
        需要使用一些特殊的符號來表示這些特殊字符，這些特殊符號稱為實體（轉(zhuǎn)義字符）
        瀏覽器解析到實體時噪馏，會自動將實體轉(zhuǎn)換為其對應的字符
        實體的語法：&實體的名字;
            <   &lt;
            >   &gt;
            空格  &nbsp;
            版權符號    &copy;
    -->
    a&lt;b&gt;c
    <p>&copy;今天天氣&nbsp;&nbsp;&nbsp;好晴朗麦到，處處好風光</p>
</body>
</html>

|  | <!DOCTYPE html> |
|  | <html> |
|  | <head> |
|  | <meta charset="utf-8" /> |
|  | <title>圖片標簽</title> |
|  | </head> |
|  | <body> |
|  | <!-- |
|  | 使用img標簽來向網(wǎng)頁中引入一個外部圖片 |
|  | img標簽也是一個自結束標簽 |
|  | 屬性： |
|  | src：設置一個外部圖片的路徑 |
|  | alt：可以用來設置在圖片不能顯示時，對圖片的描述 |
|  | 搜索引擎可以通過alt屬性來識別不同的圖片 |
|  | 如果不寫alt屬性欠肾，則搜索引擎不會對img中的圖片進行收錄 |
|  | width：可以用來修改圖片的寬度瓶颠，一般使用px作為單位 |
|  | height：可以用來修改圖片的高度，一般使用px作為單位 |
|  | 寬度和高度兩個屬性如果只設置一個刺桃，另一個也會同時等比例調(diào)整大小     |
|  | 如果兩值同時指定粹淋，則按照你指定的值來設置 |
|  | 一般開發(fā)中除了自適應的頁面，不建議設置width和height |
|  | --> |
|  | <img src="[2.gif](2.gif)" alt="這是一個大松鼠" width="100px" height="500px" /> |
|  | </body> |
|  | </html> |


|  | <!DOCTYPE html> |
|  | <html> |
|  | <head> |
|  | <meta charset="utf-8" /> |
|  | <title>相對路徑</title> |
|  | </head> |
|  | <body> |
|  | <!-- |
|  | src屬性配置的是圖片的路徑瑟慈，目前我們所使用的路徑全都是相對路徑 |
|  | 相對路徑： |
|  | 相對路徑指相對于當前資源所在目錄的位置 |
|  | 可以使用../來返回上一級目錄桃移，返回幾級目錄就寫幾個../ |
|  | --> |
|  | <img src="[../img/2.gif](../img/2.gif)" alt="這是一個大松鼠" /> |
|  |  |
|  | <!-- |
|  | 圖片的格式 |
|  | JPEG（JPG） |
|  | - JPEG圖片支持的顏色比較多，圖片可以壓縮葛碧，但是不支持透明 |
|  | - 一般使用JPEG來保存照片等顏色豐富的圖片 |
|  | GIF |
|  | - GIF支持的顏色少借杰，只支持簡單的透明，支持動態(tài)圖 |
|  | - 圖片顏色單一或者是動態(tài)圖時可以使用GIF |
|  | PNG |
|  | - PNG支持的顏色多进泼，并且支持復雜的透明 |
|  | - 可以用來顯示顏色復雜的透明的圖片 |
|  | 圖片的使用原則： |
|  | 效果不一致蔗衡，使用效果好的 |
|  | 效果一致，使用小的 |
|  | --> |
|  | </body> |
|  | </html> |



<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>meta標簽</title>
    <!-- 
        使用meta標簽還可以用來設置網(wǎng)頁的關鍵字
    -->
    <meta name="keywords" content="HTML5,JavaScript,前端,Java" />
    
    <!-- 
        還可以用來指定網(wǎng)頁的描述
        搜索引擎在檢索頁面時乳绕，會同時槍擊頁面中的關鍵詞和描述绞惦，但是這兩個值不會影響頁面在搜索引擎中的排名
    -->
    <meta name="description" content="發(fā)布h5、js等前端相關的信息" />
    
    <!-- 
        使用meta可以用來做請求的重定向
        <meta http-equiv="refresh" content="秒數(shù);url=目標路徑" />
    -->
    <meta http-equiv="refresh" content="5;url=http://www.baidu.com" />
</head>
<body>
    <h1>5秒以后跳轉(zhuǎn)頁面</h1>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>XHTML的語法規(guī)范</title>
</head>
<body>
    <!-- 
        1洋措、HTML中不區(qū)分大小寫济蝉，但是我們一般都使用小寫
    -->
    
    <!-- 
        2、HTML中的注釋不能嵌套
    -->
    
    <!-- 
        這是一個注釋
        <!-- 
            這是注釋中的注釋
        -->
    -->
    
    <!-- 
        3菠发、HTML標簽必須結構完整王滤，要么成對出現(xiàn)，要么自結束標簽
    -->
    <!-- 正確 -->
    <p>我是一個p標簽</p>
    <!-- 錯誤 -->
    <p>我是一個p標簽
    
    <!-- 
        瀏覽器盡最大的努力正確地解析頁面雷酪，你所有的不符合語法規(guī)范的內(nèi)容
        瀏覽器都會為你自動修正淑仆，但是有些情況會修正錯誤
    -->
    
    <!-- 自結束標簽 -->
    abc
    <br />
    bcd
    <br>
    efg
    
    <!-- 
        4涝婉、HTML標簽可以嵌套哥力，但是不能交叉嵌套
    -->
    <p>今天天氣<font color="red">真不錯</font></p>
    <p>今天天氣<font color="red">真不錯</p></font>
    
    <!-- 
        5、HTML標簽中的屬性必須有值，且值必須加引號（單引號雙引號都可以）
    -->
    <p>今天天氣<font color=>真不錯</font></p>
    <p>今天天氣<font color=red>真不錯</font></p>
</body>
</html>

<h1>誰敢管我</h1>

|  | <!DOCTYPE html> |
|  | <html> |
|  | <head> |
|  | <meta charset="utf-8" /> |
|  | <title>內(nèi)聯(lián)框架</title> |
|  | </head> |
|  | <body> |
|  | <h1>我是demo11</h1> |
|  | <!-- |
|  | 使用內(nèi)聯(lián)框架可以引入一個外部的頁面 |
|  | 使用iframe來創(chuàng)建一個內(nèi)聯(lián)框架 |
|  | 屬性： |
|  | src：指向一個外部頁面的路徑吩跋，可以使用相對路徑 |
|  | width： |
|  | height： |
|  | name：可以為內(nèi)聯(lián)框架指定一個name屬性 |
|  | 在現(xiàn)實開發(fā)中不推薦使用內(nèi)聯(lián)框架寞射，因為內(nèi)聯(lián)框架中的內(nèi)容不會被搜索引擎所檢索 |
|  | --> |
|  | <iframe src="[demo010_XHTML的語法規(guī)范.html](demo010_XHTML的語法規(guī)范.html)" name="tom"></iframe> |
|  | </body> |
|  | </html> |

|  | <!DOCTYPE html> |
|  | <html> |
|  | <head> |
|  | <meta charset="utf-8" /> |
|  | <title>超鏈接</title> |
|  | </head> |
|  | <body> |
|  | <h1>我是demo12</h1> |
|  | <!-- |
|  | 使用超鏈接可以讓我們從一個頁面跳轉(zhuǎn)到另一個頁面 |
|  | 使用a標簽來創(chuàng)建一個超鏈接 |
|  | 屬性： |
|  | href：指向鏈接跳轉(zhuǎn)的目標地址，可以寫一個相對路徑锌钮，也可以寫一個完整的地址 |
|  | --> |
|  | <a href="[http://www.baidu.com](http://www.baidu.com)">我是一個超鏈接</a><br /><br /> |
|  |  |
|  | <a href="[http://www.baidu1234567.com](http://www.baidu1234567.com)">我是一個超鏈接</a><br /><br /> |
|  |  |
|  | <!-- |
|  | a標簽中的target屬性可以用來指定打開鏈接的位置 |
|  | 可選值： |
|  | _self：表示在當前窗口中打開（默認值） |
|  | _blank：在新的窗口中打開鏈接 |
|  | 可以設置一個內(nèi)聯(lián)框架的name屬性值桥温，鏈接將會在指定的內(nèi)聯(lián)框架中    打開 |
|  | --> |
|  | <a href="[demo011_內(nèi)聯(lián)框架.html](demo011_內(nèi)聯(lián)框架.html)" target="tom">我是一個超鏈接</a><br /><br /> |
|  |  |
|  | <iframe src="[demo010_XHTML的語法規(guī)范.html](demo010_XHTML的語法規(guī)范.html)" name="tom"></iframe> |
|  |  |
|  | <!-- |
|  | center標簽中的內(nèi)容，會默認在頁面中居中顯示 |
|  | 我們可以將要居中的元素全都放到center中 |
|  | --> |
|  | <center> |
|  | <p>我是一個p標簽</p> |
|  | </center> |
|  | </body> |
|  | </html> |