HTML學(xué)習(xí)總結(jié)-創(chuàng)新互聯(lián)

一：什么是 HTML 文件？
1):HTML 指超文本標簽語言。
2):HTML 文件是包含一些標簽的文本文件。
3):這些標簽告訴 WEB 瀏覽器如何顯示頁面。
4):HTML 文件必須使用 htm 或者 html 作為文件擴展名。
5):HTML 文件可以通過簡單的文本編輯器來創(chuàng)建。
二：結(jié)構(gòu)
4 HTML語言的結(jié)構(gòu)
<html>
<head> 編碼規(guī)范的(gbk/utf-8) -?頭文件標簽
<title>標題標簽</title>
</head>
<body>
html主體部分:這些內(nèi)容最終會在瀏覽器中顯示
</body>
</html> -?有標簽體的標簽

專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計、成都網(wǎng)站制作服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)弋陽免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上1000家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

三：HTML標簽的分類
1) 標題標簽:從<h2>到<h7>,<h2> 定義大的標題。<h7> 定義最小的標題。
2) 換行標簽：<br>
3) 水平線標簽:<hr>
4)換行標簽:<br/>
5)段落標簽:<p>
6)段落縮進:<blockquote>
7)上下標標簽:<sup>和<sub>
8)原樣輸出標簽:<pre>
9)字體標簽:<font>
10)居中標簽:<center>
11)圖像標簽:img 空標簽體
<img/>
屬性:
src:鏈接到的資源圖片
width:圖片的寬度兩種方式:一種指定px(像素) 第二種:百分比
title:懸停狀態(tài),會顯示文字
alt:當圖片失效的時候,用來解釋說明該圖片
height:圖片的高度
12)轉(zhuǎn)義字符:
空格: 注意事項(分號一定要帶上)
<: &lt ; (letter than)

:>(greater than)
<h2></h2>
注冊商標:? ®
版權(quán)所有:? ©
13)有序列標簽
ol li列表項
14)無序列標簽
ul li列表項
15)超鏈接標簽
1>連接到某個資源文件或者資源地址(URL)
2> 作為錨連接來使用
在同一個html頁面下:
a> 打錨點:
<a name=”錨點名稱”></a>
b)創(chuàng)建跳轉(zhuǎn)
<a href=”#錨點名稱”>跳轉(zhuǎn)</a>

不同頁html頁面下:
                        c)打錨點:
                                <a name=”錨點名稱”></a>
                        d)創(chuàng)建跳轉(zhuǎn)標記
                                <a href=”資源文件或者資源地址#錨點名稱”>跳轉(zhuǎn)</a>

16)表格標簽:
1>table標簽
屬性:border 表格的邊框 width 表格的寬度 height表格的高度
2>align:標簽在瀏覽器中的對齊方式 bgColor:背景色
3>tr:行標簽
4>td:列(單元格)
5>th:表頭標簽(默認為：居中,加粗)
6>行合并:rospan
7>列合并:colspan

四：CSS網(wǎng)頁布局
1）css的使用方法有三種：
1> 行內(nèi)樣式
標簽 style屬性:指定樣式
弊端:style屬性它和html標簽混合使用,不利于后期維護
2>內(nèi)部樣式
書寫格式:
選中某個標簽名{
書寫樣式;
}
3> 外部方式
a) 創(chuàng)建css文件:指定標簽的樣式
標簽選擇器{
書寫樣式;
}
b) 需要外部導(dǎo)入該css文件
rel屬性:關(guān)聯(lián)層疊樣式表
<link href=”需要被導(dǎo)入的css文件” ref=”stylesheet”>

2)css背景
1> 背景邊框的設(shè)置:首先在頭文件中加入<style type="text/css">
2>在body屬性中進行顏色的選擇 body {background-color: yellow}
3)css文本
1>文本顏色的設(shè)置<style type="text/css">
eg： h2 {color: #00ff00}
</style>
</head>
<body>
<h2>This is header 1</h2>
</body>
4)css字體
1>首先在頭文件中加入<style type="text/css">
2>在p {font-family: .......}進行設(shè)定
<head>
<style type="text/css">
p {font-family: courier}
</style>
</head>
<body>
<p>This is a paragraph</p>
</body>

5)css邊框的設(shè)定
1>首先在頭文件中加入<style type="text/css">
2>在p.* {border-style：....:}進行邊框樣式的設(shè)定
eg： <head>
<style type="text/css">
p.dotted {border-style: dotted}
</style>
</head>
<body>
<p class="dotted">A dotted border</p>
</body>
3>在p. { border-color: .......}進行顏色的設(shè)定
eg: <html>
<head>
<style type="text/css">

                                                                                        p.one
                                                                                                                {
                                                                                                                border-style: solid;
                                                                                                                border-color: #0000ff
                                                                                                                                                                                }
                                                                                                        </style>
                                                                                                        </head>
                                                                                                        <body>
                                                                                                        <p class="one">One-colored border!</p>
                                                                                                            </body>
                                                                                                            </html>

6)css邊距
1>首先在頁面中建立一個<div>....</div>塊標簽
2>塊標簽的位置可以根據(jù)
a>magin的屬性值來進行設(shè)定
b>可以用浮動來進行移動（多個圖片重疊在一起的時候）
7）選擇器的分類
1)標簽選擇器
標簽名稱{
樣式;
}
eg; div{
font-size: 24px;
color: #f00;
}
2)id選擇器
在使用的時候,給標簽一定要指定id屬性且指定id屬性值
#id屬性值{
樣式;
}
eg: #dl1{
font-size: 24px;
color: #0f0;
}
（在同一個html頁面下,不要給多個標簽指定同名的id屬性,id屬性唯一的
javascript:根據(jù)id屬性值獲取當前的標簽對象
document.getElementById("id是唯一的") ;
3)類選擇器
在使用的時候,給標簽一定要指定class屬性且指定class屬性值
.class屬性值{
樣式;
}
eg: .cls1{
font-size: 36px;
color: #00f;}

    (在同一個html頁面中可以給多個標簽指定同名class屬性)

        派生選擇器:
                1)并集選擇器
                        選擇器1,選擇器2,選擇器3{
                            樣式;
                        }
                                            eg:                   #dl1,.cls1{
                                                                                                                            font-size: 24px;
                                                                                                                                color: #ff0;}
                2)交集選擇器
                        選擇器1 選擇器2 選擇器3{
                            樣式;
                            }
                                        eg:                                         #dl1 span{
                                                                                                font-size: 36px;
                                                                                                     color: #000;}
                3)通用選擇器
                    * :所有的意思,通配符號
                    *
    8)css偽類選擇器  
      1>偽類選擇器有4種狀態(tài):
                        a)鼠標沒有訪問過的狀態(tài) link
                        b)鼠標經(jīng)過的狀態(tài) hover
                                c)鼠標激活狀態(tài)(鼠標點擊了,但是沒有松開的狀態(tài))active
                                d)鼠標已經(jīng)訪問過的狀態(tài)(點擊了,并且松開的狀態(tài))   visited         
                2>格式為
                        標簽名稱:分別四種狀態(tài)
                                                                                     1>   a:link{
                                                                                color: ****;
                                                                            }
                                                                            2>   a:visited{
                                                                                color:***** ;
                                                                            }
                                                                            3>   a:hover{
                                                                                text-decoration: none;/
                                                                                color: ****;
                                                                            }
                                                                            4>   a:active{
                                                                                text-decoration: underline;
                                                                                color: ****;
                                                                            }

注意：在 CSS 定義中，a:hover 必須被置于 a:link 和 a:visited 之后，才是有效的。

注意：在 CSS 定義中，a:active 必須被置于 a:hover 之后，才是有效的。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站欄目：HTML學(xué)習(xí)總結(jié)-創(chuàng)新互聯(lián)
本文地址：http://www.muchs.cn/article42/shohc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、商城網(wǎng)站、云服務(wù)器、全網(wǎng)營銷推廣、微信公眾號、網(wǎng)站內(nèi)鏈

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容