html：結構
css：樣式
JavaScript：行為
DOCTYPE：DOC-document文檔，TYPE-類型，作用：告訴瀏覽器以什么方式
打開文本：
html：根元素
head；頭部標簽
meta：設置標簽，charset編碼，utf-8中文編碼
title：標題標簽
body：身體標簽
單標簽：
雙標簽：開始標簽-結束標簽，html

css引入方式：
1.行內樣式：寫到標簽 style屬性引出，屬性跟到引號里面 style（直接
屬性）="： （間接屬性）；"

2.內部樣式：
head標簽里面加上style標簽
3.外部樣式：
<link rel="stylesheet" href="css文件位置"/>link rel=“slylesheet
腳本”href引入css文件夾
*結構表現行為分離
！important>行內
行內樣式>內部樣式
行內樣式>外部樣式
行內樣式>class
行內>id
class>element（元素標簽）
內部樣式外部樣式(就近原則)
id>element
id>class
！important>行內>id>class>element（就近原則）
margin：外邊距 padding：內邊距
標簽分類：
塊級元素：默認占整行，寬度可設，獨自占一行（例如
div/p/h1..h6/ol/li/dl/dt/dd/table/form/article/aside/footer/heade
r/hgroup/main/nav/section/blockauote/hr...）
行內塊元素：默認不占整行默認寬度和內容一樣，可設寬（例如
button/img/input/iframe/video/embed/canvas/audio/objiect）
行內元素：默認寬度和內容一樣，寬度不可設（例如
b/a/strong/spon/code/label）
首頁樣式：style
nav導航樣式
class命名的css加點
id命名用#引
hover（鼠標懸浮懸浮）border：（邊框）dashed（虛線）solid（實線）

box：hover
position四個方向決定位置（兩個就夠，水平和垂直選一個）
1：relative：相對定位，定位之后原始位置保留，新位置不占位，相對于
自己的定位。
2：absolute：絕對定位，不占位置，相對于最近的帶有定位屬性的父級定
位。
3：fixed：固定定位，相對于瀏覽器視窗定位。
*****************************************************************屬性：***********************************************************************
color：文字顏色
text-indent:px;
font-size：px；（字體大小），單位px默認12px
font-weight（字體厚度）：bold；（加粗）
text-align：center；（居中）
background（背景）
height（高度）
margin-top:設置元素的上外邊距
margin:0 auto;(左右居中)
display：block（轉換塊級元素）
float：left；（向左浮動）
list-style：none；（去除自動序列號）
*注意文字大小顏色居中
line-height(行高)
插入img先轉換成塊級元素
&nbsp加空格
！important；（權重優先級）
box-sizing；給box定一個標準 border-box；box邊框（鎖住盒子）
background-image：url（../）;插圖
background-size（背景大小）
background-repeat（背景覆蓋）：no-repeat（不覆蓋）
display：inline轉換成行內快元素
position:relative；相對定位absolute；絕對定位fixed；固定定位
transform：
rotate（翻轉）
translate（平移）
scale（放大縮小比例）
outline：none去輪廓
border-radius：；（弧度r半徑）
box-shadow：px px 顏色；（盒子陰影）
transition：.時間（全部完成時間）
<input type="text" />
在input標簽里添加： placeholder="請輸入用戶名"
textarea可調節的文本框
background-size有3個屬性：

auto：當使用該屬性的時候，背景圖片將保持100% 的大小顯示，不進行任
何縮放。超過div的多余部分將被隱藏。當圖片過小時，圖片會自動平鋪。
這種屬性通常用來做重復性的背景或者做半透明圖片背景。
cover：當使用該屬性時，圖片將被縮放至恰好能覆蓋div，并且圖片被隱
藏的部分最少，這種屬性在大圖背景中應用比較廣泛。這點比較難理解，
需要結合實踐理解。
contain：當使用該屬性時，圖片被縮放至最大且能被完全展示出來，但是
由于圖片的的尺寸比例與div的尺寸比例會有不同，所以當圖片不能蓋住
div時，圖片會自動平鋪。

text-decoration 有 5 個值：
none取消
underline下劃線
overline上劃線
line-through中間線
blink閃爍
text-transform 屬性處理文本的大小寫。這個屬性有 4 個值：
none
uppercase大寫
lowercase小寫
capitalize首字母大寫
white-space: normal;空白符合并
white-space 設置為 pre空白符不會被忽略
white-space: nowrap取消換行
border-collapse:collapse;合并表格邊框
transparent：透明；
parallelogram：平行四邊形
rectangle：長方形
square：正方形
triangle：三角形
nth-child（）第幾個
public公共的
main主要的
cursor：pointer；鼠標型狀
item：小元素
a:link，定義正常鏈接的樣式；
a:visited，定義已訪問過鏈接的樣式；
a:hover，定義鼠標懸浮在鏈接上時的樣式；
a:active，定義鼠標點擊鏈接時的樣式。
font-weight:normal取消加粗
z-index層級
普通流層級小于定位后的層級
opacity透明度
font-style:italic;字體樣式斜體
id只能在同一個項目出現一次（身份證）
letter-spacing字母間距
word-spacing單詞間距
background-position:pxpx;,% %;center left right bottom top;
background-attachment:fixed;固定背景圖像
overflow：這個屬性定義溢出元素內容區的內容會如何處理。
visible 默認值。內容不會被修剪，會呈現在元素框之外。
hidden 內容會被修剪，并且其余內容是不可見的。
scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
inherit 規定應該從父元素繼承 overflow 屬性的值。

其他*******************
px的特性是屬于絕對數值，他不受外圍的單位影響，只要固定是12px，就
會以12像素呈現。以下方的范例來說，他并不會受到外圍文字大小所影響
，內部的文字大小還是依據CSS設定所呈現。
em
另一個常見的文字單位是em， em是相對的的數值單位，它會受到外圍的文
字大小所影響，而1em即是1的文字大小，1.5em也就是1.5倍的文字大小。
跟隨所在容器文字大小改變
代碼都屬于關鍵字
保留字是關鍵字的拓展

轉載于:https://www.cnblogs.com/sw-3/p/9442826.html

總結

以上是生活随笔為你收集整理的web前段入门笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

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