html学习心得_好范文网手机版

第1篇第2篇第3篇第4篇第5篇更多顶部

正文

第一篇：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 表示地图的坐标位置

举例：

2.file连接本地的文件

声明<a href=file:///e/images/pic.jpg>图片</a>

3.ftp

声明<a href="ftp://192.168.4.21/">进入</a>

4.mailto<a href=mailto:bnbbs@163.com>e-mail</a>

6.3 相对链接和绝对链接

1.若是6.html和index.html文件在同一目录下

使用 index.html(index.html为连接文件)

<a href="index.html">index.html</a>

2.若index.html文件在6.html文件目录下的文件夹page里面

则使用 page/index.html

<a href="page/index.html">index.html</a>

3.如果index.html在 page文件下page2中

page/page2/index.html

2、3为往后查找文件路径

4.若6.html文件在page文件夹中则查找index.html

需要向上翻一层查找

../index.html

<a href="../index.html">index.html</a>

5.若是6.html文件在page文件夹里面的page2文件夹里面

则查找连接index.html 使用

../../index.html

4、5为往前查找

5.若6.html在page文件夹中而index.html在images文件夹中

则6.html要查找连接index.html文件需要

先出page文件夹再进images文件夹

../images/index.html

<a href="../images/index.html">index.html</a>

6.4 书签链接

先在需要跳转的文本地方创建书签点

再进行连接

<a>下的属性

属性名称属性值

name字符串

格式：

锚点:<a name="音乐">..</a>

连接点<a href="#音乐">..</a>

连接到别的网页的书签项目

基本格式：

锚点：<a name="音乐">...</a>

连接点：<a href="index.html#音乐">...</a>

先连接到需要连接的网页再连接到书签

6.5基准参考点

基本格式:

<head>

</head>

作用:所有的html都会在前面加上这个域名http://.cn/ 防止跳到别的网站

注意：最后“/”必须要打错误：http://.cn

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、网页可见区域宽：document.body.clientwidth

网页可见区域高：document.body.clientheight

网页可见区域宽：document.body.offsetwidth (包括边线的宽)网页可见区域高：document.body.offsetheight (包括边线的宽)网页正文全文宽：document.body.scrollwidth

网页正文全文高：document.body.scrollheight

网页被卷去的高：document.body.scrolltop

网页被卷去的左：document.body.scrollleft

网页正文部分上：window.screentop

网页正文部分左：window.screenleft

屏幕分辨率的高：window.screen.height

屏幕分辨率的宽：window.screen.width

屏幕可用工作区高度：window.screen.availheight

屏幕可用工作区宽度：window.screen.availwidth

html精确定位:scrollleft,scrollwidth,clientwidth,offsetwidthscrollheight: 获取对象的滚动高度。

scrollleft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrolltop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollwidth:获取对象的滚动宽度

offsetheight:获取对象相对于版面或由父坐标

offsetparent 属性指定的父坐标的高度

offsetleft:获取对象相对于版面或由

offsetparent 属性指定的父坐标的计算左侧位置

offsettop:获取对象相对于版面或由 offsettop 属性指定的父坐标的计算顶端位置

event.clientx 相对文档的水平座标

event.clienty 相对文档的垂直座标

event.offsetx 相对容器的水平坐标

event.offsety 相对容器的垂直坐标

document.documentelement.scrolltop 垂直方向滚动的值

event.clientx+document.documentelement.scrolltop 相对文档的水平座标+垂直方向滚动的量

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" />

2.php页面在保存的时候使用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 中，有两个很常用的集合，一个是 request.querystring，另一个是 request.form。这两个集合可以获取 html 表单(html forms) 提交的信息。

有关 html 表单，请参见 html 教程中的 html表单一章。

request.querystring

html 表单中的 method 有两种，一种是 get，另外一种是 post。当 html 表单的 method="get" 时，可以用 request.querystring 来获取表单提交的信息。

以下是一个让用户输入姓名的 html 表单示例。

请输入你的姓名：

</form>

该示例中，html 表单中使用的 method 为 get，指向 action 的网页是一个 .asp 文件，名字为 yourname.asp。以下是 yourname.asp 文件的源代码：

<html>

<head>

</head>

<body>

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

</body>

</html>

在这个 .asp 文件里，你可以看到最关键的一句代码是：

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

request.querystring 括号里的 "yourname" 对应于 html 表单中的 input 输入框的 name 值。

当使用 method="get" 提交表单信息时，用户可以从地址栏看到这些提交信息。

request.form

当 html 表单中 method = "post" 时，可以用 request.form 来获取 html 表单提交的信息。

以下是一个让用户输入姓名和密码的 html 表单示例。

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

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

请输入你的密码：<input type="password" name="yourpw"><br>

</form>

该示例中，html 表单中使用的 method 为 post，指向 action 的网页是一个 .asp 文件，名字为 userpw.asp。以下是 userpw.asp 文件的源代码：

<html>

<head>

</head>

<body>

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

<p>你的密码是：<%= request.form("yourpw") %></p>

</body>

</html>

在这个 .asp 文件里，你可以看到最关键的两句代码是：

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

<p>你的密码是：<%= request.form("yourpw") %></p>

request.form 括号里的 "yourname" 和"yourpw" 各对应于 html 表单中的两个 input 输入框的 name 值。

当使用 method="post" 提交表单信息时，用户不会从地址栏看到这些提交信息。

html表单中还有一些可供用户选择的表单控件，比如单选框 input type="radio"，复选框 input type="checkbox"，单选下拉框 select，复选下拉框 select multiple。

这些选择性的控件示例，请参见 html表单教程。在这些示例中，action 指向的那个 .asp 文件叫 choose.asp。以下是 choose.asp 文件的源代码：

<html>

<head>

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

</head>

<body>

你选择了：<br>

<% for counter = 1 to request.form("fruit").count

response.writerequest.form("fruit")(counter) & "<br>"

</body>

</html>

request.form 获取的是一个集合 (collection)。request.form 集合有两个参数，一个是 element，称做元素，对应 html表单控件的 name 值；第二个是 index，称做索引，表示 element 的第几个值，index 从1开始计数。

用 request.form(element)(index) 可以引用 request.form 集合中某个元素的某个值。

比如 request.form("fruit")(1)，表示"fruit"元素中的第一个值，request.form("fruit")(2) 表示"fruit"元素中的第2个值。

用 request.form(element).count，可以得到集合中某个元素的值的总数量。

比如 request.form("fruit").count 为 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学习心得范文

目录

正文

第一篇：html学习笔记小结2

第二篇：js、php、mysql和html学习经验总结

第三篇：html(即超文本标记语言) 的学习总结

第四篇：学习asp获取html表单提交信息的实例

第五篇：html标签总结

欢迎阅读其他精彩文章：