分享一個HTML的學習之路
- 零下一度原創
- 2017-06-24 13:23:222438瀏覽
開發網站流程
確定風格、功能（論壇、留言板、付款、使用者登入等）。
美工製作網頁效果圖（首頁、清單頁、內容頁）。
製作人切圖排版，排成網頁形式。
後台程式開始寫入程式。
前台與後台結合。
HTML註解
注意：註解只是為了以後維護用。
項目符號
<ul><li>内容</li> <li>内容</li> <li>内容</li></ul>
- 或
- 的常用屬性
l Type：項目符號的類型，取值：disc（小黑點）、circle（圓圈）、square（實心方塊）
HTML編號列表（有序）
<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：循環捲動次數
圖片標籤
- 語法格式：
#屬性=“#值”>
- ##
常用屬性：
Width：圖片寬度。
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） 设置网页描述信息
Xhtml规范
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>
：只有一个name属性。 ：两个属性value、selected Selected：默认选中
层叠样式表方式改下拉列表宽度：type=”width:100px”
文本区域
语法格式：
属性：
name：元素名称
Cols：宽度
Rows：高度
各种按钮
提交按钮
重置按钮
图片按钮
普通按钮
普通按钮本身不具备任何功能，需与js配合使用。
上传文件域
语法格式：
属性：
Name：名称
Value：上传文件名。Value属性是只读属性，
必须与
隐藏域
功能：看不见的框。传递一些值，而又不想让别人看到。主要用于php后台。如id号。
语法格式：
表格标题 语法格式：
是 的子标记。
放在 的后面。
网页多媒体
网页视频一般是flash格式，flash比较小、兼容性好，适合网站播放。
图片热点
图片热点：给一张图片加多个热点。
语法结构：
<ing src=”inmages/01.jpg” usemap=”#Map”/><map id=”Map”><area shap=”热区形状” cords=”热区坐标” href=”链接地址” /><area shap=”热区形状” cords=”热区坐标” href=”链接地址” /><area shap=”热区形状” cords=”热区坐标” href=”链接地址” /></map>
标记常用属性：
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属性来用的。
</strong><strong>含义：</strong>当浏览器不支持框架时，会提示信息。低版本不支持。高版本都支持。</p> <p><strong>语法格式：</strong><noframes>内容 内嵌框架（行内框架）
与普通框架区别：
常用属性：
Src：引入文件地址。
Width：宽度
Height：高度
Frameborder：是否显示框架的边框线，取值：yes或no。
Scrolling：是否显示滚动条。取值：yes、no、auto。
Name：制定小窗口的名称，改名称也是给标记的target属性来用。
Align：框架在网页中对齐方式，取值：left、center、right。
CSS简介
CSS 层叠样式表。
CSS的主要目的：是给html标记添加各种各样的表现（表格、样式）。比如：文字样式、背景、文本样式、连接样式。
语法格式：
<style type=”text/css”> h1{Color:red; //文本颜色 Text-align:center; //对齐方式 Border:1px solid #444; //半框样式 Background-color:#ffff00; //背景色}</style>CSS选择器
基本选择器
(1) “*”选择器：通配符
描述：将匹配所有的html标记，所有标记都会改变。
语法：*{color：red；}
（2）标签选择器
描述：将匹配指定的html标记
语法：h1{color：red；}
（3）class选择器（类选择器）-----使用最多的选择器
描述：给一类html标记加样式。这里所指的“一类”是：每个html标记都有的一个class属性，且class的一样。Class属性是公共属性，每个html标记都有。
格式：
（3）子元素選擇器
說明：為某個元素的子元素新增樣式
CSS尺寸屬性
Width：元素寬度，一定要加px單位。
Height：元素高度。
CSS字體屬性
Font-size：文字大小。如：font-size：14px;
Font-family：字體。如：font-family：微軟雅黑；
Font-style：斜體，取值：italic。如：font-style：italic；
Font-weight：粗體，取值：bold。如：font-weight：bold;
CSS文字屬性
# Color：文字顏色
- Text- align：文字水平對齊方式，取值：left、center、right
- Line-height：行高，可以固定值，也可以百分比、如：line-height：24px； line-height：150%；
- Text-indent：頭行縮排。 Text-indent：28px;
- Letter-spacing：字間距。
一個超鏈接，有四個狀態
正常狀態（：link）：滑鼠沒放上之前連結的樣式。 放上狀態（：hover）：滑鼠放到連結上時的樣式。 啟動狀態（：action）：按住滑鼠左鍵不放開的樣式。 訪問過的狀態（：visited）：按下滑鼠左鍵，並彈起，這時的樣式。在平常的工作中，會使用以下寫法，來為連結加上樣式：
A:link,a:visited{ color :#444;text-decoration:none; } //將「正常狀態」和「造訪過的狀態」合而為一。 A:hover{ color:#990000;text-decoration:underline; } //”滑鼠放上” 單做一種效果CSS列表屬性List -style：列表樣式，取值：none。去掉項目符號或編號前面的各種符號。- gt;
- 上海市
- 深圳市
#CSS邊框屬性：每個元素可以加上邊框線
- Border-left：左邊框線。
- 格式：border-left：粗細線型線的顏色
- 線型：none、solid、dashed（虛線）、dotted（點狀線）
範例：
border-left：5px dashed red;- Border-top：上邊框線。
- Border-bottom：下邊框線。
- Border：同時為四個邊加上邊框線。
- CSS內邊距屬性：邊框線到內容的填滿#注意：平常我們所說的width和height屬性，他們指內容的寬度和高度，不含內、外邊距、邊框線。
- Padding-left：左內填滿距離，右邊線到內容間的距離。
- Padding-right：右內填滿距離。同上
- Padding-top：上。
- Paddingbottom：下。
- 縮寫形式
-
# Padding：10px 20px; //上下為10px；左右為20px； ## Padding：5px 10px 20px; //上為5px，左右為10px，下為20px ;
Padding：20px 10px 5px 20px; //順序上右下左;
#CSS外側距屬性：邊線往外的距離
Margin-left：左邊線往外的距離
# Margin-right：右邊…
-
Margin-top：上….
######### Margin-bottom：下….############ 簡寫式：##### ####### Margin：10px； //四個外邊距分別為10px。 ############ Margin：10px 20px； //上下外邊距為10px，左右外邊距為20px。 ### Margin：10px 20px 50px； //上外邊距為10px，左右為20px，下為50px。
Margin：10px 20px 30px 40px； //順序上右下左。
CSS背景屬性
Background-color:背景顏色。
Background-image:背景圖片位址。 Background-image:url(image/banner.jpg)
以上是分享一個HTML的學習之路的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn