HTML(超文字標記語言)+CSS(層疊樣式表)
阿新 • • 發佈：2018-12-12
一、HTML
HTML: 超文字標記語言.
- “超文字” : 頁面中包含圖片、連結等非文字內容.
- “標記” : 使用標籤將需要的內容包括起來。
html模板:
<html> // 根標籤
<head> // 頭標籤
<title>這是標題</title>
</head>
<body> // 體標籤
這裡是正文
</body>
</html>
常用標籤:
1.標題標籤: <h1> ~ <h6> 自動加粗 , 單獨佔用一行. 2.水平線標籤: <hr /> (自閉和標籤-沒有標籤體和結束標籤) 3.字型標籤: <font size="字型大小(預設是3)" color="字型顏色(#FF0000)" 4.格式化標籤: <b> 粗體 <i> 斜體 5.段落標籤: <p> 前後都有一段空白. <br />:換行 空格. 6.圖片標籤: <img src="圖片路徑" alt="圖片不能顯示替代的文字." title="圖片標題" /> 7.列表標籤: <ol type="列表型別(A,a,1)" >:有序列表 <ul type="符號的型別">:無序列表 <li> 子標籤. 8.超連結標籤:<a href="要跳轉的路徑" target="視窗開啟位置"> _self:本視窗開啟.(預設) _blank: 新視窗開啟.
表格標籤:
<table> :父標籤.
border:表格邊框寬度.
cellpadding:文字與邊框的距離。
cellspacing: 單元格之間的距離.
bgcolor: 表格的背景顏色.
<th> 定義表頭,預設居中,加粗.
<tr> 定義行
<td> 定義列 colspan="2":跨2列 rowspan="2" 跨2行 align="水平對齊方式"
框架標籤:
注意: <frameset>和<body>兩個不能共存. <frameset>: 多個視窗頁面整合在一起的一個框架集. rows(行): 分為上下兩部分, 行的數量 , * (其餘部分) cols(列): 分為左右兩部分, 列的數量 , * (其餘部分) <frame>: 單獨的一個頁面(框架) src:頁面的路徑. name: 頁面的名稱,用於超連結跳轉使用. 例:<frameset rows="80,*"> // 分為上下. <frame name="top" src="a.html"> //上 <frameset cols="150,*"> //將下分為左右兩部分. <frame name="lower_left" src="b.html"> <frame name="lower_right" src="c.html"> </frameset> </frameset>
表單標籤:
獲取使用者輸入的資料 --> java伺服器 --> 儲存到資料庫.
<form>表單標籤. action屬性: 請求路徑,表單提交到伺服器的路徑. method屬性: 請求方式. get: 預設值 , 資料會追加在請求路徑上,提交的資料有限. post:不會追加在請求路徑上,提交的資料大小不限制. <input>:輸入域標籤,獲取使用者輸入的資訊. type屬性: text:文字框. password:密碼框,以●顯示. radio:單選框 , name:設定標籤名稱,同名稱的radio標籤互斥. submit: 提交按鈕. checkbox: 複選框. image:按鈕上的圖片 , 相當於提交. file: 檔案上傳. hidden:隱藏按鈕,瀏覽器不顯示. button:普通按鈕,配合js使用. name屬性: 元素名,伺服器通過屬性獲取提交的資料. value屬性: 設定input標籤的預設值,submit和reset為按鈕顯示資料. checked屬性: 預設被選中. placeholder:給文字輸入框設定預設值,輸入資料之後就消失了. <select>: 下拉列表框. <option>: 子標籤. selected:選中當前列表項, 選中 --> true. value ：傳送給伺服器的選項值。
二、CSS
CSS:層疊樣式表 , css+div佈局(靈活)
樣式: 給HTML新增需要顯示的效果.
層疊: 將所有的樣式疊加到一起,共同作用於該標籤.
css格式:
選擇器{
屬性1:屬性值;
屬性2:屬性值;
...
屬性n:屬性值;
}
工作中css很少寫註釋, 多個屬性之間也很少使用回車換行.
引入css樣式:
a.行內式: <a style = “color: red ; ”> 只針對當前標籤有用.
b.內嵌式: <style type = “text/css”> 針對當前html頁面的所有選擇的元素.
c.鏈入式: <link rel=”stylesheet” text=”text/css” href=”檔案位置” >
哪個html頁面引入的,就對哪個html有效(可以被多個html引用)
★優先順序: 行內式 > 內嵌式和鏈入式 (後邊會覆蓋前面的內容.)
元素選擇器:
a.元素選擇器: 用標記名稱作為選擇器 h1{ }
b.id選擇器: #id名. 多個標籤使用同一個id,只會得到第一個.
c.類選擇器: class=”名字” .class名
d.後代選擇器: 父標籤 後代標籤 #d1 div{ }
e.屬性選擇器: input[type = “text”] { 進行過濾 }
f.偽類選擇器: 給超連結設定樣式.
css的樣式:
border ：設定邊框的樣式
格式：寬度 樣式 顏色 例:style=”border:1px solid red”
樣式: solid 實線 , double 雙線 , dashed 虛線 , dotted 點線.
border-left:左邊框
border-bottom:下邊框
<div>: 塊標籤 , 獨自佔據一整行.
<span>: 行內元素 , 不會佔用一行.
div和span標籤: 都是一塊一塊的解析,顯示快.
display:屬性值
inline : 顯示為行內元素.(行內元素預設選項)
block : 顯示為塊元素.(塊元素預設選項)
none : 此元素將被隱藏 , 不顯示.
背景顏色: background-color:
背景圖片: background-image : url(地址)
字型顏色: color
字型大小: font-size
字型樣式: font-family: 宋體,楷體,幼圓.
取消下劃線: text-decoration:none
佈局: float: left 元素向左浮動.
clear: both 取消上一行的浮動,從下一行在從新開始
CSS的盒子模型:
外邊距-margin:盒子到頁面之間的距離.
margin: 50px auto; (上下50px , 左右居中)
margin: 50px 150px 100px;(上50,右150,下100,左150)
內邊距-padding: html元素到盒子之間的距離.
padding – top : 上內邊距
padding - left: 左內邊距