html學習筆記
1，顏色 color:#930; css
2，文字大小 font-size:15px; html
3，文字居中 text-align:center 瀏覽器
4，插圖片連接 <img src="#"> 服務器
5，瀏覽器標題信息 <head> <title> </title></head>, 網絡
6，註釋 <!-- -->, ssh
7，分級標題<h1></h1> <h2></h2> post
8，字體加粗<strong></strong> 字體
9，斜體<em></em>, ui
10，單獨設置文字樣式 <span></span> <head> <style> color:blue;</style> </head> url
11，引用 <q></q> :雙引號
12，長文本引用 <blockquote ></blockquote> :讓文本爲縮進式
13，回車 <br/> :在須要還行的地方處添加
14，空格
15，分割線 <hr/>
16，地址顯示<address></address>
17,加入一行代碼語言 <code> </code>
18,加入大量代碼 <pre> </pre>
19,添加列表 <ul> //沒有先後順序信息的列表信息
<li> </li> //一行
<li> </li>
</ul>
20,添加有序列表
<ol>
<li> </li>
<li> </li>
</ol>
21,獨立板塊 <div id="模板名稱"> </div>
22,表格 <table> <tbody> <tr> //一行<th> //一列 </th> </tr> </tbody> </table>
23,表格的摘要 <table summary="簡介文檔">
24,表格標題 <table> <caption>標題文本</caption> </table>
25,網頁連接 <a href="目標網址" title="鼠標滑過顯示的文本">連接顯示的文本</a>
26,在新建瀏覽器窗口中打開連接 <a href="#" target="_blank">click here! </a>
27,連接Email地址
1，郵箱地址 <a href="mailto:yy@qq.com">發送</a>
2,抄送地址 <a href="mailto:yy@qq.com?cc=xx@qq.com">發送</a>
3,祕密抄送地址 <a href="mailto:yy@qq.com?bcc=xx@qq.com">發送</a>
4,多個收件人、抄送、祕密抄送 <a href="mailto:yy@qq.com;xx@qq/com">發送</a>
5,郵件主題和內容 <a href="mailto:yy@qq.com?subject=發送電子郵件&body=你好">發送</a>
28,插入圖片 <img src="#" alt="下載失敗的替換文本" title="鼠標滑過的提示文本">
29,表單標籤，與用戶交互 <form method="傳送方式" action="服務器文件"> </form>
30,文本框、密碼輸入框
<form>
<input type="text/password" name="名稱(文本框的名字，便於後臺調用)" value="輸入框默認值" />
</form>
31，文本域，多行文本輸入
<textarea rows="行數" cols="列數">文本</textarea>
32，選擇框、複選框
<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>
當 type="radio" 時，控件爲單選框
當 type="checkbox" 時，控件爲複選框
同一組的單選按鈕，name 取值必定要一致
33，下拉列表框
<select>
<option value="看書">看書</option>
<option value="旅遊" selected="selected">旅遊</option>
<option value="運動">運動</option>
<option value="購物">購物</option>
</select>
設置selected="selected"屬性，則該選項就被默認選中。
<select multiple="multiple"> //下拉框具備多選功能
34，使用提交按鈕
<input type="submit" value="提交">
type：只有當type值設置爲submit時，按鈕纔有提交做用
value：按鈕上顯示的文字
35，重置按鈕重置表單信息
<input type="reset" value="重置">
type：只有當type值設置爲reset時，按鈕纔有重置做用
36，form表格裏面的lable標籤
label標籤不會向用戶呈現任何特殊效果，它的做用是爲鼠標用戶改進了可用性。若是你在 label 標籤內點擊文本，就會觸發此控件。就是說，當用戶單擊選中該label標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件上（就自動選中和該label標籤相關連的表單控件上）
注意：標籤的 for 屬性中的值應當與相關控件的 id 屬性值必定要相同。
<label for="控件id名稱">
37.form標籤
通俗的講 form標籤是用來進行表單提交用的
form標籤裏面的常見屬性以下
action: 表單提交的地址, 確定是要提交給某個服務器的,action的地址就是要提交的服務器的地址
method:以何種方式提交,常見的爲get和post. 區別在於一個是明文(在url中顯示),一個是暗文
第一次實際幫人家作網頁的頁面，操做起來也沒那麼容易。。
第一個問題，記事本寫好後在保存爲html後綴文件時仍是出現了txt文本，實際上是後綴被隱藏了，在多打一個html後綴就能夠解決了。
順便附上本身寫的網頁模板，方便之後直接copy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>主頁面</title>
<style type="text/css" >
#bodydiv{ position:relative; margin-left:95px; margin-right:95px;}
#body{
background-color:#ffffff;
margin-top:auto;
color: #996600;
font-family: "黑體";
;
}
.title{
float:left;
}
#bannerdiv{ position:relative;}
#bannertable{}
#centerdiv{ position:relative; padding-left:3px;}
#centertable{ }
#rootdiv{ margin-top:11px;}
</style>
</head>
<body>
<div id="bannerdiv" width="100%">
<img src="images\ssh.zetadata_01.gif" width="100%" height="100%">
</div>
</br>
</br>
<div id="centerdiv">
<table id="centertable" border="0" cellpadding="8px" align="center">
<tr>
<td rowspan="2" >
<div >
<font class="title" size="4" color="000000">熱門活動</font></br></br>
<div style="border:1px solid #C0C0C0;width:490px;">
<div style="font-size:0;">
<a href="BaiMi.html" style="text-decoration:none">
<img src="images\ssh.zetadata_04.gif" width="490" height="278">
</div>
</br>
<font size="4" color="000000">"I Love EP"創意繪畫展</font>
</br>
</br>
<font size="2" color="#C0C0C0">活動時間：2016-03-06 10:30-11:30</font>
</br>
</br>
</div>
</br>
</br>
</a>
</div>
</div>
</br>
</td>
<td rowspan="2" >
<div >
<font class="title" size="4" color="000000"></font></br>
<div style="border:1px solid #C0C0C0;width:490px;">
<div style="font-size:0;">
<a href="BaiMi.html" style="text-decoration:none">
<img src="images\ssh.zetadata_05.gif" width="490" height="278">
</div>
</br>
<font size="4" color="000000">科學夢想家夏令營動員大會</font>
</br>
</br>
<font size="2" color="#C0C0C0">活動時間：2016-06-06 10:30-11:30</font>
</br>
</br>
</div>
</br>
</br>
</a>
</div>
</div>
</td>
</tr>
</table>
</div>
<div id="centerdiv">
<table id="centertable" border="0" cellpadding="8px" align="center">
<tr>
<td rowspan="2" >
<div >
<font class="title" size="4" color="000000">往期活動</font></br></br>
<div style="border:1px solid #C0C0C0;width:490px;">
<div style="font-size:0;">
<img src="images\ssh.zetadata_08.gif" width="490" height="278">
</div>
</br>
<font size="4" color="000000">農行杯 我有一個公益夢</font>
</br>
</br>
<font size="2" color="#C0C0C0">活動時間：2015-12-06 10:30-11:30</font>
</br>
</br>
</div>
</br>
</br>
</div>
</div>
</br>
</td>
<td rowspan="2" >
<div >
<font class="title" size="4" color="000000"></font></br></br>
<div style="border:1px solid #C0C0C0;width:490px;">
<div style="font-size:0;">
<img src="images\ssh.zetadata_09.gif" width="490" height="278">
</div>
</br>
<font size="4" color="000000">私塾慧幼兒時裝大賽</font>
</br>
</br>
<font size="2" color="#C0C0C0">活動時間：2015-10-01 10:30-11:30</font>
</br>
</br>
</div>
</br>
</br>
</div>
</div>
</br>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
2，
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>百米</title>
<style type="text/css">
body {color:grey }
body {text-align: center }
.txtcss1 {
text-align: left; /* 用於文字右對齊 */
font-size:18px;
color:#6c6c6c;
}
#bodydiv{ position:relative; margin-left:95px; margin-right:95px;}
</style>
</head>
<body>
<div width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<img src="images\BaiMin_9_01.gif" width="100%" height="100%">
</div>
<table bgcolor="#c7cbca" width="100%" height="45" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td style="color:white" align="center">活動時間：2016-03-06 10:30-11:30 | 活動地址：鄰瑞廣場一樓露天</td>
</tr>
</table>
<textarea class="txtcss1" cols="120" rows="90" style="overflow-y:hidden;border:0">
1、活動背景和目的
隨着經濟社會的發展，生活節奏的加快，不管是社區仍是居民都疲於工做，不少時候根本沒有時間和意識發現身
邊的美和孩子身上的藝術潛力以及培養孩子的環保意識，其實人人都是渾然天成的藝術家和生活家。經過組織這次
活動，但願可讓本身和本身的孩子都快樂的擁有一個屬於本身心中的環保夢想。
這次活動也是爲提升民衆聯絡所和社區之間人文藝術環境，進一步營造良好的區域正能量的氛圍，鼓勵小朋友進行
藝術文化和環保行爲的薰陶和感覺，逐漸培養藝術美感和環保意識。
2、組織機構
1.主辦方：蘇州工業園區湖東社工委金雞湖民衆聯絡所
2.承辦方：榮域社區居委會，鄰瑞社區居委會，雙湖灣社區居委會，濱湖社區居委會，鄰瑞廣場，中新蘇州工業園
區置地有限公司，蘇州工業園區湖東思塾慧文化服務中心
3.合做方：山姆會員店，浦發銀行榮域支行，星美影院，嘉睿私塾，樂橙美術
4.媒體：蘇州地鐵報
5.參與者：金雞湖區域的居民及其餘感興趣的居民
3、活動時間
發起時間：2016年2月18日
活動時間：2016年3月6日上午10:30-11:30
做品展出時間：2016年3月6日當天，以及4大社區巡迴展出
4、活動名稱
「I Love EP」百米長卷創意繪畫展
5、活動規模
50個家庭
6、年齡定位
5-12歲小朋友的家庭
7、活動地點
鄰瑞廣場一樓露天空地（若是下雨活動在鄰瑞廣場室內負一樓）
8、活動流程
1.由金雞湖民衆聯絡所，鄰瑞廣場, 榮域社區居委會，鄰瑞社區居委會，雙湖灣社區居委會，濱湖社區居委會及思
塾慧發起線上線下宣傳
2.榮域社區居委會，鄰瑞社區居委會，雙湖灣社區居委會，濱湖社區居委會及其餘社區的居民能夠提早預定報名
3.藝術展分爲彩繪環節、顏料布繪環節、展現環節
?彩繪環節
2016年3月6日上午10:30-11:30，參加繪畫的家庭能夠用專業的（不會對皮膚有傷害）彩繪顏料自行或由老師幫助
進行面部彩繪，增長趣味性。
?顏料布繪環節
2016年3月6日上午10:30-11:30，50個家庭將集體在百米長卷上進行創意繪畫。繪畫最後會評選最具藝術性和創
意性的5個家庭頒發獎品。
?展現環節
2016年3月6日10：00-13：30展出百米長卷創意做品，以後在4個社區進行巡迴展出。
蘇州工業園區湖東思塾慧文化服務中心
2016年2月24日
技術支持：蘇州澤它網絡科技有限公司
</textarea>
</body>
</html> 3.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>summer campe</title>
<style type="text/css" >
<!--p.leftmargin {margin-left: 5cm}-->
body {color:grey }
body {text-align: center}
</style>
</head>
<body>
<div width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<img src="images\YellowBanner_01.gif" width="100%" height="100%">
</div>
<table bgcolor="#c7cbca" width="100%" height="45" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td style="color:white" align="center">|</td>
</tr>
</table>
</br>
</br>
</br>
</br>
<div id="centerdiv" style=" text-align:center;">
<font color="#A9A9A9">活動正在籌劃中，盡請等待……</font>
</div>
</div>
</br>
</br>
</body>
<ml>
- 1. html學習筆記
- 2. HTML學習筆記
- 3. HTML—學習筆記
- 4. HTML 學習筆記
- 5. 【學習筆記】HTML
- 6. Html學習筆記
- 7. HTML學習筆記——HTML基本標記
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. html學習筆記
- 2. HTML學習筆記
- 3. HTML—學習筆記
- 4. HTML 學習筆記
- 5. 【學習筆記】HTML
- 6. Html學習筆記
- 7. HTML學習筆記——HTML基本標記