中科英才-html PHP培訓專家http_第1頁
中科英才-html PHP培訓專家http_第2頁
中科英才-html PHP培訓專家http_第3頁
中科英才-html PHP培訓專家http_第4頁
中科英才-html PHP培訓專家http_第5頁
免費預覽已結束,剩余84頁可下載查看

下載本文檔

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

文檔簡介

英才英才-PHP培訓主講老師:大宇:PHP開發系列-LAMP實戰課程HTML網頁設計語言0、前言(互聯網開發基礎介紹)HTMLPHP基礎PHP常用函數MySQL數據庫PHP+MySQLPHP面

象實戰項目1DIV+CSSJavascript、jQuery、AJAX實戰項目2PHP高級開發PHP的MVC框架實戰項目3英才-PHP培訓課程提綱內容提綱:一、HTML基礎概念二、HTML語法1、HTML

分類2、HTML 語法詳解英才-PHP培訓3HTML簡介瀏覽HTML網頁網頁的編碼HTML網頁結構查看網頁源代碼英才-PHP培訓41、HTML簡介全稱:Hypertext

Markup

Language中文名:超文本

語言互聯網上的最主要的語言英才-PHP培訓52、瀏覽HTML網頁WEB頁面:本地HTML頁面:file:///E:/wamp/www/test.htmlIE8瀏覽器瀏覽本地HTML文件的效果Firefox瀏覽器瀏覽本地HTML文件的效果英才-PHP培訓62、瀏覽HTML網頁瀏覽器的兼容性問題找找看下面兩個瀏覽器對同一個頁面瀏覽結果有基礎不同英才-PHP培訓73、網頁的編碼<meta

charset="utf-8">本課程推薦

采用UTF-8編碼格式IE:鼠標右鍵和查看菜單都可更改編碼FireFox:只有查看菜單可更改編碼英才-PHP培訓84、HTML網頁結構——節點樹HTML節點head節點body節點xx節點yy節點zz節點其他節點其他節點其他節點其他節點其他節點英才-PHP培訓94、HTML網頁結構——節點樹用左右尖括號定義的,即

(節點)每個頁面中只能有一個<html><head><body>:描述瀏覽器所需的信息:頁面顯示的具體內容<html><head><meta

charset="UTF-8"/><title>標題</title></head><body><p>

!</p></body></html>注意:html中的空白字符(空格、換行、制表符縮進)在瀏覽時是無效的(多個空白字符僅作一個空白字符顯示)英才-PHP培訓105、查看網頁源代碼開放的互聯網:所有的HTML頁面源代碼都可以通過查看源代碼方式獲得英才-PHP培訓111.設置默認編碼:UTF-8在www 下新建demo.html文件,隨便寫點什么(最好是漢字),用瀏覽器打開看看顯示的效果,有沒有出現亂碼了?如果有亂碼,請設置編碼修正它。注意html文件存放

和瀏覽

路徑瀏覽一下你經常看的,用查看源文件的方式,看看你平時用瀏覽器看到的網頁,到底是由哪些源代碼編寫而成的。英才-PHP培訓12內容提綱:一、HTML基礎概念二、HTML語法英才-PHP培訓13HTML語 定:在左右尖括號之間的內容,即

。由屬性和內容組成。屬性:

的特征,例如顯示的顏色、樣式等內容:

的表現主體,例如文字、

等的語義:

的語法含義<html><head><meta

charset="UTF-8"

/><title>標題</title></head><body

bgcolor="red"><p>

!</p></body></html>body

的屬性body

的內容英才-PHP培訓14HTML語法中的詳細講解如下:常見的重要的頭信息

<head>列表

<ul>、<ol>、<li>主體內容

<body>table表格<table>等換行

<br>超

<a>水平線

<hr>圖像

<img>居中對齊

<center>form表單及控件

<form>等字體

<font>表單分組

<fieldset>段落

<p>格式化

<pre><blockquote>HTML注釋語法字符控制標題文字

<h1>~<h6>英才-PHP培訓15換行

<br>語義:break(換行)特征:無屬性的單一o

World!<br>This

is

HTML

Page

Test英才-PHP培訓16水平線

<hr>語義:horizontal

rule(水平尺)有屬性設置的單一o

World!<br>This

is

HTML

Page

Test<hr>o

World!<br>This

is

HTML

Page

Test英才-PHP培訓17段落

<p>語義:paragraph(段落)作用:用來將文字內容進行段落劃分的注意:段落

將不保留文字內容的格式(主要是不會保留文本的換行和空格)有屬性的對稱標簽<meta

charset="utf-8"><p>

oworld段落文字</p><p

align="center">段落文字內容align為段落內容的對齊方式,可取值:<br>left:左對齊(默認)<br>

center:居中對齊<br>right:右對齊</p>英才-PHP培訓18要區分清楚格式化

<pre>語義:preformatted(預定義格式)作用:保留文本內容的格式化定義,和<p>段落無屬性的對稱<meta

charset="utf-8"><pre>段落文字內容align屬性對于pre 無效</pre>英才-PHP培訓19注釋

<!--

...

--

>作用:用于將不需要顯示在瀏覽器中的內容注釋掉注意:被注釋掉的內容,查看源代碼的時候仍然可以看到;注釋只是告知瀏覽器不需要對其進行解析工作,并沒用從內容中進行刪除無屬性的對稱

(特殊的)<meta

charset="utf-8">原始文字正文內容<!--<p>被注釋掉的內容</p>-->其他的文字內容英才-PHP培訓20字符控制用于控制字符文字的顯示效果注意:使用時按照語義環境選擇合適的<b>粗體(blod)</b><br><strong>加重(strong)</strong><br><br><em>強調(emphasized),但顯示為斜體字</em><br><i>斜體(italic)</i><br><br><u>下劃線(underlined)</u><br><ins>

(inserted),但表現為下劃線</ins><br><br><s>刪除線(strikethrough)</s><br><del>被刪除的(deleted)</del><br>英才-PHP培訓21標題文字

<h1>~<h6>意義:header(標題)作用:用來設置文字內容中的標題,共有6種標題,依次按照標題的層級遞減,顯示效果的字體大小也遞減有屬性對稱<meta

charset="utf-8"><h1

align="left">1號標題</h1><h2

align="left">2號標題</h1><h3

align="left">3號標題</h1><h4

align="right">4號標題</h4><h5align="right">5號標題</h4><h6

align="center">6號標題</h6>英才-PHP培訓22HTML中的特殊字符特殊字符不是因為

定義時用到了一些左右尖括號等特殊字符,為了在頁面中能正常顯示這些字符,必須將其轉義為特殊字符;常見的特殊字符:<等同于<>等同于>&等同于"等同于"editplus中有專門的“特殊字符”按鈕英才-PHP培訓23HTML語法中的詳細講解如下:常見的重要的頭信息

<head>列表

<ul>、<ol>、<li>主體內容

<body>table表格<table>等換行

<br>超

<a>水平線

<hr>圖像

<img>居中對齊

<center>form表單及控件

<form>等字體

<font>表單分組

<fieldset>段落

<p>格式化

<pre><blockquote>HTML注釋語法字符控制標題文字

<h1>~<h6>英才-PHP培訓24列表

<ul>、<ol>、<li>作用:顯示列表(一系列有關聯性的項目內容)語義:ul——unordered

list(無序列表)ol——ordered

list(有序列表)li——list

item(列表項目)英文單詞含義注釋:list:列表ordered:有順序的unordered:無順序的item:項目、條目列表英才-PHP培訓25列表

使用實例:新建<ul><li>空演示文稿</li><li>從默認模板新建</li><li>本地上的模板</li><li>根據設計模板</li><li>Online模板</li></ul>新建<ol><li>空演示文稿</li><li>從默認模板新建</li><li>本地上的模板</li><li>根據設計模板</li><li>Online模板</li></ol>英才-PHP培訓26無序列表

<ul>屬性type的取值范圍:disc:實心圓(默認)circle:空心圓square:實心方塊<ul

type="circle"><li>Windows平臺</li><li>Apache服務器</li><li>Mysql數據庫</li><li>PHP語言</li></ul>英才-PHP培訓27有序列表

<ol>屬性type的取值范圍:1:序號為

數字1,2,3,4(默認)a:序號為a,b,c,dA:序號為A,B,C,Di:序號為小寫希臘字母序號i,ii,iiiI:序號為大寫希臘字母序號I,II,III<ol

type="i"><li>HTML靜態頁面</li><li>CSS美化布局</li><li>PHP語言</li></ol>英才-PHP培訓28無序與有序列表的結合嵌套應用<ul><li>PHP課程內容<ol><li>語法知識</li><li>流程控制</li><li>面

象</li></ol></li><li>MySQL數據庫</li><li>項目開發</li></ul>英才-PHP培訓29英才-PHP培訓課后練習001-1熟練掌握已學習的作業文件名:001-1.html表格系列(重點)表格的構成元素:行列單元格表頭3×3的表格英才-PHP培訓31表格系列表格系列(重點)的組成:<table>:表格外框,用來表明表格的開始與結束<tr>:行,用來設置表格的行<th>:表頭單元格,用來設置表格標題行的列單元格<td>:普通單元格,用來設置表格普通行的列單元格<table

border=1><tr><th>序號</th><th>用戶名</th><th>生日</th></tr><tr><td>1</td><td>

</td><td>1965-03-26</td></tr><tr><td>2</td><td>

</td><td>1960-06-03</td></tr></table>英才-PHP培訓32表格系列表格<table>的常用屬性屬性名屬性值說明border像素表格邊線寬度cellspacing像素/百分比單元格之間的距離cellpadding像素/百分比單元格內容與邊線的距離width像素/百分比表格寬度height像素表格高度alignleft、center、right表格對齊位置bgcolor英文(十六進制)表格背景顏色英才-PHP培訓33表格系列單元格<th>和<td>的常見屬性:屬性名屬性值說明width像素/百分比寬度height像素/百分比高度bgcolor英文/十六進制數據格的背景顏色alignleft、center、right文字水平對齊位置valigntop、middle、bottom文字垂直對齊位置英才-PHP培訓34表格系列合并單元格跨列單元格合并:colspan<table

border="1"><tr><th>序號</th><th>用戶名</th><th>生日</th></tr><tr><td>1</td><td>

</td><td>1965-03-26</td></tr><tr><td>2</td><td>

</td><td>1960-06-03</td></tr><tr><td

colspan="3">共2名用戶</td></tr></table>英才-PHP培訓35表格系列合并單元格跨行單元格合并:rowspan<table

border="1"><tr><th>序號</th><th>用戶名</th><th>生日</th><th

rowspan="3">共2名用戶</th></tr><tr><td>1</td><td>

</td><td>1965-03-26</td></tr><tr><td>2</td><td>

</td><td>1960-06-03</td></tr></table>英才-PHP培訓36表格系列表格的嵌套使用,注意:表格的嵌套一定要發生在單元格里<table

border=1><tr><td>1</td><td>2</td></tr><tr><td>3</td><td><table

border=1><tr><td>a</td><td>b</td></tr><tr><td>c</td><td>d</td></tr></table></td></tr></table>英才-PHP培訓37表格系列表格的另類使用——頁面布局英才-PHP培訓38使用table布局的方法制作如下頁面英才-PHP培訓39英才-PHP培訓課后練習001-2參考“關于 ”的首頁(htt

),用table標簽制作符合其頁面布局的html設計文檔HTML語法中的詳細講解如下:常見的重要的頭信息

<head>列表

<ul>、<ol>、<li>主體內容

<body>table表格<table>等換行

<br>超

<a>水平線

<hr>圖像

<img>居中對齊

<center>form表單及控件

<form>等字體

<font>表單分組

<fieldset>段落

<p>格式化

<pre><blockquote>HTML注釋語法字符控制標題文字

<h1>~<h6>英才-PHP培訓41超<a>語義:anchor(

)<a

href="ht

">

</a>href的組成相對與絕對地址頁內錨超

打開的目標窗口英才-PHP培訓42超

<a>1

href超

的組成基本格式:">

英才</a><a

href="特殊的href——#頁內

<ahref="#">本頁</a>英才-PHP培訓43超<a>(2)相對與絕對地址相對地址<a

href="./contact">們</a>相對于根絕對地址的連接,在項目整體移動時,不需要再做更改,推薦使用英才首頁</a><a

href="/index.php">

英才首頁</a><a

href="

">完整的連接,在項目整體移動主機時,需要更新內容英才-PHP培訓44超<a>(3)頁內錨作用:用來快速在文檔中進行位置定位的方法(特殊的

:頁面

的連接)形象的比喻——書簽的使用步驟:設置

:<a

name="php"></a>:<a

href="#php">本頁面的2.跳轉</a><a

href="other.html#php">其他頁面的跳轉</a>英才-PHP培訓45超

<a>(4)超 打開的目標窗口屬性:="_self":原窗口打開(默認)="_blank":新窗口打開="_parent":上一級窗口打開(后續框架章節介紹)="頁面名稱":指定在某個名稱的頁面窗口打開(后續框架章節介紹)實例:原窗口打開<a

href="<a

href=實例:新窗口打開連接<a

href=">

英才原窗口打開</a>="_self">

英才原窗口打開</a>="_blank">

英才新窗口打開</a>英才-PHP培訓46按下列要求完成<a>頁面的編寫到baidu首頁,在新窗口打開,

的標題設為"

首頁"到

首頁,在本窗口打開,的標題設為"谷歌首頁"到A頁面底部(文3.新建A、B兩個html文件,在B頁面中設置件末尾)的跨頁書簽錨英才-PHP培訓47圖像

<img><img

src="spring.jpg"><img

src="spring.jpg"

/>12的屬性英才-PHP培訓48用于在頁面中引入:<img

src="URL">屬性名屬性值說明srcurl路徑alt字符串注釋width像素/百分比寬度height像素/百分比高度border數字邊框(

時也用到)alignleft、right、top、middle、bottom對齊位置英才-PHP培訓49用作為超

的內容"><img

src="spring.jpg"

width="100px"></a>作為超

的內容時,默認會自動給

加上border<a

href="注意:邊框無邊框的:<a

href="

"><img

src="spring.jpg"

width="100px"

border="0"></a>可以通過border屬性將img

的邊框設置為0英才-PHP培訓50HTML語法中的詳細講解如下:常見的重要的頭信息

<head>排列列表 <ul>、<ol>、<li>主體內容

<body>table表格換行

<br>超水平線

<hr>圖像居中對齊

<center>form表單及控件字體

<font>表單分組fieldset段落

<p>格式化

<pre><blockquote>HTML注釋語法字符控制標題文字

<h1>~<h6>英才-PHP培訓51表單 ——form1、表單簡介2、表單的屬性3、表單控件文本框、

框多選項、單選項下拉框文字區域隱藏框按鈕、圖像按鈕文件上傳英才-PHP培訓52form表單是用戶輸入數據,與網絡程序進行交互的特定區域。語法:<form><input><input></form>英才-PHP培訓53表單語法結構:<form

method="..."

action="..."

><input><select><textarea></form>表單屬性功能描述:method:表單提交時

的方法(POST或GET)action:表單信息提交的傳輸目標英才-PHP培訓54表單的輸入控件是用戶輸入數據的元素;表單輸入控件常被稱為“表單元素”;注意:表單本身在瀏覽器中并不可見,用戶可見的都是控件;輸入類型通常是由控件的類型——type屬性定義的常見的控件類型如下:文本框、

框多選項、單選項下拉框文字區域隱藏框按鈕、圖像按鈕文件上傳英才-PHP培訓55文本框:type="text"用于輸入較短的字符串用戶名<input

type="text"name="username">用戶名<input

type="text"name="username"value="無名氏"size="10"maxlength="20"readonly>文本框的屬性設置:value:文本框內的輸入值size:文本框的寬度大小

maxlength:文本框可輸入的最大文本長度

readonly:只讀的文本框(無法輸入)英才-PHP培訓56框:type="password"用于輸入 字符串,在瀏覽器中以實心圓顯示已輸入的字符內容屬性類似文本框用戶 <input

type="password"

name="passwd">用戶 <input

type="password"

name="passwd"

value="123"

size="10"maxlength="20"

readonly>英才-PHP培訓57請編寫給定效果的用戶

表單頁面——register.html該表單提交給result.php處理數據英才-PHP培訓58多選項框:type="checkbox"多個選項可以選擇多個:<inputtype="checkbox"name="fav[]"value="1">讀書;<inputtype="checkbox"name="fav[]"value="2">體育;注意:這里的name相同,而值不同,且為數組:<input

type="checkbox"name="fav[]"value="1">讀書;<input

type="checkbox"name="fav[]"value="2"checked="true">體育;checked:設置選中狀態的屬性英才-PHP培訓59單選項框:type="radio"多個選項只能選擇一個:<input

type="radio"name="sex"value="m">男;<input

type="radio"name="sex"value="f"checked="checked">女;注意:這里的name相同,而值不同,不需要設置為數組了英才-PHP培訓60的選項表單頁面——options.html請編寫該表單據英才-PHP培訓61下拉框:也常稱為下拉菜單獨立的

(非<input>

)用來選擇在設定好范圍內的數據語法:<select><option></option></select>選項用option

設定城市:<select><option>合肥</option><option>

</option></select>英才-PHP培訓62下拉框的屬性設置:城市:<select

name="city"><option

value="hf">合肥</option><option

value="sh">

</option></select>name:下拉框控件名

value:選項的值</option>城市:<select

name="city"><option

value="hf">合肥</option><option

value="sh"

selected=“selected”></select>selected:被選中的項目英才-PHP培訓63可設置多選的下拉框城市:<select

name="city[

]"size="5"

multiple

><option

value="hf">合肥</option><option

value="sh">

</option><option

value="bj">

</option><option

value="nj">

</option></select>size:下拉框的大小

multiple:下拉框為多選英才-PHP培訓64下拉框的項目分組:城市:<select

name="city"><option

value="hf">合肥</option><optgroup

label="直轄市"></option></option></option><option

value="sh"><option

value="bj"><option

value="nj"></optgroup><optgroup

label="

臺"></option><option

value="sh"><option

value="bj"></option></option><option

value="nj"></optgroup></select>optgroup:選項分組

label:分組名(不可被選中)英才-PHP培訓65請編寫 的選擇表單頁面——select.html該表單提交給result.php處理數據下拉菜單的數據參考內容:英才-PHP培訓66文字區域:用來輸入大段字符串內容獨立的

:<textarea></textarea>文字內容<textarea></textarea>文字內容<textarea

name="cont"cols="50"rows="5"></textarea>文字區域屬性設置:name:控件名稱

cols:文字區域的寬度(列數)

rows:文字區域的高度(行數)英才-PHP培訓67隱藏框:type="hidden"用于設置隱藏的數據內容,在瀏覽器中不顯示,但控件實際仍然存在;因為隱藏,所以用戶無法輸入或修改數據。常用來在表單中跟隨其他輸入控件一起提交的敏感數據。用戶

:<input

type="hidden"

name="userID"

value="123">英才-PHP培訓68按鈕控制了表單數據的發送、重置等動作按鈕根據類型分為:(6.1)提交按鈕(6.2)重置按鈕(6.3)普通按鈕(6.4)圖像按鈕英才-PHP培訓69提交按鈕:type="submit"點擊提交按鈕后,用來發送form表單數據,頁面將發生跳轉<input

type="submit"><input

type="submit"value="發送表單">value:按鈕文字(默認不設置為“提交查詢內容”)英才-PHP培訓70重置按鈕:type="reset"點擊重置按鈕后將會將form表單內的控件內容恢復默認狀態<input

type="reset"><input

type="reset"value="重填">value:按鈕文字(默認不設置為"重置")英才-PHP培訓71普通按鈕:type="button"點擊普通按鈕將不會激發任何動作,通常與Javascript程序配合使用(詳見JS單元課程)<input

type="button"value="激發動作">value:按鈕文字(必須設置)英才-PHP培訓72圖像按鈕:type="image"將

設為提交按鈕(而不是普通按鈕)<input

type="image"

src="buy.png">src:

的來源英才-PHP培訓73上傳

:type="file"上傳本地文件到服務器端<form

enctype="multipart/form-data"><input

type="file"

name="pic"></form>name:上傳控件的名稱,必設置(程序需要)英才-PHP培訓74請編寫

的產品 的表單頁面——products.html用隱藏表單設置一個發布日期(

)該表單提交給result.php處理數據注意這里的html代碼顯示英才-PHP培訓75表單分組——fieldset、legend常用來將表單分組顯示<form

method="post"

action="result.php"><fieldset><legend>個人信息</legend>...

...</fieldset><fieldset><legend>職務部門</legend>...

...</fieldset><input

type="submit"

value="保存"></form>英才-PHP培訓76用表單分組 編寫 頁面的htm代碼該表單提交給result.php處理數據英才-PHP培訓77請編寫如圖效果的form表單(配合表格

)表單提交給result.php處理數據英才-PHP培訓78框架集合<frameset>、框架<frame><frameset>的作用:在一個瀏覽器窗口中,同時顯示多個網頁,類似畫中畫<frame>的作用:每個框架里設定一個網頁,這些網頁相互獨立語法:(1)框架集合的結構(2)嵌套多框架的設置(3)多框架與超(4)內嵌框架的設置<frameset><frame><frame></frameset>英才-PHP培訓79框架集內有框架詳細語法:<frameset

rows="..."

cols="..."

[framespacing="..."]

[frameborder="...

"]><frame

src="..."

[name="..."]><frame

src="..."

[name="..."]>...

...</frameset><frameset>的常見屬性<frameset

cols="200,*"><frame

src="frame1.html"><frame

src="frame2.html"></frameset><noframes><body>不支持框架的瀏覽器</body></noframes>屬性名屬性值說明rows像素/百分比橫排的多窗框設置cols像素/百分比豎排的多窗框設置framespacing像素/百分比頁面與頁面的邊距frameborder1或0,yes或no框架的邊框英才-PHP培訓80frame

的屬

溫馨提示

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

評論

0/150

提交評論