1. 程式人生 > >前端HTML基礎與css

前端HTML基礎與css

換行 文件中 不同 spa 平鋪 有序列表 正在 lock 屬性

一. HTML簡介:(使用http協議)

1. 靜態網頁:
HTML制作完成,網頁的內容如果沒有人去重新更新或制作的話,內容是永遠一成不變的。
2. 動態網頁:

在不同的時間看到的網頁內容是不同的,用戶看到的網頁的內容其實是服務器端的程序運行出來的結果。
如:論壇。以後重點,開發動態網頁。語言:JSP(Java Server Page)

二. 文本標記

h1~h6: 標題

hr: 水平線

font: 設置字體

strong: 加粗

br: 換行

p: 分段

sup/sub: 上標/下標

pre: 原樣輸出

ol li: 有序列表(三種編號方式:數字,字母,羅馬)

ul li: 無序列表

dl dt dd: 項目列表(dl 容器, dd 標題, dd 描述)

span: 行內標簽,將部分文字在邏輯上分成不同部分

div: 塊標簽,一個塊占用一行,換行的功能

三. 超鏈接標記

1. 作用: 點擊網頁上的文字,可以跳轉到其它的網頁上去。

2. 語法:

<a href=”URL”>文字</a>

常用的屬性:

href: 要跳轉的頁面

target取值: 打開頁面的方式(_self 在當前窗口打開, _blank 在新的窗口打開)

3. 錨標記: <a name="名字">
跳轉到錨: <a href="#名字">

四. img: 顯示圖片

1. 語法:

<img src="指定圖片的地址">

常用屬性:
src: 地址
width: 寬度
height: 高
alt: 圖片替代的文本
title: 鼠標移上去的時候顯示的信息提示

五: 表格的結構:

1. 表格標簽:
table 容器
tr 行
th 列標題
td 單元格
bgcolor 設置背景色
caption 表格的標題


2. 常用的表格屬性:

    width:  寬度
    border :  邊框寬度
    align: 對齊
    rowspan:  跨行
    colspan: 跨列
    cellspacing:  單元格之間的間距
    cellspadding:  單元格邊框與內容的間隔
 

3. thead、tfoot和tbody元素
作用:在邏輯上將表格劃分成幾個不同的部分
thead:表格的頭部
tbody: 表格的主體,無論有沒有寫這個標簽,瀏覽器在解析表格的時候,都會自動加上tbody標簽。
tfoot: 表格的腳部

六. 表單標簽: <form>

<form> 作用: 提交數據給服務器

常用的屬性:
    action  提交給服務器地址
    method  =  get /post
       get: 提交的數據在地址欄上顯示出現
        post: 不顯示
技術分享 
    1. 文本框
        <input type="text"/>
    2. 密碼框
        <input type="password"/>
    3. 單選框
        <input type="radio" checked="checked"/>
    4. 復選框
        <input type="checkbox" checked="checked"/>
    5. 下拉列表
        <select>
            <option>

    6. 隱藏表單域
        <input type="hidden"/>

    7. 文件域
        <input type="file"/>

    8. 多行文本域:
        <textarea></textarea>

    9. 提交按鈕
        <input type="submit"/>
    10. 重置按鈕:
        <input type="reset"/>
    11. 普通按鈕:
        <input type="button"/>
    12. 圖片按鈕:
        <input type="image" src=""/>
type屬性

----------------------------------css----------------------------------

一. css的代碼的位置

1. 行內樣式:以標簽的一個style屬性的方式存在於HTML網頁中,只對指定的標簽起作用。

       <h2 style="color: green">我是標題2</h2>

2. 內部樣式:在網頁中添加<style>標簽,與HTML在同一個文件中。

  1     <style type="text/css">
  2         h2 {
  3              color: darkblue;
  4              font-size: 20px;
  5         }
  6     </style> 

3. 外部樣式:

1). 引入方式一:

  1     <link  type="text/css" href="css/01.css" rel="stylesheet"/>
  2         href:   要導入的CSS的文件名
  3         type:  指定樣式的類型,取值:text/css
  4         rel:  樣式與HTML文件之間的關系:stylesheet  樣式表
  5         CSS:  Cascading Style Sheet  層疊樣式表

2) . 引入方式二(了解,使用少): 存在一些瀏覽器兼容的問題,而且文件的數量有一定的限制。

  1     @import url(‘css/01.css‘);

3) 樣式起作用的原則:
就近的原則,哪個樣式離它近,哪個就起作用。同名的樣式會覆蓋,不同的樣式還是會起作用。

二. 選擇器:

1. 選擇器的作用:
對網頁中的元素(標簽)進行樣式的設置之前,首先找到這些元素,選定對哪些元素進行樣式的設置。

2. 語法格式:
每一行一個樣式的名和值

選擇器 {
樣式名:樣式值;
}

選擇器的分類:

1. 基本選擇器: 優先級(優先級: ID選擇器 > 類選擇器 > 標簽選擇器)
1) ID選擇器 #id
2) 標簽選擇器 標簽名
3) 類選擇器 .類名


2. 復合選擇器
由基本選擇器組合而成
1) 層級選擇器: 空格

按層級的關系,選擇父標簽下所有的子孫標簽
2) 並集選擇器: ,

選擇器1+選擇器2 兩個選擇器所有選中的元素,使用指定的樣式。
3) 交集選擇器(只能是ID或類): 標簽#ID{}或 標簽.類{}

兩個選擇器共同的部分
4) 通用選擇器: *

對網頁中所有的元素使用指定的樣式,優先級最低。
5) 偽類選擇器:

一個網頁的元素在不同操作狀態下,呈現不同的樣式。

● <a>鏈接</a>

a:link 沒有訪問的時候,正常的狀態

a:active 正在點擊的時候

a:hover 鼠標移動到上面的時候

a:visited 已經被點擊過的鏈接

● <input>: 得到焦點:當一個元素得到了可以操作時狀態,如:文本框有光標在閃

  1 		例:得到焦點,讓文本框的背景色變成黃色
  2 		 input:focus {
  3 			 background-color: yellow;
  4 		 }

6) 屬性選擇器

a. 有某個屬性
p[name]
b. 屬性等於某個值
p[name="first"]

三. 樣式:

1. 背景樣式:
	background-color:  背景色
	background-image:  圖片
	background-repeat:  平鋪
		1) x,y
		2) x
		3) y
		4) no-repeat
	background-position:開始平鋪的位置
2. 文本樣式:
	font-family:字體
	font-size: 大小
	font-style: 斜體
	font-weight: 加粗

3. 文本樣式:

	line-height:行高
	letter-spacing: 字符間隔
	word-spacing: 單詞間距
	text-decoration: 下劃線
	text-indent: 縮進

4. 盒子模型:

    盒子模型由哪些屬性組成:
		內容,邊框,內間距,外間距,高,寬
	border-style: 邊框線型
	border-color: 邊框顏色
	border-width: 邊框寬度
	margin: 外
	padding: 內	

簡寫
演示:把線型,粗細,顏色聲明在一個屬性中
border: solid green 2px;

     四邊
	上下 左右
	上 左右 下
	上 右 下 左

前端HTML基礎與css