HTML學(xué)習(xí)總結(jié)

發(fā)布時(shí)間：2020-06-17 12:59:27 來(lái)源：網(wǎng)絡(luò) 閱讀：567 作者：王震1014 欄目：web開(kāi)發(fā)

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

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

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

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

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

四：CSS網(wǎng)頁(yè)布局
1）css的使用方法有三種：
1> 行內(nèi)樣式
標(biāo)簽 style屬性:指定樣式
弊端:style屬性它和html標(biāo)簽混合使用,不利于后期維護(hù)
2>內(nèi)部樣式
書(shū)寫(xiě)格式:
選中某個(gè)標(biāo)簽名{
書(shū)寫(xiě)樣式;
}
3> 外部方式
a) 創(chuàng)建css文件:指定標(biāo)簽的樣式
標(biāo)簽選擇器{
書(shū)寫(xiě)樣式;
}
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屬性中進(jìn)行顏色的選擇 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: .......}進(jìn)行設(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：....:}進(jìn)行邊框樣式的設(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: .......}進(jìn)行顏色的設(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>首先在頁(yè)面中建立一個(gè)<div>....</div>塊標(biāo)簽
2>塊標(biāo)簽的位置可以根據(jù)
a>magin的屬性值來(lái)進(jìn)行設(shè)定
b>可以用浮動(dòng)來(lái)進(jìn)行移動(dòng)（多個(gè)圖片重疊在一起的時(shí)候）
7）選擇器的分類
1)標(biāo)簽選擇器
標(biāo)簽名稱{
樣式;
}
eg; div{
font-size: 24px;
color: #f00;
}
2)id選擇器
在使用的時(shí)候,給標(biāo)簽一定要指定id屬性且指定id屬性值
#id屬性值{
樣式;
}
eg: #dl1{
font-size: 24px;
color: #0f0;
}
（在同一個(gè)html頁(yè)面下,不要給多個(gè)標(biāo)簽指定同名的id屬性,id屬性唯一的
javascript:根據(jù)id屬性值獲取當(dāng)前的標(biāo)簽對(duì)象
document.getElementById("id是唯一的") ;
3)類選擇器
在使用的時(shí)候,給標(biāo)簽一定要指定class屬性且指定class屬性值
.class屬性值{
樣式;
}
eg: .cls1{
font-size: 36px;
color: #00f;}

                (在同一個(gè)html頁(yè)面中可以給多個(gè)標(biāo)簽指定同名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)通用選擇器
                    * :所有的意思,通配符號(hào)
                    *
    8)css偽類選擇器  
      1>偽類選擇器有4種狀態(tài):
                        a)鼠標(biāo)沒(méi)有訪問(wèn)過(guò)的狀態(tài) link
                        b)鼠標(biāo)經(jīng)過(guò)的狀態(tài) hover
                                c)鼠標(biāo)激活狀態(tài)(鼠標(biāo)點(diǎn)擊了,但是沒(méi)有松開(kāi)的狀態(tài))active
                                d)鼠標(biāo)已經(jīng)訪問(wèn)過(guò)的狀態(tài)(點(diǎn)擊了,并且松開(kāi)的狀態(tài))   visited         
                2>格式為
                        標(biāo)簽名稱:分別四種狀態(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 之后，才是有效的。

向AI問(wèn)一下細(xì)節(jié)

HTML學(xué)習(xí)總結(jié)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽