tomcat之網頁開發基礎復習
**聲明** :HTML標準規范</!doctype>
<html>
: 根標簽
<head>
: 頭部標簽 內含<title><meta><link><style>
<body>
: 主體
<body></body>
html標簽
單標簽: <標簽名 \>
雙標簽:<標簽名>內容<標簽名>
注釋標簽:<!--注釋-->
<p></p>,<br/>,<span></span>,
表格標簽:
<tr><td>2333</td>
</tr>
表單標簽:
表單域<form>
<form action ="URL 地址" method = "提交方式" name = "表單名稱">各種表單控件
</form>
action – 表單提交地址
method –GET or POST (默認GET保密性差,且有數量限制,POST保密性高,且可提交大量數據,開發中常用POST)
表單控件
<input/>
<input type = "控件類型" />
input type –text 文本輸入,password 密碼輸入,radio 單選 ,checkbox 復選,file 文件上傳,submit 提交 ,reset 重置
<textarea cols = "每行字符數" rows = "顯示的行數">文本內容
</textarea>
列表標簽
<ul><li>無序</li><li>阿巴阿巴</li>
</ul><ol><li>有序1</li><li>有序2</li>
</ol><dl>
<dt>名詞1</dt><dd>名詞1描述</dd>
<dt>名詞2</dt><dd>名詞2描述</dd><dd>名詞2描述</dd>
</dl>
超鏈接標簽
<a href = "跳轉目標" target = "目標窗口彈出方式">文本or圖像</a>
target
_self 默認值,原窗口打開;_blank 新窗口打開;_parent 父框架集打開;_top 整個窗口中打開
圖像標簽
<img src = "圖像URL"/>
可加width ,height ,border…
CSS
選擇器{屬性1:屬性值1;屬性2:屬性值2;
}
長度–像素(px),百分比(%)
顏色-- red,green,blue…#FF0000,#FF6600,#29D794…rgb(255,0,0)…
行內式
結構不與樣式分離,不建議使用
<標簽名 style = "屬性1:屬性值1;.....">內容</標簽名>
內嵌式
head 提前加載
<head><style type = "text/css" >選擇器{屬性1:屬性值1;......}</style>
</head>
外鏈式
<head><link href = "CSS文件路徑" type = "text/css" rel = "stylesheet" />
</head>
rel : 表示 定義當前文檔與被鏈接文檔之間的關系 ,指定為stylesheet, 樣式表文件
css文件:
<style type = "text/css">
h2{text-align :center;
}
div{border:1px solid #CCC; width : 300px; height : 80px;color:purple;text-align:center;
}
</style>
HTML文檔:
<head><link href = "style.css" type = "text/css" rel = "stylesheet" />
</head>
<body><h2>外鏈式css樣式</h2><div>鏈入式</div>
</body>
導入式
<style type = "text/css"> @import url (CSS 文件路徑);<!--或 @import "CSS文件路徑";-->
</style>
HTML文檔更改:
<head><style type = "text/css"> @import url (CSS 文件路徑);<!--或 @import "CSS文件路徑";--></style>
</head>
<body><h2>外鏈式css樣式</h2><div>鏈入式</div>
</body>
CSS 選擇器&常用屬性
標簽選擇器
標簽名{屬性1:屬性值1;......}
類選擇器
.類名{屬性1:屬性值1;.....}
id選擇器
#id名{屬性1:屬性值1;.....}
通配符選擇器
*{屬性1:屬性值1;.....}
Java Script
JavaScript的引入方式
行內式
<body><input type="button" value = "點我" οnclick="alert('行內式') " / >
</body>
內嵌式
<head><script type = "text/javascript" >//javascript代碼在此處
</script>
</head>
外鏈式
<head><title>js外鏈式</title><script type="text/javascript" src="jsDemo.js"></script>
</head>
數據類型
- Number 數值部分不分整型&浮點型 ,
- String 字符串’ '," "
- Boolean true or false
- Object 對象類型 一組數據&功能的鍵值對集合
- Null
- Undefined 未定義 變量被創建,但未賦值
DOM 相關知識
可以一種獨立平臺&語言
的方式 來訪問&修改
一個文檔的內容&結構
- parentNode
- childNode
- firstChild
- lastChild
獲取文檔中指定的元素
- id
document.getElementById("userId");
- name
document.getElementsByName("userName") [0];
BOM 相關知識
BOM提供了獨立于內容且可與瀏覽器窗口進行交互的對象,
BOM包含DOM