從0開始通過一個商城實例手把手教你學習網站開發第2章HTML基礎

TML簡介

HTML：Hyper Text Markup Language

html文本的內部基本結構

<!--
    文檔聲明，標識當前網頁的版本的
    該聲明標識網頁是遵循html5語法規范的
    編寫網頁時，一定要編寫的文檔聲明，
    在某些瀏覽器中，如果不寫文檔聲明，會導致瀏覽器進入到怪異模式
 -->
<!doctype html>
<!-- html網頁中根標簽，一個頁面中有且只有一個根標簽
    網頁中的所有內容都應該寫在根標簽的內部
 -->
<html>
?
    <!-- 
        網頁的頭部，head標簽中的內容，不會在頁面中直接顯示
        瀏覽器根據head中的內容來解析網頁，搜索引擎也可以根據他們來檢索網頁
     -->
    <head>
                <!-- 使用meta來設置頁面的字符集 -->
        <meta charset="utf-8" />
        <!-- 
            網頁的標題，一般會在頁面的標簽頭部顯示 
            所屬引擎在檢索一個網頁時，會主要檢索title中的內容
            并依據該內容，來判斷網頁的主要內容，
            title中的內容會影響到網站在搜索引擎中的排名
        -->
        <title>我是title</title>
?
    </head>
?
    
    <!-- 網頁的主體，網頁中所有的可見內容，都應該寫在body中 -->
?
    <body>
        <h1>這是一個非常漂亮的網頁</h1>
    </body>
    
</html>

html的注釋

<html>  
    <head>  
        <title>網頁的標題</title>  
    </head>  
    <body>  
        <!--   
            注釋 HTML注釋中的內容，  
            不會在頁面中顯示，  
            但是可以在源代碼中查看  
              
            通過注釋可以對代碼進行解釋說明  
            一定要養成良好的編寫注釋的習慣  
            編寫注釋時，要求簡單明了  
  
            日期：  
            作者：  
            功能：  
  
            通過注釋可以將不希望在頁面中顯示代碼隱藏  
            HTML注釋不能嵌套（所有的多行注釋都不能嵌套）  
              
        -->  
  
        <!-- 這是頁面的1級標題 -->  
        <h1>這是我的第二個網頁</h1>  
  
        <!-- 我是一個注釋 <!-- 我是注釋中的注釋 --> -->  
          
  
  
    </body>  
</html>

標題標簽，段落標簽，水平線，換行，加粗，斜體

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>常用的標簽</title>
</head>
<body>
?
<!-- 標題標簽
    在HTML一共有h1 ~ h6 六級標題
    6級標題中 h1最大 h6最小
    從h1 到 h6 重要性依次降低
    h1最重要，h2其次 依次遞減
?
    搜索引擎檢索頁面時，h1僅次于title，也會影響到頁面在搜索引擎中的排名
        一個頁面一般只有一個h1標簽
?
    一般頁面中只會使用h1 ~ h3
?
-->
<h1>一級標題標簽</h1>
<h2>二級標題標簽</h2>
<h3>三級標題標簽</h3>
<h4>四級標題標簽</h4>
<h5>五級標題標簽</h5>
<h6>六級標題標簽</h6>
?
<!-- 段落標簽 使用p標簽來表示一個段落
        段落標簽會獨占一行，并和其他內容會有一個距離
-->
<p>第一次</p>
<p>今天天氣真不錯</p>
<hr />
<!--
    在HTML中，默認將多個空格和換行認為是一個空格
    使用br標簽來表示一個換行
-->
<p>
    床前明月光<br />
    疑是地上霜<br />
    舉頭望明月<br />
    低頭思故鄉<br />
</p>
?
<!-- 水平線，可以在頁面的指定位置輸出一條水平線 -->
<hr />
?
<!--加粗：<strong>…</strong>-->
<!--斜體：<em>…</em>-->
?
<strong>簡介</strong>
<p>
    <em>2008</em>年設立人才實訓中心<br/>
    <em>2009</em>年成為教育部軟件工程專業大學生實習基地<br/>
</p>
?
</body>
</html>

列表標簽

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>列表</title>
    </head>
    <body>
        <!-- 
            列表類似于購物清單
                HTML中一共有三種列表
                1.無序列表
                    - 使用ul標簽來創建一個無序列表
                    - 使用li向無序列表中添加列表項
                    - 無序列表默認使用 圓點 來作為項目符號   
                2.有序列表
                    - 有序列表和無序列表類似，不同的是它使用ol來創建其他的都和無序列表一樣
                    - 有序列表使用有序的序號 作為項目符號    
                3.定義列表  
                    - 定義列表用來對一些內容做解釋說明的
                    - 使用 dl 來創建一個定義列表
                    - 在dl中使用dt，來創建一個定義項
                    - 使用dd來創建一個對定義項的描述
                
                
                - 列表之間可以互相嵌套，可以在有序列表中放無序列表，也可以在無序列表放有序列表
        -->
        <ul>
            <li>西紅柿</li>
            <li>大茄子</li>
            <li>小辣椒</li>
        </ul>
        
        <ol>
            <li>桃花源記</li>
            <li>岳陽樓記</li>
            <li>小石潭記</li>
            <li>醉翁亭記</li>
        </ol>
        
        <p>菜譜</p>
        <ul>
            <li>
                魚香肉絲
                <ol>
                    <li>魚</li>
                    <li>香</li>
                    <li>肉絲</li>
                </ol>
            </li>
            <li>宮保雞丁</li>
            <li>青椒肉絲</li>
        </ul>
        
        <dl>
            <dt>武松</dt>
            <dd>景陽岡上的大虎英雄，戰斗力99</dd>
            <dd>后來打死西門大官人，后逃逸，出家為僧</dd>
            <dt>武大</dt>
            <dd>著名餐飲企業家，戰斗力0</dd>
        </dl>
        
    
    </body>
</html>

圖像標簽

常見的圖像格式 JPG GIF PNG BMP

圖片的相對路徑

所謂相對路徑，就是相對于自己的目標文件位置。例如上面的例子，“11111111.html” 文件里引用了“11ha.jpg”圖片，由于“11ha.jpg”圖片相對于“11111111.html”來說，是在同一個目錄的，那么在“11111111.html”文件里使用以下代碼后：

<img src=“11ha.jpg” alt=“小女孩” />

只要這兩個文件的相對位置沒有變(也就是說還是在同一個目錄內)，那么無論上傳到Web服務器的哪個位置，在瀏覽器里都能正確地顯示圖片。

當圖片在image文件夾里時：

src="image/11ha.jpg" alt="小女孩" />

如果在image里很深的文件夾，也可以一直羅列下去：

<img src="image/renwu/11ha.jpg" alt="小女孩" />

如果html文件在比圖片深一層的文件夾里：

<img src="../11ha.jpg" alt="小女孩" />

如果html文件在比圖片深兩層的文件夾里，就在前面再羅列兩個點“..”，深幾層羅列幾次。

<img src=“../../11ha.jpg” alt=“小女孩” />

圖片在html文件上兩級image文件夾中的renwu文件夾里

<img src=“../../image/renwu/11ha.jpg”/>

鏈接標簽

<a href="path" target="目標窗口位置">鏈接文本或圖像</a>

href: 鏈接路徑 target:鏈接在哪個窗口打開,常用值：self、blank

表標簽有3種:1)dl,dd與dt(定義列表) 2)ol與li(有序列表) 3)ul與li(無序列表)前兩者一般不怎么用,網頁中運用最多的是第三種

1)<dl><dd>與<dt>

<!DOCTYPE html>
<html>
<head>
    <title>列表</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
    <dl>
        <dt>河北</dt>
        <dd>石家莊</dd>
        <dd>秦皇島</dd>
        <dt>河南</dt>
        <dd>鄭州</dd>
        <dd>新鄉</dd>
    </dl>
</body>
</html>

2)<ol>與<li>和<ul>與<li>

它們兩個都有一個type屬性,用來設置序列的顯示樣式(在li前面顯示),type的取值有:1(數字序號)A,a(大小寫字母)I,i(大小寫羅馬數字)disc(實心原點)circle(空心圓圈)square(實心方塊)

顯示效果

有序與無序列表的區別就是type的默認值不同而已

<!DOCTYPE html>
<html>
<head>
    <title>列表</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
    <dl>
        <dt>河北</dt>
        <dd>石家莊</dd>
        <dd>秦皇島</dd>
        <dt>河南</dt>
        <dd>鄭州</dd>
        <dd>新鄉</dd>
    </dl>
    ============================================================
    <ol type="A">
        <li>北京</li>
        <li>上海</li>
        <li>廣州</li>
        <li>深圳</li>
    </ol>
    =============================================================
    <ul type="circle">
        <li>北京</li>
        <li>上海</li>
        <li>廣州</li>
        <li>深圳</li>
    </ul>
</body>
</html>

注意:設置屬性時考慮瀏覽器的兼容性

經過測試ol與ul列表在IE瀏覽器(IE10)下type的這幾個取值都有相應的效果;在谷歌瀏覽器下ol列表只對type值為1、a、A、i、I有效果;ul列表只對type值為disc、circle、square有效果;其他的如蘋果,火狐等瀏覽器自己測試(同一瀏覽器的不同版本不再測試)

谷歌在顯示效果

2.1使用嵌套的ul或ol來模擬二級菜單,以后會通過js,css或者Asp.net實現動態的菜單

二級菜單

在線咨詢

上一篇：網頁設計HTML零基礎入門
下一篇：前端必須理解知識點—HTML5音視頻處理

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商