Html與CSS快速入門01-基礎概念

DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> WEB前端代碼 >> Html與CSS快速入門01-基礎概念

Html與CSS快速入門01-基礎概念

編輯：WEB前端代碼

Web前端技術一直是自己的薄弱環節，經常為了調節一個簡單的樣式花費大量的時間。最近趁著在做前端部分的開發，果斷把這部分知識成體系的惡補一下。內容相對都比較簡單，很類似工具手冊的學習，但目標是熟練掌握。

Html(Hypertext Markup Language超文本標記語言):1990由Tim Berners-Lee爵士設計，成為了Internet上標准的文本傳輸形式，可以這麼說，對於在互聯網行業工作的我們來說，這就是我們飯碗的基礎啊，嘿嘿。

基本文檔格式，請見如下示例：

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>cheer up, xionger</title>
 </head>
 <body>
 <p>first course</p>
 <br/>
 <h1>hello</h1>
 <hr/>
 <h1>world</h1>
 </body>
 </html>

View Code

常見HTML標簽

標簽元素 诠釋 <html>..</html> 封閉整個HTML文檔 <head>..</head> 封閉HTML文檔的頭部，在<html>標簽內使用 <title>..</title> 指定文檔的頁面標題，在<html>標簽內使用 <body>..</body> 封閉HTML文檔的主體，在<html>標簽內使用 <p>..</p> 段落，在段落之間跳過一行 <br/>和<hr/> 換行符和水平標號 <h1>..</h1><h2>..</h2> 1,2級標題 <header>..</header> 頁面或區域的頂部 <footer>..</footer> 頁面或區域的腳注 <nav>..</nav> 頁面或者整個站點的導航鏈接 <section>..</section> 內容的主題組 <article>..</article> 一段獨立的內容，比如新聞故事 <aside>..</aside> 與包含它內容相關的輔助內容

Tip：驗證Web內容，http://validator.w3.org/

平時，有空可以通過View Source來查看常見網站的源代碼，看看有什麼值得借鑒的地方。

CSS（Cascading Style Sheet）：層疊樣式表是一種定義樣式構造的語言，比如字體、顏色和定位，它描述了如何在Web頁面上格式化和現實信息。其包含的樣式規則是一種格式化指令，可以應用於Web頁面的元素，比如文本段落或鏈接。

基本的外部樣式表，一個簡單的示例如下所示：

 first02.css
 body{
 font-size: 10pt;
 font-family: Verdana, Geneva, Arial, Helvetica,sans-serif;
 color:black;
 line-height: 14pt;
 padding-left: 5pt;
 padding-right: 5pt;
 padding-top: 5pt;
 }
  
 h1{
 font:14pt Verdana, Geneva, Arial, Helvetica,sans-serif;
 font-weight: bold;
 line-height: 20pt;
 }
 
 p.subheader{
 font-weight: bold;
 color: #593d87;
 }
 
 img{
 padding:3pt;
 float:right;
 }
 
 a{
 text-decoration:none;
 }
 
 a:link, a:visited{
 color:#8094d6;
 }
 
 a:hover,a:active{
 color: #FF9933;
 }
 
 footer{
 font-size: 9pt;
 font-style: italic;
 line-height: 12pt;
 text-align: center;
 padding-top: 30pt;
 }
 
 first01.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>About Xionger</title>
 <link rel="stylesheet" type="text/css" href="first02.css">
 </head>
 <body>
 <section>
 <header>
 <h1>About Xionger</h1>
 </header>
 <p>
 <img src="python.jpg" alt="Xionger logo" /> 伐木工光頭強在森林中伐木賺錢。為了保衛叢林，熊兄弟一起反抗，無數次打敗了光頭強。上演了搞笑的叢林保衛戰。 後來光頭強變成獵人，由於對外面世界的好奇，熊大和熊二翻山越嶺，走出叢林，來到城鎮動物馬戲團，光頭強仍不屈不撓地與他們作對。後來又因臭豆腐陰差陽錯返回叢林。由於憐憫光頭強，經歷一次次困難後，送光頭強回家過年。 熊二[1] 是比較懶惰，貪吃的狗熊，但不失可愛。他很懶，比較笨，一般是熊大想出來的決策，雖然他的體型很胖勝於熊大，但力氣超大，熊大無法抵擋。他還非常善良，心很軟，也會為光頭強感到可憐（在熊出沒之過年中，正是他帶頭幫助了光頭強，如果不是他，那等到猴年馬月光頭強都回不了家了）。
 </p>
 <p class="subheader">Xionger History</p>
 <p>熊二一般情況下呆呆傻傻，憨態可掬，但是非常善良，特別是那婉轉的腔調。他非常可愛，力大無窮，但是太過肥胖，每當去光頭強家被光頭強發現後，熊大和蹦蹦都會很輕松地從窗戶逃出，而熊二的屁股肯定都會卡在那裡。 熊二是一頭憨厚可愛、力大無窮、有勇無謀的雄性狗熊，但又十分魯莽，有時熊大不在，小動物們落難，熊二都會挺身而出，運用力量打敗光頭強。熊二喜歡母熊翠花，常常為了討好翠花與熊大大打出手；在討好翠花這一方面，熊二略遜於熊大。熊二老實又聽話，但是笨笨的，也非常可愛，貪吃。可是由於熊二有時太過魯莽，或者熊二做出些蠢事，總被他那聰明的老哥熊大責備甚至教訓，熊二對此也只能老實地聽著挨著。動物們幾乎都是依靠熊大的計謀、熊二的力量才打敗光頭強的。而且在光頭強家中搞惡作劇，偷吃光頭強的水果，搗毀光頭強的家。防止光頭強砍樹，捍衛了東北叢林。
 </p>
 <p><a href="http://www.baidu.com" />[continue reading]</p>
 </section>
 <footer>
 Copyright &copy;2016-2016(www.xionger.com). All rights reserved.Use with permission.
 </footer>
 </body>
 </html>

View Code

基本布局屬性(display屬性)

標簽元素 诠釋 block 在新行上顯示元素，比如在一個新段落中 List-item 在新行上顯示元素，並在其旁邊帶有一個列表項標記 inline 利用當前段落內聯顯示元素 none 不顯示元素，它是隱藏的

Diplay屬性依賴於相對定位(relative positioning)的概念，它以為著元素將相對於頁面上的其他元素進行定位，之後還會介紹絕對定位(absolute positioning)的概念。

Tip:常見的表示長度和寬度的單位有：in，英寸；cm厘米，mm毫米，%百分比，px像素，pt磅。

基本格式化屬性

屬性诠釋 Border 邊框的各邊 Border-Width 邊框邊緣的寬度 Border-color 邊框邊緣顏色 Border-style 邊框邊緣樣式：solid單線邊框，double雙線邊框，dashed短劃虛線邊框，dotted點線邊框，groove具有溝槽外觀的邊框，none無邊框，hidden等價無邊框 Border-left/right/top/bottom 邊框左、右、上、下 Background-color 元素的內部區域顏色 Text-align 內容對齊方式，包括左邊、右邊、中間，justify兩端對齊 Text-indent 內容縮進方式 Font-family 字體系列，按順序選擇 Font-size/weight 字體大小和粗細(normal,lighter,bold,bolder) Font-style 字體的樣式,normal,italic Line-height 行距，用於設置每個文本行的高度 Padding 給元素左邊、右邊、上邊、下邊添加填充

使用樣式類和ID

使用樣式類
p.subheader{
font-weight: bold;
color: #593d87;
}
使用樣式ID
p#title{
font:24pt Verdana,Geneva, Arial
}
引用樣式
<link rel="stylesheet" type="text/css" href="first03.css">

Tip:驗證樣式表，http://jigsaw.w3.org/css-validator/

經典的html5頁面結構如下圖所示

參考資料：

梅洛尼. HTML與CSS入門經典(第9版) [M]. 北京:人民郵電出版社, 2014.

WEB前端代碼

HTML轉義字符: 經常忘記這些轉義字符，可能是因為不屑吧！但用到時又經常失了魂一樣的在Google Baidu上搜半天
在ie6中實現fixed效果: 廢話不多說，先看一下下面這段代碼：<!DOCTYPE html><html>
css實現固定高度及未知高度文字垂直居中的完美解決方案: 在工作當中我們經常碰到類似於固定高度文字垂直居中及未知高度垂直居中問題，或者圖片垂直居中問題，而我

前端技巧關於網頁技巧 WEB前端代碼網頁特效代碼

小編推薦

table表格css樣式 css的px和em單位 uc前端筆試題目 SVG實現描邊動畫 bootstrap modal 模態框例子左右固定，中間自適應布局，中間欄優先加載 CSS :first-line 偽元素漂亮的搜索框HTML+CSS代碼前端復制功能的若干 -- document.execCommand() 關於html空格-有趣的試驗

DIV CSS 佈局教程網

相關文章