web前端開發(fā)課件第2章 HTML-網頁骨架結構_第1頁
web前端開發(fā)課件第2章 HTML-網頁骨架結構_第2頁
web前端開發(fā)課件第2章 HTML-網頁骨架結構_第3頁
web前端開發(fā)課件第2章 HTML-網頁骨架結構_第4頁
web前端開發(fā)課件第2章 HTML-網頁骨架結構_第5頁
已閱讀5頁，還剩31頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第2章HTML-網頁骨架結構列表標記超鏈接標記HTML頭部標記Web前端開發(fā)基礎主體標記1234ContentsHTML基礎文字與分區(qū)標記56789多媒體標記表格標記表單標記2.1HTML基礎HTML(HypertextMarkupLanguage，超文本標記語言)，是一種使用文本符號表示，由瀏覽器解釋執(zhí)行的標記語言。使用HTML語言編寫的文件稱為HTML文件，也叫網頁文件，擴展名為.html或.htm。HTML文件是一種文本文件，可以使用記事本，SublimeText，Editplus等文本編輯器編輯，或者使用可視化編輯環(huán)境來編寫，如Dreamweaver。HTML文件通過瀏覽器解釋執(zhí)行，任何一臺計算機，只要安裝了瀏覽器就可以執(zhí)行HTML文件。HTML文件結構<html> <head> <title>網頁基本結構</title> </head> <body> <palign=”center”>HTML網頁</p> </body></html>4說明www.islide.cc5HTML標記說明標記是由一對尖括號和標記名組成的，大多數標記都包括開始標記和結束標記HTML標記和屬性不區(qū)分大小寫，但是為了書寫標準，最好使用小寫形式書寫文檔的根元素必須是html，并且必須為它指明命名空間屬性值必須用引號括起來元素必須正確嵌套標記屬性可以設置文本格式，如對齊方式、字體開始標記和結束標記之間的內容是HTML標記所設置的內容標記必須成對使用XHTML標準www.islide.cc6"/TR/xhtml1/DTD/xhtml1-strict.dtd">嚴格型"/TR/xhtml1/DTD/xhtml1-transitional.dtd">過渡型"/TR/xhtml1/DTD/xhtml1-frameset.dtd">框架XHTMLXHTML是HTML向XML過渡的一種技術。它有嚴格的語法規(guī)則：文檔開始必須通過DOCTYPE聲明，DOCTYPE主要作用是說明html的版本。XHTML提供了三種類型的DOCTYPE，過渡類型、嚴格類型和框架類型。列表標記超鏈接標記HTML頭部標記Web前端開發(fā)基礎主體標記1234ContentsHTML基礎文字與分區(qū)標記56789多媒體標記表格標記表單標記xmlns屬性www.islide.cc8xmlns屬性可以在文檔中定義一個或多個可供選擇的命名空間。該屬性可以放置在文檔內任何元素的開始標簽中。該屬性的值類似于URL，它定義了一個命名空間，瀏覽器會將此命名空間用于該屬性所在元素內的所有內容。如果使用符合XML規(guī)范的XHTML文檔，則應該在文檔中的<html>標簽中至少使用一個xmlns屬性，以指定整個文檔所使用的主要命名空間：<htmlxmlns="/1999/xhtml">頭部標簽的子標簽9為頁面上的所有鏈接設置默認地址或默認目標<base>標記定義當前文檔與外部資源之間的關系<link>標記用來設置網頁的標題<title>標記描述網頁相關的信息元標記定義客戶端腳本<script>標記<meta>元標記100102030504語法：<metaname=”keywords”content=”keywords1…,keywordsn”>keywords表示關鍵字，多個關鍵字之間用英文逗號分割。設定網頁關鍵字<metahttp-equiv=”refresh”content=”x;url=weburl”>網頁自動跳轉語法：<metaname=”discription”content=”somecontents”>設置網頁描述信息<metahttp-equiv=”Content-Type”content=”text/html;charset=utf-8”>設置網頁字符集<metahttp-equiv=”refresh”content=”x”>設定網頁自動刷新時間06<title>標記www.islide.cc11

寫法

<title>網頁標題</title>title<title>標記嵌套在<head>中，用來設置網頁的標題，這個標題將顯示在瀏覽器標題欄中。在所有HTML文檔中<title>標記是必需的，它可以提供頁面被添加到收藏夾時顯示的標題，也可以提供搜索引擎顯示結果的頁面標題。<base>標記www.islide.cc12

寫法

<basehref="/"/><basetarget="_blank"/>base<base>標簽為頁面上的所有鏈接設置默認地址或默認目標（target）。<link>標記www.islide.cc13

寫法

<linkrel="stylesheet"type="text/css"href="style.css"/>link<link>標簽定義當前文檔與外部資源之間的關系，最典型的應用為連接外部樣式表。<script>標記www.islide.cc14

寫法

<scripttype="text/javascript">document.write("Hellojavascript!");</script>script<script>標簽用來定義客戶端腳本，比如JavaScript。<style>標記www.islide.cc15

寫法

<styletype="text/css">p{color:red}</style>style<style>標簽可以為HTML文檔定義樣式（格式）。列表標記超鏈接標記HTML頭部標記Web前端開發(fā)基礎主體標記1234ContentsHTML基礎文字與分區(qū)標記56789多媒體標記表格標記表單標記主體標記<body><body>標簽表示網頁的主體內容，其中包含網頁中的所有內容，比如文本、超鏈接、多媒體元素、表格和列表等。<body>標簽可用的屬性有：bgcolor、background、leftmargin、rightmargin、topmargin、bottommargin、text、link、vlink、alink?！纠?.6】body標簽的應用列表標記超鏈接標記HTML頭部標記Web前端開發(fā)基礎主體標記1234ContentsHTML基礎文字與分區(qū)標記56789多媒體標記表格標記表單標記2.4文字與分區(qū)標記19用來設置文字的字體，大小，顏色。語法：<fontsize=”字號”color=”顏色”face=”字體”>文字</font><font>標記hn標記中的n可以取1-6之間的值，n值越大，標題文字越小?；菊Z法：<hn>標題文字</hn>屬性：align表示對齊方式，可選left，right，center值，分別表示左對齊，右對齊，居中對齊。<hn>標題標記段落標記<p>換行標記<br/>預格式化標記<pre>居中標記<center>縮排標記<blockquote>水平線標記<hr>分區(qū)標記文字標記2019網頁中的文本形式：(1)普通字符，可以直接錄入。(2)空格，使用“ ”表示一個半角空格。(3)特殊字符，如雙引號，貨幣符號，版權信息。特殊符號是在鍵盤上沒有的字符，可以通過輸入對應的命名實體進行錄入。列表標記超鏈接標記HTML頭部標記Web前端開發(fā)基礎主體標記1234ContentsHTML基礎文字與分區(qū)標記56789多媒體標記表格標記表單標記<a>超鏈接標記www.islide.cc21

語法

<ahref=”target_url”target=”_blank”>超鏈接元素</a><a>href屬性表示鏈接目的地址。target_url是目標文件的路徑或者網址，此路徑可以用絕對路徑或相對路徑表示。target屬性定義了被鏈接的文檔將在哪里打開，_blank表示打開一個新的瀏覽器窗口。列表標記超鏈接標記HTML頭部標記Web前端開發(fā)基礎主體標記1234ContentsHTML基礎文字與分區(qū)標記56789多媒體標記表格標記表單標記列表標記www.islide.cc23

語法

<ul><li>列表項1</li><li>列表項2</li></ul><ol><li>列表項1</li><li>列表項2</li></ol>列表HTML支持有序列表和無序列表。無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。有序列表也是一列項目，列表項目使用數字進行標記。無序列表始于<ul>（unorderlist）標簽，在無序列表中嵌套著多個列表項，每個列表項使用<li>表示。列表標記超鏈接標記HTML頭部標記Web前端開發(fā)基礎主體標記1234ContentsHTML基礎文字與分區(qū)標記56789多媒體標記表格標記表單標記多媒體標記25語法：<bgsoundsrc=”sound_url”/><bgsound>標記語法：<embedsrc=”file_url”/><embed>標記<objectclassid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628"id="Slider1"width="100"height="50"><paramname="BorderStyle"value="1"/><paramname="MousePointer"value="0"/><paramname="Enabled"value="1"/><paramname="Min"value="0"/><paramname="Max"value="10"/></object><object>標記<imgsrc=”img_url.jpg”alt=”image說明”/>src屬性定義了圖像文件的地址。該地址可以是絕對路徑或相對路徑。alt屬性表示替換文字，當瀏覽器無法讀取圖像時用來替代圖像的文字。<img>圖像標記語法：<bodybackground=”img_url.jpg”/>說明：當插入的圖像尺寸小于網頁的大小，圖像默認水平，垂直方向重復顯示。background（屬性）語法：<bodybgcolor=”color”/>bgcolor（屬性）列表標記超鏈接標記HTML頭部標記Web前端開發(fā)基礎主體標記1234ContentsHTML基礎文字與分區(qū)標記56789多媒體標記表格標記表單標記2.8表格標記27表格是一種結構性對象，包括行、列、單元格。表格使用<table></table>表示表格標題使用<caption></caption>表示行用<tr></tr>表示單元格用<td></td>表示表格常用標記widthheightalignvalignborderbgcolorbackgroundcellspacingcellpadding表格常用屬性在表格的單元格中插入文字，圖像，音視頻資源，通過表格布局使元素整齊排列。表格的嵌套布局。表格布局表格2019網頁中可以使用表格制作數據表格，如制作成績表，工資表等。在網頁中表格更重要的用途是排版頁面內容?？梢詫⒕W頁元素，如段落文字、圖像、視頻等資源放置在表格的單元格中，使網頁中的各個部分整齊而有條理。列表標記超鏈接標記HTML頭部標記Web前端開發(fā)基礎主體標記1234ContentsHTML基礎文字與分區(qū)標記56789多媒體標記表格標記表單標記2.9表單標記www.islide.cc29<form>表單域標記<input>設置表單輸入元素<select>下拉列表標記<textarea>文本域標記表單是一種特殊的網頁容器標簽，在這個容器中可以插入各種表單交互組件，如文本框，密碼框，單選按鈕，從而獲取用戶輸入的信息。利用表單可以將網頁中的數據通過特定的方式進行提交。提交后，由服務器端腳本對信息進行處理。表單可以與jsp或者asp等編程語言結合，同時也可以與前臺的javascript合作，通過腳本來控制用戶輸入的信息的合法性。表單可以收集瀏覽者提交的信息或者實現(xiàn)搜索等功能。網站上的在線注冊，登錄等功能都是通過表單實現(xiàn)的。要實現(xiàn)表單功能，必須包含兩部分：1.頁面上的表單元素。2.服務器端用于處理客戶端填寫信息的程序。<form>標記屬性www.islide.cc3001020304nameactionmethodonsubmit表單域名稱name鏈接跳轉action表單的跳轉方法method指定處理表單的腳本程序onsubmit<input>標記31文本框密碼框單選按鈕復選框提交按鈕文本框提交按鈕復選框單選按鈕密碼框密碼框<inputtype=”password”name=”pw_name”id=”pwd_id”/>單選按鈕<inputtype=”radio”name=”radiogroup_name”value=”radiovalue”checked=”checked”/>文本框語法：<inputtype=”text”name=”text_name”id=”text_id”/>復選框<inputtype=”checkbox”name=”checkgroup_name”value=”checkvalue”checked=”checked”/>提交按鈕<inputtype=”submit”name=”submit_name”value=”submittext”/><input>標記32重置按鈕普通按鈕文件域隱藏域重置按鈕隱藏域文件域普通按鈕普通按鈕<inputtype=”button”name=”button_name”value=”buttontext”onclick=”javascript_function”/>文件域<inputtype=”file”name=”file_name”/>重置按鈕語法：<inputtype=”reset”name=”reset_name”value=”resettext”/>隱藏域<inputtype=”hidden”name=”hidden_name”value=”hidden_value”/><select>下拉列表標記www.islide.cc33

語法

<selectname=”selectname”><optionvalue=”value1”selected=”selected”>1</option><option

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論