1-html基礎
一、html基本機構
<!DOCTYPE html>命名文件型別
<html></html>說明我們寫的是標記語言
<head></head>檔案頭部
<title></title>檔案標題(顯示在狀態列上的內容)
<meta charset="utf-8" />編碼格式
<body></body>檔案主體(所有要寫的內容)
二、html基本語法
1、常規標記
<標記 屬性=“屬性值” 屬性=“屬性值”></標記>
2、空標記
<標記 屬性=“屬性值” />
注:
a.寫在<>中的第一個單詞叫做標記,標籤,元素。
b.標記和屬性用空格隔開,屬性和屬性值用等號連線,屬性值必須放在“”號內。
c.一個標記可以沒有屬性也可以有多個屬性,屬性和屬性之間不分先後順序。
d.空標記沒有結束標籤,用“/”代替。
三、html常用標記
1、文字標題(h1-h6)
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
2、段落(p)
<p>段落文字內容<p>
3、空格
(所佔位置沒有一個確定的值,這與當前字型字號都有關係)
4、換行(br)
換行是一個空標記(強制換行)
5、加粗
<b>加粗內容<b>
<strong>加粗內容<strong>
6、傾斜
<em>傾斜內容</em>
<i>傾斜內容</i>
7、水平線
<hr/>
8、列表(ul, ol , dl)
html中有三種列表,分別是:無序列表,有序列表,自定義列表。
無序列表
<ul>
<li></li>
<ul>
有序列表
<ol>
<li></li>
<ol>
自定義列表
<dl>
<dt>名詞</dt>
<dd>解釋</dd>
<dl>
9、插入圖片
<img src="目標檔案路徑及全稱" alt="圖片替換文字" title="圖片標題" />
注:
title的作用: 在你滑鼠懸停在該圖片上時顯示一個小提示,滑鼠離開就沒有了,HTML的絕大多數標籤都支援title屬性,title屬性就是專門做提示資訊的。
alt的作用:alt屬性是在你的圖片因為某種原因不能載入時在頁面顯示的提示資訊,它會直接輸出在原本載入圖片的地方。
10、超連結
<a href="目標檔案路徑及全稱/連線地址" alt="替換文字" title="提示文字">連結文字/圖片</a>
<a href="#"></a>空連結
屬性:target:頁面開啟方式
屬性值:_blank 新視窗開啟
屬性值:_self 本視窗開啟
<a href="#"target="_blank">新頁面開啟</a>
11、表格
<table width="value" height="value" border="value" bgcolor="value" cellspacing="value" cellpadding="value">
<tr>
<td></td>
<td></td>
</tr>
</table>
注:一個tr表示一行;一個td表示一列(一個單元格)
*資料表格的相關屬性
width="表格的寬度"
height="表格的高度"
border="表格的邊框"
bgcolor="表格的背景色"
cellspacing="單元格與單元格之間的間距"
cellpadding="單元格與內容之間的空隙"
colspan=“所要合併的單元格的列數"合併列;
rowspan=“所要合併單元格的行數”合併行;
align="left/center/right";水平對齊
valign=”top/middle/bottom”;垂直對齊
12、表單
表單框
<form name="表單名稱" method="post/get"action="">
</form>
文字框
<input type="text" value="預設值"/>
密碼框
<input type="password" placeholder="密碼" />
提交按鈕
<input type="submit" value="按鈕內容" />
重置按鈕
<input type="reset" value="按鈕內容" />
單選框/單選按鈕
<input type="radio" name="ral" />
<input type="radio" name="ral" checked="checked" />(預設選中)
複選框
<inputtype="checkbox"name="like" />
<input type="checkbox" name="like" disabled="disabled" /> (disabled="disabled" :禁用)(checked="checked" :預設選中)
下拉選單
<select name="">
<option>選單內容</option>
</select>
多行文字框(文字域)
<textarea name="textareal" cols="字元寬度" rows="行數">
</textarea>
按鈕
<input name="'" type="button" value=“按鈕內容” />
注:(button和submit的區別是 ,submit是提交按鈕 起到提交資訊的作用,button只起到跳轉的作用,不進行提交。)
13、div
<div id="id名"/class="class名"></div>
14、span
<span></span>文字結點(某一小段文字,或是某一個字)
post 和 get 的區別?
1. get是從伺服器上獲取資料,post是向伺服器傳送資料。
2. get是把引數資料佇列加到提交表單的ACTION屬性所指的URL中,值和表單內各個欄位一一對應,在URL中可以看到。post是通過HTTP post機制,將表單內各個欄位與其內容放置在HTML HEADER內一起傳送到ACTION屬性所指的URL地址。使用者看不到這個過程。
3. 對於get方式,伺服器端用Request.QueryString獲取變數的值,對於post方式,伺服器端用Request.Form獲取提交的資料。
4. get傳送的資料量較小,不能大於2KB。post傳送的資料量較大,一般被預設為不受限制。但理論上,IIS4中最大量為80KB,IIS5中為100KB。
5. get安全性非常低,post安全性較高。但是執行效率卻比Post方法好。
下拉選單
< select name="">
< option >選單內容 </ option >
</ select >