HTML 0零基础

最新推荐文章于 2023-05-17 19:00:57 发布

置顶 YCC888

最新推荐文章于 2023-05-17 19:00:57 发布

阅读量1k

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/YCC888/article/details/84065414

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML

一、HTML简介：

1．HTML（Hyper Text Markup Language），超文本标记性语言。

2．1997年元月，W3C组织（World Wide Web Consorium）的HTML Working Group开发了HTML 3.2。

3．现在使用的HTML版本为HTML 4.0。 XHTML

二、HTML的编写方法：

1．利用记事本（Notepad）、Word等文本编辑器，保存为*.htm *.html文件，用IE浏览器打开。

2．利用FrontPage、Dreamweaver等网页编辑器。

三、HTML的基本结构：

<html>

<head>

文件头部分

</head>

<body>

文件主体部分

</body>

</html>

注意事项也是语法：

① HTML文档由标记组成。大部分标记是成对出现的：<标记> </标记>。

② 标记与标记之间可以嵌套。

③ 在HTML文档中不区分大小写。

④ HTML标记有许多属性，属性要写在开始标记里，属性之间用空格隔开，属性值用引号引住。

⑤ 任何键盘输入的空格、回车在HTML中不起任何作用。

四、页面头部标记：作用于<head>...</head>之间。

（一）<title></title>标记：标题标记。显示在浏览器的标题栏，该标记没有属性。

作用：

2．浏览器保存该页面后的文件名。

3．浏览者将该网页添加到收藏夹中该页面的名字。

（二）<basefont>标记：基底文字标记。

作用：一般用于设定浏览器中文字的字体、字号、字色。在文档中所有没有指定字体、字号、字色的文字均采用该方案。

语法格式：<basefont face="Font_name" size="value" color="value">

属性：face：指定字体和字体列表（用逗号隔开）。

size：指定字号。取值范围：1~7。

color：指定字色。可以写颜色代码或颜色名称。

注意：该标记没有</basefont>标记，无需成对出现。

识记下列颜色代码与名称：

颜色	名称	代码	颜色	名称	代码
黑色	Black	#000000	白色	white	#FFFFFF
红色	Red	#FF0000	绿色	green	#00FF00
蓝色	Blue	#0000FF	棕色	brown	#A52A2A
橘色	Orange	#FFA500	灰色	Gray	#808080
金色	Gold	#FFD700	紫色	purple	#800080
黄色	Yellow	#FFFF00

Base标签可以让当前页面中的所有的a标签都拥有相同的属性，比如targent属性。

（三）<style>......</style>标记：用于设定CSS样式表。

（四）<meta>标记：元信息标记。

语法格式：<meta http-equiv="value" name="key" content="key_value">

属性：http-equiv：生成http标题域，传送http通信协议的标头。

name：关键字。

content：关键字取值。

name关键字	功能
generator	指定网页编辑器的名称。
keywords	指定网页的搜索关键字。
description	指定网页描述。
author	指定网页作者。
Build	指定网站建立日期。
copyright	指定网页版权信息。
Reply-to	记载联系人邮箱。
robots	指定搜索方式。

说明：（1）．generator：content值可以设定为Notepad、Frontpage、Dreamweaver。

（2）．keywords：多个关键字之间可以使用逗号隔开。关键字不易设定得过多。

（3）．robots：content值可以设定为

all：可搜索当前网页及其链接网页。

index：可搜索当前页。

nofollow：不能搜索与当前网页链接的页面。

noindex：不能搜索当前页。

none：不能搜索当前页及其链接网页。

2．通过http-equiv实现的功能：

（1）．设定字符集：

格式：<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

一个是4.0版本的，一个是5.0版本的。

utf-8????? 国际通用编码

gb2312？？？简体中文

gbk???? 简体中文它只支持的字符集要比gb2312多一些。

（2）．自动刷新：

格式：<meta http-equiv="refresh" content="3">

属性：content写明自动刷新间隔的时间，单位是秒。

（3）．自动跳转：

格式：<meta http-equiv="refresh" content="value; URL=URL_value">

属性：content写明跳转前等待时间，单位是秒。

URL写明跳转地址。

注意：此例用于站点地址（网站域名）发生变化。

（4）．禁用缓存：

格式：<meta http-equiv="cache-control" content="no-cache" />

说明：使用网页缓存可以加快浏览速度，因为缓存将曾经浏览过的页面暂存在电脑中，用户下次打开同一个网页内容时，可快速浏览该页，省去读取同一页面的时间。但是如果网页的内容经常频繁的更新，网页制作者可以禁用网页缓存以使用户随时都能查看到最新的内容。

3．设定转场效果：

转场效果：也称为网页过渡，指进入或离开网页时，页面具有不同的切换效果。

语法格式：

属性：event设定产生效果的事件（page-enter进入网页时；page-exit离开网页时。）

duration设定网页转场效果的延迟时间，单位是秒。

transition设定过渡效果方式编号，取值范围为0~23。

编号	效果	编号	效果
0	盒状收缩	12	溶解
1	盒状展开	13	左右向中部收缩
2	圆形收缩	14	中部向左右收缩
3	圆形展开	15	上下向中部收缩
4	向上擦除	16	中部向上下收缩
5	向下擦除	17	阶梯状向左下展开
6	向左擦除	18	阶梯状向左上展开
7	向右擦除	19	阶梯状向右下展开
8	垂直百叶窗	20	阶梯状向右上展开
9	水平百叶窗	21	随机水平线
10	横向棋盘	22	随机垂直线
11	纵向棋盘	23	随机

用vscode这个编辑器生成的默认html文件：

解释：如果是用ie打开的当前页面，那么就使用最新的ie版本渲染此页面。

解释：目前网页有手机mobile上可以打开的网页，用ipad打开的网页，还有电脑pc可以打开的网页。 width（宽度） = device(设备)-width(宽度)

五、页面主体标记:

<body>标记的属性：

1．text：设定网页文本的颜色。

2．bgcolor：设定网页背景的颜色。

3．background：设定网页的背景图像。

4．bgproperties：设定网页的背景图像为固定，不随页面的滚动而滚动。

（1）．只有background属性存在，该属性才可以使用。

（2）．在background属性存在的情况下，若无该属性，则背景图是滚动的。

（3）．若有：

<body background="URL" bgproperties="fixed">，则背景图是固定的。

5．link：设定页面默认的链接颜色。

6．alink：设定鼠标正在单击时的链接颜色。

7．vlink：设定访问后的链接颜色。

8．topmargin：设定页面的上边距。单位是像素。

9．leftmargin：设定页面的左边距。单位是像素。

六、文字与段落：

（一）输入特殊符号：

语法格式：&名称；

代码	符号	代码	符号	代码	符号
；	Space（空格）	&；	&	§；	§
<；	<（小于号）	×；		·；	·
>；	>（大于号）	±；		¢；	¢
©；	©	¥；	￥	&euro；	€
®；	®	&trade；	TM	£；	₤

（二）注释语句：

语法格式1：<!— —注释内容— —>

语法格式2：<comment>注释内容</comment> 已经被废弃

（三）标题标记：

语法格式：<hn align="value">文字</hn>

属性：n可以取值为1~6：

<h1>xxxxxx</h1>：黑体，特大字体，上下各有两行空行。

<h2></h2>：黑体，大字体，上下各有一到两行空行。

<h3></h3>：黑体（斜体），大字体，左端稍缩进。

<h4></h4>：黑体，普通字体，比h3更多缩进，上空一行。

<h5></h5>：黑体（斜体），与h4缩进相同，上空一行。

<h6></h6>：黑体，与正文缩进相同，上空一行。

align对齐方式，可以取值left（左对齐）center（居中对齐）right（右对齐）。

SEO相关：

H1标题标签是标注当前页面中的文档最重要的核心主题的文本。

H1到 h6标签，相对于当前文档的重要性依次降低。注意h1标签在整个页面中最多一次（当然可以超过，但是不利于搜索SEO）。

H2以后的这些标签可以在一个页面中有多个，但是不要滥用，滥用会导致网页的SEO受影响，搜索引擎会认为我们作弊。

（四）文字修饰标记：

1．粗体、斜体、下滑线、删除线：

粗体：语法格式1：<b>文字</b>

语法格式2：<strong>文字</strong>

斜体：语法格式1：<i>文字</i>

语法格式2：<em>文字</em>

语法格式3：<cite>文字</cite>

下滑线：语法格式：<u>文字</u>

删除线：语法格式1：<s>文字</s>

语法格式2：<strike>文字</strike>

语法格式3：<del>文字</del>

2．上标、下标：

上标：语法格式：<sup>文字</sup>

下标：语法格式：<sub>文字</sub>

3．大字号、小字号：

大字号：语法格式：<big>文字</big> 将当前文字加大一级字号显示。

小字号：语法格式：<small>文字</small> 将当前文字减小一级字号显示。

4．地址文字标记：语法格式：<address>文字</address>

功能：用以显示E-mail、地址等文字内容。实现换行，斜体效果。

5．打字机标记：语法格式：<tt>文字</tt>

6．等宽文字标记：

语法格式1：<code>文字</code>

语法格式2：<samp>文字</samp>

7．键盘标记：语法格式：<kbd>文字</kbd>

8．变量标记：语法格式：<var>文字</var>

（五）字体标记：

语法格式：<font face="字体1,字体2" size="字号" color="字色"></font>

属性：face指定文字的字体或字体列表，字体列表用逗号隔开。

size指定文字的大小，取值范围为：

绝对大小：1~7

相对大小：+1~+7、-1~-7

（六）段落标记：

1．<p align="left, right, center">文字</p>：产生空行也就是有间隙，成对使用。

2．<br>：单独使用，无属性，不产生空行也就是没有间隙。

3．<nobr>文字</nobr>：强制不换行且产生水平滚动条。

4． <wbr>文字</wbr>：在<nobr></nobr>中强制换行。

5． <pre>段落</pre>：预格式化文本，必须成对使用。

6．<center>段落</center>：段落居中。

7．<blockquote>文字</blockquote>：文字缩进排版。

8.<span></span>

span标签定义文档中的一小节文本。语义不强。

span标签可以跟其他的span标签共用一行。

（七）水平线：

语法格式：<hr width="value" size="value" color="value" align="value" noshade>

属性：width指定水平线的宽度，可以使用绝对像素值或百分比。

size指定水平线的厚度，只能使用绝对像素值。

color指定水平线的颜色。

align指定水平线的对齐方式。

noshade指定水平线为实心不带阴影。

注意：是单标记。

（八）其他文字标记：

1．忽略HTML标签标记：

语法格式1：<plaintext> 不推荐使用

语法格式2：<xmp>

2．在文字上方标注说明：

语法格式：<ruby>被标注文字 <rt>说明文字</rt> </ruby>

（九）DIV标记

Div和span标签

Div标签: <div></div>

Span标签: <span></span>

块级标签(display:block):独占一行。一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，可以设置宽度和高度。

行级标签(display:inline)：内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但不能设置宽度和高度。

块：p，div，ul，ol，dl，li，dt，h1-h6 ，可以设置宽度，使用display:block可以将其转换为块级元素。

行：span，strong，em，a 文本相关的标签都是行内标签，不可以设置宽高，使用display:inline可以将其转换为行内元素。

Div多用于表示文档中的一个块或者是整个结构的小节。

Span标签，多用于文本的一小节。

同时拥有行内元素和块级元素的属性的标签：img。

七、列表：（重点）

（一）建立有序列表：

语法格式：<OL type="value" start="value">

<li> 有序列表项1</li>

<li> 有序列表项2</li>

<li> 有序列表项3</li>

</OL>

属性：start指定有序列表的起始序号。

type指定有序列表序号的格式：

value值	格式
1	数值：1，2，3．．．
a	小写字母：a，b，c．．．
A	大写字母：A，B，C．．．
i	小写罗马字母：i，ii，iii．．．
I	大写罗马字母：I，II，III．．．

（二）建立无序列表：

语法格式1：<UL type="value">

<LI> 无序列表项1</LI>

<LI> 无序列表项2</LI>

<LI> 无序列表项3</LI>

</UL>

属性：type指定无序列表符号的格式：

type="disc" ● ；type="circle" ○ ；type="square" □ 。

语法格式2：<menu>

<LI> 无序列表项1</LI>

<LI> 无序列表项2</LI>

<LI> 无序列表项3</LI>

</menu>

语法格式3：<dir>

<LI> 无序列表项1 </LI>

<LI> 无序列表项2</LI>

<LI> 无序列表项3</LI>

</dir>

注意：1．<menu></menu>称为菜单列表，在HTML中表现与无序列表格式相同。

2．<dir></dir>称为目录列表，在HTML中表现与无序列表格式相同，每个列表项最多20个字符。

（三）建立定义列表：

语法格式：<DL>

<DT> 名词术语1 <DD> 解释1 <DD> 解释2

<DT> 名词2 <DD> 解释1 <DD> 解释2

<DT> 名词3 <DD> 解释1 <DD> 解释2

</DL>

（四）嵌套列表：

重复的使用<OL>、<UL>、<DL>等列表标记可以组合成嵌套列表。

八、超级链接：（重点）

（一）统一资源定位器（Uniform Resource Locator，URL）：

在网络中进行资源定位的统一格式。

格式：

Protocol：//Host-name. Domain-name/Path/File-name：Port

协议：//主机名.域名/路径/文件名：端口号

例如：

http://www.163.com:80

（二）超级链接：

定义：也叫超链接，是在页面间确定相互导航关系的非线性的文字标识。

（三）路径：

1．路径分类：绝对路径、相对路径、根路径。

站点(项目根目录)：

也就是文件夹，这个文件夹用来存储网站上所有的内容(一些.html文件，一些css文件，一些图片文件，一些视频文件等等)，等项目开发完成以后，可以将站点上传到空间，通过域名去访问。

建立站点就像新建一个文件夹一样简单。

怎么将站点放在编辑器中？？？

首页：

就是你输入域名以后访问的页面，首页有一定的规范，名字必须叫做index.html，存储在站点的位置还必须是站点根目录下也就是项目根目录下，只有这样的话，空间和域名才能找到。

2．绝对路径（Absolute Path）：

为文件提供完整的URL地址，多适用于外部链接。

3．相对路径（Relative Path）：

相对于站点根目录的URL，多适用于内部链接。

优点：若站点文件夹所在地址发生变化，则文件夹中的所有内部链接均不会出现问题。

若链接到同一目录中的文档，只需直接输入链接文档的名字。
若链接到下一级目录中的文档，只需先输入目录名，再加/，再输入文档名。
若链接到上一级目录中的文档，只需先输入../，再输入目录名和文档名。

4．根路径：

格式：/根目录名/路径/文件名

该方法适用于内部链接，W3C不提倡使用。

（四）链接分类：

链接分为4类：内部链接、锚点链接、外部链接、特殊链接。

1．内部链接：在当前网站内进行跳转。

语法格式：<a href="URL" target="value" title="value">文字</a>

属性：href指定链接的文档的URL地址。

target指定链接的目标。

_self：在同一窗口打开链接的URL地址。

_blank：在新窗口打开链接的URL地址。

_top：忽略框架，在整个浏览器窗口打开链接的URL地址。

_parent：在上一级窗口打开链接的URL地址。

title指定手形鼠标放在链接上时产生的链接提示标题。

2．锚点链接：又称书签链接，为解决同一页面过长而采取的方案。

（1）．建立锚点：

想返回到哪就在那建立锚点。

语法格式1：<a name="name">文字</a>

语法格式2：<a id=”name”>文字</a>

建立锚点链接时<a>标记可以成对出现，也可以单独使用，也可以使用除a标签以外的标签，比如div，span。

（2）．在同一页面中链接锚点：

语法格式：<a href="#name">文字</a>

（3）．在不同页面之间链接锚点：

语法格式：<a href="

#name">文字</a>

3．外部链接：跳转到当前站点之外，此种链接需使用完整的URL地址。

4. 空链接 # javascript:; 阻止默认行为(阻止打开别的页面的行为) 和下载链接

九、图片（重点）：

（一）图片的基本格式：

1.JPEG：Joint Photographic Experts Group，联合图像专家组，国际标准ISO/IEC10918。

特点：（1）.使用有损压缩；

（2）.支持大约1670万种颜色；

2.GIF：Graphics Interchange Format，图像交换格式，由CompuServe公司开发。

特点：（1）.使用无损压缩；

（2）.仅支持256种颜色；

（3）.支持透明背景和动画效果。

3.png 不能支持动画，但是可以支持背景透明。

（二）图片标记：

语法格式：

<img src="File_name" alt="value" width="value" height="value" border="value"

align="value" vspace="value" hspace="value" lowsrc="File_name">

属性：src指定图片的路径和文件名。

alt替代，指图片的文字提示。

① 当鼠标指向图像上方时，会出现图片的提示文字。

② 若图片没有被下载，则图片位置会出现提示文字。

border图片边框宽度，单位为像素，颜色为黑色。

若图片上填有链接，则图片边框颜色为链接颜色，默认为深蓝色。

align图片对齐方式：

① baseline（基线）、bottom（底部）、Absbottom（Absolute Bottom，绝对底部）效果相同，指图片底端与文字底端对齐。

② top（顶部）、texttop（文本上方）效果相同，指图片顶端和文字行最高字符顶端对齐。

③ middle（中部）指图片中间线与文字底端对齐。

④ absmiddle（Absolute Middle，绝对中间）指图片中间线与文字中间线对齐。

⑤ left（左对齐）、right（右对齐）。

vspace调整图片与文字的上下距离，单位为像素。

hspace调整图片与文字的左右距离，单位为像素。

lowsrc低分辨率源文件，若用户的浏览速度很慢，可看到该图的低分辨率图片。

水平方向： left（左） center（中） right（右）

垂直方向： top（顶） middle（中） bottom（底）

（三）利用<img>标记插入AVI视频：

AVI：Audio-Video Interleaved，音频-视频交错，是Windows操作系统的默认视频格式。

语法格式：

属性：dynsrc指定AVI视频的路径及文件名。该属性用于指定动画文件的文件名，包括文件所在的路径。支持的文件类型为：.avi,.mov,.mpg/mpeg,.asf,.rm,.ram,.swf.

必需要加上Width宽度和height高度，加上以后才会显示。

不是每个avi视频文件都能播放的，如果只有声音而没图像，能在网页上显示的也能在电脑上的media player能播放，而不能显示的则只有声音。

众所周知avi格式的视频是用于操作系统的widow系列，下个解码软件，安装后在media player上可以播放了。

视频在网页上显示不出来应该是该视频解码格式不对的缘故，所以这种方法插入视频文件其实缺点很大，用户在访问你的网页的时候，如果不能解码视频文件则只能听到声音而没画面。

loopdelay指定AVI文件循环延迟，单位为秒。

loop指定AVI文件循环次数。若loop="infinite"，则文件无限次循环。

start指定AVI文件播放方式。

① start="fileopen"，网页打开时自动播放AVI视频。

② start="mouseover"，鼠标滑过AVI视频时播放。

（四）制作图像热区：

在<img>标记中使用usemap属性，利用<map></map>定义热区。

语法格式：<img src="File_name" usemap="#映像名">

</map>

属性：shape定义热区形状。

shape="rect"（矩形）；shape="circle"（圆形）；shape="poly"（多边形）。

coords定义热区坐标。

十、表格（重点）：

（一）表格标记：

语法格式：

<table width="value" height="value" border="value" bordercolor="value"

bordercolorlight="value" bordercolordark="value" bgcolor="value"

background="File_name" cellspacing="value" cellpadding="value"

align="value" frame="value" rules="value">

</tr>

<tr>

</tr>

</table>

属性：width宽度，单位为像素或百分比。

height高度，单位为像素或百分比。

border边框大小，默认为0，单位为像素。

bordercolor边框颜色。

bordercolorlight亮边框颜色，表格左上边框和单元格右下边框的颜色。

bordercolordark暗边框颜色，表格右下边框和单元格左上边框的颜色。

亮边框颜色、暗边框颜色可以覆盖边框颜色。

bgcolor背景颜色。

background背景图片。

cellspacing单元格间距，单元格与单元格之间的距离。

cellpadding单元格边距，单元格内容与单元格边框的距离。

align表格对齐方式，左对齐（left）、右对齐（right）、居中（center）。

frame边框样式。

frame属性取值	描述
Above	显示上边框。
Below	显示下边框。
Border	显示上下左右边框。
Box	显示上下左右边框。
Hsides	显示上下边框。
Lhs	显示左边框。
Rhs	显示右边框。
Void	不显示边框。
Vsides	显示左右边框。

rules内部边框样式。

rules属性取值	描述
All	显示所有内部边框。
Cols	仅显示列边框。
groups	显示介于行列间的边框。
none	不显示内部边框。
rows	仅显示行边框。

（二）表格标题与表格表头标记：

1.表格标题：

语法格式：<caption align="value" valign="value">文字</caption>

属性：align指定表格标题的水平对齐，左对齐（left）、右对齐（right）、居中（center）。

valign指定表格标题的垂直对齐，居上（top）、居底（bottom）。

2.表格表头

语法格式：<th>文字</th>

说明：定义为表格表头的行的内容居中并加粗显示。

（三）行标记：

语法格式：<tr></tr>

属性：

属性	描述
align	行内容的水平对齐。
valign	行内容的垂直对齐。
bgcolor	行的背景颜色。
bordercolor	行的边框颜色。
bordercolorlight	行的亮边框颜色。
bordercolordark	行的暗边框颜色。

说明：（1）.bordercolorlight指行的单元格的右下边框颜色，该属性可以覆盖<table>标记的亮边框颜色属性。

（2）.bordercolordark指行的单元格的左上边框颜色，该属性可以覆盖<table>标记的暗边框颜色属性。

（3）.align取值为左对齐（left）、右对齐（right）、居中（center）。

（4）.valign取值为居上（top）、居中（middle）、居下（bottom）。

（四）单元格标记：

语法格式：<td>内容</td>

属性：

属性	描述
align	单元格内容的水平对齐。
valign	单元格内容的垂直对齐。
bgcolor	单元格的背景颜色。
bordercolor	单元格的边框颜色。
bordercolorlight	单元格的亮边框颜色。
bordercolordark	单元格的暗边框颜色。
background	单元格的背景图片。
width	单元格的宽度。
height	单元格高度。
rowspan	单元格跨行属性。
colspan	单元格跨列属性。

说明：（1）.bordercolorlight指单元格右下边框颜色，该属性可以覆盖<table>标记、<tr>标记的亮边框颜色属性。

（2）.bordercolordark指单元格左上边框颜色，该属性可以覆盖<table>标记、<tr>标记的暗边框颜色属性。

（3）.align取值为左对齐（left）、右对齐（right）、居中（center）。

（4）.valign取值为居上（top）、居中（middle）、居下（bottom）。

（5）.rowspan设置单元格在水平方向跨过多少单元格。

（6）.colspan设置单元格在垂直方向跨过多少单元格。

（7）.以上属性<th>表格表头标记也存在，相应含义与上述描述类似。

总结：表格的完整格式为：

<table>

<tr>

</tr>

<tr>

<td>表格单元格</td>

</tr>

</table>

十一、表单（重点）：

（一）表单标记：

语法格式：<form action="URL" name="Form_name" method="value">

</form>

属性：action指定表单处理程序的位置。

name指定表单的名称。

method定义表单从浏览器传送到服务器的方法。

① method="get"，将表单内容附加在URL地址之后传送给服务器。

特点：对提交信息长度有限制，不得超过8192个字符；

此方法不具有保密性；

此方法不可传输非ASCII字符；

若没有此属性，默认为get方法。

② method="post"，将表单内容包含在表单主题中传送给服务器。

特点：该方法没有字符的限制；

这是一种邮寄的方法，在浏览器地址栏不显示任何信息。

在<form></form>之间，可以有以下四个标记：

标记	指示的控件
<input>	文本域、密码域、文件域、隐藏域、图像域、复选框、单选框、按钮。
<select>	菜单、列表。
<option>	在<select></select>之间指定菜单项、列表项。
<textarea>	多行文本域。

（二）输入标记：

语法格式：<input name="Field_name" type="Type_name">

属性：name指定域的名称。

type指定域的类型。

type属性值	域类型	type属性值	域类型
text	文本域	checkbox	复选框
password	密码域	radio	单选框
File	文件域	button	普通按钮
hidden	隐藏域	submit	确认按钮
image	图像域	reset	重置按钮

1．文本域

语法格式：<input type="text" maxlength="value" size="value" value="Default_Value" placeholder="请输入用户名"

name="Text_name" readonly="readonly">

属性：maxlength文本域的最大输入字符数，想要更精确的控制文本框里的值，还需要书写js代码，正则表达式。

size文本域的宽度，单位为字符。

value文本域的默认值。

placeholder是对输入的内容进行提示。

name就是对文本框起的名字，作用：后台在获取用户所输入的值的时候，需要根据名字来进行获取值。

readonly只读属性，不能修改文本框中的值。readonly="readonly"

对于这种属性名与属性值一样的，可以省略

2．密码域：

语法格式：<input type="password" maxlength="value" size="value" name="Password_name">

属性同文本域。

3．文件域：

语法格式：<input type="file" name="File_name">

4．隐藏域：

语法格式：<input type="hidden" name="Hidden_name" value="value">

注意：隐藏域在表单中不显示，但是隐藏域的信息被一同发送到服务器上。

5．图像域：

语法格式：<input type="image" src="Image_URL" name="Image_name">

属性：src指定图像域中图像的URL。

注意：图像域是一个具有按钮功能的图像。

6．复选框：

语法格式：<input type="checkbox" value="value" checked name="Checkbox_name[]">

属性：value表示选中项目后传送到服务器端的值。

checked拥有该项表示该项目默认为选中。

7．单选框：

语法格式：<input type="radio" value="value" checked name="Radio_name">

属性：value表示选中项目后传送到服务器端的值。

checked拥有该项表示该项目默认为选中。

注意：表单中多个name属性相同取值的单选框之间关系互斥。

8．普通按钮：

语法格式：<input type="button" value="value" name="Button_name">

属性：value显示在按钮上的文字。

<button>按钮上的文字</button>

在form表单中的话也是可以提交的，不在表单中就是一个普通按钮。

9．确认按钮：

语法格式：<input type="submit" value="value" name="Submit_name">

10．重置按钮：

语法格式：<input type="reset" value="value" name="Reset_name">

（三）菜单标记：

语法格式：<select name="Select_name[]">

<option value="value" selected>条目1

<option value="value">条目2

<option value="value">条目3

</select>

属性：

name菜单的名称

value列表或菜单中某一条目的选项值。

selected默认被选中。

（四）多行文本标记：

语法格式：

属性：rows多行文本域的行数。

cols多行文本域的列数。

（五）Fieldset标签

表单组合标签，仅仅用于表单的组合。只是语义层面的事情。

Legend标签用于组合标签的标题。

（六）、Label标签

可以让标签文本点击的时候让label指向的标签表单标签获得焦点。

两种实现方式：

使用for属性指向表单标签

用lable标签包裹表单标签。

十二、框架：

（一）框架的概念：

1．定义：把浏览器划分为若干个区域，每个区域可以分别显示不同的网页。

2．框架的结构：框架集+框架

3．框架的特点：① 框架集中的框架都是各自独立的页面。

② 框架集页面中框架集标记代替<body>标记。

③ 使用框架网页主要的目的是创建链接的结构，链接的目标（target）属性会出现框架集中的框架。

（二）带有框架集的页面的基本格式：

<html>

<head>

文件头部分

</head>

文件框架部分

<frame>

</frameset>

</html>

（三）框架集标记：

语法格式：<frameset cols="value,value,…" rows="value,value,…" framespacing="value"

bordercolor="value">

</frameset>

框架集主要的分割方法有以下三种：

左右分割窗口（使用cols属性）、上下分割窗口（使用rows属性）、嵌套分割窗口。

属性：framespacing设定框架集的边框宽度，单位为像素。

bordercolor设定框架集的边框颜色。

（1）．左右分割窗口：

例1：<frameset cols="30%,70%">

<frame>

</frameset>

该例将框架集分割成了两个框架，第一个占整个页面的30%，第二个占整个页面的70%。

（2）．上下分割窗口：

例2：<frameset rows="20%,60%,*">

<frame>

该例把框架集分割成了三个框架，第一个占整个页面的20%，第二个占整个页面的60%，剩余的部分（用星号*表示）是第三个框架。

（3）．嵌套分割窗口：

例3： <frameset cols="20%,*">

<frame>

<frame>

</frameset>

该例把框架集分成了2个框架，第一个占整个页面的20%，剩余的部分是第二个框架；又把第二个框架继续分为2行，第一行占20%，剩余的是第二个框架。

（四）框架标记：

语法格式：<frame src="File_URL" frameborder="0或1" scrolling="value" noresize

marginwidth="value" marginheight="value" name="Frame_name">

属性：src设置框架显示的文件路径。

frameborder设置框架边框是否显示。

frameborder="0"，框架不显示边框。

frameborder="1"，框架显示边框。

scrolling设置框架滚动条是否显示。

scrolling="yes"，显示滚动条。

scrolling="no"，不显示滚动条。

scrolling="auto"，根据页面长度自动判断是否显示滚动条。

noresize控制框架是否可以通过拖动框架边框调整框架尺寸。带有该属性的不能调整尺寸。

marginwidth框架边缘宽度，单位为像素。

marginheight框架边缘高度，单位为像素。

框架实例：

注意事项：使用框架在制作布局结构的时候，还需要注意target的值为frame的框架的name属性值，还有就是跳转出框架的打开方式【_top】。

（五）浮动框架：

语法格式：<ifrmae></iframe>

属性：

属性	描述
src	浮动框架显示源文件的路径。
width	浮动框架的宽度。
height	浮动框架的高度。
name	浮动框架的名称。
align	浮动框架的对齐方式。
frameborder	浮动框架边框。
scrolling	浮动框架滚动条
marginwidth	浮动框架边缘宽度。
marginheight	浮动框架边缘高度。

以上属性的相应含义与<frame>标记的属性含义类似。

十三、多媒体元素：

（一）滚动文字：

语法格式：<marquee direction="value" behavior="value" scrollamount="value" scrolldelay="value"

width="value" height="value" loop="value" bgcolor="value"

hspace="value" vspace="value">

滚动内容

</marquee>

属性：direction设置滚动方向，向上（up）、向下（down）、向左（left）、向右（right）。

behavior设置滚动方式。

属性behavior的取值	描述
scroll	循环往复滚动。
slide	只进行一次滚动。
alternate	交替进行滚动。

scrollamount设置滚动速度。

scrolldelay设置连续两次滚动的间隔时间，单位是毫秒。

width确定滚动范围的宽度，单位为像素。

height确定滚动范围的高度，单位为像素。

loop设置循环滚动的次数。若loop="-1"，则滚动内容无限次滚动。

bgcolor滚动内容的背景颜色。

hspace设置滚动四周的水平空间距离，单位为像素。

vspace设置滚动四周的垂直空间距离，单位为像素。

οnmοuseοver="this.stop()" οnmοuseοut="this.start()"

（二）插入多媒体信息：

语法格式：<embed src="File_URL" width="value" height="value" hidden="true|no"

autostart="true|no" loop="true|no">

</embed>

属性：src设置插入多媒体文件的路径。

该文件可以是Flash文件（*.swf）、Mp3文件（*.mp3）、电影（*.mpg）、视频（*.avi）。

hidden用于控制播放面板的显示和隐藏。

hidden="true"，隐藏面板。

hidden="false"，显示面板。

autostart用于控制多媒体信息是否自动播放。

autostart="true"，多媒体文件自动播放。

autostart="false"，多媒体文件不自动播放。

loop设置多媒体文件是否自动播放。

loop="true"，无限次循环播放。

loop="false"，仅播放一次。

（三）背景音乐：

语法格式：<bgsound src="File_name" loop="value">

属性：src指定背景音乐的路径，该文件多为*.mid文件（合成文件）。

loop设定背景音乐的循环次数。loop="-1"，则无限次循环播放。

YCC888

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML 0零基础

HTML一、HTML简介： 1．HTML（Hyper Text Markup Language），超文本标记性语言。 2．1997年元月，W3C组织（World Wide Web Consorium）的HTML Working Group开发了HTML 3.2。 3．现在使用的HTML版本为HTML 4.0。 XHTML二、HTML的编写方法： 1．利用记...
复制链接

扫一扫