文档库 最新最全的文档下载
当前位置:文档库 › html表单基础知识

html表单基础知识

html表单基础知识
html表单基础知识

html表单:HTML表单基础知识

疯狂代码 https://www.wendangku.net/doc/e117950892.html,/ ?:http:/https://www.wendangku.net/doc/e117950892.html,/HtmlJiaoCheng/Article23344.html

本专题从最基础的表单知识,到表单的高级应用,让你有一个比较全面地认识,相信你在读完本专题以后,一定会对表单非常熟悉。

一、表单概述

表单,在网页中的作用不可小视,主要负责数据采集的功能,比如你可以采集访问者的名字和e-mail地址、调查表、留言簿等等。

1、表单的组成

一个表单有三个基本组成部分:

表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。

表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用 表单按钮来控制其他定义了处理脚本的处理工作。 为了顾及不同的网页设计工具,本文只讲述代码的设计,不具体讲述操作方法,下面就是表单的HTML代码设计要点:

1.1 表单标签<form></form>

功能:用于申明表单,定义采集数据的范围,也就是<form>和</form>里面包含的数据将被提交到服务器或者电子邮件里。

语法:<FORM ACTION="URL" METHOD="GET|POST" ENCTYPE="MIME" TARGET="...">. .

.</FORM>

属性解释见下表:

action=url指定一来处理提交表单的格式.它可以是一个URL地址(提交给程式)或一个电子邮件地址

.method=get或post指明提交表单的HTTP方法.可能的值为: post:POST方法在表单的主干包含名称/值对并且无需包含于action特性的URL中. get:不赞成。GET方法把名称/值对加在action的URL后面并且把新的

URL送至服务器.这是往前兼容的缺省值.这个值由于国际化的原因不赞成使用.enctype=cdata指明用来把表单提交给服务器时(当method值为"post")的互联网媒体形式.这个特性的缺省值是"application/x-www-form-urlencoded"TARGET="..."指定提交的结果文档显示的位置: _blank :在一个新的、无名浏览器窗口调入指定的文档; _self :在指向这个目标的无素的相同的框架中调入文档; _parent :把文档调入当前框的直接的父FRAMESET框中;这个值在当前框没有父框时等价于_self; _top :把文档调入原来的最顶部的浏览器窗口中

(因此取消所有其它框架);这个值等价于当前框没有你框时的_self.

例如:

<form action="https://www.wendangku.net/doc/e117950892.html,/test.asp" method="post" target="_blank">...</form>

表示表单将向https://www.wendangku.net/doc/e117950892.html,/test.asp以post的方式提交,提交的结果在新的页面显示,数据提交的媒体方式是默认的application/x-www-form-urlencoded方式;

1.2 表单域

表单域包含了文本框、多行文本框、密码框、隐藏域、复选框、单选框和下拉选择框等,用于采集用户的输入或选择的数据,下面分别讲述这些表单域的代码格式:

1.2.1 文本框

文本框是一种让访问者自己输入内容的表单对象,通常被用来填写单个字或者简短的回答,如姓名、地址等。 代码格式:<input type="text" name="..." size="..." maxlength="..." value="...">

属性解释:

type="text"定义单行文本输入框;

name属性定义文本框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;

size属性定义文本框的宽度,单位是单个字符宽度;

maxlength属性定义最多输入的字符数。

value属性定义文本框的初始值

样例1:

样例1代码:

<input type="text" name="example1" size="20" maxlength="15">

1.2.2 多行文本框

也是一种让访问者自己输入内容的表单对象,只不过能让访问者填写较长的内容。

代码格式:<TEXTAREA name="..." cols="..." rows="..." wrap="VIRTUAL"></TEXTAREA>

属性解释:

name属性定义多行文本框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;

cols属性定义多行文本框的宽度,单位是单个字符宽度;

rows属性定义多行文本框的高度,单位是单个字符宽度;

wrap属性定义输入内容大于文本域时显示的方式,可选值如下:

默认值是文本自动换行;当输入内容超过文本域的右边界时会自动转到下一行,而数据在被提交处理时自动换行的地方不会有换行符出现; Off,用来避免文本换行,当输入的内容超过文本域右边界时,文本将向左滚动,必须用Return才能将插入点移到下一行; Virtual,允许文本自动换行。当输入内容超过文本域的右边界时会自动转到下一行,而数据在被提交处理时自动换行的地方不会有换行符出现; Physical,让文本换行,当数据被提交处理时换行符也将被一起提交处理。

样例2:

样例2代码:

<TEXTAREA name="example2" cols="20" rows="2" wrap="PHYSICAL"></TEXTAREA>

1.2.3 密码框

是一种特殊的文本域,用于输入密码。当访问者输入文字时,文字会被星号或其它符号代替,而输入的文字会被隐藏。

代码格式:<input type="password" name="..." size="..." maxlength="...">

属性解释:

type="password"定义密码框;

name属性定义密码框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;

size属性定义密码框的宽度,单位是单个字符宽度;

maxlength属性定义最多输入的字符数。

样例3:

样例3代码:

<input type="password" name="example3" size="20" maxlength="15">

1.2.4 隐藏域

隐藏域是用来收集或发送信息的不可见元素,对于网页的访问者来说,隐藏域是看不见的。当表单被提交时,隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。

代码格式:<input type="hidden" name="..." value="...">

属性解释:

type="hidden"定义隐藏域;

name属性定义隐藏域的名称,要保证数据的准确采集,必须定义一个独一无二的名称;

value属性定义隐藏域的值

例如:<input type="hidden" name="ExPws" value="dd">

1.2.5 复选框

复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素,都必须有一个唯一的名称。

代码格式:<INPUT type="checkbox" name="..." value="...">

属性解释:

type="checkbox"定义复选框;

name属性定义复选框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;

value属性定义复选框的值

样例4: https://www.wendangku.net/doc/e117950892.html, https://www.wendangku.net/doc/e117950892.html,

样例4代码:

<input type="checkbox" name="yesky" value="09">https://www.wendangku.net/doc/e117950892.html,

<input type="checkbox" name="Chinabyte" value="08">https://www.wendangku.net/doc/e117950892.html,

1.2.6 单选框

当需要访问者在待选项中选择唯一的答案时,就需要用到单选框了。

代码格式:<input type="radio" name="..." value="...">

属性解释:

type="radio"定义单选框;

name属性定义单选框的名称,要保证数据的准确采集,单选框都是以组为单位使用的,在同一组中的单选项都必须用同一个名称;

value属性定义单选框的值,在同一组中,它们的域值必须是不同的。

样例5: https://www.wendangku.net/doc/e117950892.html, https://www.wendangku.net/doc/e117950892.html,

样例5代码:

<input type="radio" name="myFavor" value="1">https://www.wendangku.net/doc/e117950892.html,

<input type="radio" name="myFavor" value="2">https://www.wendangku.net/doc/e117950892.html,

1.2.7 文件上传框

有时候,需要用户上传自己的文件,文件上传框看上去和其它文本域差不多,只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。

注意:在使用文件域以前,请先确定你的服务器是否允许匿名上传文件。表单标签中必须设置

ENCTYPE="multipart/form-data"来确保文件被正确编码;另外,表单的传送方式必须设置成POST。

代码格式:<input type="file" name="..." size="15" maxlength="100">

属性解释:

type="file"定义文件上传框;

name属性定义文件上传框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;

size属性定义文件上传框的宽度,单位是单个字符宽度;

maxlength属性定义最多输入的字符数。

样例6:

样例6代码:

<input type="file" name="myfile" size="15" maxlength="100"> 1.2.8 下拉选择框

下拉选择框允许你在一个有限的空间设置多种选项。

代码格式:

<select name="..." size="..." multiple>

<option value="..." selected>...</option>

...

</select>

属性解释:

size属性定义下拉选择框的行数;

name属性定义下拉选择框的名称;

multiple属性表示可以多选,如果不设置本属性,那么只能单选;

value属性定义选择项的值;

selected属性表示默认已经选择本选项。

样例7: https://www.wendangku.net/doc/e117950892.html, https://www.wendangku.net/doc/e117950892.html,

样例7代码:

<select name="mySel" size="1">

<option value="1" selected>https://www.wendangku.net/doc/e117950892.html,</option>

<option value="d2">https://www.wendangku.net/doc/e117950892.html,</option>

</select>

样例8:

https://www.wendangku.net/doc/e117950892.html, https://www.wendangku.net/doc/e117950892.html, https://www.wendangku.net/doc/e117950892.html, 按Ctrl可以多选

样例8代码:

<select name="mySelt" size="3" multiple>

<option value="1" selected>https://www.wendangku.net/doc/e117950892.html,</option>

<option value="d2">https://www.wendangku.net/doc/e117950892.html,</option>

<option value="3">https://www.wendangku.net/doc/e117950892.html,</option>

</select>

1.3 表单按钮

表单按钮控制表单的运作。

1.3.1 提交按钮

提交按钮用来将输入的信息提交到服务器。

代码格式:<input type="submit" name="..." value="...">

属性解释:

type="submit"定义提交按钮;

name属性定义提交按钮的名称;

value属性定义按钮的显示文字;

样例9:

样例9代码:

<input type="submit" name="mySent" value="发送">

1.3.2 复位按钮

复位按钮用来重置表单。

代码格式:<input type="reset" name="..." value="...">

属性解释:

type="reset"定义复位按钮;

name属性定义复位按钮的名称;

value属性定义按钮的显示文字;

样例10:

样例10代码:

<input type="reset" name="myCancle" value="取消">

1.3.3 一般按钮

一般按钮用来控制其他定义了处理脚本的处理工作。

代码格式:<input type="button" name="..." value="..." >

属性解释:

type="button"定义一般按钮;

name属性定义一般按钮的名称;

value属性定义按钮的显示文字;

onClick属性,也可以是其它的事件,通过指定脚本函数来定义按钮的行为; 样例11:

样例11代码:

<input type="button" name=" 2008-11-18 15:06:16

疯狂代码 https://www.wendangku.net/doc/e117950892.html,/

HTML知识点总结 第一章知识总结 1.HTML文档结构(括号里面的是注释) (头部部分) (可写可不写) 显示在浏览器标题栏中的标题 (主体部分) (页面容) 1)标签中的属性有: bgcolor=颜色(背景颜色)background=图片的绝对路径或相对路径(背景图片) 2.标题标签 n取1~6(设置文字标题): 1)

一级标题

2)

二级标题

3)

三级标题

4)

四级标题

5)
五级标题
6)
六级标题
3.标签(设置文字属性) 要设置的文字 4.特殊符号 5.行的控制相关标签 段落标签

(段落的对其方式) 换行标签
6.图片标签

 图片的提示文字 (align是用于调整图片相对于周围文本的对其方式) 7.文字布局 1)水平线


2)有序列表的语法
    (序号类型有:1、a、A、ⅰ、I)
  1. 填写信息
  2. (必须用
  3. 将容包括起来)
  4. 填写信息
  5. 填写信息
  6. ……
3)无序列表语法
    (序号类型有:disc(默认值,实心圆点)、circle(空心圆环)、square(空心正方形))
  • 所写容
  • (必须用
  • 将容包括起来)
4)预格式文本语法

HTML知识点汇总 第一章HTML基础知识 1、HTML简介 HTML(Hypertext Markup Language),超文本标记语言,HTML利用各种标记来标识文档的结构以及标识超链接的信息。它是从SGML(Standard Generalized Markup Language,标准通用标识语言)中的一个子集演变而来的。 2、HTML的标记组成 HTML用于描述功能的符号称为“标记”。标记在使用时必须用尖括号“<>”括起来,而且是成对出现的,无斜杠的标记表示该标记的作用开始,有斜杠的标记表示该标记的作用结束。如、 等 1)单标记:有些标记能完整的表达标记里的意思,只须在尖括号中输入标记名即可,这类标记叫 单标记。XHTML中要求单标记也必须闭合,即在标记“>”前添加斜杠。常见的单标记如


等。 2)双标记:双标记有头有尾,且前面的标记与后面的标记保持一致,但在后面的标记前有斜线, 语法形如:<标记>内容。例如:段落 3)XHTML要求所有标记均为小写,且所有标记属性必须添加双引号 4)标记对不能交叉 3、HTML基本结构 网页标题 1)标记对不能放在<body>标记对中,同理,其它表示内容的标记也不能放在<head>标记对 中 2)<html></html>表示HTML语言,在<html></html>里面包含头部(<head></head>)和内容体 (<body></body>)。 1页</p><h2></h2><p>) <input type="radio"></input> ) <input type="reset"></input> web 页的软件? (B )(选择1项) ) Internet Explorer ) FTP A ) place=middle B C ) align=center D 8、 {HTML 题目}将当前页面的背景色为 蓝色, 择1项) A ) bgcolor="blue" C ) backcolor="blue" 9、 {HTML 题目} A 文件夹与 现在我们希望在 B D B 文件夹是同级文件夹,其中 ) type=middle ) type=center 应该使用哪一句代码来描述此种设置 ( A ) (选 ) bgground="blue" ) background="blue" A 下有 a.htm , B 下有 b.htm 文件, a.htm 文件中创建超链接,链接到 b.htm ,应该在 a.htm 页面代码中如何描 1、 {HTML 题目}在HTML 页面中制作一个图像,想要在鼠标指向这个图像时浮出一条提示信 息,应该使用的参数是 :( C ) ( 选择 1 项) A) POP B) SRC C) ALT D) MSG 2、 {HTML 题目}在页面中看不见的表单元素是 那种? (C )(选择1项) A) <input type="password"></input> B C) <input type="hidden"></input> D 3、(HTML 题目)以下哪一个项目是用来访问 A) Outlook Express B C) QQ D 4. {HTML 题目}下面关于CSS 表述正确的是(A,C,D )(选择3项) A) CSS 是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计 必不可少的工具之一。 B) 层叠样式表是 HTML 的辅助工具, 缺点是设计者设计的网页缺少动感, 网页内容的 排版布局上也有很多困难 C) 使用 CSS 能够简化网页的格式代码, 加快下载显示的速度,也减少了需要上传的代 码数量,大大减少了重复劳动的工作量。 D) CSS 是Cascading Stylesheets 的缩写,中文意思是层叠样式表 5、 {HTML 题目}下面的标记用于表示 HTML 文档的结束的是:(B )( 选择1项) A) /BODY B) /HTML C) /TABLE D) /TITLE 6、 {HTML 题目}在Html 标记中,哪个标记表示表格 (C )(选择1项) A) <H1> B ) <TD> C) <TABLE> D ) <TAB> 7、{HTML 题目}在Html 标记中,用什么方法可以将整个表格在页面中居中 (C )( 选择1 项) 述链接内容( C ) ( 选择 1 项) A) b.htm B ) ././././B/b.htm C) ../B/b.htm D../../b.htm 10、 {HTML 题目 }语句 A :HTML 文档必须包括“头”和“主体”两部分 语句B : HTML 文档的扩展名为.htm 或.html ( D ) (选择 1 项) A)两句都对 B)两句都错 C)只有A 对 D)只有B 对 11、 {HTML 题目}我们想要在 HTML 文档中加入图像,可以使用哪个标记来达到要求呢? (选 择1项)( C ) A) <PIC> B ) <PICTURE></p><h2></h2><p>网页制作之HTML基础知识2009-04-15 11:03很多被淘汰了的标签,不过了解下也好。 总类(所有HTML文件都有的) 文件类型 <HTML></HTML> (放在档案的开头与结尾) 文件主题 <TITLE> (必须放在「文头」区块内) 文头 (描述性资料,像是「主题」) 文体 (文件本体) 结构性定义(由浏览器控制的显示风格) 标题 (从1到6,有六层选择) 标题的对齐 区分
区分的对齐
引文区块
(通常会内缩) 强调 (通常会以斜体显示) 特别强调 (通常会以加粗显示) 引文 (通常会以斜体显示) 码 (显示原始码之用) 样本 键盘输入 变数 定义 (有些浏览器不提供) 地址
大字 小字 与外观相关的标签(作者自订的表现方式) 加粗 斜体 底线 (尚有些浏览器不提供) 删除线 (尚有些浏览器不提供) 下标 上标 打字机体 (用单空格字型显示) 预定格式
 (保留文件中空格的大小) 预定格式的宽度 
(以字元计算) 向中看齐 
(文字与图片都可以) 闪耀 (有史以来最被嘲弄的标签) 字体大小 (从1到7) 改变字体大小 基本字体大小 (从1到7; 内定为3) 字体颜色 链结与图形 链接

HTML 学习任何一门语言,都要首先掌握它的基本格式,就像写信需要符合书信的格式要求一样。HTML标记语言也不例外,同样需要遵从一定的规范。接下来将具体讲解HTML文档的基本格式。 HTML文档的基本格式主要包括文档类型声明、根标记、头部标记、主体标记,具体介绍如下: (1)标记 标记位于文档的最前面,用于向浏览器说明当前文档使用哪种HTML 或XHTML(可扩展超文本标记语言)标准规范,必需在开头处使用标记为所有的XHTML文档指定XHTML版本和类型,只有这样浏览器才能将该网页作为有效的XHTML文档,并按指定的文档类型进行解析。 (2)标记 标记位于 标记之后,也称为根标记,用于告知浏览器其自身是一个HTML 文档, 标记标志着HTML文档的开始,标记标志着HTML文档的结束,在它们之间的是文档的头部和主体内容。 在之后有一串代码“xmlns=""”用于声明XHTML统一的默认命名空间。 (3)标记 标记用于定义HTML文档的头部信息,也称为头部标记,紧跟在标记之后,主要用来封装其他位于文档头部的标记,例如、<meta>、<link>及<style>等,用来描述文档的标题、作者以及和其他文档的关系等。 一个HTML文档只能含有一对<head>标记,绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。 (4)<body></body>标记 <body>标记用于定义HTML文档所要显示的内容,也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标记内,<body>标记中的信息才是最终展示给用户看的。 一个HTML文档只能含有一对<body>标记,且<body>标记必须在<html>标记内,位于<head>头部标记之后,与<head>标记是并列关系。 在HTML页面中,带有“< >”符号的元素被称为HTML标记,如上面提到的<html>、<head>、<body>都是HTML标记。所谓标记就是放在“< >”标记符中表示某个功能的编码命令,也称为HTML标签或HTML元素,本书统一称作HTML标记。 为了方便学习和理解,通常将HTML标记分为两大类,分别是“双标记”与“单标记”。 (1)双标记 双标记也称体标记,是指由开始和结束两个标记符组成的标记。其基本语法格式如下: 该语法中“<标记名>”表示该标记的作用开始,一般称为“开始标记(start tag)”,“</标记名>”表示该标记的作用结束,一般称为“结束标记(end tag)”。和开始标记相比,结束标记只是在前面加了一个关闭符“/”。 (2)单标记 单标记也称空标记,是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下: 一篇结构清晰的文章通常都有标题和段落,HTML网页也不例外,为了使网页中的文字有条理地显示出来,HTML提供了相应的标记。 (1)标题标记 为了使网页更具有语义化,经常会在页面中用到标题标记,HTML提供了6个等级的标题,即<h1>、<h2>、<h3>、<h4>、<h5>和<h6>,从<h1>到<h6>重要性递减。其基本语法格式如下:<hn align="对齐方式">标题文本</hn> 该语法中n的取值为1到6,align属性为可选属性,用于指定标题的对齐方式,下面来演示标题标记的使用。</p><h2></h2><p>HTML+CSS笔记 1.学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。 (1)HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。 (2)CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。 (3)JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。 2.添加样式如: <style type="text/css"> h1{ font-size:12px; color:#930; text-align:center; } 我的第二个段落 (2)标签与标签之间是可以嵌套的,但先后顺序必须保持一致,如:<div>里嵌套,那么 必须</p><p>11.使用<br/>标签分行显示文本 需要加回车换行的地方加入<br />,<br />标签作用相当于word文档中的回车 暗淡轻黄体性柔,<br/> 情疏迹远只香留。<br/> 何须浅碧深红色,<br/> 自是花中第一流。 12.认识<hr>标签,添加水平横线 13. <address>标签,为网页加入地址信息 15.使用ul,添加信息列表(无序列表):如下图</p><p>18.认识table标签,认识网页上的表格</p><p>19.caption标签,为表格添加标题和摘要 摘要:摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。 例如:</p><h2></h2><p>千锋html5基础入门教程内容 千锋html5基础入门教程内容有哪些?零基础能不能学会这门课程?互联网的高速发展带动了软件行业,更多年轻人会选择学习软件行业作为未来的职业,html5随着近两年的不断火热,受到了更多年轻人的青睐,那么学习的内容也更受到大家的关注,那么给大家介绍一下千锋html5入门教程内容。 千锋html5培训课程分采用进阶式学习,阶段性检测学员掌握学员学习情况。千锋的html5学科的课程体系能够适应市场需求、紧跟时代技术,完全满足市场对html5工程师的要求,大大提升了学员的市场竞争力。学习内容包括7大学习阶段: 阶段一:前端页面重构(4周) 内容包含了:(PC端网站布局项目、HTML5+CSS3基础项目、WebApp 页面布局项目) 阶段二:JavaScript高级程序设计(5周)</p><p>内容包含:1)原生JavaScript交互功能开发项目、面向对象进阶与ES5/ES6应用项目、JavaScript工具库自主研发项目) 阶段三:PC端全栈项目开发(3周) 内容包含:(jQuery经典交互特效开发、HTTP协议、Ajax进阶与PHP/JAVA开发项目、前端工程化与模块化应用项目、PC端网站开发项目、PC端管理信息系统前端开发项目) 阶段四:移动端项目开发(6周) 内容包含:(Touch端项目、微信场景项目、应用Angular+Ionic开发WebApp项目、应用Vue.js开发WebApp项目、应用React.js开发WebApp项目) 阶段五:混合(Hybrid,ReactNative)开发(1周) 内容包含:(微信小程序开发、React Native、各类混合应用开发)</p><h2></h2><p>HTML知识点总结 第一章:知识总结 1. <b>HTML文档结构</b>(括号里面的就是注释) <!DOCTYPE html > *注:<!DOCTYPE> 标签没有结束标签! <html > <head>(头部部分) <meta http-equiv=“Content-Type”content=“text/html”; charset=gb2312 >(可写可不写) <title>显示在浏览器标题栏中的标题 (主体部分) (页面内容) 标签中的属性有: bgcolor=颜色(背景颜色) background=图片的绝对路径或相对路径(背景图片) 2. 标题标签 n取1~6(设置文字标题): 1)

一级标题

2)

二级标题

3)

三级标题

4)

四级标题

5)
五级标题
6)
六级标题
3、标签(设置文字属性) 要设置的文字

5、行的控制相关标签 段落标签

(段落的对其方式) 换行标签
6、图片标签 图片的提示文字 (align就是用于调整图片相对于周围文本的对其方式) 7、文字布局 1) 水平线


2) 有序列表的语法
    (序号类型有:1、a、A、ⅰ、I)
  1. 填写信息
  2. (必须用
  3. 将内容包括起来)
  4. 填写信息
  5. 填写信息
  6. ……
3) 无序列表语法
    (序号类型有:disc(默认值,实心圆点)、circle(空心圆环)、square(空心正方形))
  • 所写内容
  • (必须用
  • 将内容包括起来)
4) 预格式文本语法
 (具体的文本格式,这个格式在时就是不改变的哦!) 
8、页面链接语法 1) 链接到其她页面 连接标志 2) 链接到本页面 首先创建一个锚链接的锚记点:主题名称 然后在具体要链接到的地方设置name: (锚记点前面要加上#号) 3) 电子邮件链接 站长邮箱(注意不能忘了mailto) 9、滚动标签的语法 滚动的文字与图像

教案编写日期:20XX年11月20日授课时间:20XX年11月21日-25日授课班级:高二3-8班授课地点:高中微机教室 第六章HTML代码基础 §1.1 HTML语言 指导思想与理论依据:HTML语言基础广西科学技术出版社《信息技术高中第三册》第一单元第六章——“了解一点HTML”的入门知识,HTML语言是超文本标记语言的缩写(HyperTextMarkupLanguage) ,它是网页设计中应用最广泛的一种语言,也是网页制作中学生感到最头疼难学的一个内容。掌握html语言基础会让动态网页制作的学习事半功倍,因而本部分知识显得非常重要,因此在本节课程的教学中,结合新课标及教材的特点,采用多种教学法结合方式(启发式教学法、任务驱动法、演示法等等...),激发学生学习兴趣,尤其是注重对学生的引导,采用任务驱动方式教学,引导学生通过自主学习平台自主学习从而提高学生的学习效率,本节内容是在学生已经掌握了利用FRONTPAGE制作普通网页的基础上,对网页语言的深入学习。 学情背景分析: 本节之前,学生已经学习了如何利用FrontPage进行网页以及网站的制作,但是对于网页的认识还知识停留在页面的直观设计上,缺少对HTML代码的认识。本节课主要对学生讲述HTML的基本概念,为学生培养良好的代码结构意识打下基础。 在本节课程的教学中,结合新课改的理念,采用创设情境演示教学的方法,激发学生学习兴趣,采用任务驱动方式教学,引导学生通过自主学习平台自主学习从而提高学习效率。 教学目标 1、掌握HTML基本概念、格式,理解其与网页的关系; 2、掌握基本的HTML 标签的作用与用法; 过程与方法:通过对简单网页html代码的观察对和html语言的基本结构进行自我概括,掌握HTML文件的基本结构,能够明确HTML语言的结构和特点,并能在实验的过程中尝试自我修改。 情感态度价值观:本课主要锻炼学生分析能力,语言构成能力。在相应的实验中,还能提升学生自主探究、自我学习的能力。 教学重点:HTML标签的基本用法及其意义 教学难点:HTML主要标签属性的具体意义及使用 教学方法:任务驱动法(引导学生自主学习)、演示法(激发学生学习兴趣)、上机操作实习法(精讲多练)、联系对比法(化难为易,照葫芦画瓢) 教学媒体:教材、多媒体课件、电脑等

首先学习HTML我认为需要搞懂块级元素与行内元素这两个概念 块级元素与行内元素 块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊,它只能用来容纳其他块元素。 你能够把块容器元素div想象成一个个box,或者如果你玩过剪贴文载的话,那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图,用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报了。作为一种技术的延伸,网页布局设计也遵循了同样的模式。. 内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素,常见内联元素“a”。 块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后,块元素和内联元素的这种属性差异就不成为差异了。比如,我们完全可以把内联元素cite加上display:block 这样的属性,让他也有每次都从新行开始的属性。 可变元素的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别,一旦上下文关系确定了他的类别,他就要遵循块元素或者内联元素的规则限制。大致的元素分类见全文。 块元素(block element) *address-地址 *blockquote-块引用 *center-居中对齐块 *dir-目录列表 *div-常用块级元素,也是css layout的主要标签 *dl-定义列表 *fieldset-form控制组 *form-交互表单 *h1-h6标题 *hr-水平分隔线 *isindex-input prompt *menu-菜单列表 *noframes-frames可选内容,(对于不支持frame的浏览器显示此区块内容 *noscript-可选脚本内容(对于不支持script的浏览器显示此内容) *ol-排序表单 *p-段落 *pre-格式化文本 *table-表格

Html5·J S基础 Html5是超文本标记语言,不属于编程语言。 Html5不考虑对IE9及以下版本的支持。 1.html5基础 div布局中设置浮动:float: right; 清除浮动:clear: both; 表格布局中合并2个单元格:colspan="2" 要在网页上显示预留关键字可以直接百度HTML实体。 XHTML的语法和书写格式更加严格规范。 1.1.html基础格式 //声明:html各版本的声明方式不同,这里是html5版本 //en表示英文,zh表示中文 //编码格式 叉叉学院 大叉叉家族 hello //这里的两排文字是没有格式的,不会分两排显示,可使用换行符

大狗狗

//html标题

大豚豚

hello dachacha //html段落 hello //这里的两排文字是有格式的,会分两排显示 百度一下 //html链接 //html图片 换行符:hello dachacha
hello dagou

1.2.html标签属性 1)通用属性: class:规定元素的类名 id:规定元素唯一ID style:规定元素样式 title:规定元素的额外信息 2)键/值属性: 打开本地 点击打开本地,进入href_file.html。href="#"表示点击链接后跳转到自身 3)常用属性:

:align对齐方式,有right,left,center

title

:bgcolor背景颜色,颜色是十六进制符号来定义的 background背景,如background="image01.jpg" :target规定在何处打开链接。_blank:在新页面打开(浏览器的新页面) _self:在当前页面打开(当前框架页面) _top:在顶级页面打开(相当于浏览器当前页面) _parent:在父级页面打开(承载当前框架的框架内打开)打开本地 1.3.html格式化 定义粗体文本 定义删除字 定义着重字 定义斜体字 定义小号字 定义加重语气 定义下标字 定义上标字 定义插入字 欢迎来到叉叉学院 1.4.html样式 1)外部样式表 创建外部样式文件mystyle.css然后在head中引用该样式: 2)内部样式表 直接将外部样式文件的内容写到head中,p标签装的是需要改变样式的文本

元素分类 在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。 常用的块状元素有:

、、

...