html學習心得

學習培訓心得體會
關注：1.71W次

第一篇：html學習筆記小結2第二篇：js、php、mysql和html學習經驗總結第三篇：html(即超文本標記語言) 的學習總結第四篇：學習asp獲取html表單提交信息的實例第五篇：html標籤總結更多相關範文

正文

第一篇：html學習筆記小結2

4.3<tr><th><td>標籤下的常用屬性

屬性名稱屬性值説明widthheight

align(水平方向)rightleftcenter

valign(垂直方向)top數據靠上middle數據居中buttombgcolor

4.4拆分與合併單元格 <td>裏面的屬性

屬性名稱屬性值colspan數字rowspan數字先刪掉不要的空格再合併需要的空格 4.5表格的標題<table>

屬性有：

屬性名稱屬性值aligntopbuttom 5.1背景圖片設置

5.2將圖片插入網頁中

格式:<img src="url">

功能：將圖片插入網頁中單一標籤

屬性名稱屬性值srcurlwidth像素/百分比height像素/百分比alt字符串border數字5.3文字圖像的排列

屬性名稱屬性值alignleftrighttopmiddlebuttom間隙設置

數據靠下説明

向兩邊擴展向上下擴展説明

圖片的路徑

圖片的寬度(絕對和相對) 圖片的高度(絕對和相對)給圖片做註解圖片邊框説明

圖像靠左文字靠右圖像靠右文字靠左文字靠上文字居中文字靠下

vspace像素垂直上下兩端與物件的距離hspace像素水平左右兩端與物件的距離

5.4 圖片超鏈接

注意邊框問題

5.5地圖索引

格式：<img src="url" usemap="#圖像名稱">

説明：

<map>聲明整張圖使用地圖連接方式進行連接

<area>表示需要連接的某個區塊

<shape>表示我們所選擇的形狀如：rect矩形 circle圓形poly 多邊形coords 表示地圖的座標位置

舉例：

連接本地的文件

聲明<a href=file:///e/images/pic.jpg>圖片</a>

聲明<a href="">進入</a>

to<a >e-mail</a>

6.3 相對鏈接和絕對鏈接

1.若是和文件在同一目錄下

使用 (為連接文件)

2.若文件在文件目錄下的文件夾page裏面

則使用 page/

3.如果在 page文件下page2中

page/page2/

2、3為往後查找文件路徑

4.若文件在page文件夾中則查找

需要向上翻一層查找

../

5.若是文件在page文件夾裏面的page2文件夾裏面

則查找連接使用

../../

4、5為往前查找

5.若在page文件夾中而在images文件夾中

則要查找連接文件需要

先出page文件夾再進images文件夾

../images/

6.4 書籤鏈接

先在需要跳轉的文本地方創建書籤點

再進行連接

<a>下的屬性

屬性名稱屬性值

name字符串

格式：

錨點:<a name="音樂">..</a>

連接點<a href="#音樂">..</a>

連接到別的網頁的書籤項目

基本格式：

錨點：<a name="音樂">...</a>

連接點：<a href="#音樂">...</a>

先連接到需要連接的網頁再連接到書籤

6.5基準參考點

基本格式:

<head>

</head>

作用:所有的html都會在前面加上這個域名防止跳到別的網站

注意：最後“/”必須要打錯誤：

6.6超鏈接事件

link 顏色的設置

基本格式: <body link="顏色" alink="顏色" vlink="顏色">

link超鏈接尚未選中的文字

alink 超鏈接選中但是為放開的顏色

vlink 超鏈接已被選中過的顏色

7.1表單是提供給用户輸入，選取，勾選數據，以便提交給服務器數據庫的工具表單的功能結構：

主標記結構：<from>...</from>

屬性值值説明

name字符串給這個表單起的名字

methodget/post表單的傳輸方式 post有利於信息的保護不會顯示在域名傳輸地址欄中 get會在域名傳輸地址中顯示所有的信息不利於信息安全所以一般設置為post

actionurl傳輸的目標意為將表單中所有的信息傳輸到某一個地址去，若是沒有指定傳輸地址則會傳給自己

7.2 文本欄、密碼欄、

input是一個單標籤屬於插入一個東西而雙標籤相當於一個容器包含一些東西表單一般是要起名字因為以後要使用javascript進行激活使它做一些事件

文本欄：<input type="text" name="欄位名稱" value="欄位設置默認值" size="欄位顯示的寬度" maxlength="欄位輸入數據的最大長度" >

姓名:<input type="text" name="usename" value="小張" size="30" maxlength="10">

密碼欄： <input type="password" name="欄位名稱" value="欄位設置默認值" size="欄位顯示的寬度" maxlength="欄位輸入數據的最大長度" >

密碼:<input type="password" name="usepassword" size="30">

7.3複選框單選框

複選框：<input type="checkbox" name="欄位名稱" checked disable>

checked 表示已經選定不容修改disable 表示已經選定不容修改

愛好:<input type="checkbox" name="love">體育<input type="checkbox"

name="love">音樂

單選框:<input type="radio" name="欄位名稱" checked disable>

性別:<input type="radio" name="sex">男<input type="radio" name="sex">女

7.4窗體欄和區塊

窗體欄就是下拉菜單

<option value="欄位設置值">欄位設置值

</select>

舉例：地址：<select name="address">

<option value="上海">上海

<option value="南京">南京

<option value="鹽城">鹽城

</select>

//分組<optgroup label="分組名稱"><option>...<option></optgroup>舉例：

address:<select name="address">

<option value="普陀區">普陀區

<option value="寶山區">寶山區

</optgroup>

<option value="下關">下關

<option value="浦口">浦口

</optgroup>

<option value="亭湖">亭湖

<option value="鹽都">鹽都

</optgroup>

</select>

7.5文字區塊的設置

.....

</textarea>

請留下您的建議和意見：

</textarea>

7.6按鈕和圖像按鈕

提交:<input type="submit" value="提交">

重置<input type="reset" value="重置">

按鈕圖像

</button>

7.7 上傳文件

7.8外邊框和標題

外邊框：<fielset>...</fielset>

標題:<legend>...</legend>

.....

</fielset>

</from>

總結實例：

<from>

<head>

</head>

<body>

姓名:<input type="text" name="usename" maxlength="10"> <br>

密碼:<input type="password" name="password">

<br>

qq:<input type="text" name="qq">

<br>

聯繫電話:<input type="text" name="telephone">

<br>

愛好:<input type="checkbox" name="love" value="體育">體育

性別:<input type="radio" name="sex" value="男">男

<input type="radio" name="sex" value="女">女

<br>

地址:<select name="address">

<option value="鶴城區">鶴城區

<option value="漵浦">漵浦

</optgroup>

</select>

<br>

<input type="file" name="file"> 請留下你的意見：

</from>

</body>

</from>

第二篇：js、php、mysql和html學習經驗總結

1、mysql修改表為字段添加auto_increment

2、js如何獲取屏幕瀏覽器網頁高度寬度

3、《返回頂部》功能的實現

4、php 頁面輸出亂碼解決方法

1、需要注意的是表名、字段名均不需要引號/。

比如我創建這樣一個表

create table people ( peopleid smallint not null, name char(50) not null );

我要為peopleid添加一個auto_increment 讓他自動整長，開始mysql總是報1075錯誤；於是查了一下關於mysql 1075的錯誤，錯誤：1075 sqlstate: 42014 (er_wrong_auto_key)

消息：不正確的表定義，只能有1個auto列，而且必須將其定義為鍵。這是才明白原來需要先添加一個主鍵

alter table people add primary key (peopleid);

alter table people change peopleid peopleid smallint auto_increment;

這樣就成功了

那麼，如果我們不添加主鍵呢？？是不是就不可以了，當然不是如果沒有主鍵的話，我們這樣也可以

alter table people change peopleid peopleid smallint auto_increment unique;

這樣也是可以的，這裏應該有一個注意，我剛開始的時候每次都沒有修改都沒有表明字段類型，總是報錯，切忌要聲明字段的類型.

2、網頁可見區域寬：ntwidth

網頁可見區域高：ntheight

網頁可見區域寬：etwidth (包括邊線的寬)網頁可見區域高：etheight (包括邊線的寬)網頁正文全文寬：llwidth

網頁正文全文高：llheight

網頁被捲去的高：lltop

網頁被捲去的左：llleft

網頁正文部分上：entop

網頁正文部分左：enleft

屏幕分辨率的高：ht

屏幕分辨率的寬：h

屏幕可用工作區高度：lheight

屏幕可用工作區寬度：lwidth

html精確定位:scrollleft,scrollwidth,clientwidth,offsetwidthscrollheight: 獲取對象的滾動高度。

scrollleft:設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離

scrolltop:設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離

scrollwidth:獲取對象的滾動寬度

offsetheight:獲取對象相對於版面或由父座標

offsetparent 屬性指定的父座標的高度

offsetleft:獲取對象相對於版面或由

offsetparent 屬性指定的父座標的計算左側位置

offsettop:獲取對象相對於版面或由 offsettop 屬性指定的父座標的計算頂端位置

ntx 相對文檔的水平座標

nty 相對文檔的垂直座標

etx 相對容器的水平座標

ety 相對容器的垂直座標

lltop 垂直方向滾動的值

ntx+lltop 相對文檔的水平座標+垂直方向滾動的量

ie，firefox 差異如下：

ie6.0、ff1.06+：

clientwidth = width + padding

clientheight = height + padding

offsetwidth = width + padding + border

offsetheight = height + padding + border

ie5.0/5.5： clientwidth = width - border

clientheight = height - border

offsetwidth = width

offsetheight = height

(需要提一下：css中的margin屬性，與clientwidth、offsetwidth、clientheight、offsetheight均無關)

文章轉自|

3、<a href="#">返回頂部</a><a href="#top">返回頂部</a>

#包含了一個位置信息

默認的錨是#top 也就是網頁的上端

4、php 頁面輸出亂碼解決方法

以前同事問我關於亂碼的問題，亂碼也分很多種，數據庫亂碼、頁面提取數據亂碼，而其他顯示正常，phpmyadmin顯示也是正常的等等，mysql對中文的支持程度還是很有限的，尤其是新手，但凡出現亂碼問題，就會頭大。他的問題如下。

標題：mysql設置utf8_unicode_ci字符集php頁面輸出??亂碼的解決方法

摘要：用phpmyadmin操作mysql數據庫漢字顯示正常，但用php網頁顯示mysql數據時所有漢字都變成了?號

亂碼問題1：用phpmyadmin操作mysql數據庫漢字顯示正常，但用php網頁顯示mysql數據時所有漢字都變成了?號。

症狀：用phpmyadmin輸入漢字正常，但當php網頁顯示mysql

數據時漢字就變成了?號，並且有多少個漢字就有多少個?號。

原因：沒有在php網頁中用代碼告訴mysql該以什麼字符集輸出漢字。

解決方法：

1.網頁文件head設置編碼<meta http-equiv="content-type" content="text/html; charset=utf-8" />

頁面在保存的時候使用utf-8編碼保存，可以用記事本或convertz802轉換文件

3.在mysql中新建數據庫的時候數據庫選擇utf-8編碼既字符集設定為 utf-8_unicode_ci(unicode (多語言), 不區分大小寫)，庫裏面表table的整理設置為 utf-8_general_ci

表裏面的每個字段的整理都設置為 utf-8_general_ci

4.在php連接數據庫的時候,也就是mysql_connect()之後加入//設置數據的字符集utf-8

mysql_query("set names ’utf8’ ");

mysql_query("set character_set_client=utf8");

mysql_query("set character_set_results=utf8");後兩句可以不需要

注意是utf8,不是utf-8 。

如果你的網頁編碼是gb2312，那就是 set names gb2312。但編輯員強烈推薦網頁編碼、mysql數據表字符集、phpmyadmin都統一使用utf-8。

以上四點即可實現全站utf-8編碼,而且在數據庫中也不會有中文亂碼。亂碼問題2：用phpmyadmin輸入數據時發生錯誤，不讓輸入或出現亂碼

解決方法：這是設置問題。請安裝最新版phpmyadmin或appserv，打開phpmyadmin，mysql 字符集: utf-8 unicode (utf8)； mysql 連接校對應該為utf8_unicode_ci；創建新的數據庫時整理一欄請也選成utf8_unicode_ci。網頁字符集也最好選用utf-8。utf-8是國際標準編碼，是趨勢。

亂碼問題2：在本機開發好的mysql數據表，在本機測試一切正常，但用網站空間商提供的phpmyadmin上傳時卻出現問題，上傳失敗。尤其是使用國外php空間。

解決方法：首先查看網站空間商提供的phpmyadmin字符集設定，確定自己所建數據表與服務商的是同一編碼。在國外mysql是不支持gb2312的，甚至最新版的apache也不支持gb2312。如果是因為編碼不統一，可以重建數據表，當然是用國際標準的utf8。

第三篇：html(即超文本標記語言) 的學習總結

html（即超文本標記語言）的學習總結：

<html>

</html>

一：（html基本標記）：

head,頭部標記裏面常用的標記（<title>）

title 標題標記<title><title>

二:(文字與段落)

標題文字的對齊方式：align屬性值（leftcenterright）設置文字常用屬性：（face字體；size字號；color顏色）

設置文字常用標記：<font>=文本 <strong>粗體；<em>斜體；<u>下劃線；<p>段落標記

<br>換行標記

三 :（超鏈接）

超鏈接語法：<a href="鏈接地址">新浪</a>

建立書籤：<a name="書籤名稱">連接文字</a>

四 :（插入圖像及圖像連接）

圖像的格式：jpg格式； png格式；gif格式 ;bmp;

插入圖像語法：<img src="圖像的地址">注：圖片標記<img>不成對出現圖像的超鏈接：<a href="連接的地址"><img src="圖像的地址"></a>

五 :(多媒體)

滾動文字的標記與語法：<marquee>

....滾動文字

</marquee>

設置滾動文字常用屬性：

滾動方向：direction=(up;down;left;right)

背景音樂的設置：<bgsound src="音樂的地址" loop="循環的次數">注：圖片標記<bgsound>不成對出現

六（表格的插入）

標格的插入：<table>

<tr>行

</tr>

</table>

設置表格的常用屬性：width寬；height高；align對齊方式；標格的邊框：border

標格的邊框顏色：bordercolor

行文字以及表格標題的對其方式：valign

水平跨度：colspan

垂直跨度：rowspan

單元格的亮，暗邊框：bordercolorlightbordercolordark

七（框架）

框架的基本結構語法：

</frameset>

第四篇：學習asp獲取html表單提交信息的實例

在 asp 中，有兩個很常用的集合，一個是 ystring，另一個是。這兩個集合可以獲取 html 表單(html forms) 提交的信息。

有關 html 表單，請參見 html 教程中的 html表單一章。

ystring

html 表單中的 method 有兩種，一種是 get，另外一種是 post。當 html 表單的 method="get" 時，可以用 ystring 來獲取表單提交的信息。

以下是一個讓用户輸入姓名的 html 表單示例。

請輸入你的姓名：

</form>

該示例中，html 表單中使用的 method 為 get，指向 action 的網頁是一個文件，名字為。以下是文件的源代碼：

<html>

<head>

</head>

<body>

<p>你的姓名是：<%= ystring("yourname") %></p>

</body>

</html>

在這個文件裏，你可以看到最關鍵的一句代碼是：

<p>你的姓名是：<%= ystring("yourname") %></p>

ystring 括號裏的 "yourname" 對應於 html 表單中的 input 輸入框的 name 值。

當使用 method="get" 提交表單信息時，用户可以從地址欄看到這些提交信息。

當 html 表單中 method = "post" 時，可以用來獲取 html 表單提交的信息。

以下是一個讓用户輸入姓名和密碼的 html 表單示例。

<formaction="http:///html/asdocs/html_tutorials/" method="post">

請輸入你的姓名：<input type="text" name="yourname"><br>

請輸入你的密碼：<input type="password" name="yourpw"><br>

</form>

該示例中，html 表單中使用的 method 為 post，指向 action 的網頁是一個文件，名字為。以下是文件的源代碼：

<html>

<head>

</head>

<body>

<p>你的姓名是：<%= ("yourname") %></p>

<p>你的密碼是：<%= ("yourpw") %></p>

</body>

</html>

在這個文件裏，你可以看到最關鍵的兩句代碼是：

<p>你的姓名是：<%= ("yourname") %></p>

<p>你的密碼是：<%= ("yourpw") %></p>

括號裏的 "yourname" 和"yourpw" 各對應於 html 表單中的兩個 input 輸入框的 name 值。

當使用 method="post" 提交表單信息時，用户不會從地址欄看到這些提交信息。

html表單中還有一些可供用户選擇的表單控件，比如單選框 input type="radio"，複選框 input type="checkbox"，單選下拉框 select，複選下拉框 select multiple。

這些選擇性的控件示例，請參見 html表單教程。在這些示例中，action 指向的那個文件叫。以下是文件的源代碼：

<html>

<head>

<title>retrieveinformation from form controls(radio, checkbox, select) </title>

</head>

<body>

你選擇了：<br>

<% for counter = 1 to ("fruit")t

("fruit")(counter) & "<br>"

</body>

</html>

獲取的是一個集合 (collection)。集合有兩個參數，一個是 element，稱做元素，對應 html表單控件的 name 值；第二個是 index，稱做索引，表示 element 的第幾個值，index 從1開始計數。

用 (element)(index) 可以引用集合中某個元素的某個值。

比如 ("fruit")(1)，表示"fruit"元素中的第一個值，("fruit")(2) 表示"fruit"元素中的第2個值。

用 (element)t，可以得到集合中某個元素的值的總數量。

比如 ("fruit")t 為 3 的話，就表示 "fruit" 這個元素有3個值。

第五篇：html標籤總結

<html></html>:標記中的內容是用html語言

<head></head>:網頁頭部信息

<title></title>:網頁標題

<body bgcolor/background=""></body>:網頁主體

bgcolor/background:背景顏色/背景圖片

<font size="" color="" face=""></font>:文字

size:文字大小

color:文字顏色

face:字體

<hr size="" color="" width=""/>:橫線

size:粗細

color:顏色

width:寬度

<img src="" width="" height="" border=""/>:圖片

src:圖片引入路徑

width:圖片寬度

height:圖片高度

border:圖片邊框<embed src="" width="" height=""></embed>:視頻

src:視頻引入路徑

width:視頻寬度

height:視頻高度

<br/>:換行

<b></b>:加粗

<strong></strong>:加粗

<s></s>:刪除線

<u></u>:下劃線

<i></i>:字體傾斜

<em></em>:字體傾斜

<li></li>:無序列表內容

</ul>:無序列表

type="circle/disc/square":空心圓/實心圓/方形

<li></li>:有序列表內容

</ol>:有序列表

type="1/a/i":數字/字母/羅馬數字

start:從幾開始

<pre></pre>:預處理

 空格

<marquee scrollamount="" behavior="alternate/scroll/slide" direction="up/down/left/right" width="" height="" bgcolor=""></marquee>:滾動

scrollamount:滾動速度

behavior="alternate/scroll/slide":滾動方式

direction="up/down/left/right":滾動方向

width:滾動寬度

height:滾動高度

bgcolor:滾動軌跡顏色

<a href="" target="_blank/_self" name=""></a>:超鏈接

href:跳轉路徑

target:控制目標網頁跳轉方式

_blank/_self:原窗口保留，打開另一個網頁/原窗口跳轉另一個網頁"#":錨點，當前頁面跳

name:命名

type="text":文本框

size:文本框長度

maxlength:輸入內容最大長度

value:默認內容

type="password":密碼框

size:密碼框長度

maxlength:輸入內容最大長度

value:默認內容

type="radio":單選框

name:命名

checked="checked":默認當前選中

type="checkbox":多選框

checked="checked":默認當前選中

type="file":上傳域

type="submit":提交按鈕

value:默認內容

type="reset":重置按鈕

value:默認內容

type="button":普通按鈕

value:默認內容

type="hiddle":隱藏內容

type="image":圖片提交按鈕

src:圖片路徑

width:圖片寬度

height:圖片高度

border:圖片邊框

<option selected="selected"></option>:下拉框內容

</select>:下拉框

selected="selected":默認當前選中

<textarea cols="" rows=""></textarea>:文本域

cols:文本域寬度

rows:文本域高度

</form>:表單標記

action:跳轉路徑

method="get/post":提交方式

get:所填內容顯示在地址欄，所填內容有限制（默認方式）

post:所填內容不顯示在地址欄，內容以一種加密方式，所填內容無限制

<caption align="left/center/right/top/bottom"></caption>:表格標題align="left/center/right/top/bottom":標題居左/居中/居右/居上/居下<tbody>

<td colspan/rowspan="" align="left/center/right" valign="top/middle/bottom" bgcolor/background=""

height="" width="">

</td>:格

colspan/rowspan:行合併/列合併

align="left/center/right":內容水平方向居左/居中/居右

valign="top/middle/bottom":內容垂直方向居上/居中/居下

bgcolor/background:格背景顏色/背景圖片

height:格高度

width:格寬度

</tr>:行

align="left/center/right":行內容水平方向居左/居中/居右

valign="top/middle/bottom":行內容垂直方向居上/居中/居下

bgcolor/background:行背景顏色/背景圖片

height:行高

</tbody>:表格塊

</table>:表格

align="left/center/right":表格居左/居中/居右

width:表格寬度

height:表格高度

border:邊框粗細

cellpadding:表格內容據邊框距離

cellspacing:表格內外邊框距離

bordercolor:邊框顏色

bgcolor/background:表格背景顏色/背景圖片

src:引入路徑

noresize="noresize":骨架固定

name:命名

</frameset>:網頁分割

rows/cols:網頁上下/左右分割

frameborder:骨架顯示/隱藏

border:骨架粗細

width:寬度

height:高度

frameborder:浮動框架邊框

src:引入路徑

name:命名

target="x":控制網頁顯示區域

href:跳轉路徑

歡迎閲讀其他精彩文章：

html abbr 標籤

html倒計時代碼

一個簡單的html實例

html網頁畢業論文

個人簡歷html語言編寫

標籤： html 學習心得

文章版權屬於文章作者所有，轉載請註明 https://wenfanwang.com/xindetihui/xuexipeixun/nmdpr.html

當前位置：文範網 >

心得體會 >學習培訓心得體會 >

html學習心得

相關內容

熱門文章

猜你喜歡