當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

html笔记（一）html4+css2.0、css基础和属性、盒模型

發(fā)布時間：2023/12/2 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 html笔记（一）html4+css2.0、css基础和属性、盒模型小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

w3c 官網(wǎng) 這里是 html4 的內(nèi)容

大標(biāo)題小節(jié)

一、關(guān)于HTML	1. 基本語法 2. HTML常用標(biāo)簽 3. 相對路徑和絕對路徑
二、css基礎(chǔ)	1. 表單元素 2. 創(chuàng)建樣式表 3. css語法 4. css選擇器
三、css的相關(guān)屬性	1. 列表 li 獨有的屬性list-style 2. 邊框?qū)傩詁order 3. overflow 4. 浮動 float 遇到的坑 5. 文本相關(guān)屬性 6. 數(shù)字單詞自動換行 7. 背景相關(guān)屬性background 8. 常用圖片格式 9. 定位屬性position 10. 透明屬性
四、盒模型	1. padding 2. margin
五、錨點和熱點	1. 錨點 2. 熱點

一、關(guān)于HTML

1. 基本語法

（1）命名規(guī)則： 字母必須以英文開頭，名稱全部用小寫英文字母、數(shù)字、下劃線的組合，其中不得包含漢字、空格和特殊字符，盡量不要使用大寫字母；
（2）標(biāo)簽：

雙標(biāo)記： <標(biāo)記屬性=“屬性值” 屬性=“屬性值”></標(biāo)記>
單標(biāo)記：<標(biāo)記屬性=“屬性值” />

（3）注意點：

寫在 <> 中的第一個單詞叫做標(biāo)記，標(biāo)簽，元素。
標(biāo)記和屬性用空格隔開，屬性和屬性值用等號連接，屬性值必須放在 "" 號內(nèi)。
一個標(biāo)記可以沒有屬性也可以有多個屬性，屬性和屬性之間不分先后順序。
空標(biāo)記沒有結(jié)束標(biāo)簽，用 / 代替。

（4）基本寫法

<!doctype html>  <html><head> <meta charset="UTF-8" /> <title></title> </head><body></body>  </html>

2. HTML常用標(biāo)簽

HTML標(biāo)簽的種類：塊元素、行元素、行內(nèi)塊元素

（1）塊狀元素：天生能換行的元素；

<h1>文本標(biāo)題</h1> 文本標(biāo)題標(biāo)簽(h1-h6)，h1標(biāo)簽常作為網(wǎng)站logo的父標(biāo)簽，h2是新聞頁中的大標(biāo)題。
<p>段落</p> 段落標(biāo)簽
<br/> 強制換行標(biāo)簽
  空格網(wǎng)頁實體
<hr/>水平線標(biāo)簽
<ul><li>無序</li><li>無序</li><li>無序</li></ul> 無序列表
<ol><li>有序</li><li>有序</li><li>有序</li></ol> 有序列表
<dl><dt>標(biāo)題</dt><dd>內(nèi)容</dd><dd>內(nèi)容</dd></dl> 自定義列表

注意：①p標(biāo)簽不能放“天生的塊元素”;
②h標(biāo)簽內(nèi)不能放其他的 h標(biāo)簽，否則會父子變兄弟。

（2）行內(nèi)元素：天生不能換行的元素；

<b></b> 加粗的標(biāo)簽
<i></i> 傾斜的標(biāo)簽
<u></u> 下劃線標(biāo)簽
<strong></strong> 加重語氣的加粗標(biāo)簽，強調(diào)比 b標(biāo)簽更重要
<em></em> 加重語氣的傾斜標(biāo)簽，強調(diào)比 i標(biāo)簽更重要
<s></s> 刪除線
<span></span> 文本標(biāo)簽
<a></a> 超鏈接標(biāo)簽
<del></del>

<a href="#" target="_blank"></a>  <a href="./b.html" target="_blank"></a>  <a href="www.baidu.com" target="_blank"></a>

（3）行內(nèi)塊元素：天生不能換行但能設(shè)置寬高的元素；

img 圖片元素
表單元素

<img src="圖片路徑" title="標(biāo)題屬性" alt="替換文本" /> <a href="#"><img src="圖片路徑" /> </a>

（4）表格元素

<table></table> 表格
<tr></tr> 表格行
<td></td> 表格列

<table border="1"></table>  <tr align="left"></tr>  <td colspan="2"></td>

合并規(guī)則：
合并列：合并n列，當(dāng)前tr中少 n-1 個td。
合并行：合并n行，該td所在tr下面的 n-1 個 tr 中都要少1個td。

（5）塊元素、行元素、行內(nèi)塊元素的區(qū)別

3. 相對路徑和絕對路徑

絕對路徑就是寫死的路徑,缺點是換設(shè)備會出現(xiàn)路徑找不到問題
相對路徑就是靈活的路徑,優(yōu)點是不會因為設(shè)備更換出現(xiàn)路徑問題,

（1）絕對路徑： 絕對路徑就是你的主頁上的文件或目錄在硬盤上真正的路徑(URL和物理路徑)。
例如：C:\xyz\test.txt 代表了test.txt文件的絕對路徑。http://www.sun.com/index.htm也代表了一個URL絕對路徑。

（2）相對路徑： 相對于某個基準(zhǔn)目錄的路徑。包含Web的相對路徑（HTML中的相對目錄）。
例如：在Servlet中，"/“代表Web應(yīng)用的根目錄。物理路徑的相對表示，例如：”./" 代表當(dāng)前目錄，"…/"代表上級目錄。這種類似的表示，也是屬于相對路徑。

/表示源文件的根目錄
./表示當(dāng)前文件所在的目錄(可以省略)
../表示當(dāng)前文件所在的目錄的上一級目錄

二、css基礎(chǔ)

css 層疊樣式表，web 標(biāo)準(zhǔn)中的表現(xiàn)語音，目前推薦遵循的是 w3c 發(fā)布的 css3.0。css 樣式有兩部分組成：選擇符（選擇器）+聲明（{屬性：屬性值}）。

1. 表單

（1）form 標(biāo)簽的屬性：

name=“定義表單名”
method=“get/post”
action=“請求地址/跳轉(zhuǎn)地址”

（2）其他表單元素：

<textarea>文本內(nèi)容</textarea> 多行文本輸入框
<select><option>下拉框內(nèi)容1</option><option>下拉內(nèi)容2</option></select> 下拉框，其中 selected="selected"表示默認(rèn)選中，寫在"" 標(biāo)簽中；
<input type="表單元素類型" value="默認(rèn)值" /> 表單元素

text 單行文本輸入框，常與 placeholder 屬性（提示信息）一起使用 password 面膜輸入框 radio 單選框，checked="checked"默認(rèn)選中，常于 name 屬性一起使用 checkbod 復(fù)選框，checked="checked"默認(rèn)選中 submit 提交按鈕 reset 重置按鈕 button 自定義按鈕 <input type="radio" name="sex" value="傳給后臺的值" checked="checked" />男 <input type="radio" name="sex" value="傳給后臺的值"/>女 <input type="radio" name="sex" value="傳給后臺的值"/>保密

（3）form 中 name 的作用

name 屬性用于對提交到服務(wù)器后的表單數(shù)據(jù)進行標(biāo)識；
或者在客戶端通過 JavaScript 引用表單數(shù)據(jù)。
只有設(shè)置了 name 屬性的表單元素才能在提交表單時傳遞它們的值。

（4）form 中的 method = "get/post"
method,傳輸方式，默認(rèn) get，常用 get 的傳輸方式。兩者的區(qū)別：

get 通過地址欄傳輸，會將信息拼接到地址欄上。而 post 不會講信息拼接到地址欄上；
post 的傳輸方式比 get 安全；
post 能傳輸大量信息；
get 傳輸速度比 post 快；( get 沒有加密 )。

2. 創(chuàng)建樣式表

（1）內(nèi)聯(lián)樣式表：<style type="text/css">css語法</style>，最好寫在<head></head>中；

（2）外部樣式表：<link rel="stylesheet" type="text/css" href="路徑" /> 和 @import url(路徑);；
頂部部小標(biāo)簽：<link rel="icon" href="<%= BASE_URL %>favicon.ico">；<%= BASE_URL %> 可以省略，主要作用是將圖片編譯成 base64；

區(qū)別linkimport

1. 從屬關(guān)系	link是HTML提供的標(biāo)簽，不僅可以加載 CSS 文件，還可以定義 RSS、rel 連接屬性等。	@import是 CSS 提供的語法規(guī)則，只有導(dǎo)入樣式表（加載CSS）的作用。
2. 加載順序	當(dāng)一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載。	而@import引用的CSS 會等到頁面全部被下載完再被加載，所以有時候瀏覽@import加載CSS的頁面時開始會沒有樣式。
3. 兼容性的差別	link標(biāo)簽作為 HTML 元素，不存在兼容性問題。	@import是CSS2.1提出的，所以老的瀏覽器不支持，@import只t在IE5以上的才能識別。
4. 使用dom控制樣式時的差別	當(dāng)使用javascript控制dom去改變樣式的時候，只能使用link標(biāo)簽。	@import不是 dom 可以控制的。
5. 權(quán)重區(qū)別	link引入的樣式權(quán)重大于@import引入的樣式。

（3）內(nèi)聯(lián)樣式表（嵌入式、行間、行內(nèi)）：<div style=“height:100px;background:red;” ></div>

內(nèi)聯(lián)樣式表的優(yōu)先級別（權(quán)重）最高；

內(nèi)部樣式表與外部樣式表的優(yōu)先級和書寫的順序有關(guān)，后書寫的優(yōu)先級別高。

3. css語法

選擇符(或選擇器){屬性:屬性值;屬性:屬性值;} 例如：div{width:200px;height:100px;background:red; }
（1）每個CSS樣式由兩部分組成，即選擇符和聲明，聲明又分為屬性和屬性值；
（2）屬性必須放在花括號中，屬性與屬性值用冒號連接。
（3）每條聲明用分號結(jié)束。
（4）當(dāng)一個屬性有多個屬性值的時候，屬性值與屬性值不分先后順序；
（5）在書寫樣式過程中，空格、換行等操作不影響屬性顯示。

注釋 html 代碼： 
注釋 css 代碼： /*注釋內(nèi)容*/

4. css選擇器的優(yōu)先級（權(quán)重）

選擇器就是運用不同手段來選擇特定元素的方法。
內(nèi)聯(lián)樣式表的權(quán)重最高：1000 ，繼承樣式的權(quán)重為：0000。
（1）id 選擇符 0100
（2）class 選擇符 0010
（3）偽類選擇符 0010
（4）元素選擇符（類型選擇符）0001
（5）后代選擇符后代選擇符的權(quán)重之和
（6）群組選擇符
（7）通配符
選擇符疊加寫法：div.box.red。
例如：#box .list.list li{} 權(quán)重121，div#box .list li 權(quán)重112。

/* 可以缺少，但是不能改變位置，因為:hover和:active是同時觸發(fā)的，后書寫的會覆蓋前面寫的css*/a:link{}/*初始狀態(tài)，沒有點擊過的狀態(tài),只有 a 標(biāo)簽有該偽類選擇符*/a:visited{}/*被訪問過后的狀態(tài),只有 a 標(biāo)簽有該偽類選擇符*/a:hover{}/*鼠標(biāo)滑過時的狀態(tài)*/a:active{}/*鼠標(biāo)按下不放的狀態(tài)*/

三、css的相關(guān)屬性

1. 列表 li 獨有的屬性 list-style

復(fù)合寫法：list-style:square inside url('/i/arrow.gif');，可以不設(shè)置其中的某個值。
list-style: none 表示沒有列表符號。

（1） list-style-type 設(shè)置列表符號。屬性值： disc(實心圓) 、 circle(空心圓) 、 square(實心方塊) 、 none(去掉列表符號)；

（2）list-style-image:url(路徑)；自定義圖片列表符號；

（3）list-style-position 定義符號所在位置。outside(默認(rèn)外邊) 、 inside(里邊)
常用 list-style-type:none; 因為列表符號在各瀏覽器顯示無法統(tǒng)一，并且無法隨心所欲的控制符號與文本內(nèi)容之間的距離。

2. 邊框?qū)傩?border

復(fù)合寫法： border:1px solid #000;

（1）邊框線型：solid（實線）、dashed（虛線）、dotted（點線）、double（雙線）；
點線的大小總是 1px ,而且各個瀏覽器大小都不一樣

（2）單邊框設(shè)置：border-left、border-right、border-top、border-bottom；

（3）單邊框其他屬性：border-方向-width 設(shè)置單邊邊框?qū)挾取order-方向-style 設(shè)置單邊邊框線型、border-方向-color 設(shè)置單邊邊框顏色；

（4）用邊框?qū)傩詫懗鱿氯切?#xff1a;

哪個方向的三角形，就將哪個方向的邊框設(shè)置 border-方向: 大小 solid 顏色，相鄰的邊框顏色設(shè)置成白色（消失色），對邊的邊框設(shè)置為 0；

補充：outline:1px solid #000; 書寫input的外框；

3. overflow

（1）overflow 的屬性：

overflow:visible;/*默認(rèn)值*/ overflow:hidden;/*溢出隱藏*/ overflow：scroll;/*滾動*/ overflow:auto;/*自動出現(xiàn)滾動條*/

（2）隱藏滾動條：div::-webkit-scrollbar { display: none; }，兼容所有瀏覽器的超出部分滾動不顯示滾動條，div 為出現(xiàn)滾動條的元素。

（3）單行文本溢出隱藏顯示省略號：

width: 200px; //文本超出多少隱藏 white-space: nowrap; //強制不換行 overflow: hidden; //溢出隱藏 text-overflow: ellipsis; //文本溢出隱藏時出現(xiàn)省略號

4. 浮動 float 遇到的坑

（1）float 浮動屬性：

float: none; //默認(rèn)不浮動 float: left; //左浮動 float: right; //右浮動

（2）浮動的坑（特點）：

通常情況下，如兩個兄弟元素設(shè)置左右浮動，我們需要設(shè)置父框高度，如果不設(shè)置，就會造成“高度塌陷”

高度塌陷：父元素?fù)尾婚_子元素內(nèi)容；
不占文檔流；
父元素高度不夠時，浮動的子元素會影響下面的元素；
當(dāng)浮動元素的父元素高度不夠時，會影響到與該父元素相鄰元素中的浮動元素；
浮動元素不能與文本元素重合在一起，它會把文字?jǐn)D出去；
浮動元素會把所有的元素變成一類元素，即浮動元素，可以設(shè)置寬、高、背景色等；

（3）預(yù)防浮動出現(xiàn)：

要浮動一窩都浮動（兄弟元素都浮動）；
父元素必須設(shè)置足夠的高度；

5. 文本相關(guān)屬性

文本相關(guān)的屬性會被繼承，a標(biāo)簽除外，因為 a標(biāo)簽有一個默認(rèn)的偽類效果。

網(wǎng)頁字體大小通常為： 12px 或 14px ；

單位：px 像素，pt 點， em 倍距； 3pt = 4px；

em 是根據(jù)父元素的字體大小來決定多小像素；
字體大小默認(rèn) 16px，1em=16px（文字的一倍大小，一倍距就是一個文字的大小）

復(fù)合寫法： font:700 italik 12px/2 "華文琥珀"; 最簡： font:字體大小 "字體類型";如果沒有設(shè)置到的視為缺省值還原默認(rèn)。
（1）font-size: 數(shù)字px; 設(shè)置文本大小；

（2）font-style: normal（正常）/italik（斜體）; 設(shè)置文本斜體；

（3）font-weight: normal（正常100-500）/bold（加粗600-900） 設(shè)置文本粗體；

（4）font-family: "字體1","字體2" 可以設(shè)置多個字體，如果瀏覽器不支持第一個字體，則會嘗試下一個。自定義字體通常默認(rèn)為“宋體”；

（5）text-align: left/center/right 水平位置；

（6）vertical-align: top/middle/bottom 針對圖片使用，常寫在圖片上；

（7）line-height: 數(shù)字px; 行高；

（8）letter-spacing: value; 字間距：控制英文字母和漢字的字距；

（9）work-spacing: value; 詞間距：控制英文單詞詞距；（只對單詞生效）

（10）text-decoration: none（沒有修飾）/underline（添加下劃線）/overline（上劃線）/line-through（刪除線） 文本修飾；

（11）text-indent: 2em ：首行縮進；

6. 數(shù)字單詞自動換行

一般字母和數(shù)字沒有空格不會換行，但中文會以文字為單位自動換行。
word-wrap: normal; 默認(rèn)；
word-wrap: break-word; 讓字母和數(shù)字沒有空格的情況下自動換行；
white-space: nowrap; 文本強制不換行；

7. 背景相關(guān)屬性background

復(fù)合寫法： background:#000 url(圖片路徑) no-repeat top center;
可以不設(shè)置其中的某個值，比如：background: #f00;。

（1）background-color : 背景色
（2）background-image : url(圖片路徑) 背景圖片
（3）background-repeat : 背景圖片平鋪屬性 repeat（默認(rèn)平鋪）、repeat-x（橫向平鋪）、repeat-y（縱向平鋪）、no-repeat（不平鋪）
（4）background-position : left/right/center(水平) top/bottom/center(垂直)

注意：如果只寫一個值，另外一個值會默認(rèn)為居中，還可以書寫 數(shù)值，數(shù)值可以為 負(fù)值。
background-position: 1px -2px; 表示往下平移1px，像左平移2px；

8. 常用圖片格式

常用格式.jpg.png.gif

區(qū)別

圖片有損質(zhì)量，但肉眼難分辨，用來減小圖片大小，圖片非鏤空使用。

圖片有損質(zhì)量，但肉眼分辨不出，用來減小圖片大小，圖片鏤空使用。
（ps：打開圖片，去除背景，虛框選中delete，png-24格式，保存）

圖片有損質(zhì)量嚴(yán)重，肉眼容易分辨，常用做動圖。
（ps截圖：ctrl+c復(fù)制 — ctrl+n新建 — 回車— ctrl+v粘貼 — ctrl+alt+shift+s保存）

9. 定位屬性position

（1）position 的屬性值：

position：只有定位元素可以使用 left、right、top、bottom、z-index；

static：默認(rèn)值。所有元素默認(rèn)的定位屬性就是是 static ，一般不用；
absolute：絕對定位（完全脫離文檔流）。
relative : 相對定位（占文檔流）。
fixed : 固定定位（完全脫離文檔流）。

定位屬性position屬性值staticrelativeabsolutefixed

稱呼	默認(rèn)不定位	相對定位	絕對定位	固定定位
區(qū)別	沒有定位，元素出現(xiàn)在正常的流中.	根據(jù)自身初始所在位置來定位；不破壞原有元素的特性。	自動向上檢索，根據(jù)最近的定位元素作為父元素，如果檢索不到就以 html 來定位。	始終根據(jù) html 來定位；
是否占文檔流	占文檔流	占文檔流	不占文檔流，完全脫離文檔流	不占文檔流，完全脫離文檔流
特點或用法		特點：因為相對定位占文檔流，在沒有設(shè)置 left、top 屬性下的效果和static 默認(rèn)是一樣的。	用法：①向上檢索定位的元素作為父框； ②多個定位元素使用 z-index 來定義層級。	特點：位置不隨著滾動條滾動而發(fā)生變化。
適用場合		微調(diào)距離時可以用此屬性。可以使用left，top，right，bottom等。	通常用于做重疊效果。	網(wǎng)頁遮罩。

（2）z-index 層級

只有設(shè)置定位元素才能設(shè)置 z-index（默認(rèn)值為 auto，幾乎和 0 差不多）。在兄弟關(guān)系中，z-index 值越大的顯示在上面。

z-index: auto; 只有在子元素也有定位的情況下出現(xiàn)。

10. 透明屬性

opacity:0.5; 值0-1，從透明-不。0.5表示半透明，ie9以下版本無效。

filter:alpha(opacity=50); 值0-100，非ie瀏覽器無效，兼容ie678。

（1）缺點：給父元素設(shè)置透明子元素也會變透明。

（2）解決方法（想背景透明，子元素不透明）：

①做2個層疊關(guān)系的定位元素，將父子元素變成兄弟元素；
②給父元素設(shè)置透明的背景圖。

四、盒模型

盒模型的組成分為：外邊距、邊框、內(nèi)邊距、內(nèi)容區(qū)；

盒子實際寬度（高度）=內(nèi)容（content）+邊框（border）+間隙（padding）+間隔（margin）；

1. padding：

（1）說明：

用來調(diào)整子元素在父元素中的位置關(guān)系；padding 屬性需要添加在 父元素 上。
padding值是額外加在元素原有大小之上的，若想保證元素大小不變，需從元素寬或高上減掉添加的 padding 屬性值；

（2）padding 屬性值

{padding: 10px 20px 30px 50px;} 4個值，表示：上右下左；
{padding: 10px 20px 30px;} 3個值，表示：上左右下；
{padding: 10px 20px;} 2個值，表示：上下左右；
{padding: 20px;} 1個值，表示：4個方向都是 20px；

（3）可單獨設(shè)置某一個方向的 padding，類似 border。

padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;

2. margin：

margin 是用來調(diào)整兄弟元素之間的距離； 它的屬性值和單邊設(shè)置寫法與padding相同。
margin 的坑：
（1）margin 上下會重疊（左右沒事）；

解決辦法 ：設(shè)置單邊就行。

（2）第一個塊的子元素設(shè)置 margin-top 會無限向父元素傳遞，直到不是第一個子元素。

解決辦法 ：

① 給父元素設(shè)置 border-top：1px; 或者 padding-top: 1px; 或者 float: left; 或者 overflow: hidden; ；
② 給子元素設(shè)置 float:left; ；
③ 給父元素添加偽類元素：父元素:before{content:""; display: table;}。
因為 :before 相當(dāng)于給第一個子元素之前添加一個類似 span標(biāo)簽，所以這個塊元素就變成了第二個子元素。

overflow:hidden; 可以解決高度塌陷問題，可以解決 margin-top 向父元素傳遞效果的問題。

（3）給行元素設(shè)置上下盒模型，會穿過其他物體，左右沒事。

解決辦法 ：

① 不要給行元素設(shè)置上下盒模型；
② 給這個行元素轉(zhuǎn)換成塊元素：display: block;

五、熱點和錨點

1. 錨點

錨點是網(wǎng)頁制作中超級鏈接的一種，在網(wǎng)頁內(nèi)部進行跳轉(zhuǎn)。

（1）語法：

（2）示例：
點擊錨點鏈接進行跳轉(zhuǎn)時，地址欄也會有所改變。如果想要跳轉(zhuǎn)到頁面的某個內(nèi)容區(qū)域，可以在地址上加上錨點。

2. 熱點

（Dreamweaver工具）盒子模型的標(biāo)準(zhǔn)，任何元素都是以一個矩形呈現(xiàn)，但有時則不然。比如地圖，點擊某一個縣需要一個鏈接，此時需要熱點鏈接。

熱點只能給圖片添加，這個方法已經(jīng)被拋棄了。

網(wǎng)頁實體 ： < < 和 > > 和   空格

相關(guān)面試、筆試題：關(guān)于HTML的面試題

下一篇：html（二）html學(xué)習(xí)-干貨之 html4+css2.0

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的html笔记（一）html4+css2.0、css基础和属性、盒模型的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：关于vue打包的问题
下一篇： html笔记（三）html5+css3（