當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

Web前端之HTML+CSS的知识总结

發布時間：2023/12/20 HTML 38 豆豆

生活随笔收集整理的這篇文章主要介紹了 Web前端之HTML+CSS的知识总结小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Html和CSS的關系

學習web前端開發基礎技術需要掌握：HTML、CSS、JavaScript語言。下面我們就來了解下這三門技術都是用來實現什么的：

HTML是網頁內容的載體。內容就是網頁制作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。

CSS樣式是表現。就像網頁的外衣。比如，標題字體、顏色變化，或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現。

JavaScript是用來實現網頁上的特效效果。如：鼠標滑過彈出下拉菜單。或鼠標滑過表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換。可以這么理解，有動畫的，有交互的一般都是用JavaScript來實現的。

HTML篇

認識html

html不是一種編程語言，是一種標記語言。
標記語言是由一套標識標簽組成的
html使用標簽來描述網頁

html結構

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body></body> </html>

不成對出現的標簽
<br> <hr> <meta> <img> <input..> <option> <link>

html基本標簽講解

<html> <head> <body> 標簽
<h1>—<h6> 僅僅用于標題文本，不要為了產生粗體文本使用它們
<p> 段落標簽
<strong> <b> 標簽讓文字產生加粗效果

<strong>用于強調文本，強度更深，表示重要文本—>用于SEO優化
<b>只是視覺加粗效果—>單純為了產生加粗

<em> <i> 標簽

em用于強調文本
i只是視覺斜體效果
<strong>比<em>強調更強

特殊符號：
  —->空格
> —>大于號
&lt；—>小于號
&quot；—>引號
©–>版權號

HTML基本標簽

span 標簽
? ? ? ? ? ? 對被用來組合文檔中的行內元素
? ? ? ? ? 注意：span沒有固定的格式表現，當對它應用樣式時，才會產生視覺上的變化
<pre> 標簽
? ? ? ? ? ? 文字的格式按源碼的排版來顯示，我們稱之為預處理格式
<a>標簽—>他有一個必不可少的屬性 href
? ? ? ? target屬性：
? ? ? ? _self(在原來頁面打開)
? ? ? ? _blank（新窗口打開）
? ? ? ? _top（打開時忽略所有的框架）
? ? ? ? _parent（在父窗口中打開）

創建錨點和錨鏈接
? ? ? ? 錨點也是一種超鏈接，是頁面內進行跳轉的超鏈接
? ? ? ? ? ? ? ? 第一步：創建錨點 <a name="錨點名稱"></a>
? ? ? ? ? ? ? ?第二步：使用創建好的錨點名稱 <a href="#錨點名稱">內容</a>

marquee標簽
? ? ? ? 可以創建一個內容滾動效果

direction表示滾動方向，取值有（left,right,up,down,默認left）
loop表示滾動循環的次數，默認為無限循環

οnmοuseοver=this.stop() οnmοuseοver=this.start() scrollamout="1"(滾動速度)

表示當鼠標移上區域的時候停止滾動，鼠標移開繼續滾動

img圖片標簽與路徑

圖片標簽與路徑：

常見圖片格式：jpg/Jpeg png(半/全透明都支持) gif(只支持全透明)

圖片標簽寫法：

圖片四要素：
src="" 圖片路徑
alt="" 圖片含義
width=""圖片寬度和圖片大小保持一致
height=""圖片高度和圖片大小保持一致
title="" 標題

相對路徑、絕對路徑：

相對路徑：(Relative Path) 相對于該文件的路徑；
絕對路徑：(Absolute Path) 從磁盤出發的路徑；

列表

1、無序列表
<ul> 無序列表

無序列表是一個沒有順序項目的列表，此列表項默認粗體圓點進行標識

2、有序列表
有序列表也是一列項目，只是列表項目使用的是數字進行標記。有序列表始于 <ol> 標簽。每個列表項始于 <li>標簽。

列表符號

無序列表-列表符號：
type="circle"空心圓 type=“disc”實心圓默認值 type="square" 方塊符
有序列表-列表符號
1、type="A" A B C D
2、type="a"a b c d
3、type="1"1 2 3 4 默認值type=”I” I II III type=”i” i ii iii

3、無序列表-嵌套

4、有序列表-嵌套

5、定義列表

定義列表不僅僅是一列項目，而是項目及其注釋的組合
定義列表以 <dl> 標簽開始。每個定義列表項以 <dt>開始。每個自定義列表項的定義以 <dd> 開始。

<dl><dt>pc網頁制作</dt><dd>學習DIV+CSS JS JQ 項目實戰/dd><dt>手機網頁制作</dt><dd>手機網頁制作實戰</dd> </dl>

dd是對dt的解釋

< dl>< /dl>用來創建一個普通的列表,
< dt>< /dt>用來創建列表中的上層項目，
< dd>< /dd>用來創建列表中最下層項目，
< dt>< /dt>和< dd>< /dd>都必須放在< dl>< /dl>標志對之間。

dl是definition list的縮寫
dt是definition title的縮寫
dd是definition description的縮寫

list-style屬性具有三個屬性分量：
list-style-position：設置列表項圖標的位置，位于文本內或者文本外
list-style-type：設置列表項圖標的類型
list-style-image：使用圖像設置列表項圖標

表單元素

<form>表單標簽
??????????<form>表單是一個包含表單元素的區域，包括起來的都是表單的內容

html標簽 - Action和確認按鈕

當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。

<form action="html.do" method="get"> username: <input type="text" name="user" /> <input type="submit" value="提交" /</form>

<input>標簽常用type類型

<input type="" name="" value="" />
type="text"單行文本輸入框
type="password" 密碼（maxlength=""）
type="radio" 單項選擇（checked="checked"）
type="checkbox"多項選擇
type="button"按鈕
type="submit"提交 type="image"圖片提交
type="file"上傳文件
type="reset"重置
type="hidden"隱藏

<label>標簽

label 元素不會向用戶呈現任何特殊效果。
不過，它為鼠標用戶改進了可用性。
如果您在 label 元素內點擊文本，就會觸發此控件。
就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。

表單和表格標簽：
<textarea>文本域標簽
<textarea>標簽：
<textarea></textarea>是文本域標簽，可以在其中插入一段文字內容，它有兩個常用屬性rows和cols

rows表示這個文本域有多少行
cols表示這個文本域有多少列
除了這兩個屬性它還有readonly（只讀，文本域的內容無法改變，相當于協議）和title（鼠標放上提示）

<select>標簽的掌握

當提交表單時，瀏覽器會提交選定的項目，或者收集用逗號分隔的多個選項，將其合成一個單獨的參數列表，并且在將表單數據提交給服務器時包括 name屬性

<table>表格標簽
<table>表格標簽：<table>是表格標簽，可以用它定義一個表格。

<table>的border屬性不能少
<tr>可以定義表格中的一行，一個<tr></tr>表示一行。
<td>可以定義表格中的一個單元格，<td></td>表示一個單元格。

HTML5標簽集合

CSS篇

css的特征

css解決了兩個問題：
1>. 將HTML頁面的內容與樣式分離。
2>. 提高web開發的工作效率。

css的優勢:
1>. 內容與表現分離
2>. 網頁的表現統一，容易修改
3>. 豐富的樣式，使頁面布局更加靈活
4>. 減少網頁的代碼量，增加網頁瀏覽器速度，節省網絡帶寬
5>. 運用獨立頁面的css,有利于網頁被搜索引擎收錄

css語法：
1>. 選擇器；
2>. 聲明=屬性+值；

/*這是注釋*/

css的引入

1. 內嵌式
一般不寫內嵌式，以后不好維護

2. 內鏈式

3. 外鏈式

鏈接式 link css 同時加載的！<link rel="stylesheet" type="text/css" href="./css/index.css"> 導入式實際用的很少，先加載html，在加載cssimport 是css2.1特有的，對于不兼容css2.1的瀏覽器是無效的eg:IE5以下<style type="text/css">@import url('./css/index.css');</style> 注意：@import url()必須寫在文件最開始的位置。

鏈接式與導入式的區別：
1、標簽屬于XHTML,@import是屬性css2.1
2、使用鏈接的css文件先加載到網頁當中，再進行編譯顯示
3、使用@import導入的css文件，客戶端顯示HTML結構，再把CSS文件加載到網頁當中
4、@import是屬于CSS2.1特有的，對于不兼容CSS2.1的瀏覽器來說就是無效的

優先級：內嵌式 > 內鏈式 > 外鏈式

選擇器

什么是選擇器：css選擇器就是要改變樣式的對象

css選擇器

class 類選擇器可以重復使用
id 選擇器唯一

id選擇器
選擇id命名的元素以 # 開頭 #p1{color:#0f0;}

class選擇器，選擇clas命名的元素以.開頭 .first{color:#00f;}

css代碼寫完后上線前要經過壓縮處理
本地和服務器分兩個css版本（備份）
壓縮后注釋都清除，空間體積減少

群組選擇器
選擇多個元素,以逗號隔開 #main,.first,span,a,h1{color:red;}

包含選擇器
選擇某元素的后代元素，也稱后代選擇器，父類與子類間以空格隔開p
span{color:red;}

屬性選擇器
選擇包含某一屬性的元素
a[title]{color:red;}選擇包含title的a標簽
a[title][href]{color:red;}選擇包含title和href的a標簽

背景屬性

背景顏色的添加:
background:red;
backgronnd-color:red;

背景圖片的添加：

background:url(“images/1.jpg”); backgronnd-image:url(“images/1.jpg”);

背景的平鋪
什么是平鋪？平鋪就是圖片是否重復出現
不平鋪：background-repeat:no-repeat;
水平方向平鋪：background-repeat:repeat-x;
垂直方向平鋪：background-repeat:repeat-y;
完全平鋪：默認為完全平鋪

背景圖片的定位
背景圖片的定位就是可以設置顯示背景圖片的位置，通過屬性background-position來實現
background-position的取值可為英文單詞或者數值和百分值。
background-positon的英文單詞取值

top left top center top right center left center center center right bottom left bottom center bottom right

background-positon的數值取值
background-position:x y;
positon的百分值取值
background-position:x% y%;

背景圖片的大小
背景圖片的大小可以通過屬性background-size來設置

background-size的取值可為數值和百分值。 background-size的數值取值 background-size:x y; background-size的數值取值 background-size:x% y%;

背景圖片的滾動
背景圖片是否隨著內容的滾動而滾動由background-attachment設置
background-attachment:fixed; 固定，不隨內容的滾動而滾動
background-attachment:scroll; 滾動，隨內容的滾動而滾動

文字文本屬性

文字屬性

color:red; 文字顏色font-size:12px; 文字大小font-weight:“bold” 文字粗細(bold/normal)font-family:“宋體” 文字字體font-variant:small-caps小寫字母以大寫字母顯示

文本屬性

text-align:center; 文本對齊(right/left/center)line-height:10px; 行間距(可通過它實現文本的垂直居中)text-indent:20px; 首行縮進text-decoration:none;文本線(none/underline/overline/line-through)letter-spacing: 字間距

盒子模型

HTML文檔中的每個元素都被描繪成矩形盒子，這些矩形盒子通過一個模型來描述其占用空間，這個模型稱為盒子模型。

為了更好的控制頁面效果，css定義了盒子模型，一個HTML元素就是一個盒子

盒子模型組成部分：
自身內容：width、height 寬高
內邊距： padding
盒子邊框： border 邊框線
與其他盒子距離： margin外邊距
內容+內邊距+邊框+外邊距=面積

盒子定位共有四種方式：相對定位、絕對定位、固定定位、浮動。

相對定位 relative
　　元素在顯示時，相對自己本來的位置向下或者向右偏移指定數值，但元素本身并不脫離文檔流，也就說后面的元素還認為此元素在原來的位置，所以會排列在此元素原本位置的后面（但會造成覆蓋）

絕對定位absolute
　　以最近的已經定位的祖先元素為基準進行偏移（如果沒有這樣的祖先元素則以瀏覽器窗口為基準），元素本身脫離文檔流，也就說后面元素認為此元素不存在，所以會占據此元素原來的位置（但會造成覆蓋，脫離文檔流后就不具有塊級元素獨占一行的性質了）

固定定位fixed
　　和絕對定位類似也會脫離文檔流，但總是以瀏覽器窗口為基準，而且位置不會隨著滾動條移動

盒子浮動float
　　如果一個盒子向左浮動(float: left;)：這個元素會成為行內元素；它后面的塊級元素會失去一半的獨占一行的特性，即左邊緊靠在浮動元素后面，右邊延伸到行尾。向右浮動和向左浮動效果類似，可以使用clear: both;清除浮動效果對后面盒子的影響

實用的css代碼片段

頁面優化方法

減少請求數
圖片合并
CSS文件合并
減少內聯樣式
避免在 CSS中使用 import
減少文件大小
選擇適合的圖片格式
圖片壓縮
CSS 值縮寫（Shorthand Property)
文件壓縮
頁面性能
調整文件加載順序
減少標簽數量
調整選擇器長度
盡量使用CSS 制作顯示表現
增強代碼可讀性與可維護性
規范化
語義化
模塊化

總結

以上是生活随笔為你收集整理的Web前端之HTML+CSS的知识总结的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： 5G高校教学实验室/实训室建设
下一篇： html设置字体为5号,以下HTML代码