當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2023/12/2 编程问答 33 豆豆

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

w3c 官網這里是 html4 的內容

大標題小節

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

一、關于HTML

1. 基本語法

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

雙標記： <標記屬性=“屬性值” 屬性=“屬性值”></標記>
單標記：<標記屬性=“屬性值” />

（3）注意點：

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

（4）基本寫法

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

2. HTML常用標簽

HTML標簽的種類：塊元素、行元素、行內塊元素

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

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

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

（2）行內元素：天生不能換行的元素；

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

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

（3）行內塊元素：天生不能換行但能設置寬高的元素；

img 圖片元素
表單元素

<img src="圖片路徑" title="標題屬性" 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>

合并規則：
合并列：合并n列，當前tr中少 n-1 個td。
合并行：合并n行，該td所在tr下面的 n-1 個 tr 中都要少1個td。

（5）塊元素、行元素、行內塊元素的區別

3. 相對路徑和絕對路徑

絕對路徑就是寫死的路徑,缺點是換設備會出現路徑找不到問題
相對路徑就是靈活的路徑,優點是不會因為設備更換出現路徑問題,

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

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

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

二、css基礎

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

1. 表單

（1）form 標簽的屬性：

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

（2）其他表單元素：

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

text 單行文本輸入框，常與 placeholder 屬性（提示信息）一起使用 password 面膜輸入框 radio 單選框，checked="checked"默認選中，常于 name 屬性一起使用 checkbod 復選框，checked="checked"默認選中 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 屬性用于對提交到服務器后的表單數據進行標識；
或者在客戶端通過 JavaScript 引用表單數據。
只有設置了 name 屬性的表單元素才能在提交表單時傳遞它們的值。

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

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

2. 創建樣式表

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

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

區別linkimport

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

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

內聯樣式表的優先級別（權重）最高；

內部樣式表與外部樣式表的優先級和書寫的順序有關，后書寫的優先級別高。

3. css語法

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

注釋 html 代碼： 
注釋 css 代碼： /*注釋內容*/

4. css選擇器的優先級（權重）

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

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

三、css的相關屬性

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

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

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

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

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

2. 邊框屬性 border

復合寫法： border:1px solid #000;

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

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

（3）單邊框其他屬性：border-方向-width 設置單邊邊框寬度、border-方向-style 設置單邊邊框線型、border-方向-color 設置單邊邊框顏色；

（4）用邊框屬性寫出下三角形：

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

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

3. overflow

（1）overflow 的屬性：

overflow:visible;/*默認值*/ overflow:hidden;/*溢出隱藏*/ overflow：scroll;/*滾動*/ overflow:auto;/*自動出現滾動條*/

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

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

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

4. 浮動 float 遇到的坑

（1）float 浮動屬性：

float: none; //默認不浮動 float: left; //左浮動 float: right; //右浮動

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

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

高度塌陷：父元素撐不開子元素內容；
不占文檔流；
父元素高度不夠時，浮動的子元素會影響下面的元素；
當浮動元素的父元素高度不夠時，會影響到與該父元素相鄰元素中的浮動元素；
浮動元素不能與文本元素重合在一起，它會把文字擠出去；
浮動元素會把所有的元素變成一類元素，即浮動元素，可以設置寬、高、背景色等；

（3）預防浮動出現：

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

5. 文本相關屬性

文本相關的屬性會被繼承，a標簽除外，因為 a標簽有一個默認的偽類效果。

網頁字體大小通常為： 12px 或 14px ；

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

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

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

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

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

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

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

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

（7）line-height: 數字px; 行高；

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

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

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

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

6. 數字單詞自動換行

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

7. 背景相關屬性background

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

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

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

8. 常用圖片格式

常用格式.jpg.png.gif

區別

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

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

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

9. 定位屬性position

（1）position 的屬性值：

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

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

定位屬性position屬性值staticrelativeabsolutefixed

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

（2）z-index 層級

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

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

10. 透明屬性

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

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

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

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

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

四、盒模型

盒模型的組成分為：外邊距、邊框、內邊距、內容區；

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

1. padding：

（1）說明：

用來調整子元素在父元素中的位置關系；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）可單獨設置某一個方向的 padding，類似 border。

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

2. margin：

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

解決辦法 ：設置單邊就行。

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

解決辦法 ：

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

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

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

解決辦法 ：

① 不要給行元素設置上下盒模型；
② 給這個行元素轉換成塊元素：display: block;

五、熱點和錨點

1. 錨點

錨點是網頁制作中超級鏈接的一種，在網頁內部進行跳轉。

（1）語法：

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

2. 熱點

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

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

網頁實體 ： < < 和 > > 和   空格

相關面試、筆試題：關于HTML的面試題

下一篇：html（二）html學習-干貨之 html4+css2.0

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

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