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

HTML

HTML/CSS 知识点

發布時間：2023/12/2 HTML 57 豆豆

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

本文是從簡書復制的, markdown語法可能有些出入, 想看"正版"和更多內容請關注簡書: 小賢筆記

整個前端開發的工作流程

產品經理提出項目需求

UI出設計稿

前端人員負責開發靜態頁面(跟前端同步的后臺人員在準備數據)

前后臺的交互

測試

產品上線(后期項目維護)

互聯網原理

當用戶在瀏覽器輸入網址的時候，就會發送到對應的服務器，請求該網址對應的網頁信息

服務器會把該網址對應的網頁資源，都下載到你電腦的臨時文件夾

臨時文件夾中的資源，通過瀏覽器顯示出來(所以，我們第二次請求網站的時候，速度會快很多)

元素

行內元素：一行中有n多個行內元素，行內元素不能設置寬和高
塊元素：一個塊元素，獨自占一行；
行內塊元素：一行中可以有多個行內塊元素，但是可以設置寬和高

html骨架結構

!DOCTYPE..文檔聲明頭(html5,html4.01,XHTML)
在html4.01和XHTML中各有3個小規范
strict 嚴謹的
transitional 普通的
frameset 框架
html：超文本標記語言；里面用的都是"標簽對兒"
head

meta（charset:UTF-8,GB2312）
<meta name="description" content="要描述的內容"/>
<meta name="keywords" content="關鍵字，關鍵詞"/>
(以上兩個meta都是為了SEO優化)
<title>頁面的標題</title>

body

標題<h1></h1><h2></h2>
段落 p:雖然p是塊元素，但是他里面放的也是圖片，文字；
span:里面用來放文本：圖片，文字；
a鏈接<a href="要跳往的地址">
圖片<img src="相對地址/絕對地址"

css：寫在里面
- 樣式的基本語法：
  選擇器(div){
  key:value
  }
p{height:40px;line-height:40px;background-color:red; }
- 選擇器：
- 標簽選擇器：div,h,p,a,img,span
- class選擇器:.xinxi
  (千萬不要用漢字和數字開頭做為class名，一定要用英文)

html更多解讀

html只考慮標簽嵌套，跟tab和空格無關，無數個空格，也只算作一個
圖片標簽[圖片上傳失敗...(image-fd7aaf-1518537900016)]
- 相對路徑：以當前頁面為出發點查找的；(./ 或不寫,找到父級../)
- 絕對路徑：都是以http開頭的；例如：http://i1.piimg.com/567571/f3f79e8903424ea4.jpg
- 圖片標簽上有兩個常用屬性，src屬性：引入圖片地址; alt標簽：圖片無法正常加載時，用來替代的文字；(alt也可以省略)
a鏈接常用的屬性
href:'要跳往的地址',href的作用

可以填寫絕對路徑，跳到直到的網頁
可以寫#：1）不確定地址的時候 2)簡單的回到頂部效果
利用錨點進行頁面切換

title:鼠標移上時的提示
target:打開方式(默認的_self當前頁面打開; _blank新頁面打開)
這些屬性中，title和target都可以省略；
a鏈接的錨點使用
本頁面各個模塊之間的相互跳轉

列表

無序列表:無序列表中的li也是容器；

有序列表

定義列表：dl,dt,dd都是容器

表單

表單用
輸入文本框 <input type="text" placeholder="默認提示"/>
輸入密碼 <input type="password" placeholder="默認提示"/>
單選按鈕：單選按鈕組，一定要加上name，否則無法實現單選效果；

<input type="radio" name="sex"/>男 <input type="radio" name="sex"/>女

多選框
<input type="checkbox" checked/>
下拉單

name和value主要用于前端向后臺提交數據；
id：
設置樣式(不建議)
在JS階段，用來獲取元素
id配合a鏈接，進行錨點設置；
留言框：<textarea name="" value="" cols="" rows=""></textarea>

按鈕

普通按鈕 type=button
提交按鈕 type=submit
重置按鈕 type=reset

選擇器

標簽選擇器：div h1~h6 p span a img ul li ol dl dt dd input select

添加一個小icon的步驟：

到官網上去取圖片（以京東為例）：
https://www.jd.com/favicon.ico
把以上圖片另存為，存到電腦中
注意：把icon圖標放到文件夾的"根目錄"；
在html頁面中加入：<link rel="icon" href="favicon2.ico" type="image/x-icon"／>

一個完整的頁面由三部分構成：

html：超文本標記語言
- 通過語義化標簽，搭建頁面"結構"
css:層疊樣式表
- 負責頁面"樣式"，美化頁面的
js:輕量級的腳本語言；交互指的是兩個地方（行為）
- 前端自己在頁面上寫的"動效"
- 前后臺的"數據交互"
  結構，樣式，和行為三者相結合

css的引入方式

嵌入式；(內嵌式)

行內樣式

外鏈式（真正的開發，用的都是外鏈）

css的優先級

行內>內嵌>外鏈

css常見屬性和樣式

當設置錯誤的時候，在chrome的控制臺，會有黃色的嘆號，進行提示
color：顏色值；顏色有三種表示方法
快捷鍵：c tab
- 用英文：red
- rgb(255,0,0)
- #fff
font-size:字體大小
- 快捷鍵：fsz30->font-size:30px
  font:400 14px/28px "宋體";
background:添加背景
圖片默認是橫向重復和縱向重復
- 位置：
  - 橫向位置：left center right
  - 縱向位置：top center bottom
- 綜合寫法：background: url("images/bg2.png") no-repeat left center red;
  - background-image:url("圖片地址")
  - background-repeat:no-repeat; /repeat-x;/repeat-y
  - background-position:0 0
  - background-color:red
字體是否傾斜
- font-style:italic 傾斜／ normal 正常
下劃線和刪除線
- text-decoration: line-through; 刪除線
- text-decoration: none; 去除下劃線
- text-decoration: underline;添加下劃線

css中的選擇器：

1.標簽選擇器：div p ul li dt dd em i u del strong b input label from table
- 缺點：只能進行共性的操作，無法個性操作
2.class選擇器
3.id：
- .class名,同一個頁面能有無數個相同的class名
- #id名，同一個頁面只能有一個ID名；（ID名是不能重復的）
- 在真正的開發過程中，class是用來設置樣式的，id是用來獲取元素
<div class="div1 div2 div3" id="div1"></div>
4.后代選擇器：div p(把div容器下，子子孫孫的p元素都選擇上了)
5.子選擇器：div > p(選擇div容器下的兒子)；兼容IE7
6.交集選擇器: div.div1
7.并集選擇器：div,p
8.通配符*：代表所有的元素
9.序選擇器：兼容IE8
- div > p:first-child
- div > p:last-child
10.下一個兄弟選擇器 ul li li{} 兼容IE7

開發常用的瀏覽器

chrome
IE7~11
firefox

CSS的繼承性和層疊性

以font開頭的屬性都能夠繼承；line-height
color可以繼承
text開頭的也可以繼承，比如text-align

css權重

!important權重無窮大；（少用為好）
id的權重大于class的權重

css盒子模型

css盒子模型由5部分：
- 內容的寬高 padding border margin
單行文本的居中：height = line-height
多行文本的居中，padding和line-height
padding：
- padding是內邊距
- padding的顏色和內容的顏色一致；background-color填充的是border以內的顏色
- padding是復合值
  padding:30px; ->pl30; pt30;pr30;pb30
  padding:20px 30px; ->上下為20px 左右30px
  padding:10px 20px 30px; -> 上10px 左右20px 下30px
  padding:10px 20px 30px 10px; 上右下左
  如果現設置padding:30px
  再設置padding-left:10px
  請問最后的值各是多少？
  左10px; 其他都是30px
margin：外邊框
border:
- border:1px solid #000;
- border-width
- border-style：solid（實體）,dashed（虛線）,dotted（點）
- border-color

行內元素和塊級元素

p標簽雖然是文本標簽，但是它可以當容器來使用，p標簽內一定不能放div; p段落也是塊元素，他獨占一行
文本元素：p span a i em u b strong img
容器級：div li dt dd h級（不建議）
除了p，所有的文本元素，都是行內元素
所有容器級別的元素，都是塊元素
塊和行內元素的相互轉化
- display：inline; //行內
- display:inline-block;//行內塊
- display：block; //塊
關于定位：大部分情況，建議的是:父相子絕（父親：相對定位，兒子：絕對定位）
關于脫離文檔流的方法
- 浮動 float:left; float:right;
- 絕對定位 position:absolute;
- 固定定位 position:fixed;
- 重點：1）父相子絕 2）行內元素一點脫離文檔流，就可以設置寬高了；
- 注意：行內元素，一旦脫離文檔流，雖然能設置寬高，但是，如果不設置寬的話，會默認跟內容一樣寬；而塊級元素，如果不設置寬度的話，默認跟父級一樣塊，沒有父級的話，默認跟屏幕一樣寬
清除浮動
- 固定高度height:xxxpx;
  缺點：如果作為產品列表的容器展示，我們無法知道容器的具體高度
- overflow:hidden
- 溢出隱藏
- 清除浮動
  缺點：如果父容器比較小，子容器比較大；父容器如果通過overflow:hidden來清除浮動的話，子容器就看不到了
- clear:both
  缺點：可以解決浮動引起的文檔流錯亂問題，但是上面浮動元素的父容器該沒有高度還沒有高度
- 偽類清除浮動
ul::after{display: block;height:0;content: '';clear: both; }
透明度處理
- rgba() 背景透明，文字不透明；
- opacity:0 背景透明，文字也透明；
opacity:0.1;/*不兼容IE7瀏覽器*/ filter:alpha(opacity=10);

最基本的開發，首先必須創建的項目結構

images文件夾：放切好的圖片
css文件夾：放置css文件：index.css
index.html文件

關于繼承

寬度繼承：如果沒有父級，塊元素的寬度默認跟可視區一樣寬；如果有父級的情況下，默認跟父級寬度一樣寬(寬度可以繼承，但高度無法繼承;)
font可以繼承
color可以繼承：當遇到a標簽的時候， color無效；
line-height可以繼承

當文本超度固定寬度的處理方法：

單行文本出超固定寬度出現省略號的寫法：

white-space:nowrap; overflow:hidden; text-overflow:ellipsis

英文不折行的問題處理：
word-wrap:break-word;
出現滾動條的寫法
overflow-y:scroll;

區分偽類和偽元素

偽元素：用:和::都可以，現在建議用::
偽類：給當前選擇器添加動效，只能用:

總結

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

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