web网页设计学习记录（五）
1.如何设置背景色呢？
格式为：?<body bgcolor="色彩值"> ?
“色彩值”可以为色彩的英文名或相应十六进制值。
2.如何将图片作为背景呢？
格式为：<body background="图片文件名">
使用<body>标记的background属性，可为网页铺上背景图片。background取值为一个图片文件名，并且要指出文件存放的路径，可以是相对路径，也可以是绝对路径（这里建议相对路径）。图片文件可为GIF格式或JPEG格式的文件。其中，在浏览器中，作为背景的图片将按原来的大小复制，重复铺满整个网页。
3.如何将图片摆到指定位置？
使用图片标记<img>，用图片标记还可以设置图片的替代文本、尺寸、布局等属性。
图片标记的格式为：<img src=“图片文件名” alt=“替换文本" width="图片宽度" height="图片高度" ?border="边框宽度" hspace="水平方向空白" vspace="垂直方向空白" align="环绕方式|对齐方式">注意：如果不设定图片的尺寸，图片将按照其本身的大小显示。可使用<img>标记的width和height属性来设置图片的大小。width和height属性的属性值可取像素数，也可取百分数。并且可以设置属性使文本围绕图片；
4.若在接下来的文本我不想再以围绕图片的格式开展，应当如何操作？
可使用<br clear>标记，其后的文本将不再环绕图片。
格式为：<br clear="left|right|all"> ? ? ? ?
其中clear的取值可为：left（解除在图片左侧放置的文本）、right（解除在图片右侧放置的文本）或all（解除在图片左、右侧放置的文本）；
5.如何将图片作为热点（超链接）；
仍与文本超链接相似，使用<a>标记。
格式为：<a href="URL"><img src="图片文件名"></a>
6.什么是无序列表标记？
无序列表中每一个表项的前面是项目符号（如●、■等符号）。建立无序列表使用<UL>标记和<li>表项标记。
格式为：<ul type="符号类型"> ? ? ? ?<li type="符号类型1"> 第一个列表项 ? ? ? ?<li type="符号类型2"> 第二个列表项 ? ? ? ? … ? ?</ul>
注意：<li>标记是单标记。即一个表项的开始，就是前一个表项的结束。type指定每个表项左端的符号类型，可为disc（实心圆点）、circle（空心圆点）、square（方块），也可自己设置图片；
7.什么是有序列表呢？
使用<OL>标记可以建立有序列表，表项的标记仍为<li>。
格式为：?<ol type="符号类型"> <li type="符号类型1"> 表项1 <li type="符号类型2"> 表项2? ? ? ? ? ? ? ? ? ? ? ? ? ? ? …? ? ? </ol>
注意：?有序列表整个表项与上下段文本之间各有一行空白；列表项目向右缩进并左对齐；各表项前带顺序号。
8.题目要求：建立一个只有图片car.jpg的网页，在这张图片上建立链接，连接到另一张网页，网页上的内容如下所示：
实现以上要求需要建立两个页面，并准备一张图片，方便起见可以放到同一文件夹；
①实现图片热点页面的代码如下：
<html><head><title>qiche</title></head>
<body>
<a href="./jibenxinxi.html"><img src="./car.webp"></a>
</body>
</html> ②实现题中图所示表的代码如下：
?
<html><head><title>实现表单</title></head>
<body>
<ul>
<li>基本信息
<li type="circle">尺寸和重量
<ol type="1">
<li>长(mm) 5169
<li>宽(mm）1902
<li>高(mm) 1492
</ol>
<li>发动机参数
<li>驾驶性能
<ul type="disc">
<li>油耗（L/100km）13.60
<li type="square">最高车速（km/h）250
</ul>
</ul>
</body>
</html>
?最终效果图如下：
9.如何制作简单表格呢？
最简单的表格仅包括行和列。
格式为： ? ? <table border="n" width="x|x%" height="y|y%" cellspacing="i" ? ?cellpadding="j"> ? ? ? ? <tr> <th>表头1</th> <th>表头2</th> ? ? <th>…</th> <th>表头n</th> ? ? ? ?<tr> <td>表项1</td> <td>表项2</td> <td>…</td> <td>表项n</td> ? ? ? ? … ? ? ? <tr> <td>表项1</td> <td>表项2</td> <td>…</td> <td>表项n</td> </table>
其中：表格的标记为<table>，行的标记为<tr>，表项的标记为<td>，表头的标记为<th>。
为便于理解，实例代码如下：
<html>
<head><title>学生成绩统计表</title></head>
<body>
<table border=3>
<tr><th>学号</th><th>姓名</th><th>语文</td><th>数学</th><th>平均分数</th>
<tr><td>0001</td><td>张 三</td><td>92</td><td>98.5</td><td>95.3</td>
<tr><td>0002</td><td>李 四</td><td>88</td><td>82</td><td>85</td>
<tr><td>0006</td><td>王小五</td><td>68.5</td><td>90</td><td>79.3</td>
</table> <br>
<table>
<tr><th>学号</th><th>姓名</th><th>语文</td><th>数学</th><th>平均分数</th>
<tr><td>0001</td><td>张 三</td><td>92</td><td>98.5</td><td>95.3</td>
<tr><td>0002</td><td>李 四</td><td>88</td><td>82</td><td>85</td>
<tr> <td>0006</td><td>王小五</td><td>68.5</td><td>90</td><td>79.3</td>
</table>
</body>
</html>效果图如下：
10.表格内文字对齐方式有哪几种？如何实现？
①水平对齐：表项数据的水平对齐用标记<th>、<td>和<tr>的align属性。align的属性值分别为：center（表项数据的居中）、left（左对齐）、right（右对齐）或justify（左右调整）；
②垂直对齐：表项数据的垂直对齐用标记<th>、<td>和<tr>的valign属性。valign的属性值分别为：top（靠单元格顶）、bottom（靠单元格底）、middle（靠单元格中）或baseline（同行单元数据项位置一致）；
11.表格在页面中的对齐方式是怎样实现的？
与图片一样，表格在浏览器窗口中的位置也有三种：居左、居中和居右。使用<table>标记的align属性。
格式为： <table align="left|center|right"> ? ? ?
注意：当表格位于页面的左侧或右侧时，文本填充在另一侧。当表格居中时，表格两边没有文本。当align属性缺省时，文本在表格的下面；
12.表格的颜色与背景当如何设置？
在<table>、<th>、<tr>、<td>标记中，使用下面属性可以改变表格的背景和边框的色彩、添加背景图片，也可以为行和单元格改变色彩、添加背景图片。 ? ? ? ?
（1）bgcolor=""色彩或色彩值"?? ?设置背景色彩；
（2）background="图片文件名"?? ?设置背景图片；? ? ? ? ?
（3）bordercolor="色彩"? ? ? 设置表格边框的色彩；? ? ? ? ?
（4）bordercolorlight="色彩" ??? ?设置表格边框亮部的色彩；? ? ? ? ?
（5）rules="rows,cols或none" ?? ?设置表内线的显示方法，none为无内线 ；? ? ? ?
注意：如果把属性放到<table>中，其作用范围为整个表格，如果把属性放到<th>中，则作用范围为整个行，如果把属性放到<tr>、<td>中，则作用范围为该单元格；
13.如何在网页中实现字幕滚动呢？
流动字幕标记的格式为：<marquee direction="left|right|up|down" behavior="scroll|slide|alternate" loop="i|-1|infinite" hspace="m" vspace="n" scrollamount="i" scrolldelay="j" align="top|middle|bottom" bgcolor="色彩" width="x|x%" height="y"> 流动文字或（和）图片 </marquee>
并有属性如下：
同时marquee标记的应用技巧 如下:
（1）marquee标记的属性值尽量使用默认值。< marquee >字幕内容</ marquee >；
（2）多行文本的活动字幕 ：<marquee> ?活动字幕内容第一行<br> ? ? ? 活动字幕内容第二行<br> ? ? ? ? ?活动字幕内容第三行<br> ? ? </marquee>；
（3）在字幕内容中加入图片，例如： ? ? ? <marquee><img src="123.gif" width="17" height="16">这是插入图象的活动字幕</marquee>；
14.能在网页上插入音乐吗？
用浏览器可以播放的音频格式有：MIDI音乐、WAV音乐、AU格式。
（1）?点播音乐<a>...</a>：将音乐做成一个链接，只需单击该链接，就可以听到音乐了。
其格式为： ? ? <a href="音频文件地址"> 热点文本 </a>?
（2）内嵌音频播放插件<embed>:?通过内嵌音频播放插件可以在浏览器中出现播放软件的控制面板。
其格式为： ? ? ?<embed src="音乐文件地址" autostart="true|false" loop="true|false|n" startime="分:秒" volume="0~100" width="x|x%" height="y|y%" hidden="true" controls="console|smallconsole">
（3)? IE中的背景音乐:?可以插入背景音乐格式，不过只有在IE浏览器中才可以听到。
其格式为:?<bgsound src="声音文件地址" ?loop="播放次数"> ? ? 播放次数取-1或infinte时，声音将一直播放直到关闭该网页为止；
15.能在网页上插入视频吗？
?用浏览器可以播放的格式有：MOV格式、AVI格式。
（1）链接一个视频文件<a>...</a> ：与链接音频文件一样，可将视频文件做成一个链接。
其格式为： ? ? <a href="视频文件地址"> 热点文本 </a>? ? ? ? ? ?
（2）?内嵌视频播放插件<embed> ? ? ?
格式为： <embed src="视频文件地址" autostart="true|false" loop="true|false|n" startime="分:秒" volume="0~100" width="x|x%" height="y|y%" hidden=true controls="console|smallconsole">
16.如何建立框架（多窗口页面）？
首先，框架（Frames）也称多窗口页面或帧，是在同一浏览器窗口中显示多个相互隔离的HTML页的结构，每个区域显示一个HTML文件。并且，框架的建立使用<frameset>、<frame>两个标记。<frameset>用来划分窗格，<frame>标记用来声明其中框架页面的内容。框架的基本结构为： <html> ? <head>... </head> ? <frameset> ? ? ? ? ? ? ? ? <!-- 划分窗格 --> ? ? <frame src="url"> ? ? ? ? ? ? ?<!-- 定义第1个窗格 --> ? ? <frame src="url"> ? ? ? ? ? ? ?<!-- 定义第2个窗格 --> ? ? ?… ? </frameset> </html>
①<frameset>标记：<frameset>标记用来定义一个框架组的属性；
格式为：<frameset rows="横向框架数" cols="纵向框架数" border="像素值" bordercolor="色彩值" frameborder="yes|no" framespacing="像素值"> … </frameset>
其中属性：row? --设定横向分割的框架数目；cols ---设定纵向分割的框架数目； border --- 设定边框的宽度；bordercolor---设定边框的色彩；frameborder---设定有∕无边框；framespacing ---设置各窗格间的空白；
注意：框架有横向和纵向之分。对一个框架来说，其大小是很重要的。<frameset>的rows和cols属性用于设定横向分割和纵向分割的框架数目。例如，要建立有三个横向框架的页面，可写为： ? ? ? <frameset row="x1|y1%|z1*, x2|y2%|z2*, x3|y3%|z3*">
②<frame>标记：<frame>标记用于给各个框架指定页面的内容，也就是，它将各个框架和包含其内容的那个文件联系在一起。<frame>是一个单标记；
格式为： ? ? ? <frame src="源文件名.html" name="框架名" border="像素值" bordercolor="色彩值" frameborder="yes|no" marginwidth="像素值" marginheight="像素值" scrolling="yes|no|auto" noresize> ? ?
其中属性如下：
??
注意：<frame>标记的个数应等于在<frameset>标记中所定义的框架数，并按在文件中出现的次序按先行后列对框架进行初始化。如果<frame>标记数目少于<frameset>中定义的框架数量，则多余的框架为空；
17.如何实现框架之间的链接？
使用<a>的target属性就可以控制目标文件在那个框架内显示。当单击热点文本时，目标文件就会出现在有target指定的框架内。target属性的值可以为框架名，使用格式为： ? ? <a href="目标文件名.html" target="框架名"> 热点文本 </a>；
另外，“框架名”有4个特殊的值，分别实现4类特殊的操作： ? ? ? ?
（1）target="_blank"：链接的目标文件被显示在一个新的没有名字的浏览器窗口中；? ? ? ??
（2）target="_self"：链接的目标文件被显示在当前框架窗口中，代替正在显示的热点文本所在的那个文件，是省略target属性的默认值；? ? ? ??
（3）target="_top"：链接的目标文件被显示在整个浏览器窗口（取消了框架）；? ? ? ?
（4） target=“_parent”：当框架嵌套时，链接的目标文件被显示在父框架中；否则，被显示在整个浏览器窗口中；
18.什么是表单呢？
网页上具有可输入表项及项目选择等控制所组成的栏目称为表单。在网页中，通过表单交流和反馈信息。
格式为： ? ?<form name="表单名" action="URL" method="get|post"> ? ? ? <input type="表项类型" name="表项名" value="缺省值" size="x" ?maxlength="y"> ? ? … ? ?</form>
其属性值入下：
(1)name属性 :表单的名字，在一个网页中用于惟一识别一个表单 ;? ? ? ?
(2)action属性 :表单处理的方式，往往是E-mail地址或网址 ;? ? ? ??
(3)method属性:表单数据的传送方向，是获得（GET）表单还是送出（POST）表单;
19.什么是disabled属性和readonly属性？
（1）disabled属性可以将一种操作屏蔽起来 ：<INPUT type="text" value="eschool" disabled> ? ? ? <INPUT type="button" value="确定" disabled>；
（2）readonly属性将TEXT转化为一个只读对象，禁止对它进行编辑。 ? ? ? ? <INPUT type="text" ?value="1500" readonly>；
20.如何实现支持文字和密码的输入的i表单？
使用<input>标记的type属性，可以在表单中加入表项，并控制表项的风格。type属性值为text，则输入的文本以标准的字符显示；type属性值为password，则输入的文本显示为“*”。 ? ? ? ?在表项前应加入表项的名称，如“姓名”等，以告诉浏览者在随后的表项中输入的内容。
例如下面这段代码：姓名:<input type="text" name="xm">；
21.如何实现单选框与复选框？
用<input>标记的type属性可设置选择钮的类型，属性value可设置该选择钮的控制初值，用以告诉表单制作者选择结果。用checked表示是否为缺省选中项。name属性是控制名，同一组的选择钮的控制名是一样的。
例如： <input type="radio" name="sex1" value="男" ? ? ??checked=“checked“>男 <input type=radio name=“sex2” value=“女”>女
22.如何使用选择栏呢？
用<select>标记和<option>标记来设置选择栏。选择栏可分为两种，即弹出式和字段式。
①<select>标记的格式为：<select size="x" name="控制操作名" multiple> ? ? ? <option …> ? ? ? <option …> ? ? ? … ? ? </select>；
其中属性值如下：
（1）size ：取数字，表示在带滚动条的选择栏中一次可见的列表项数 ；
（2）name：控制操作名；
（3）multiple：不带值，加上本项表示可选多个选项，否则只能单选；
②<option>标记的格式为：<option select value="可选择的内容">；
其中属性值如下： ? ? ? ?
（1）select：不带值，加上本项表示该项是预置的 ；? ? ? ?
（2）value：指定控制操作的初始值，缺省时初值为option中的内容表示选项值；
23.如何实现多行文字输入？
使用<TEXTAREA>标记可以设置允许成段文字的输入。
格式为： ? ?<textarea name="控制操作名" rows="行数" cols="列数"> ? ? ? 多行文本 ? ?</textarea>；
注意：其中的行数和列数是指不用滚动条就可看到的部分；
? ? ? ?
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！