您好,登錄后才能下訂單哦!
一.Web基礎作用即如何制作網頁介紹
1.HTML(靜態頁面)
用來勾勒出網頁的結構和內容
2.CSS(靜態頁面)
用來給網頁化妝,美化頁面
3.JavaScript(重點)
用來讓網頁呈現出動態的數據和效果
web三要素:HTTP協議,瀏覽器,服務器
二.XML和HTML的關系
1.XML
a.XML時可擴展標記語言,用來存儲或傳輸數據:
--標簽可擴展
--屬性可擴展
--元素之間的嵌套關系可擴展
b.標簽
雙標簽:<標簽名></標簽名>
單標簽:<標簽名/>
關系:<標簽名/>=<標簽名></標簽名>
c.屬性
--屬性必須定義在開始標簽上
--屬性名=“屬性值"
--屬性名不能重復,且無序
d.元素
<標簽名 屬性=“屬性值”>內容</標簽名>
2.HTML
a.HTML是超文本標記語言,用來顯示數據
b.實際HTML是語法固定的XML
--標簽固定
--屬性固定
—元素嵌套關系固定
c.學習HTML就是學習這些固定的標簽,屬性,嵌套關系
d.HTML基本結構
<!—html是唯一的根-->
<html>
<head>
<!—設置文檔標題,編碼,引入的資源-->
</head>
<body>
<!—頁面上要呈現的內容-->
</body>
</html>
三.HTML解決亂碼問題
1.創建HTML時需要將文件編碼設置為utf-8
2.需要在<head>元素下,使用<meta>元素設置頁面內容編碼
四.<!DCOTYPE>定義html版本
五.基本語法:
1.元素介紹:
分區元素用于為元素分組,常用于頁面布局:
a.塊分區元素:<div></div>:div用來勾勒出頁面的布局,便于開發頁面
塊級元素:默認情況下塊級元素會獨占一行;占據一個矩形區域,即元素前后都會自動換行:<p>, <div>, <hn>, <ol>, <ul>
b.行內分區元素:<span></span>
行內元素:不會換行,可以和其他行內元素位于同一行即橫向布局;不會占據矩形區域,他只用來修飾段落中的幾個字:<span>, <a>, <u>, <i>
1)塊分區元素
<ol></ol>:有序列表order list
<ul></ul>:無序列表 unorder list
<li></li>:列表項list item,用在ol和ul里面
2)行內分區元素
—<i>:定義斜體字
<em>:定義著重文字
—<b>:定義粗體文字
<strong>:定義加重文字
—<del>:定義帶刪除線的文字
<u>:定義帶下劃線的文字
—<br>:手工換行
—實體引用:空格 ;小于<;大于>
—<img>空標記,必須屬性:src,常用屬性:width,height
—<a href=“” target=“"></a>:超鏈接,href屬性用來設置鏈接的目標,target屬性用來設置打開目標的方式(_blank:新窗口打開,_self:本頁面打開)
—<a name=“anchorname1>錨點一</a>:錨點是文檔中某行的一個記號,用于鏈接到文檔中的某個位置
<a href=“#anchorname1”>回到錨點一</a>
2.表格
用來組織結構化的信息,由一些稱作單元格的巨型元素按照從左到右從上到下的順序排列在一起形成,表格的數據保存在單元格中。
—定義表格:<table></table>
—創建行:<tr></tr>
—創建列:<td></td>
a.<table>元素:
border:設置邊線
width/weight:設置寬高
align:設置文本是否居中
cellpadding:單元格(即td)邊框與內容之間的間距
cellspacing:單元格之間的間距
b.<tr>元素:
align/valign
c.<td>元素:
align/valign/width/height/colspan/rowspan
colspan:跨列屬性(<td colspan=“2”>aaa</td>)
rowspan:跨行屬性(<td rowspan=“2”>aaa</td>)
d.行分組
表格可以劃分為3個部分:表頭,表主體,表尾。分組的目的是為了方便對組內元素設置樣式及編程(JS)
表頭行分組:<thead></thead>
表主體行分組:<tbody></tbody>
表尾行分組:<tfoot></tfoot>
eg:
3.表單
表單用于顯示,收集信息并提交到服務器。即從瀏覽器向服務器傳輸數據的手段。
表單二要素:Form元素,表單控件
a.<form></form>:表單,表示要將此元素中所涵蓋的控件中的數據傳輸給服務器。
主要屬性:
—action:表單提交的URL
—method:指出表單數據提交的方式
—enctype:表單數據進行編碼的方式
b.表單控件:<input></input>:文本框,單選框等;其他元素: 標簽,文本域,下拉框
—文本框:<input type=“text”/>
—密碼框:<input type=“password”/>
主要屬性:
value屬性:由訪問者自由輸入任何屬性
maxlength屬性:限制輸入的字符數
readonly屬性:設置文本控件為只讀
—單選框:<input type=“radio”/>
—復選框:<input type=“checkbox”/>
主要屬性:
value:文本,當提交form時,如果選中了此單選按鈕,那么value就被發送到服務器
name:用于實現分組,一組單選框或者復選框的名稱必須相同
checked:設置選中(默認值)
—提交按鈕:<input type=“submit”/>傳送表單數據給服務端或其他程序處理
—重置按鈕:<input type=“reset”/>清空表單的內容并把所有表單控件設置為最初的默認值
—普通按鈕:<input type=“button”/>用于執行客戶端腳本
主要屬性:value:按鈕的名字
—隱藏域:<input type=“hidden”/>在表單中包含不希望用戶看見的信息
—文件選擇框:<input type=“file”/>選擇要上傳的文件
—標簽:表單中的文本,用于給控件設置顯示名稱
語法:<label for=“控件ID”>文本</label>
主要屬性:for: 設置該文本所關聯的控件ID,關聯后點擊標簽等同于點擊控件
—文本域:相當于多行文本框(大的文本框)
語法:<textarea>文本</textarea>
主要屬性:
cols:指定文本區域的列數
rows:指定文本區域的行數
readonly:只讀
—下拉選:下拉選擇內容
<select>
<option value=“1”>Java</option>
<option value=“2”>C</option>
<option value=“3”>php</option>
</select>
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。