學生作業(yè)制作網(wǎng)站專業(yè)制作網(wǎng)頁的公司
HTML
1 介紹
??HTML(Hypertext Markup Language) 超文本標記語言。靜態(tài)網(wǎng)頁，用于在瀏覽器上顯示數(shù)據(jù)
??超文本: 指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。
??標記語言: 使用 < > 括起來的語言
??超文本標記語言的結構, 包括“頭”部分（英語：Head）、和“主體”部分（英語：Body），其中“頭”部提供關于網(wǎng)頁的信息，“主體”部分提供網(wǎng)頁的具體內容。
2 基本語法
<!DOCTYPE html>
<!--定義根-->
<html lang="en">
<!--定義頭-->
<head><meta charset="UTF-8"><!--定義頁面標題--><title>Title</title>
</head>
<!--定義頁面主體內容-->
<body>
</body>
</html>
3 屬性與值
<!--color:屬性名 red:屬性值 屬性名和屬性值用 “=” 連接, 每個標簽都有id,style,class等核心屬性-->
<h1 style="color: red">這里是小紅</h1>
??① HTML 標準屬性，是大多數(shù) HTML 和 XHTML 都有支持的屬性； class 規(guī)定元素的類名（classname）； id 規(guī)定元素的唯一 id style 規(guī)定元素的行內樣式（inline style） title 規(guī)定元素的額外信息以及其它的語言鍵盤屬性等
??② 標簽上的可選和必選屬性，只針對單個的標簽有效果（Mapper.xml）
??③ 事件屬性，使 HTML 事件觸發(fā)瀏覽器中的行為，例如點擊某個 HTML 元素時啟動一段 JavaScript
4 標簽嵌套
<!--正確嵌套-->
<span>這里是小黑<h1 style="color: red">這里是小紅</h1></span>
<!--這是錯誤的,標簽不能錯亂嵌套-->
<h1 style="color: red">這里是小紅<span>這里是小黑</h1></span>
5 轉義字符與特殊字符
| 此處 | 引號 | 需用 | 英文 |
|---|---|---|---|
| >； | <； | &； | "； |
| > | < | & | " |
| ®； | ©； | &trade； |  ；&emsp； |
| ? | ? | ? | ??(兩者都為空格) |
6 常用 HTML 標簽
<!-- 注釋內容 -->:注釋標簽;<html>:文檔根標簽;<head>:頁面頭部標簽;<title>:頁面標題,放置于<head></head>之間;<body>:頁面主體部分;<style>:寫 css 或引入CSS文件,一般放在<head></head>中;<script>: 寫 JavaScript 或引入 JavaScript 文件,一般在<head></head>中;<h1>到<h6>:標題一到標題六,與world一致;<p>:定義段落<div>:定義文檔結構;為HTML提供結構和背景;<span>:和<div>基本相似,區(qū)別是<span>默認不換行;<br/>:單標簽,插入一個換行;<hr/>:單標簽,定義一條水平線;
??span 標簽不會導致?lián)Q行
??div 會換行
??p 會產(chǎn)生一個段落,段落之間有默認間距
7 超鏈接和錨點
??超鏈接,即指向內容鏈接，屬于一個網(wǎng)頁中，可通過超鏈接同其他網(wǎng)頁或站點之間進行連接的元素。從一個網(wǎng)頁指向一個目標的連接關系，這個目標可以是另一個網(wǎng)頁，也可以是相同網(wǎng)頁上的不同位置，還可以是圖片，電子郵件地址，文件，甚至是一個應用程序。
??一個網(wǎng)頁中作為超鏈接的對象，可以是一段文本或是一個圖片。當瀏覽者單擊已經(jīng)鏈接的文字或圖片后，鏈接目標將顯示在瀏覽器上，并且根據(jù)目標的類型來打開或運行。各個網(wǎng)頁鏈接后，才構成一個網(wǎng)站。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>tj</title>
</head>
<body>
<a href="#a1">第一頁</a> <br/>
<a href="#a2">第二頁</a> <br/>
<a href="#a3">第三頁</a> <br/>
<!--用 name 或 id 屬性，創(chuàng)建一個文檔內部的書簽（創(chuàng)建指向文檔片段的鏈接）-->
<a id="a1"><div style="height: 800px;background-color: mediumorchid;">一</div>
</a>
<a id="a2"><div style="height: 800px;background-color:lemonchiffon">二</div>
</a>
<a id="a3"><div style="height: 800px;background-color:orange;">三</div>
</a>
</body>
</html>
8 列表標簽
① 有序列表
<!--type屬性: 可指定列表項目序號類型,屬性值有: A : 表示使用大寫英文字母作為序號;如A、B、C 等;a : 表示使用小寫英文字母作為序號;如a、b、c 等; I : 表示使用大寫羅馬數(shù)字作為序號;如I、II、III 等;i : 表示使用小寫羅馬數(shù)字作為序號;如i、ii、iii 等; 1 : 表示使用阿拉伯數(shù)字作為序號;如1、2、3 等;start屬性:可表示列表的起始序號;--><ol type="a" start="3"><li>大黃</li><li>大白</li><li>小黑</li><li>小侯</li>
</ol>
② 無序列表
<!--type 屬性: 可指定列表項目符號類型,屬性值有:disc:表示實心圓點; ●square:表示空心圓圈; ■circle:表示實現(xiàn)方塊; ○-->
<ul type="circle"><li>大黃</li><li>大白</li><li>大黑</li><li>小侯</li>
</ul>
③ 自定義列表 – 無標識列表
<!--<dl>:用于定義列表;該標簽只有<dt>,<dd>兩種子標簽;<dt>:定義列表項的標題;<dd>:定義普通列表項;-->
<dl><dt>金毛</dt><dd>大黃</dd><dd>小黃</dd><dt>哈士奇</dt><dd>哈總</dd>
</dl>
9 圖片標簽
??于網(wǎng)頁中嵌入一張圖片; 標簽不是在網(wǎng)頁中插入圖像,而是從網(wǎng)頁上鏈接圖像
<!--標簽屬性: 兩個必需屬性：src 和 altsrc : 指定顯示圖片文件所在位置; alt : 指定一段文本,可用于當圖片不能顯示時顯示的提示信息; height: 圖片高度,可為像素值或百分比; width: 圖片寬度,可為像素值或百分比;-->
<img src="dog.jpg" alt="dog" height="30%"><!--<a>和<img>標簽同時使用可做圖片超鏈接;-->
<a href="demo.html"><img src="image/dog.jpg"></a>
10 表格標簽
<!--<table>: 定義表格,<table>可以有多個<tr>子標簽常用屬性:border:指定表格邊框的寬度,默認是0;cellpadding:指定單元格內容和單元格邊框的間距,值可是像素或百分比;cellspacing:指定單元格之間的間距,值可是像素或百分比;width:指定表格的寬度,值可以是像素或百分比;
<tr>: 定義表格的行align: 設置行中的單元格內容的位置(left/center/right)定義表格行,該標簽只能有<td>或<th>子標簽;
<td>: 定義單元格,放在<tr>中,表示把一行分成 N 個單元格;(N取決于N對<td>);常見屬性:colspan:指定該單元格跨多少列,屬性值是數(shù)字; columrowspan:指定該單元格橫跨的行數(shù); rowheight:指定單元格的高度;width:指定單元格的寬度;
<th>:定義表格標題頭的單元格,用法和<td>標簽一樣的,只是顯示效果不同;--><body>
<table border="1" cellpadding="0" cellspacing="0" width="80%"><tr style="background-color: orange"><th>姓名</th><th>性別</th><th>年齡</th><th>體長</th><th>體重</th><th>電話</th></tr><tr><td height="60px;">大黃</td><td colspan="2">公</td><td width="60px;">80</td><td rowspan="2">20</td><td>19212312314</td></tr><tr><td>大白</td><td>母</td><td>50</td><td>18</td><td>19232132122</td></tr>
</table>
</body>
11 表格分層標簽
<body>
<!--
<tbody>: 定義表格的主體,該標簽只能包含<tr>子元素;
使用<tbody>標簽可以將一個表格分成幾個獨立的部分;
<tbody>可以將表格里的一行或多行合并成一組,使用Ajax編程的時需要動態(tài)修改表格的某幾行,此時可使用<tbody>標簽;
<thead>:定義表格頭(標題行),用法和 <tbody> 一致,功能有點差別;
<tfoot>:定義表格腳（統(tǒng)計行）,用法和 <tbody> 一致,功能有點差別;
當打印表格式,表格頭和表格腳的數(shù)據(jù)也會包含在數(shù)據(jù)的頁面上;
<thead>,<tbody>,<tfoot>標簽可以對表格的行進行分組,每對<tbody>就是一組;
無論三者的先后順序如何,不影響頁面順序為上面顯示表格頭,中間是顯示表格體,最下面顯示表格腳數(shù)據(jù);
建議順序為:<thead>,<tfoot>,<tbody>;若網(wǎng)速慢沒有加載出表格體的數(shù)據(jù),但是表格頭和表格腳的信息會先顯示出來,表明頁面可用--><table>
<thead>
<tr><th>名字</th><th>體重</th><th>顏色</th><th>電話</th>
</tr>
</thead>
<tfoot><tr align="center"><td colspan="4">首頁 上一頁 下一頁 末頁</td></tr></tfoot>
<tbody>
<tr><td>大黃</td><td>20</td><td>黃色</td><td>19212312322</td>
</tr>
<tr><td>大白</td><td>22</td><td>白色</td><td>19232132122</td>
</tr>
</tbody>
</table>
</body>
12 表單標簽
??form action=“#” 中#的作用是將表單的提交目標設置為當前頁面。當表單提交時，頁面將重新加載并執(zhí)行相應的處理程序。這種設置通常用于在同一頁面上處理表單數(shù)據(jù)，而不需要跳轉到其他頁面。
<body>
<!--
from : 表單標簽,用來收集用戶錄入的數(shù)據(jù)
action: 指定數(shù)據(jù)提交的位置,當點擊”提交”按鈕時,表單數(shù)據(jù)提交到哪個地址
method : 指定表單數(shù)據(jù)提交的方式,分為 GET 或 POST 請求,默認是 get 方式(數(shù)據(jù)會顯示在地址欄上);
enctype : 指定表單數(shù)據(jù)提交的編碼格式，屬性有一下三種 :application/x-www-form-urlencoded url 發(fā)送前編碼所有字符(默認)multipart/form-data 不做編碼,二進制方法提交 ,以后使用文件上傳必須使用text/plain 空格轉+號，不對特殊字符編碼
--><form action="#" method="get">
</form>
</body>
13 表單控件標簽
??表單控件用于收集用戶數(shù)據(jù)，是 form 表單的子元素。不同標簽與類型的展現(xiàn)方式不同,需放在 form 標簽內部
① input 標簽
??功能豐富，用于接收用戶輸入的信息
type 屬性指定輸入標簽的類型:
單行文本框 : type = text,輸入的文本信息直接顯示在框中;
密碼輸入框 : type = password,輸入的文本以圓點形式顯示;
單選框 : type = radio,如：性別選擇;
復選框 : type = checkbox,如：多個興趣選擇;
隱藏域 : type = hidden, 在頁面上不可見,但在提交的時候會一起提交數(shù)據(jù),用于隱式向后臺傳輸一個
數(shù)據(jù);
提交按鈕 : type = submit,用于提交表單中的數(shù)據(jù)內容;
重置按鈕 : type = reset,將表單中填寫的內容均設置為初始值;
無動作按鈕 : type = button,可使用javascript為其自定義事件;
文件上傳域 : type = file,會生成一個文本框和一個瀏覽按鈕;
圖像域 : type = image, 它可以替代submit按鈕,即圖像提交按鈕<input> 標簽中其他常見屬性:
name: 指定 input 標簽的名字,沒有設置 name 屬性的標簽不能提交數(shù)據(jù);
value:指定input標簽的初始值;
checked:設置單選框,復選框的初始狀態(tài)是否選中;
disabled: 設置input標簽加載時禁用此標簽; 不能提交到
maxlength:文本框輸入最大字符數(shù),屬性值是數(shù)字;
readonly: 指定文本框內值不允許直接修改; 能被提交
placeholder ：提示信息的顯示
② select 標簽
??下拉框標簽，以 option 標簽為子標簽，二者一般結合使用：
<!--
<select > 常用屬性：
multiple="multiple" 可以選中多個
size="3" 顯示幾個
<option> 常用的屬性 :
selected=”selected”:默認選中的選項--><select name="city" >
<option value="">---請選擇---</option>
<option value="zh" selected="selected">牙克石</option>
<option value="en">海拉爾</option>
</select>
③ textarea 標簽
??文本域標簽: 用戶錄入多行多列數(shù)據(jù)
<textarea cols="60" rows="6">今天的天氣是零下40度</textarea>