Web前端入門學習（1）——走進前端世界

最後更新：2016-10-20 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：前端開發 web基礎入門

前端基礎知識

前端開發語言：
HTML（Hypertext Markup Language）：超文字標記語言 (HTML)；
CSS（Cascading Style Sheets）：層疊樣式表；
JS（JavaScript）：指令碼語言。
樣式表:
行間樣式表、內部樣式表、外部樣式表。
樣式
樣式格式：屬性名稱：屬性值；

常見樣式：
border：1px solid red
border-width：1px
border-style：solid
border-color：red

常見顏色模式：
關鍵字：red yellow blue white...
rgb:(123,12,44)
十六進位：#3f3f3f
盒子邊框
border-top：1px solid red
border-right：1px solid red
border-bottom：1px solid red
border-left：1px solid red
背景
background-color
background-image
background-repeat:(no-repeat repeat-x repeat-y repeat inherit)
background-position(top right bottom left 30px 20px 50% 30% inherit)
background-attachment:(srcoll fixed inherit)
background複合：blue url(./a.img) no-repeat 20px 30px fixed;
文字設定
font-weight:(normal bold bolder lighter 100~900(normal:400,blod:700) inherit)
font-style:(normal italic oblique inherit)
font-size:字型大小
line-height:行高
font-family:元素字型
font複合：font-style font-weight font-size/line-hight font-family
文本設定
color
text-align
text-indent
text-decoration
letter-spacing
word-spacing
white-space:(normal pre nowrap pre-wrap pre-line inherit)
超連結
a:link 未訪問過的連結；
a:visited 已訪問過的連結；
a:hover 滑鼠放在連結上時；
a:active 連結被點擊的那一刻；
規則：a:hover必須放在a:link和a:visited後面，a:active 必須放在a:hover後面。
download下載：點擊下載href指定的地址內容。
target：_blank _self _parent _top filename
base標籤：在<head>頭部為頁面上所有連結規定預設目標。
padding填充
padding-top padding-rihgt padding-bottom padding-left

padding:15px 20px 18px 25px
上填充:15px
右填充:20px
下填充:18px
左填充:25px

padding:10px 20px 15px
上填充:10px
左右填充:20px
下填充:15px

padding:20px 15px
上下填充:20px
左右填充:15px
填充（內邊距）:相當於給盒子填充了厚度，會影響盒子的大小。
margin外邊距
margin-top margin-rihgt margin-bottom margin-left

margin:15px 20px 18px 25px
上邊距:15px
右邊距:20px
下邊距:18px
左邊距:25px

padding:10px 20px 15px
上邊距:10px
左右邊距:20px
下邊距:15px

padding:20px 15px
上下邊距:20px
左右邊距:15px

padding:100px auto 0px
上邊距:100px
左右邊距:置中
下邊距:0px
盒子模型
盒子大小：邊距、邊框、填充、內容。
盒子寬度：margin-left + border-left + padding-left + width + padding-right + border-right + margin-right；
盒子高度：margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom；

本文出自 “小倩加油站” 部落格，請務必保留此出處http://cherry360.blog.51cto.com/12176744/1863428

Web前端入門學習（1）——走進前端世界

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Web前端入門學習（1）——走進前端世界

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support