Java Web應用開發 從入門到精通 課件 2 HTML基礎

第二章:超文本標記語言HTML教學目標理解HTML的基本原理掌握HTML常用標簽的用法掌握HTML的常用布局方法掌握HTML表單及常用控件的用法掌握使用Dreamweaver制作HTML網頁的方法12表單4AgendaHTML基礎HTML常用標簽布局3綜合案例51HTML基礎1.

HTML基礎HTML是Hyper

Text

Markup

Language（超文本標記語言）的縮寫一種針對瀏覽器的典型標記語言HTML語言的一個重要特點就是能夠把文本、圖像、動畫、音樂等多種媒體相結合，設計出圖文并茂、動靜結合的頁面。HTML文件的后綴名是.htm或者是.html，HTML文件不僅包含文本內容，還包含一些Tag（即標記）。網頁聲明:html5HTML的根標簽文件頭區域含元信息，標題，CSS和JS等正文區域用戶可以看到的部分標簽通常成對出現<tag></tag>HTML屬性屬性可視為對HTML標簽所對應元素特點的一個定義。屬性一般置于標簽內部，以“屬性名稱/屬性值”對的形式出現。屬性又分全局屬性和特有屬性兩類。全局屬性即所有HTML標簽都有的屬性，一般用于規定HTML元素的標識、引用樣式名、tab鍵次序等HTML屬性全局屬性即所有HTML標簽都有的屬性，一般用于規定HTML元素的標識、引用樣式名、tab鍵次序等特有屬性，則是一個HTML標簽專有的屬性，這類屬性可以改變該HTML元素的默認特點。如<h1align=”center”>MyFirstHeading</h1>中，“align”屬性能夠設置文字的對齊方式，其值為“center”則表示居中對齊，應用該屬性后，<h1>標簽內的文字則會居中對齊2HTML常用標簽文字--<font>

font

-標簽名，可以對文字的字體、字號、字體顏色等進行設置，常用屬性如下。實例粗體斜體粗體和斜體通過以下標簽來實現圖片--<img>

img

-標簽名，可以在網頁中插入圖片Dreamweaver圖片按鈕圖片路徑絕對路徑：圖片所在的絕對位置遠程：/img/PC_7ac6a6d319ba4ae29b38e5e4280e9122.png

本地：file:///F|/Picture1.jpg相對路徑：相對于該頁面，圖片所在位置。在頁面img.html中插入圖片img1.JPG相對路徑為：img/img1.JPG<imgsrc="img/img1.JPG"width="336"height="361"alt=""/>超鏈接-<a>

a-標簽名，生成一個可以跳轉的鏈接鏈接同樣存在相對路徑和絕對路徑Dreamweaver中設置鏈接在Dreamweaver中，選中需要加鏈接的文本后，在屬性面板中輸入地址字符部分字符需要用HTML代碼來顯示3布局表格-<table>最簡單的網頁布局方法

<table></table>

<tr></tr>--行標簽<td></td>--單元格標簽.

<table>的屬性<tr>的屬性<td>的屬性表格示例單元格間距和間隔在Dreamweaver中操作表格在面板上點擊表格圖標浮動式框架-<iframe>浮動式框架是一種容器類組件，它能夠將一個HTML頁面完整的嵌入至另一個HTML頁面中。浮動式框架的標簽為<iframe>

浮動式框架示例層--<div>層在網頁中是一種比較抽象的概念，它也是一種容器組件。任何內容都可以置于層內，再通過層的屬性和位置的改變來控制這些內容的行為。框架集--<frameset>框架集是一種特殊的布局工具，它可以將瀏覽器窗口劃分成若干個小窗口，每個小窗口顯示一個完整的網頁

框架集源碼自DreamweaverCC2017開始，這一功能不再提供

4HTML表單插入一個表單表單在HTML中是一片隱藏區域其中包含的元素稱為控件如文本框，文本區域，按鈕等表單的主要作用是用于提交數據表單標簽和屬性<form>

</form>

method

--

post,

get

action

–處理表單請求的程序

target

--提交方式，和鏈接的target屬性類似各類控件一般置于<form>和</form>之間標簽:

<input

type=‘text’>屬性:

name,

id,

size,

maxlength,

value文本框標簽:

<input

type=‘password’>屬性:

name,

id,

size,

maxlength,

value密碼框標簽:

<input

type=‘hidden’>屬性:

name,

id,

size,

maxlength,

value一種頁面上看不見的控件隱藏控件標簽:

<input

type=‘radio’>屬性:

name,

id,

checked,

value單選框Name屬性要相同時，才有排他性標簽:

<input

type=‘checkbox’>屬性:

name,

id,

checked,

value復選框標簽:

<textarea></textarea>屬性:

name,

id,

row,

col換行:換行模式soft

–包含換行符Hard

–不含換行符文本域標簽:

<select><option

></option></select>屬性:

name,

id,

valuesize,selected,

multiple

選擇框標簽:<input

type=‘{button,

submit,

reset}’

>屬性:

name,

id,

value按鈕用于提交表單數據按鈕<form

action=’xxx’