1.作业
1.分别说出什么是HTML,XHTML,HTML5?
答:HTML为超文本标记语言,它不是一种编程语言而是一种标记语言,使用标记标签来描述网页;
XHTML为一种编码更加规范,对于机器的识别更为友善,可以说是HTML的继承者,但要比其更加规范,例如行头加<!doctype html>这就是一种声明,浏览器会根据你的定义来解释页面代码;
HTML5是对HTML的第五次修订,其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入。
2.写出HTML的语法
答:以下为最基本的HTML的语法结构,其还可以与css和javascript配合使用。
<html>
<head>
<title>名字</title>
</head>
<body>
内容
</body>
</html>
3.HTML中的注释和CSS中的注释
答:
HTML:<!--注释内容 -->
CSS:/*注释内容*/
4.CSS中的引入方式有哪些?说出他们的区别和语法
答:CSS有三种引入方式根据样式表的位置可分为行间样式表,内部样式表,外部样式表。行间样式表是直接写在<body>与</body>之间的,编写较为麻烦繁琐,无法一次性更改所有变量,给写程序的人带来了极大
的不便。而内部样式表是把<style></style>放入head部分,通过ID来将样式表引入,此方法较方便快捷,程序更加鲜明整齐。外部样式表是通过一个链接来将外部的CSS文件直接作用在HTML文件上,对内容进行定义。外部样式表:
引入外部CSS文件
<link rel="stylesheet" type="text/css" href="my.css"/>
内部样式表:
<style>
#id {width:100px height:100px background:red }
</style>
行间样式表:
<div style="weidth:100px height:100px background:red "></div>
5.背景图片有哪些子属性?
答:背景图片则子属性分别为background image为图片的链接位置,background color为背景的颜色,background repeat为背景图片的重复,background position为背景图片的定位,Background-attachment为背景图片的固定。
6.Border有哪些子属性 其中border-style的属性值有哪些?
答:border-style:solid; 边框样式
border-width:1px 2px 3px 4px; 边框的线条宽度
border-color 边框的线条颜色
solid:单实线。
double:双实线。
dashed:虚线。
dotted:点线。
groove:沟线(groove)。
ridge:脊线(ridge)。
inset:内陷边框。
outset:外凸边框。
none:无边框。
7.什么是CSS ?
答:CSS就是一种叫做层叠样式表(Cascading Stylesheet)的技术。 在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。 CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
8.你知道的CSS属性有哪些?
答:字体属性(Font) font-style font-weight font-size 颜色和背景属性Background-color Background-image Background-repeat Background-attachment Background-position 边框属性 Border-top-width Border-right-width Border-bottom-width Border-left-width Border-width Border-color Border-style Border-top Border-right Border-bottom Border-left 。以上是我目前为止通过视频学习到的,大部分我都动手敲过验证其作用。
9.什么是W3C标准?
答:W3C是英文 World Wide Web Consortium 的缩写,中文意思是W3C理事会或万维网联盟。W3C于1994年10月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者TiM。W3C组织(是对网络标准制定的一个非赢利组织,像HTML、XHTML、CSS、XML的标准就是由W3C来定制。W3C会员(大约500名会员)包括生产技术产品及服务的厂商、内容供应商、团体用户、研究实验室、标准制定机构和政府部门,一起协同工作,致力在万维网发展方向上达成共识。(此段引用百度)
10.常见的浏览器都有哪几种,五大浏览器内核分别是什么?
答:IE浏览器,火狐浏览器,谷歌浏览器,苹果浏览器等。
1.Chromium内核,以Chrome为代表
2.Gecko内核,以Firefox为代表
3.Presto内核,以老版本的Opera为代表
4.Webkit内核,以Sarfari为代表
5.Trident内核,以IE为代表
2.感想
这短短两天的学习让我感受到自从我上大学以来再也没有过得学习的热情以及对于学习的满足感。我知道了什么是HTML,什么是CSS,什么是Javascript,什么是网页设计师,我懂得了样式表与脚本的神奇,我知道那花花绿绿的网页设计与制作的不易,我终于用到了慕名已久的Photoshop,学会了抠图。这两天,特别是第二天,我一直坐在电脑前,我终于知道我眼前的被称为计算机的机器真的不只是我用来打游戏的游戏机,这两天我甚至连我一直不间断的首胜也停了,因为我意识到这台机器对我的意义,他很可能就是我以后吃饭的工具,是我发挥人生价值的平台。坐在电脑前我深刻感受到要想学习程序,学习web开发最必不可少的就是练习,老师讲的再好自己不多练两遍,东西还是老师的,你只是认可了老师的思维与知识并没有真正学成自己的东西,坐在板凳前望着屏幕上大段大段等着你去填写的空白,终究也只是一脸茫然。只有经过无数次的练习才能有那刹那间灵感的迸发。
对于这两天的学习我有一些疑问:
1,我一直学的是图片,边框之类的设计,对于网页上稀奇古怪的文字效果有没有一些特别的技术来完成?
2.在我进行视频学习的时候,听老师说了一句网页里的flash动画,我想知道网页内的光怪陆离的广告FLASH动画是不是也要掌握,应该如何学习?
3.我在使用Photoshop抠图时发现在虚线框选中之后按住Alt键进行放大操作时,虚线框偏离了之前的选中范围,我知道他其实没动,但给人的感觉是图片在放大而选中其中一部分的虚线框却并没有随之放大,我不知道是不是我操作上有什么问题,但对我造成了很大的困扰。
4.我在使用Photoshop时发现有些图片其边框颜色极淡,很难分辨出来并进行选中,我的眼睛都瞅流泪了,有什么办法可以轻松将图片的各个部位展现出来,而不是用眼睛很辛苦的看。
最后对于一直帮助我解答问题的十七点网的同学与老师表示感谢,其中一个还帮我检查出;与:的错误,我自己检查了一个多小时都没检查出来,都快放弃了,再次感谢!
附上一个我做的百度侧边栏。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#box
{
width: 134px;
height: 1015px;
}
#title
{
width:134px;
height:79px;
border-bottom:solid #f0f0f0 2px;
background: url(0.gif) #f9f9f9 no-repeat 15px 19px
}
#content-1
{
width:134px;
height:152px;
border-bottom:solid #f0f0f0 2px;
background:url(1.gif) #f9f9f9 no-repeat 27px 41px;
}
#content-2
{
width:134px;
height:152px;
border-bottom:solid #f0f0f0 2px;
background:url(d2.gif) #f9f9f9 no-repeat 36px 27px;
}
#content-3
{
width:134px;
height:152px;
border-bottom:solid #f0f0f0 2px;
background:url(3.gif) #f9f9f9 no-repeat 31px 20px;
}
#content-4
{
width:134px;
height:152px;
border-bottom:solid #f0f0f0 2px;
background:url(4.gif) #f9f9f9 no-repeat 36px 20px;
}
#content-5
{
width:134px;
height:152px;
border-bottom:solid #f0f0f0 2px;
background:url(5.gif) #f9f9f9 no-repeat 31px 25px;
}
#content-6
{
width:134px;
height:152px;
border-bottom:solid #f0f0f0 2px;
background:url(6.gif) #f9f9f9 no-repeat 34px 23px;
}
#content-7
{
width:134px;
height:10px;
background:#f9f9f9;
}
</style>
</head>
<body>
<div id="box">
<div id="title"> </div>
<div id="content-1"></div>
<div id="content-2"></div>
<div id="content-3"></div>
<div id="content-4"></div>
<div id="content-5"></div>
<div id="content-6"></div>
<div id="content-7"></div>
</div>
</body>
</html>
链接: http://pan.baidu.com/s/1jHF7LNC 密码: 83fr