Html学习笔记4

<span style="font-size:18px;">超链接:
1 标签
语法: <a  href="链接跳转后的地址 " >链接文字</a><
样例: <a href="http://www.baidu.com" >百度一下就知道</a>
2.超链接target属性
语法 <a href="链接跳转后的地址" target="打开的方式">链接文字</a>
  target属性的值。

_self 默认方式。即在当前窗体打开链接<在一个全新的空白窗体中打开链接>在当前框架的上一层里打开链接
3.超链接     有两种链接方式:一种是内部链接,还有一种是外部链接。

内部链接指的是超链接的链接对象是在同一个站点中的资源。

与自身站点页面有关的链接被称为内部链接。“超链接a标签”的样例就是外部链接,这个超链接的链接对象是外部站点。而内部链接的链接对象是站点的其它页面或当期页面。

<title>超链接之内部链接</title>

    <a  href="网页2.aspx">跳转到网页2</a>
    <a  href="test\网页3.aspx">跳转到网页3</a></span><span style="font-size:14px;">
</span>

4、锚点链接简单介绍

锚点链接是内部链接的一种。它链接对象是当前页面的某一个部。

有些网页因为内容比較多。导致页面过长。訪问者须要不停地拖动浏览器上的滚动栏来查看文档中的内容。

<span style="font-size:18px;"><span style="font-size:18px;"><div>
        <a href="#music">推荐音乐</a><br />
        <a href="#movie">推荐电影</a><br />
        <a href="#article">推荐文章</a><br />
    </div></span></span>

锚点链接要设置两部分:一,是目标锚点的id名称;二是超链接部分。

id也就是元素的名称,跟name属性一样。差别在于name是HTML中的标准,而id是XHTML中的标准。在web2.0的网页中极少使用name属性,而是使用id属性。

在同一个页面中。id是唯一的。也就是一个页面不同意出现同样的id。

表单

创建一个表单看上去就像创建一个表格,表格的行、列和单元格都放在<table>标签中,而创建表单的方式跟创建表格的一样。

假设你要创建一个表单。那你就要把表单的那些各种标签放在表单标签<form>内部。

语法:

<form>表单各种标签</form>

1.表单的属性:

name:用于差别表单 和id一样

action:用于处理提交表单的请求

method:包含get和Post两种方式

enctype:application/x-www-form-urlencoded默认的编码方式;multipart/form-dataMIME编码,对于“上传文件”这样的表单必须选择该值。

target:同<a>标签的该属性。

2.表单提交

Get和Post的差别

1. get是从server上获取数据,post是向server传送数据。
2. get是把參数数据队列加到提交表单的wd=action&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YLP1wbPhP9ujIBuyRLnHuB0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6K1TL0qnfK1TL0z5HD0IgF_5y9YIZ0lQzqlpA-bmyt8mh7GuZR8mvqVQL7dugPYpyq8Q16LPHndP1b3" rel="nofollow" style="color:rgb(45,100,179); text-decoration:none">action属性所指的url中。值和表单内各个字段一一相应,在wd=url&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YLP1wbPhP9ujIBuyRLnHuB0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6K1TL0qnfK1TL0z5HD0IgF_5y9YIZ0lQzqlpA-bmyt8mh7GuZR8mvqVQL7dugPYpyq8Q16LPHndP1b3" rel="nofollow" style="color:rgb(45,100,179); text-decoration:none">url中能够看到。post是通过wd=http&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YLP1wbPhP9ujIBuyRLnHuB0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6K1TL0qnfK1TL0z5HD0IgF_5y9YIZ0lQzqlpA-bmyt8mh7GuZR8mvqVQL7dugPYpyq8Q16LPHndP1b3" rel="nofollow" style="color:rgb(45,100,179); text-decoration:none">http post机制,将表单内各个字段与其内容放置在html header内一起传送到wd=action&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YLP1wbPhP9ujIBuyRLnHuB0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6K1TL0qnfK1TL0z5HD0IgF_5y9YIZ0lQzqlpA-bmyt8mh7GuZR8mvqVQL7dugPYpyq8Q16LPHndP1b3" rel="nofollow" style="color:rgb(45,100,179); text-decoration:none">action属性所指的wd=url&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YLP1wbPhP9ujIBuyRLnHuB0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6K1TL0qnfK1TL0z5HD0IgF_5y9YIZ0lQzqlpA-bmyt8mh7GuZR8mvqVQL7dugPYpyq8Q16LPHndP1b3" rel="nofollow" style="color:rgb(45,100,179); text-decoration:none">url地址。用户看不到这个过程。
3. 对于get方式。server端用Request.QueryString获取变量的值。对于post方式,server端用Request.Form获取提交的数据。
4. get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默觉得不受限制。但理论上。IIS4中最大量为80KB。IIS5中为100KB。

5. get安全性很低,post安全性较高。

可是运行效率却比Post方法好。 

建议:
1、get方式的安全性较Post方式要差些。包括机密信息的话。建议用Post数据提交方式;
2、在做数据查询时,建议用Get方式;而在做数据加入、改动或删除时。建议用Post方式。

參考:http://zhidao.baidu.com/link?

url=7pZEIP5-uk-nn9m2NopfrTxZ76TVvVFMJVksHXW_V3kz5TV1BDUxFHRPOcpEQ9p6mfRe0-4CI3pRjWOoK6BAmK

3表单对象:

表单对象分为三种:

<select>和<option>,<input>,<textarea>

①input标签

input的type属性值

? text的属性有三个:value、size和maxlength

语法:

<input type="text" value="默认文字" size="文本框长度" maxlength="最多输入字符数"/>

?password的属性值也是value、size、maxlength

?radio

语法:

<input type="radio" name="单选button所在的组名" value="单选button的取值"/>

?checkbox

样例:

<span style="font-size:14px;"><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <form name="form1" method="post" action="index.html">
        你喜欢的水果:<br />
        <input id="checkbox1" type="checkbox" checked="checked"/><label for="checkbox1">苹果</label><br />
        <input id="checkbox2" type="checkbox" /><label for="checkbox2">香蕉</label><br />
        <input id="checkbox3" type="checkbox" /><label for="checkbox3">西瓜</label><br />
        <input id="checkbox4" type="checkbox" /><label for="checkbox4">凤梨</label>
    </form>
</body>
</html></span>

?普通按钮button

普通button普通情况下要配合JavaScript脚本来进行表单的实现。

语法:

<input type="button" value="普通按钮的取值" onclick="JavaScript脚本程序"/>

说明:

value的取值就是显示在button上的文字。onclick是普通button的事件。

submit(提交)

reset(重置)

? 图片域 image

<input type="image" src="图像的路径"/>

?隐藏域 hidden

<input type="hidden"/>

?文件域file

<input
type="file"/><input type="file"/>enctype=“multipart/form-data 设置编码方式

②多行文本框

<textarea
rows="行数" cols="列数">多行文本框内容</textarea>

③下拉列表

<select>
<option>一起使用

?
<select>标签属性 说明

multiple可选属性,仅仅有一个属性值"multiple"。默认情况下下拉列表仅仅能选择一项,当设置multiple=“multiple”时,下拉列表能够选择多项

size 下拉列表展开之后可见列表项的数目

?<option>标签属性说明

value选项值

selected
是否选中

3多媒体

?音频和视频文件和flash的插入使用<embed>标签

语法:<embed src="多媒体文件地址" width="播放界面的宽度" height="播放界面的高度"/>

? 背景音乐:

在网页中能够为某个网页设置背景音乐,使用的是bgsound标签。bgsound是用以插入背景音乐。但仅仅适用于IE浏览器,在Firefox等中未必适用。

语法:<bgsound
src="背景音乐的地址"
 loop="播放次数"/>

4.浮动框架iframe

<iframe src="浮动框架的源文件" width="浮动框架的宽" height="浮动框架的高"></iframe>

对于浮动框架iframe的的滚动栏,我们能够使用scrolling属性来控制。scrolling属性有3种情况:依据须要显示、总是显示和不显示。

auto默认值,整个表格在浏览器页面中左对齐

yes 总是显示滚动栏。即使页面内容不足以撑满框架范围。滚动栏的位置也预留

no 在不论什么情况下都不显示滚动栏

时间: 2024-10-13 06:54:31

Html学习笔记4的相关文章

vector 学习笔记

vector 使用练习: /**************************************** * File Name: vector.cpp * Author: sky0917 * Created Time: 2014年04月27日 11:07:33 ****************************************/ #include <iostream> #include <vector> using namespace std; int main

Caliburn.Micro学习笔记(一)----引导类和命名匹配规则

Caliburn.Micro学习笔记(一)----引导类和命名匹配规则 用了几天时间看了一下开源框架Caliburn.Micro 这是他源码的地址http://caliburnmicro.codeplex.com/ 文档也写的很详细,自己在看它的文档和代码时写了一些demo和笔记,还有它实现的原理记录一下 学习Caliburn.Micro要有MEF和MVVM的基础 先说一下他的命名规则和引导类 以后我会把Caliburn.Micro的 Actions IResult,IHandle ICondu

jQuery学习笔记(一):入门

jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: 1 document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: 1 $('#info').val('Hello World!'); 嗯,可以看出,使用JQuery的优势之一是可以使代码更加简练,使开

[原创]java WEB学习笔记93:Hibernate学习之路---Hibernate 缓存介绍,缓存级别,使用二级缓存的情况,二级缓存的架构集合缓存,二级缓存的并发策略,实现步骤,集合缓存,查询缓存,时间戳缓存

本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱好者,互联网技术发烧友 微博:伊直都在0221 QQ:951226918 -----------------------------------------------------------------------------------------------------------------

Activiti 学习笔记记录(三)

上一篇:Activiti 学习笔记记录(二) 导读:上一篇学习了bpmn 画图的常用图形标记.那如何用它们组成一个可用文件呢? 我们知道 bpmn 其实是一个xml 文件

HTML&CSS基础学习笔记8-预格式文本

<pre>标签的主要作用是预格式化文本.被包围在 pre 标签中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. <pre>标签的一个常见应用就是用来表示计算机的源代码.当然你也可以在你需要在网页中预显示格式时使用它. 会使你的文本换行的标签(例如<h>.<p>)绝不能包含在 <pre> 所定义的块里.尽管有些浏览器会把段落结束标签解释为简单地换行,但是这种行为在所有浏览器上并不都是一样的. 更多学习内容,就在码芽网http://www.

java/android 设计模式学习笔记(14)---外观模式

这篇博客来介绍外观模式(Facade Pattern),外观模式也称为门面模式,它在开发过程中运用频率非常高,尤其是第三方 SDK 基本很大概率都会使用外观模式.通过一个外观类使得整个子系统只有一个统一的高层的接口,这样能够降低用户的使用成本,也对用户屏蔽了很多实现细节.当然,在我们的开发过程中,外观模式也是我们封装 API 的常用手段,例如网络模块.ImageLoader 模块等.其实我们在开发过程中可能已经使用过很多次外观模式,只是没有从理论层面去了解它. 转载请注明出处:http://bl

[原创]java WEB学习笔记48:其他的Servlet 监听器:域对象中属性的变更的事件监听器 (3 个),感知 Session 绑定的事件监听器(2个)

本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱好者,互联网技术发烧友 微博:伊直都在0221 QQ:951226918 ---------------------------------

java/android 设计模式学习笔记(10)---建造者模式

这篇博客我们来介绍一下建造者模式(Builder Pattern),建造者模式又被称为生成器模式,是创造性模式之一,与工厂方法模式和抽象工厂模式不同,后两者的目的是为了实现多态性,而 Builder 模式的目的则是为了将对象的构建与展示分离.Builder 模式是一步一步创建一个复杂对象的创建型模式,它允许用户在不知道内部构建细节的情况下,可以更精细地控制对象的构造流程.一个复杂的对象有大量的组成部分,比如汽车它有车轮.方向盘.发动机.以及各种各样的小零件,要将这些部件装配成一辆汽车,这个装配过

[原创]java WEB学习笔记12:一个简单的serlet连接数据库实验

本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱好者,互联网技术发烧友 微博:伊直都在0221 QQ:951226918 ---------------------------------