確定風格、功能(論壇、留言板、付款、使用者登入等)。
美工製作網頁效果圖(首頁、清單頁、內容頁)。
製作人切圖排版,排成網頁形式。
後台程式開始寫入程式。
前台與後台結合。
注意:註解只是為了以後維護用。
<ul><li>内容</li> <li>内容</li> <li>内容</li></ul>
l Type:項目符號的類型,取值:disc(小黑點)、circle(圓圈)、square(實心方塊)
<ol> <li>内容</li> <li>内容</li> <li>内容</li></ol>
< ;ol>或的常用屬性
Type:編號類型,取值:1、a、A、i、I
# Start:從第幾個開始編號
<marquee> 内容….. </marquee>
常用屬性
Direction:捲動方向,取值:up、down、left、right
# Width:捲動寬度
# Height:捲動高度
# BgColor:捲動背景顏色
ScrollAmount:捲動步長值
# ScrollDelay:兩步驟之間的停留值
Loop:循環捲動次數
圖片標籤
常用屬性:
Src:圖片的路徑。 Align:left、center、right。
(可達到圖文混排效果)
# Hspace:圖片與文字左右間距。
Vspace:圖片與文字上下間距。
值」> ;內容
#常用屬性:
Href:目標文件地址URL。 Target:開啟方式。 _blank:新視窗、_self:本視窗、_parent:上個視窗開啟、top:最頂層視窗開啟。
Name:定義描點名稱。
mailto
# #空白連結。
16進位表示#FF0000(紅)、#00FF00(綠色)、#0000FF(藍)跳到錨點(記號):
###### 語法:內容…..##############################標記## ####作用:提供網頁的元資訊。指定網頁的搜尋關鍵字。 ######標記有兩個屬性:http-equiv和name#######1、 http-equiv屬性############ 功能:模擬http協議文件頭訊息,告訴瀏覽器怎麼開啟網頁。 ############ http-equiv屬性一般與content屬性搭配使用。 Content屬性指定資訊的詳細屬性############### 設定網頁的字元集: ############################################################################# ########## 網頁自動刷新:;###############################2、 name屬性######設定網頁的搜尋關鍵字、版權資訊、作者等。 ###(1) 设置网页搜索关键词
(2) 设置网页描述信息
l 所有标记和属性全部小写
l 单边标记必须关闭。如:
-----
l 所有的属性值都必须加引号。
l 所有属性都必须有值。如:
l 标机之间要顺序嵌套,外层套内层。
l Xhtml网页必须有DTD文档类型定义代码
DTD文档类型定义
三大类型:
(1)结构:(一行四列)
<table border=“1”> <tr><td> </td><td> </td><td> </td><td>< /td> </tr></table>
(2)border属性:
Width:宽度
Height:高度
Border:边框
Bordercolor:边框颜色
Bgcolor:表格背景色
Background:背景图片
Cellpadding:单元格与内容距离
Cellspacing:单元格与单元格距离
Rules:合并边框线,取值:all
(3) tr属性:
bgcolor
align
height:水平:left、center、right
valign:垂直:top、middle、bpttom
(4) td属性:
colspan:合并单元格(左右)
rowspan:合并单元格(上下)
background
width
height
bgcolor
align
valign
(1)结构:
<form name=”form1” method=“get” action=“login.php”> 用户名:<input type=”text” name=”username”/> 密码:<input type=”password” name=”userpwd”/> <input type=”submit” value=”提交表单”/></form>
(2)标记属性----块元素
name
method:提交方式 get、post
action:指定表单的处理程序,一般是PHP文件
enctype:指定表单数据的编码方式。只能在method=post情况下。
application/x-www-form-urldecoded //默认加密方式
multipart/form-data //上传文件,值是他自己
(3)get和post方法
Get提交方式:将表单数据追加到action指定的处理程序的后面,然后向服务器发出请求。不安全
如果某个表单元素,不想往服务器传递数据,那么,name可以不用写。
POST提交方式:POST提交的数据相对安全,可以提交海量数据,可以上传附件。
语法格式:属性=“值”>
属性:
name:文本框的名字
Type:表单元素类型
Value:文本框的值
Size:文本框的长度
Maxlength:最多可以输入多少个字符。
Readonly:只读属性。可以选中,但不能修改。Readonly=“readonly”
Disabled:禁用属性 同上。
语法格式:
属性:
name:文本框的名字
Type:表单元素类型
Value:文本框的值
Size:文本框的长度
Maxlength:最多可以输入多少个字符。
Readonly:只读属性。可以选中,但不能修改。Readonly=“readonly”
Disabled:禁用属性 同上。
语法格式:男
女
属性:
name:元素名称
Checked:默认选择checked=“checked”
Value:值
语法格式: 游戏
杀人
放火
属性:
name:元素名称
Checked:默认选择checked=“checked”
Value:值
语法格式:
<select name=””> <option value=”北京”>北京</option> <option value=”天津”>天津</option> <option value=”重庆”>重庆</option></select>
Selected:默认选中
层叠样式表方式改下拉列表宽度:type=”width:100px”
语法格式:
属性:
name:元素名称
Cols:宽度
Rows:高度
提交按钮
重置按钮
图片按钮
普通按钮
普通按钮本身不具备任何功能,需与js配合使用。
语法格式:
属性:
Name:名称
Value:上传文件名。Value属性是只读属性,
必须与
功能:看不见的框。传递一些值,而又不想让别人看到。主要用于php后台。如id号。
语法格式:
语法格式:
网页视频一般是flash格式,flash比较小、兼容性好,适合网站播放。 图片热点 图片热点:给一张图片加多个热点。 语法结构: 标记常用属性: Shape:热区的形状,取值:rect(矩形)、circle(圆)、polygon(多边形) Coords:热区的坐标 如果shap=rect时,那么,coords=“x1,y1,x2,y2”列如:coords=”50,20,200,150” (x1,y1)为左上角坐标,(x2,y2)为右下角坐标。 如果shap=circle时,那么,coords=“x,y,r”,其中(x,y)圆心坐标,r为半径。 框架集和框架页: 框架集: 框架页::主要用来指定默认显示的网页地址。 属性: Cols:划分左右型框架。 Cols=”200,*” 左边为宽度200px,剩下的为右边。 Cols=”180,*,180” 左右框架为180px,剩下的为中间框架 Rows:划分上下型框架 Rows=”200,*” 上框架高度为200px,剩下的为下框架。 Frameborder:是否显示边框线,取值0或1. Border:边框粗细。 Bordercolor:边框颜色。 框架页的属性 : Src:该小窗口中,默认显示的网页地址。 Noresize:不能调整大小。Noresize=”noresize” Scrolling:是否显示滚动条,取值:auto、yes、no Name:给当前小窗口起个名字。这个name就是给标记target属性来用的。 语法格式: 与普通框架区别: 语法格式: 常用属性: Src:引入文件地址。 Width:宽度 Height:高度 Frameborder:是否显示框架的边框线,取值:yes或no。 Scrolling:是否显示滚动条。取值:yes、no、auto。 Name:制定小窗口的名称,改名称也是给标记的target属性来用。 Align:框架在网页中对齐方式,取值:left、center、right。 CSS 层叠样式表。 CSS的主要目的:是给html标记添加各种各样的表现(表格、样式)。比如:文字样式、背景、文本样式、连接样式。 语法格式: 基本选择器 (1) “*”选择器:通配符 描述:将匹配所有的html标记,所有标记都会改变。 语法:*{color:red;} (2)标签选择器 描述:将匹配指定的html标记 语法:h1{color:red;} (3)class选择器(类选择器)-----使用最多的选择器 描述:给一类html标记加样式。这里所指的“一类”是:每个html标记都有的一个class属性,且class的一样。Class属性是公共属性,每个html标记都有。 格式: (4)id选择器 描述:给指定id的元素添加样式 注意:网页中html标记的id属性的值,必须是唯一的。 (1)多元素选择器 描述:给多个元素加同一个样式,多个选择器之间用逗号分开。 格式:h1,p,div,.p1{ background:red; } (2)后代元素选择器(最常用) 描述:给某个标签的某一个后代元素加样式。选择器之间用“空格”隔开。 格式: div h1.title{ color:red; } Div p.title{ color:yellow; } (3)子元素選擇器 說明:為某個元素的子元素新增樣式 Width:元素寬度,一定要加px單位。 Height:元素高度。 Font-size:文字大小。如:font-size:14px; Font-family:字體。如:font-family:微軟雅黑; Font-style:斜體,取值:italic。如:font-style:italic; Font-weight:粗體,取值:bold。如:font-weight:bold; # Color:文字顏色 一個超鏈接,有四個狀態 在平常的工作中,會使用以下寫法,來為連結加上樣式: #CSS邊框屬性:每個元素可以加上邊框線 範例: ## Padding:5px 10px 20px; //上為5px,左右為10px,下為20px ; Padding:20px 10px 5px 20px; //順序上右下左; #CSS外側距屬性:邊線往外的距離 Margin-left:左邊線往外的距離 # Margin-right:右邊… Margin-top:上…. Margin:10px 20px 50px; //上外邊距為10px,左右為20px,下為50px。 Margin:10px 20px 30px 40px; //順序上右下左。 Background-color:背景顏色。 Background-image:背景圖片位址。 Background-image:url(image/banner.jpg) 以上是分享一個HTML的學習之路的詳細內容。更多資訊請關注PHP中文網其他相關文章!的子标记。
的后面。
网页多媒体
<ing src=”inmages/01.jpg” usemap=”#Map”/><map id=”Map”><area shap=”热区形状” cords=”热区坐标” href=”链接地址” /><area shap=”热区形状” cords=”热区坐标” href=”链接地址” /><area shap=”热区形状” cords=”热区坐标” href=”链接地址” /></map>
普通框架
内嵌框架(行内框架)
CSS简介
<style type=”text/css”> h1{Color:red; //文本颜色
Text-align:center; //对齐方式
Border:1px solid #444; //半框样式
Background-color:#ffff00; //背景色}</style>
CSS选择器
.myClass{
Color:red;
Background-color:yellow;
}</style><h1 class=”myClass”></h1><p class=”myClass”></p>
style type=”text/css”>
#myId{
Color=red;
Background-color:yellow;
}</style><p id=”myId”></p>
组合选择器
CSS尺寸屬性
CSS字體屬性
CSS文字屬性
# Text-decoration:文字修飾線,取值:none(無)、underline(底線)、overline(上線)、line-through(刪除線)
偽類選擇器
gt;
Padding:10px; //四個邊的內填分別為10px;
CSS背景屬性