一、HTML与CSS
实验学时:
该实验项目需2学时
实验目的:
掌握基本HTML标记的作用和浏览器显示的效果,逐个练习常用HTML标记的作用以及常用属性。练习CSS的使用。
实验要求:
1、使用任意编辑器编写网页,并使用浏览器浏览网页。
2、学会使用CSS美化网页的方法。
实验内容
1、基础HTML练习
1)、换行、段落、图片、注释练习
这里演示换行的效果
这里应该
换行
这里应该
换 行
这是横线
插入图片
字体变化
测试
测试
测试
测试
测试
测试
察看效果
2)、超级链接
超级链接是在页面上建立链接,把当前页面引导到另外的页面或本页面的其他部分.
这是链接到p_5_3.htm页面
这时链接到本页面的其他部分
察看效果
3)、表格练习
表格分别由标签
定义一列, 这些要配合起来,共同完成表格 例如,我们看下面的代码
其中,我们为了方便观看,把table的border属性设置为1 察看效果 2、CSS练习 1)、编写下列程序 #custom {font-size:20px;color:Red;font-family:楷体"; font-style;itelic;} 中华人民共和国教育部欢迎光临我的主页这是我第一次做主页,无论怎么样,我都会努力做好! 2)教材P48例2.5 3、使用所学技术设计关于介绍自己的网页。 4、实验报告内容 1)、记录实验任务的正确程序。 2)、总结实验过程中的问题。 3)、实验报告手写完成。 4)回答问题 ①、简述HTML中 ②、简述HTML与XHTML的异同。 HTML+CSS标签属性大全HTML CSS标签属性大全 a卷标, 属性名称, 简介 批注 1、跑马灯 普通卷动 滑动 预设卷动 来回卷动 向下卷动 向上卷动 向右卷动 向左卷动 卷动次数 设定宽度 设定高度 设定背景颜色 设定卷动距离 设定卷动时间 2、字体效果 …标题字(最大)…标题字(最小) …粗体字 …粗体字(强调) …斜体字 …斜体字(强调) …斜体字(表示定义) …底线 …底线(表示插入文字)水平线 水平线(设定大小) 水平线(设定宽度) 水平线(设定颜色) (换行) html-cssHTML结构 ...包含整个HTML文档。 ...包含HTML文档的标题。分行。 水平标尺线。 ...一级标题。...二级标题。...三级标题。...四级标题。...五级标题。...六级标题。 HTML链接 ...使用href可创建指向另一个文档或锚点的链接。 属性 href="address"要链接的文档或锚点的地址。target="_blank"在新浏览器窗口中打开链接的页面,但该属性不符合XHTML的要求,可以使用javascript来避开这种限制。 HTML文本的对齐和格式化 ...强调(通常是斜体)。 ...更重的强调(通常是粗体)。 ...粗体文本。 ...斜体文本。 ...打字机(等宽)字体。...预格式化的文本(原来的分行和空格都将被保留---这些分行的空格通常以等宽字体显示)。 ...比正常字体稍大的文本。 ...比正常字体稍小的文本。...下标。 ...上标。 ... 要要格式化的文本区域。 属性 style="text-align:alignment"将文本居中对齐、左对齐或右对齐(也可用于、、等)。 s tyle="font-family:typeface"文本的字体名称。(同上) style="font-size:size"字体大小。 style="color:color"修改文本的颜色。 |
实验一HTML、CSS网页制作实验 一、做出网页1.html,效果如下图所示: 要求如下: 1、诗的题目格式为红色、加粗、居中显示。 2、作者格式为红色、斜体、居右显示。 3、诗的内容字体格式从上到下分别是
四、请做出网页4.html,效果如下图所示。 五、请做出以下网页,效果如下图所示,保存为5.html: 六、请做出网页6.html,效果如下图所示: 要求如下:
1、使用内嵌式引入CSS样式表。 2、使用类选择器定义元素。 (1)通过控制不同的类,分别为第一个字母“G”设置为蓝色、加粗、60px 字体; 第二个字母“o”设置为红色、加粗、60px字体; 第三个字母“o”设置为黄色、加粗、60px字体; 第四个字母“g”设置为蓝色、加粗、60px字体。 (2)剩余字母“le”按默认样式输出。 七、请做出网页7.html,效果如下图所示。 要求如下: 1、设置所有文本为宋体、12像素、绿色字体,“春季”字体颜色设为红色。 2、设置标题“春天”为16像素、红色、加粗、居中、上划线的效果。 3、设置文本首行缩进2个字符。 八、请做出网页8.html,效果如下图所示: 要求如下: 1、设置所有文本为微软雅黑、14像素、黑色字体。 2、新浪”、“新浪网”为红色字体,“博客首页”为蓝色字体,网址及日期为绿色字体。 3、设置标题为16像素、左对齐、下划线的效果。 4、设置文本“-百度快照-评价”为灰色、下划线的效果。
达职院第一次内测(3月份) 一、选择 1.在一个框架的属性面板中,不能设置下面哪一项。( D ) A.源文件; B.边框颜色; C.边框宽度 D.滚动条 2. 下列哪一项表示的不是按钮(C ) A.type="submit" B.type="reset" C.type="image" D.type="button" 3.下面哪一个属性不是文本的标签属性?( B ) A.nbsp; B.align C.color D.Face 4.下面哪一项的电子邮件链接是正确的?( D ) A.https://www.wendangku.net/doc/0c14312013.html, B.xxx@.net C.xxx@com D.xxx@https://www.wendangku.net/doc/0c14312013.html, 5.当链接指向下列哪一种文件时,不打开该文件,而是提供给浏览器下载。( C ) A.ASP B.HTML C.ZIP D.CGI 6.关于表格的描述正确的一项是。( D ) A.在单元格内不能继续插入整个表格 B.可以同时选定不相邻的单元格 C.粘贴表格时,不粘贴表格的内容 D.在网页中,水平方向可以并排多个独立的表格 7.如果一个表格包括有1行4列,表格的总宽度为“699”,间距为“5”,填充为“0”,边框为“3”,每列的宽度相同,那么应将单元格定制为多少像素宽。( D ) A.126 B.136 C.147 D.167 8.关于文本对齐,源代码设置不正确的一项是:( A ) A.居中对齐:
第一部分HTML语言 一、关于HTML的官方标准 1.HTML全称:HyperText Markup Language 2.最新版本:HTML4.01规范W3C建议1999.12.24 二、HTML文档结构 1.最简单的HTML文档
Hello world! 2.组成HTML文档的三个部分 1)HTML版本信息 2) Head头信息 补充:元信息META:搜索的需要 3)BODY主体内容 三、常用标签详解(元素、属性、内容) 1.注释: 2.标题级别:
填空题: 1.在HTML显示单选框的代码是:。 2.写出HTML代码中的所有单标签
Div+CSS布局入门教程 页面布局与规划 在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局 设计吧。 所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思 好的界面布局图。 下面,我们需要根据构思图来规划一下页面的布局,仔细分析一下该图,我们不难发现, 图片大致分为以下几个部分: 1、顶部部分,其中又包括了LOGO、MENU和一幅Banner图片; 2、内容部分又可分为侧边栏、主体内容;
3、底部,包括一些版权信息。 有了以上的分析,我们就可以很容易的布局了,我们设计层如下图: 根据上图,我再画了一个实际的页面布局图,说明一下层的嵌套关系,这样理解起来就 会更简单了。
DIV结构如下: │body {} /*这是一个HTML元素,具体我就不说明了*/ └#Container {}/*页面层容器*/ ├#Header {}/*页面头部*/ ├#PageBody {}/*页面主体*/ │├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/ 至此,页面布局与规划已经完成,接下来我们要做的就是开始书写HTML代码和CSS。写入整体层结构与CSS 接下来我们在桌面新建一个文件夹,命名为“DIV+CSS布局练习”,在文件夹下新建两 个空的记事本文档,输入以下内容:
一、选择题(每题2分) 1.以下关于HTML的基本标签说法正确的是()。(选择一项) A:HTML共提供了6级标题,
HTML总结 Html(HyperText Mark-up Language)即超文本标记语言或超文本链接标示语言,是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML 的结构包括头部(Head)、主体(Body)两大部分,其中头部描述浏览器所需的信息,而主体则包含所要说明的具体内容。 设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起,形成有机的整体,人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标,Internet就会马上转到与此图标相关的内容上去,而这些信息可能存放在网络的另一台电脑中。 另外,HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。神奇吗?一点都不神奇,因为现在你看到的就是这种语言写的页面! 超级链接的target属性 target的取值有_blank、_self、_parent、_top,其中_parent和_top适合于超级链接位于框架页面的帧中。target属性值也可以取不同帧的name值。 1._blank 代表新打开窗口显示链接页面。 2._self 代表链接页面覆盖原来的页面。 3._parent 代表链接页面只覆盖帧所属的框架页面。 4._top 代表链接页面覆盖整个浏览器窗口。
CSS总结 div元素 默认情况下,一行只能容纳一个div标签。无论宽度多小,一行始终只有一个div标签。margin-left属性和margin-right属性分别设置div的左右边距,当设置div左外边距和右外边距的值为auto时,左外边距和右外边距将相等。 margin:0px auto; 0px和auto之间是空格,而不是逗号。 float属性 float属性也称为浮动属性,可以使多个块状元素并列于一行。对前面的div元素设置浮动属性后,当前面的div元素留有足够的空白宽度时,后面的div元素将自动浮上来,和前面的div元素并列于一行。float属性的值有left、right、none和inherit。 注:使2个div并列于一行的前提是:这一行有足够的宽度容纳2个div宽度。 clear属性 clear属性的值有none、left、right和both,默认值是none。当多个块状元素由于第一个设置浮动属性而并列时,如果某个元素不需要被“流”上去,即可设置相应的clear属性。 line_height属性 表示行间距,line_height大于或等于div高度时,文本上下居中对齐。 border属性 设置边框样式,边框属性值有3种:边框尺寸(像素)、边框类型和边框颜色(16进制)。border:20px solid #333;表示边框尺寸是20px,边框类型是solid类型,边框颜色是#333;border:10px groove #ff0; //所有边框的属性 border-left:10px groove #ade; //左边框 border-right:10px solid #450; //右边框 border-bottom:10px dashed #f00; //下边框 border-top:10px dotted #ff0; //上边框
测试说明 1、此试卷分三部分:HTML测试,CSS测试,综合测试; HTML部分主要测试的是HTML标签,CSS部分主要测试的是CSS应用,综合部分测试的是二者的结合应用; 2、HTML测试,请将代码都写在html_test.html文件里; 3、CSS测试,请将html代码写在css_test.html文件里,css代码写在style01.css 文件中; 4、综合测试,请将html代码写在complex.html里,css代码写在style02.css中; 5、HTML测试中用到的样式请全部用HTML属性实现,CSS测试和综合测试中的样式实现 请用CSS代码,也可以用HTML属性。 6、此次测试所有用到的图片都放在images文件下; 7、此次测试中如果有日文,可以换成其它文字; HTML 测试 1.请参照下图做一张表格 效果如下: 2.用标签显示一张图片(sushi2_thumb.jpg) 效果如下: 3.将下面的效果用列表标签体现出来。 效果如下:
4.用form标签做一个form表单。 效果如下: 要求性别部分,当点击“男女”文字部分也可以选中/取消选中radio. CSS 测试 1.按以下要求给div设置样式 给下面 div 标签加一个class属性,并在样式文件(style.css)中给它加上样式,单位请用像素: 宽:300,高:100,边框宽度:1像素,边框类型:实线,边框颜色:黑色,里面的文字居中显示,并设置外边距上:10 ,下10,左20,右:30;内边距:上:10,下:10,左:20,右:20。背景颜色:#cccccc,字体大小:20 效果如下:
1、单选题 (1)要使单选框或复选框默认为已选定,要在input标签中加()属性 A、selected B、disabled C、type D、checked (2)要使表单元素(如文本框)在预览时处于不可编辑状态,显灰色,要在input中加()属性 A、selected B、disabled C、type D、checked (3)下列哪一项表示的不是按钮。() A.type="submit" B.type="reset" C.type="image" D.type="button" (4)下面哪一个属性不是文本的标签属性?() A.nbsp; B.align C.color D.face (5)下面哪一项的电子邮件链接是正确的?() A.https://www.wendangku.net/doc/0c14312013.html, B.xxx@.net C.xxx@com D.xxx@https://www.wendangku.net/doc/0c14312013.html, (6)当链接指向下列哪一种文件时,不打开该文件,而是提供给浏览器下载。()A.ASP B.HTML C.ZIP D.CGI (7)下面说法错误的是( ) A、CSS样式表可以将格式和结构分离 B、CSS样式表可以控制页面的布局 C、CSS样式表可以使许多网页同时更新 D、CSS样式表不能制作体积更小下载 更快的网页 (8)CSS样式表不可能实现( )功能。 A、将格式和结构分离 B、一个CSS文件控制多个网页 C、控制图片的精确位置 D、兼容所有的浏览器 (9)若要在网页中插入样式表main.css,以下用法中,正确的是()。 A、 B、 C、 D、
HTML和CSS的关系 HTML是描述网页的标记语言,在早期的HTML里面,HTML标签会有自己的很多样式。并且在页面的早期布局里面,我们会发现,主要是通过table布局,控制出的页面效果并不美观,充其量只能是一个网页,而不是一个美观的网页。 HTML通过自己的自身的属性,来实现一些特定的效果,比如早期的font标签,通过color属性控制文字的颜色,并在在HTML里面,一些标签,它是有一定的语义化的,在者,不同浏览器兼容性上并不一样,在标签里面添加很多属性,造成文档内容复杂,使得独立于外观(表现层)的网站开发起来越发困难,为了解决上述困难,万维网联盟,在HTML4.0的基础上,研究出了样式,也就是CSS。 所以现在,我们很清楚的可以知道他们之间的关系: 1、HTML定义网页的结构,主要让页面的内容结构化、块状化! 2、CSS控制HTML的标签,定义所需要的样式,使得结构和样式独立开来,这样使得样式和结构分离,达到了我们的初衷:内容更加清晰可读。 在有了CSS之后,我们会发现,给我们的站点的开发带来很多的好处。下面列出几点比较突出的优点: 1)、CSS使得我们的内容更加清晰,代码可读性更高 主要原因是不用在标签里面写大量属性和重复性的代码。 2)、提高了网页的浏览速度,减少了冗余的代码 在HTML里面,原本很多结构块,效果展示一致,只是内容变化,在HTML 早期,是需要对每一块设置相同的属性,造成代码大量的冗余,文件的大小也自然有所增加,对页面的浏览速度有所减缓。 3)、实现结构和样式的分离 HTML标签和CSS样式的独立,使得网站页面在开发和改版的时候,容易且简单。 Css没有出现独立之前,基本上页面改本就等于重做,或者只是局部的改动,根本不敢改,主要也修改起来很困难,所以开发会相对困难很多,CSS的出现,也就是实现了最初的宗旨“样式和结构分离”。 但是,我们要注意,CSS始终控制的标签,所以CSS离不开HTML,HTML没有CSS它是能有基本的效果,但自从有了CSS,控制出的页面更加美观,代码更加清晰可读,改版更容易,兼容性也更见好了。 总结:HTML和CSS,相辅相成,HTML控制结构,对整个网页搭建结构,CSS 控制样式,为整个页面穿衣服!
《网页设计》练习题集 一、单项选择题 1. 在HTML中,标记
的作用是(B )。 A.标题标记 B.预排版标记 C.转行标记 D.文字效果标记 2.在CSS中使用背景图片需要使用参数( B ) A.image B.url C.style D.embed 3.在CSS的文本属性中,文本修饰的取值text-decoration:overline表示(C )A.不用修饰B.下划线 C.上划线D.横线从字中间穿过 4.在CSS的文本属性中,文本修饰的取值text-decoration:underline表示( B)A.不用修饰B.下划线 C.上划线D.横线从字中间穿过 5.下面哪一个属性不是文本的标签属性?( A ) A.nbsp; B.align C.color D.face 6.在CSS的文本属性中,文本修饰的取值text-decoration:line-through表示(D) A.不用修饰B.下划线 C.上划线D.横线从字中间穿过 7.外部式样式单文件的扩展名为( D ) A..js B..dom C..htm D..css 8. 超级链接是一种( A )的关系。 A. 一对一 B. 一对多 C. 多对 一 D. 多对多 9. 关于文本对齐,源代码设置不正确的一项是:( A ) A.居中对齐:…B.居右对齐:…C.居左对齐:…D.两端对齐:…11.为了标识一个HTML文件应该使用的HTML标记是( C ) A. B.C. D. 12.下面哪一项是换行符标签?( C ) A. B. C.
D. 13.下列哪一项是在新窗口中打开网页文档。( B ) A._self B._blank C._top D._parent 14.下面不属于CSS插入形式的是( A ) A.索引式 B.内联式 C.嵌入式 D.外部式 15.网页的特征是(A) A.HTML文档的基本特征——超文本 B.标识语言,网页中不能没有标记(Tag)html,css,js常用单词
HTML(Hyper Text Markup Language超文本标记语言) 是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言。HTML文本是由HTML 命令组成的描述性文本,HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部(Head)、主体(Body)两大部分,其中头部描述浏览器所需的信息,而主体则包含所要说明的具体内容。
CSS(Cascading Style Sheet层叠式样式表) 目前推荐遵循的是W3C于1998年5月12日推出的CSS2。CSS标准建立的目的是以CSS 进行网页布局,控制网页的表现。CSS标准布局与XHTML结构语言相结合,可以实现表现与结构相分离,提高网站的使用性和可维护性。
JS单词 push :添加一个数组元素 document :文档 pop :除最后一个数组元素 console :控制台 shift :删除第一个数组元素 string :字符串 Concat 组合数组 undefined :未定义 typeof :关键字(输出类型) join:数组转化为指定分隔符 slice:返回指定数组 length:数组长度 Array:数组 number:数字 boolean:布尔 alert:提示框 parseInt:转化为整型数值 continue:继续 is NaN:非数字 sort:升序 break:截断跳出 reverse:倒序 object:对象类型 parseFloat:转化为浮点值 index:索引 floor:向下取整 variable:变量ceil:向上取整 round:四舍五入 abs:返回绝对值 eval:解析字符串并运算 max:比较最大值 return:返回min:比较最小值 addEventListener:事件名函数 to.fixed:保留小数点 attachEvant:(on)事件名 random:随机数 eletment:元素 onclick:鼠标单击事件 eventName:事件名 ondblclick:鼠标双击事件 func: onselect:内容被选中事件 removeEventListener:事件解除 onmouseover:鼠标停留事件 detachEvent: onmouseout:鼠标移除事件 open():弹出一个新窗口 onfocus:获得焦点事件 function:函数(方法) showModalDialog:弹出一个模式窗口 close():关闭当前窗口 onblur:失去焦点事件 onkeydown:键盘按下事件(前) Date:日期对象 onkeyup:键盘松开事件 onkeypress:键盘按下事件(后)getFullYear():年份 getMonth():月份(0--11) getDate():几号getDay():星期几(周一至周六) getHours():小时(0--23) getMinites():分钟getSeconds():秒数(0--59) getMilliseconds():毫秒数 getTime():从1970至今的毫秒数 Date.now():从1970至今的毫秒值tolocaleDatestring():输出本地化的日期 setTimeout:延迟时间
HTML之CSS参考手册(完美整理版)
CSS 背景属性(Background) 属性描述CSS background在一个声明中设置所有的背景属性。 1 background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。 1 background-color设置元素的背景颜色。 1 background-image设置元素的背景图像。 1 background-position设置背景图像的开始位置。 1 background-repeat设置是否及如何重复背景图像。 1 CSS 边框属性(Border 和Outline) 属性描述CSS border在一个声明中设置所有的边框属性。 1 border-bottom在一个声明中设置所有的下边框属性。 1 border-bottom-color设置下边框的颜色。 2 border-bottom-style设置下边框的样式。 2 border-bottom-width设置下边框的宽度。 1 border-color设置四条边框的颜色。 1 border-left在一个声明中设置所有的左边框属性。 1 border-left-color设置左边框的颜色。 2 border-left-style设置左边框的样式。 2 border-left-width设置左边框的宽度。 1 border-right在一个声明中设置所有的右边框属性。 1 border-right-color设置右边框的颜色。 2 border-right-style设置右边框的样式。 2 border-right-width设置右边框的宽度。 1 border-style设置四条边框的样式。 1 border-top在一个声明中设置所有的上边框属性。 1 border-top-color设置上边框的颜色。 2 border-top-style设置上边框的样式。 2 border-top-width设置上边框的宽度。 1 border-width设置四条边框的宽度。 1 outline在一个声明中设置所有的轮廓属性。 2 outline-color设置轮廓的颜色。 2 outline-style设置轮廓的样式。 2 outline-width设置轮廓的宽度。 2 CSS 文本属性(Text) 属性描述CSS color设置文本的颜色。 1 direction规定文本的方向/ 书写方向。 2 letter-spacing设置字符间距。 1 line-height设置行高。 1 text-align规定文本的水平对齐方式。 1
htmlcss考试题
达职院第一次测(3月份) 一、选择 1. 在一个框架的属性面板中,不能设置下面哪一项。( D ) A.源文件;B.边框颜色;C.边框宽度D.滚动条 2. 下列哪一项表示的不是按钮( C ) A.type="submit"B.type="reset"C.type="image"D.type="button" 3.下面哪一个属性不是文本的标签属性?(B) A.nbsp;B.align C.color D.Face 4.下面哪一项的电子是正确的?(D) A.https://www.wendangku.net/doc/0c14312013.html, B.https://www.wendangku.net/doc/0c14312013.html, C.xxx D.xxxxxx. 5.当指向下列哪一种文件时,不打开该文件,而是提供给浏览器下载。(C) A.ASP B.HTML C.ZIP D.CGI 6.关于表格的描述正确的一项是。(D) A.在单元格不能继续插入整个表格 B.可以同时选定不相邻的单元格 C.粘贴表格时,不粘贴表格的容 D.在网页中,水平方向可以并排多个独立的表格 7.如果一个表格包括有1行4列,表格的总宽度为“699”,间距为“5”,填充为“0”,边框为“3”,每列的宽度相同,那么应将单元格定制为多少像素宽。(D) A.126B.136C.147D.167 8.关于文本对齐,源代码设置不正确的一项是:(A) A.居中对齐:
…B.居右对齐:…C.居左对齐:…D.两端对齐:…9.下面哪一项是换行符标签?(C) A.B.C.
D. 10.下列哪一项是在新窗口中打开网页文档。(B) A._self B._blank C._top D._parent 11.下面对JPEG格式描述不正确的一项是。(C)相关文档
- HTML与CSS简介
- HTML+CSS从入门到精通(中文)
- HTML之CSS参考手册(完美整理版)
- htmlcss考试题
- html-css
- 案例1-HTML中使用css+div设计简单网页
- html+css入门教程
- HTML和css的关系
- htmlcss考试题
- 实验一HTML、CSS网页制作实验
- 1.HTMLCSS基本练习
- HTML+CSS总结
- html,css,js常用单词
- HTML+CSS+JS 入门基础ppt课件
- HTML+CSS标签属性大全
- html+css考试题
- HTML+CSS测试
- (完整版)html+css网页设计复习题
- WEB基础考题(HTML+CSS)
- HTML5+CSS3课程标准