溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

WEB HTML

發(fā)布時間:2020-07-19 20:59:26 來源:網(wǎng)絡(luò) 閱讀:475 作者:Turnsole1 欄目:web開發(fā)

一.Web基礎(chǔ)作用即如何制作網(wǎng)頁介紹

WEB HTML

1.HTML(靜態(tài)頁面)

用來勾勒出網(wǎng)頁的結(jié)構(gòu)和內(nèi)容

2.CSS(靜態(tài)頁面)

用來給網(wǎng)頁化妝,美化頁面

3.JavaScript(重點)

用來讓網(wǎng)頁呈現(xiàn)出動態(tài)的數(shù)據(jù)和效果

web三要素:HTTP協(xié)議,瀏覽器,服務(wù)器

二.XML和HTML的關(guān)系

1.XML

  a.XML時可擴展標(biāo)記語言,用來存儲或傳輸數(shù)據(jù):

     --標(biāo)簽可擴展

     --屬性可擴展

     --元素之間的嵌套關(guān)系可擴展

  b.標(biāo)簽

     雙標(biāo)簽:<標(biāo)簽名></標(biāo)簽名>

     單標(biāo)簽:<標(biāo)簽名/>

     關(guān)系:<標(biāo)簽名/>=<標(biāo)簽名></標(biāo)簽名>

  c.屬性

     --屬性必須定義在開始標(biāo)簽上

     --屬性名=“屬性值"

     --屬性名不能重復(fù),且無序

  d.元素

     <標(biāo)簽名 屬性=“屬性值”>內(nèi)容</標(biāo)簽名>

2.HTML

  a.HTML是超文本標(biāo)記語言,用來顯示數(shù)據(jù)

  b.實際HTML是語法固定的XML

     --標(biāo)簽固定

     --屬性固定

     —元素嵌套關(guān)系固定

  c.學(xué)習(xí)HTML就是學(xué)習(xí)這些固定的標(biāo)簽,屬性,嵌套關(guān)系

  d.HTML基本結(jié)構(gòu)

     <!—html是唯一的根-->

     <html>

          <head>

               <!—設(shè)置文檔標(biāo)題,編碼,引入的資源-->

          </head>

          <body>

               <!—頁面上要呈現(xiàn)的內(nèi)容-->

          </body>

     </html>

三.HTML解決亂碼問題

  1.創(chuàng)建HTML時需要將文件編碼設(shè)置為utf-8

  2.需要在<head>元素下,使用<meta>元素設(shè)置頁面內(nèi)容編碼 

四.<!DCOTYPE>定義html版本

五.基本語法:

  1.元素介紹:

     分區(qū)元素用于為元素分組,常用于頁面布局:

     a.塊分區(qū)元素:<div></div>:div用來勾勒出頁面的布局,便于開發(fā)頁面

          塊級元素:默認(rèn)情況下塊級元素會獨占一行;占據(jù)一個矩形區(qū)域,即元素前后都會自動換行:<p>, <div>, <hn>, <ol>, <ul>

     b.行內(nèi)分區(qū)元素:<span></span>

          行內(nèi)元素:不會換行,可以和其他行內(nèi)元素位于同一行即橫向布局;不會占據(jù)矩形區(qū)域,他只用來修飾段落中的幾個字:<span>, <a>, <u>, <i>

WEB HTML

1)塊分區(qū)元素

<ol></ol>:有序列表order list

<ul></ul>:無序列表 unorder list

<li></li>:列表項list item,用在ol和ul里面

2)行內(nèi)分區(qū)元素

     —<i>:定義斜體字

        <em>:定義著重文字

     —<b>:定義粗體文字

        <strong>:定義加重文字

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

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

     —<br>:手工換行

     —實體引用:空格&nbsp;小于&lt;大于&gt

     —<img>空標(biāo)記,必須屬性:src,常用屬性:width,height

     —<a href=“” target=“"></a>:超鏈接,href屬性用來設(shè)置鏈接的目標(biāo),target屬性用來設(shè)置打開目標(biāo)的方式(_blank:新窗口打開,_self:本頁面打開)

     —<a name=“anchorname1>錨點一</a>:錨點是文檔中某行的一個記號,用于鏈接到文檔中的某個位置

         <a href=“#anchorname1”>回到錨點一</a>

  

2.表格

     用來組織結(jié)構(gòu)化的信息,由一些稱作單元格的巨型元素按照從左到右從上到下的順序排列在一起形成,表格的數(shù)據(jù)保存在單元格中。

     —定義表格:<table></table>

     —創(chuàng)建行:<tr></tr>

     —創(chuàng)建列:<td></td>

WEB HTML

a.<table>元素:

     border:設(shè)置邊線

     width/weight:設(shè)置寬高

     align:設(shè)置文本是否居中

     cellpadding:單元格(即td)邊框與內(nèi)容之間的間距

     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個部分:表頭,表主體,表尾。分組的目的是為了方便對組內(nèi)元素設(shè)置樣式及編程(JS)

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

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

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

WEB HTML

eg:

WEB HTML

3.表單

     表單用于顯示,收集信息并提交到服務(wù)器。即從瀏覽器向服務(wù)器傳輸數(shù)據(jù)的手段。

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

WEB HTML

     a.<form></form>:表單,表示要將此元素中所涵蓋的控件中的數(shù)據(jù)傳輸給服務(wù)器。

          主要屬性:

          —action:表單提交的URL

          —method:指出表單數(shù)據(jù)提交的方式

          —enctype:表單數(shù)據(jù)進行編碼的方式

     b.表單控件:<input></input>:文本框,單選框等;其他元素: 標(biāo)簽,文本域,下拉框

          —文本框:<input type=“text”/>

          —密碼框:<input type=“password”/>

               主要屬性:

                    value屬性:由訪問者自由輸入任何屬性

                    maxlength屬性:限制輸入的字符數(shù)

                    readonly屬性:設(shè)置文本控件為只讀

          —單選框:<input type=“radio”/>

          —復(fù)選框:<input type=“checkbox”/>

               主要屬性:

                    value:文本,當(dāng)提交form時,如果選中了此單選按鈕,那么value就被發(fā)送到服務(wù)器

                    name:用于實現(xiàn)分組,一組單選框或者復(fù)選框的名稱必須相同

                    checked:設(shè)置選中(默認(rèn)值)

          —提交按鈕:<input type=“submit”/>傳送表單數(shù)據(jù)給服務(wù)端或其他程序處理

          —重置按鈕:<input type=“reset”/>清空表單的內(nèi)容并把所有表單控件設(shè)置為最初的默認(rèn)值

          —普通按鈕:<input type=“button”/>用于執(zhí)行客戶端腳本

               主要屬性:value:按鈕的名字

          —隱藏域:<input type=“hidden”/>在表單中包含不希望用戶看見的信息

          —文件選擇框:<input type=“file”/>選擇要上傳的文件

          —標(biāo)簽:表單中的文本,用于給控件設(shè)置顯示名稱

               語法:<label for=“控件ID”>文本</label>

               主要屬性:for: 設(shè)置該文本所關(guān)聯(lián)的控件ID,關(guān)聯(lián)后點擊標(biāo)簽等同于點擊控件

          —文本域:相當(dāng)于多行文本框(大的文本框)

               語法:<textarea>文本</textarea>

               主要屬性:    

                    cols:指定文本區(qū)域的列數(shù)

                    rows:指定文本區(qū)域的行數(shù)

                    readonly:只讀

          —下拉選:下拉選擇內(nèi)容

               <select>

                    <option value=“1”>Java</option>

                    <option value=“2”>C</option>

                    <option value=“3”>php</option>

               </select>


向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI