HTML+CSS的学习
1. HTML是網頁內容的載體。內容就是網頁制作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。
2. CSS樣式是表現。就像網頁的外衣。比如，標題字體、顏色變化，或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現。
3. JavaScript是用來實現網頁上的特效效果。如：鼠標滑過彈出下拉菜單。或鼠標滑過表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換。可以這么理解，有動畫的，有交互的一般都是用JavaScript來實現的。
????????????????????Html和CSS的關系????????????????????????Hello?World!上述代碼中設置字體大小，和顏色以及文字位置就是CSS的體現
下面解釋更多標簽的含義
????????????????????這是主題????????????????勇氣????????三年級時，我還是一個膽小如鼠的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。????????到了三年級下學期時，我們班上了一節公開課，老師提出了一個很簡單的問題，班里很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環顧了四周，就我沒有舉手。下面是效果圖
稱為根標簽，所有的網頁標簽都在中
標簽用于定義文檔的頭部，它是所有頭部元素的容器。頭部元素有
、<div cdata_tag="script" cdata_data="%E3%80%81%E3%80%81%E7%AD%89%E6%A0%87%E7%AD%BE"><div cdata_tag="style" cdata_data="%E3%80%81%E3%80%81%E7%AD%89%E6%A0%87%E7%AD%BE"><link/>、<meta/>等標簽</div></div>和標簽之間的內容是網頁的主要內容
就是標題標簽，
是段落標簽，就是放置圖片
注釋的方法是：
有了段落又有了標題，如果想在一段話中強調某幾個文字，可以用XXX或者XXX標簽
XXX可以改變文本樣式，如顏色
回車換行
?代表一個空格，注意不能漏分號
分隔線
加入大量代碼
在網頁制作過程中，可以把一些獨立的邏輯部分劃分出來，放在一個
標簽中，這個
標簽的作用就相當于一個容器，可以用id屬性來為
提供唯一的名稱，如：
? ?
熱門課程排行榜
? ?
? ? ? ?
前端開發面試心法
? ? ?
零基礎學習html
? ? ? ?
javascript全攻略
? ?
? ?
web前端開發導學課程
? ?
? ? ? ?
網頁專業名詞大掃盲
? ? ? ?
網站職位定位指南
? ? ? ?
為您解密Yahoo網站制作流程
? ?
創建表格的四個元素：table、tbody、tr、th、td.
加上上面的代碼就可以添加黑色邊框
使用可實現超鏈接：鏈接顯示的文本
與用戶交互：
????????用戶名:????????????????密碼:加入文本框：
? ?個人簡介：
? ?在這里輸入內容...
? ?
? ?
?
單選框/復選框：
radio/checkbox? ?性別:
? ?男
? ?
? ?女
? ?
下拉列表框：（在里加上就是多選）
? ?愛好:
? ?
? ? ?看書
? ? ?旅游
? ? ?運動
? ? ?購物
? ?
重置：
從上面的代碼中，我們看到了很多label標簽
label標簽不會向用戶呈現任何特殊效果，它的作用是為鼠標用戶改進了可用性。如果你在 label 標簽內點擊文本，就會觸發此控件。就是說，當用戶單擊選中該label標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上（就自動選中和該label標簽相關連的表單控件上）
CSS全稱為“層疊樣式表 (Cascading Style Sheets)”，它主要是用于定義HTML內容在瀏覽器內的顯示樣式，如文字大小、顏色、字體加粗等
如：
span{
? ?color:blue;
}
? ?
慕課網，超酷的互聯網、IT技術免費學習平臺，創新的網絡一站式學習、實踐體驗；服務及時貼心，內容專業、有趣易學。專注服務互聯網工程師快速成為技術高手！
CSS中，注釋用/* ?.... ?*/
CSS樣式代碼插入的形式來看基本分為以下3種：內聯式、嵌入式和外部式三種。
內聯式：
這里文字是紅色。嵌入式：
外部式：?
優先級：內聯式>嵌入式>外部式
ID選擇器只能在文檔中使用一次。與類選擇器不同，在一個HTML文檔中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次
可以使用類選擇器詞列表方法為一個元素同時設置多個樣式
正確代碼：
.stress{color:red; } .bigsize{font-size:25px; }到了三年級下學期時，我們班上了一節公開課...錯誤代碼：
#stressid{color:red; } #bigsizeid{font-size:25px; }到了三年級下學期時，我們班上了一節公開課...偽類選擇符：它允許給html不存在的標簽設置樣式，比如說我們給html中一個標簽元素的鼠標滑過的狀態來設置字體顏色：
a:hover{color:red;}CSS的某些樣式是具有繼承性的 p{color:red;}三年級時，我還是一個膽小如鼠的小女孩。可見右側結果窗口中p中的文本與span中的文本都設置為了紅色。但注意有一些css樣式是不具有繼承性的。如border:1px solid red;
p{border:1px?solid?red;}三年級時，我還是一個膽小如鼠的小女孩。在上面例子中它代碼的作用只是給p標簽設置了邊框為1像素、紅色、實心邊框線，而對于子元素span是沒用起到作用的。
有些特殊情況需要為某些樣式設置具有最高權限，這時可以使用!important來解決
可以使用css樣式為網頁中的文字設置字體、字號、顏色等樣式屬性。下面我們來看一個例子，下面代碼實現：為網頁中的文字設置字體為宋體。
將字體設置為斜體：
p?a{font-style:italic;}設置下劃線：
p?a{text-decoration:underline;}設置刪除線：
?.oldPrice{text-decoration:line-through;}段落前面空兩個空格：
p{text-indent:2em;}行間距（行高）：
p{line-height:2em;}文字間隔：h1{letter-spacing:20px;}
英文字間隔：h1{word-spacing:20px;}
設置居中、居左、居右：
div{text-align:center;}、div{text-align:left;}、div{text-align:right;}
在CSS中，html中的標簽元素大體被分為三種不同的類型：塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。
常用的塊狀元素有：
、
、
...
、
、
、
、、
常用的內聯元素有：
、、
、、、、、、、、
常用的內聯塊狀元素有：
、
在html中
、
、
、、、
就是塊級元素。設置display:block就是將元素顯示為塊級元素。如下代碼是將內聯元素a轉換為塊狀元素，從而使a元素具有塊狀元素特點：
塊級元素特點：
每個塊級元素都從新的一行開始，并且其后的元素也另起一行。
元素的高度、寬度、行高以及頂點和底邊距都可設置。
元素寬度在不設置的情況下，是它本身父容器的100%，除非設定一個寬度。
將塊狀元素div轉換為內聯元素，從而使div元素具有內聯元素特點：div{display:inline;}
內聯元素特點：
和其他元素都在一行上；
元素的高度，寬度以及頂部和底部邊距不可設置；
元素的寬度就是它包含的文字或圖片的寬度，不可改變。
內聯塊狀元素（inline-block）就是同是具備內聯元素、塊狀元素的特點 ，代碼：display:inline-block
盒子模型的邊框就是圍繞著內容及不敗的線，這條線你可以設置它的粗細、樣式和顏色（邊框三個屬性）。
如：div{border:2px solid red;}
上面是border代碼的縮寫形式，可以分開寫：
div{border-width:2px;
border-style:solid;
border-color:red;
}
border-style（邊框樣式）常見樣式有：dashed（虛線）、dotted（電線）、solid（實線）
border-color（邊框顏色）中的顏色可設置為十六進制顏色，如：border-color：#888（井號不能漏）
元素內容與邊框之間是可以設置距離的，稱之為“填充”。填充也可分為上、右、下、左(順時針)。如下代碼：
div{padding:20px 10px 15px 30px;}
順序一定不要搞混。可以分開寫上面代碼：
div{
? ?padding-top:20px;
? ?padding-right:10px;
? ?padding-bottom:15px;
? ?padding-left:30px;
}
如果上、右、下、左的填充都為10px;可以這么寫
div{padding:10px;}
如果上下填充一樣為10px，左右一樣為20px，可以這么寫：
div{padding:10px 20px;}
元素與其它元素之間的距離可以使用邊界（margin）來設置。邊界也是可分為上、右、下、左。如下代碼：
div{margin:20px 10px 15px 30px;}
也可以分開寫：
div{
? ?margin-top:20px;
? ?margin-right:10px;
? ?margin-bottom:15px;
? ?margin-left:30px;
}
如果上右下左的邊界都為10px;可以這么寫：
div{ margin:10px;}
如果上下邊界一樣為10px，左右一樣為20px，可以這么寫：
div{ margin:10px 20px;}
總結一下：padding和margin的區別，padding在邊框里，margin在邊框外。
CSS包含3種基本的布局模型，用英文概括為：Flow(流動模型)、Layer(層模型)、Float(浮動模型)
層模型有三種形式：
1、絕對定位(position: absolute)
2、相對定位(position: relative)
3、固定定位(position: fixed)
fixed：表示固定定位，與absolute定位類型類似，但它的相對移動的坐標是視圖（屏幕內的網頁窗口）本身。由于視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變瀏覽器窗口的顯示大小，因此固定定位的元素會始終位于瀏覽器窗口內視圖的某個位置，不會受文檔流動影響，這與background-p_w_upload:fixed屬×××相同。以下代碼可以實現相對于瀏覽器視圖向右移動100px，向下移動50px。并且拖動滾動條時位置固定不變。
#div1{
? ? width:200px;
? ? height:200px;
? ? border:2px red solid;
? ? position:fixed;
? ? left:100px;
? ? top:50px;
}
轉載于:https://blog.51cto.com/11838641/1894596
總結
以上是生活随笔為你收集整理的HTML+CSS的学习的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java Streams，第 4 部分:
- 下一篇： 处理浏览器兼容你最喜欢用哪种方式