html css基礎教程歸納如下:
第1、Html介紹
本章節主要講解html和css樣式的關(guān)系,以及html標簽、html文件結構、head標簽,最后講解了在html中的注釋代碼的作用。
第2、認識標簽(第一部分)
學(xué)完這一章節將對標簽的使用有了一些初步的認識,可以使用標簽制作出一篇簡(jiǎn)單的文章網(wǎng)頁(yè)。下一章節將進(jìn)一步學(xué)習另外一部分html標簽。
第3、認識標簽(第二部分)
本章節主要講解列表、div及table標簽使用,學(xué)完本章,可以在網(wǎng)頁(yè)上展示一些信息列表及表格數據,使網(wǎng)頁(yè)上的信息更加豐富
第4、認識標簽(第三部分)
本章節主要講解超鏈接標簽、鏈接地址及圖片標簽,學(xué)習完這一章節可以把分散的單獨的網(wǎng)頁(yè)用鏈接標簽有效的組織起來(lái),達到網(wǎng)頁(yè)之間可以相互跳轉的作用。
第5、與瀏覽者交互,表單標簽
每天都在網(wǎng)上沖浪,如果沒(méi)有表單,人們就無(wú)法輸入自己的個(gè)人信息來(lái)買(mǎi)東西,本章節主要從表單的作用、表單元素講起,學(xué)習完本章,可以制出簡(jiǎn)單的用戶(hù)登陸、注冊頁(yè)面。
第6、開(kāi)始學(xué)習CSS,為網(wǎng)頁(yè)添加樣式
CSS是一個(gè)很神奇的東西,設計者可以通過(guò)修改樣式表的定義而使網(wǎng)頁(yè)呈現出完全不同的外觀(guān)。本章就開(kāi)始帶領(lǐng)大家來(lái)學(xué)習CSS樣式:先來(lái)認識CSS樣式、了解CSS樣式的優(yōu)勢、最后講解CSS代碼語(yǔ)法和CSS注釋代碼。
第7、CSS樣式基本知識
這一章節主要講解與CSS樣式相關(guān)的基礎知識:CSS樣式的位置及相關(guān)的優(yōu)先級,為后面的CSS樣式具體學(xué)習打下基礎。
第8、CSS選擇器
本章主要介紹CSS的選擇器,通過(guò)學(xué)習本章,能對元素進(jìn)行樣式的設置
第9、CSS的繼承、層疊和特殊性
CSS中有一些概念是需要深刻理解的,此節開(kāi)始將介紹CSS中的一些非常重要的概念包括CSS的繼承、層疊和特殊性。
第10、CSS格式化排版
本章將詳細介紹網(wǎng)頁(yè)排版中主要格式化要素,幫助讀者把CSS技術(shù)與網(wǎng)頁(yè)編排緊密結合在一起,實(shí)現網(wǎng)頁(yè)實(shí)用性與欣賞性相結合,實(shí)現出設計效果。
第11、CSS盒模型
盒模型是CSS布局的基石,它規定了網(wǎng)頁(yè)元素如何顯示以及元素間相互關(guān)系。本章將圍繞盒模型的概念、結構、尺寸等基礎知識展開(kāi)研究,以便為后面的學(xué)習和日后網(wǎng)頁(yè)設計奠定扎實(shí)的基礎。
第12、CSS布局模型
現在可以用所需的知識進(jìn)行真正設計了,學(xué)習完本章節可以運用所學(xué)習的知識實(shí)現網(wǎng)頁(yè)的多列布局,本章將圍繞流動(dòng)模型、浮動(dòng)模型、層布局模型等布局技術(shù)展開(kāi)研究,以便為后面制作復雜的網(wǎng)頁(yè)打下基礎。
第13、CSS代碼縮寫(xiě),占用更少的帶寬
雖然CSS文件或者嵌入的CSS都純文本文件,為了減少css樣式代碼的編寫(xiě)量,代碼縮寫(xiě)是很有必要的。這樣可以使用戶(hù)訪(fǎng)問(wèn)網(wǎng)頁(yè)的時(shí)候占用更少的帶寬。
第14、單位和值
本章節對單位如顏色的單位和值等時(shí)行詳細講解。
第15、css樣式設置小技巧
本章節對在日常前端開(kāi)發(fā)中常用到css樣式設置小技巧進(jìn)行了講解。
根據選擇器設置元素的css 樣式
"." class選擇器
如:
-----------------------------------------------------------
css代碼:
.op{
width:150px
}
html代碼:
<div class='op'></div>
-------------------------------------------------------
"#" id選擇器
#op{
width:150px
}
html代碼:
<div id='op'></div>
-----------------------------------------------------
標簽選擇器
a{
width:150px
}
html代碼:
<a id='op'></a>
全書(shū)分6個(gè)部分,包括24章和4個(gè)附錄。第一部分簡(jiǎn)要地介紹了HTML和XHTML,闡述了網(wǎng)頁(yè)的創(chuàng )建過(guò)程和發(fā)布步驟,討論了如何連接到其他網(wǎng)頁(yè);第二部分介紹了文本的對齊和格式化,討論了文本鏈接、圖像鏈接和圖像映射,闡述了如何處理用于網(wǎng)頁(yè)中的圖像,還介紹了如何設置網(wǎng)頁(yè)的背景和顏色;第三部分討論了如何使用表格、CSS和框架設計網(wǎng)頁(yè)布局;第四部分探討了如何使用腳本、表單和多媒體設計動(dòng)態(tài)網(wǎng)頁(yè),還介紹了HTML和CSS技術(shù)的兩種實(shí)際應用——創(chuàng )建令人印象深刻的eBay拍賣(mài)網(wǎng)頁(yè)和引人入勝的博客;第五部分闡述如何創(chuàng )建網(wǎng)站,包括網(wǎng)站的組織和管理以及如何讓網(wǎng)站在搜索結果中靠前;第六部分為附錄,列出了重要的HTML和CSS資源網(wǎng)站,提供了完整的XHTML1.1和CSS2快速參考,討論了如何將HTML文檔轉換為XHTML。
在建立樣式表之前,我們必須要具體一些 HTML 的基礎知識。我們知道, HTML 語(yǔ)言由標志和屬性構成, CSS 也是如此。
樣式表基本語(yǔ)法:
HTML 標志 { 標志屬性:屬性值;標志屬性:屬性值;標志屬性:屬性值;…… }
放置樣式表有內聯(lián)和外聯(lián)等三種不同的方法。現在首先討論在 HTML 頁(yè)面內直接引用樣式表的方法。
這個(gè)方法必須把樣式表信息包括在 < style>; 和 < /style>; 標記中,為了使樣式表在整個(gè)頁(yè)面中產(chǎn)生作用,應把該組標記及其內容放到 < HEAD>; 和 < /HEAD>; 中去。
例如我們要設置一 HTML 頁(yè)面中所有 H1 標題字顯示為藍色,其代碼如下:
< HTML>
< HEAD>
< TITLE>This is a CSS samples< /TITLE>
< STYLE TYPE="text/css">
< !--
H1 { color: blue }
-->
< /STYLE>
< /HEAD>
< BODY>
頁(yè)面內容…
< /BODY>
< /HTML>
注意, < STYLE>; 標記中包括了 TYPE = "text/css" ,這是讓瀏覽器知道你是使用 CSS1 樣式規則。加入 <; !-- 和 -->; 這一對注釋標記是防止有些老式的瀏覽器不認識樣式表規則,可以把該段代碼忽略不計。
在使用樣式表過(guò)程中,經(jīng)常會(huì )有幾個(gè)標志用到同一個(gè)屬性,比如我們規定 HTML 頁(yè)面中凡是粗體字、斜體字、1 號標題字顯示為紅色,按照上面介紹的方法應書(shū)寫(xiě)為:
B { color: red}
I { color: red}
H1 { color: red}
顯然這樣書(shū)寫(xiě)十分麻煩,引進(jìn)分組的概念會(huì )使其變得簡(jiǎn)潔明了,我們可以寫(xiě)成:
B,I,H1 {color: red}
用逗號分隔各個(gè) HTML 標志,把三行代碼合并成一行。
此外,同一個(gè) HTML 標志,可能定義到多種屬性,例如,我們規定把從 H1 到 H6 各級標題定義為紅色黑體字,帶下劃線(xiàn),則應寫(xiě)為:
H1,H2,H3,H4,H5,H6 {
color: red;
text-decoration: underline;
font-family: " 黑體 "
}
注意各個(gè)標志屬性之間用分號隔開(kāi)。
文章來(lái)自: 新元網(wǎng)(CNITB.COM) 詳文參考:
1、css 和 js 都是在有html基礎才去學(xué)的東西
2、看你學(xué)習這些的目的是什么,這三個(gè)東西都是入門(mén)容易的,但是js想精通不容易
3、HTML5 (比HTML4多一些標記,多一些規范,取消一些冗余屬性和標記)標記語(yǔ)言,就是些標簽,我想很好上手,CSS現在都是學(xué)3.0,也就是比之前的CSS2.0多很多特性,包括動(dòng)畫(huà)效果(css2.0時(shí)候動(dòng)畫(huà)只能依靠js的)
4、js(JavaScript),怎么說(shuō)呢,我也沒(méi)有深入學(xué)習,也就是說(shuō),實(shí)際工作中直接寫(xiě)JavaScript很浪費時(shí)間,大多都使用Jquery,Jquery是在JavaScript基礎上開(kāi)發(fā)的庫,就一個(gè)文件而已,庫的概念怎么理解,就是別人說(shuō)的造輪子的概念,汽車(chē)是個(gè)產(chǎn)品,輪子就好比庫,汽車(chē)公司并不是從煉制金屬和橡膠開(kāi)始造汽車(chē),而是直接用已有的輪子面板玻璃等去制造汽車(chē),JavaScript的學(xué)習思路是,簡(jiǎn)單了解JavaScript的基礎方法,比如操作dom的方法之類(lèi),然后考慮上手第三方庫,Jquery是個(gè)好選擇,但是如果要想深入理解JS或者JQ(Jquery),那就只能仔細研究js了
5、沒(méi)有什么好的書(shū)籍推薦,因為入門(mén)不靠書(shū)籍,靠自己動(dòng)手打代碼。
不懂的問(wèn)題多問(wèn)問(wèn)百度,谷歌(有條件的話(huà)),推薦你一個(gè)好的網(wǎng)站 w3school
地址:.cn/ 當年我就是從這開(kāi)始的
聲明:本網(wǎng)站尊重并保護知識產(chǎn)權,根據《信息網(wǎng)絡(luò )傳播權保護條例》,如果我們轉載的作品侵犯了您的權利,請在一個(gè)月內通知我們,我們會(huì )及時(shí)刪除。
蜀ICP備2020033479號-4 Copyright ? 2016 學(xué)習?shū)B(niǎo). 頁(yè)面生成時(shí)間:3.429秒