天天看點

WEB HTML

一.Web基礎作用即如何制作網頁介紹

WEB HTML

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>

WEB HTML

1)塊分區元素

<ol></ol>:有序清單order list

<ul></ul>:無序清單 unorder list

<li></li>:清單項list item,用在ol和ul裡面

2)行内分區元素

     —<i>:定義斜體字

        <em>:定義着重文字

     —<b>:定義粗體文字

        <strong>:定義加重文字

     —<del>:定義帶删除線的文字

         <u>:定義帶下劃線的文字

     —<br>:手工換行

     —實體引用:空格 小于<大于&gt

     —<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>

WEB HTML

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>)

WEB HTML

d.行分組

     表格可以劃分為3個部分:表頭,表主體,表尾。分組的目的是為了友善對組内元素設定樣式及程式設計(JS)

     表頭行分組:<thead></thead>

     表主體行分組:<tbody></tbody>

     表尾行分組:<tfoot></tfoot>

WEB HTML

eg:

WEB HTML

3.表單

     表單用于顯示,收集資訊并送出到伺服器。即從浏覽器向伺服器傳輸資料的手段。

     表單二要素:Form元素,表單控件

WEB HTML

     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>