(一)html
1. 元素=开始标记+内容+结束标记;
<h1>HELLO HTML</h1>
2. 网页上的图像点击:把<img>元素放进<a>标记之间。
3. ..符号,上溯到父目录。
4. 在文字段中少量引用的话用<q>,如果需要另开一段来进行引用则用<blockquote>
<q>是内联元素,<blockquote>是块元素。
:块元素特立独行,内联元素随波逐流。
5. <br> <img>空元素。
6. <ol>和<li>创建有序列表,<ul>和<li>创建无序列表。
7. www.zkk.com.
www该部分是域中的特定服务名,zkk.com是域名。
8. 可以在<a>元素的href属性中使用相对路径(从根目录到文件的路径)或者URL连接到其他网页。要连接到起重机的网站和其他页面,最好还是使用相对路径,对外部链接最好还是使用URL。
9. 使用id属性在页面中创建目标锚。在”#”后面跟目标锚id,用以连接到页面的特定位置。
<h3><a id=”coffee’></a></h3>
<a href=”……..”#coffee title=”hello”>(*^__^*) 嘻嘻……</a>
另外<a>元素的target属性为_blank,浏览器会在新的窗口中打开链接;如果没有target则浏览器会在痛一个窗口中打开连接。
10. 用户使用滚动条来看图像的问题?
大图像要从服务器传送更多的数据到浏览器,消耗许多时间并导致网页显示速度很慢。
11. 为什么不能使用width和height来调整网页上的图像的尺寸?
因为浏览器在缩小大图像来配合网页之前要先下载真个大图像。
12. 为什么不能将背景颜色设为纯色来配合网页的颜色?
如果这样做,一个缺点:如果你的网页上还有其他能透过透明层显示的东西,它们在纯色版本下无法显示。
13. <img>元素,不同与其他html元素,浏览器从网络服务器上接收每张图像并显示。
<img>是内联元素,意味着浏览器不会在图像前边或者后边插入行。
<img>的alt属性是对图像意义的描述。
14. <head>
<meta content="text/html" charset="utf-8" http-equiv="Content-Type" />
</head>
Meta的意思是我们告诉浏览器关于网页的一些信息。
过渡版本的html4.01:loose.dtd
严格类型的html4.01:strict.dtd
(所有的内联元素和文本必须在块元素中才能运行,块元素在任何情况下都不允许包含在内联元素;
块元素禁止包含在<p>元素之中;
<blockquote>元素重要有一个或者多个块元素,文本直接包含于块引用很常见,但是在严格类型的html4.01标准中,要先把文本或者内联元素放于块元素之内,在一起添加到<blockquote>。
内联元素相互嵌套小心:可以将任意内联元素嵌入到一个内联元素之中,2个情况例外。
<a>元素不能自我嵌套;空元素中不能嵌套其他内联元素。
XHTML1.0:
空元素:如<br/>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
Xmlns属性用来指定”html”属于哪一种xml语言;lang="en" xml:lang="en"2个属性最好一起使用。。
内联元素可以直接放在body之中;
(二)CSS
1.<head>
<link type="text/css" rel="stylesheet" href="..."/>
</head>
2.类
<p class=”greentea”>……</p>
在.css中:
p.greentea{
color: green;
}
如果有多个选择符选择一个元素?
<p class="greentea raspberry blueberry"></p>
在.css中:
P {color: black;} 选择所有段落元素的规则。
. greentea {color: green;}选择了所有绿茶类的成员,此规则比上一条更具体
p.greentea{color: green;} 只选择绿茶类的端来,此规则比上一条更具体
p. raspberry {color: blue;}
p. blueberry {color: purple;}
p. blueberry排在了最后,所以选择了p. blueberry规则。
3.字体
注意:如果字体名字中间有空格,应该加引号。
body { font-size:14px;}
h1{ font-size:150%} 相对父元素的字体的大小
h2{ font-size:1.2em} 按比例放大。
字体定义技巧:
a:选择一种关键字(推荐用法small或medium)定义body字体大小,也就是网页的默认字体大小。
b:用em或%把别的元素的字体大小指定为相对于body字体大小的字体尺寸。
好处:调整页面中的字体尺寸方便。
特别注意:用像素指定字体大小时,IE不支持比例缩放。
在CSS属性font-family中定义多个字体以防用户未安装首选字体。
4.background-imge:url(….)
可以被设置为url,也可以是相对路径
Background-repeat:repeat,水平垂直上都重复,默认的格式
no-repeat 图像只显示一次,不重复
repeat-x,repeat-y 图像只在水平或者垂直方向上重复
inherit :继承父元素的值
5.id属性
<p id=”footer”>hello</p>
每个元素只那个有一个id,id名称必须以字母开头后跟数字或者字母,不允许有空格或特殊字符。
在CSS中使用id:
#footer{ color: red;} 选择id为”footer”的 任意元素
p#footer{ color: red;} 选择一个id为”footer”的<p>元素
6. 样式表的顺序很重要
它们从上到下排列,最下面的样式表优先权最高。所以加入在公司和部门的样式表中,<body>元素都有一个font-family属性,则部门的样式表就有较高的优先权,因为它是最后一个连接到网页的。(面向对象无处不在)
(三)建筑世界的DIV
1.<div>用来把页面分成逻辑部分或者组,好处:
更深一层次的暂时页面的基本逻辑结构,有助于别人理解网页,也方便维护。
可能经常需要用结构把样式应用到某一部分。
提醒:如果添加<div>只是想使页面中有更多的结构,那么这样做出了使页面变得复杂之外没有任何真正的好处。
2.Width属性地雷区
例如:#zkk{ border-width:thin width:200px}
Width属性只用来定义内容区的宽度
整个宽度=左边界宽度(margin)+边框宽度+左侧补白宽度(padding)
+width
+右边界宽度(margin)+边框宽度+右侧补白宽度(padding)
你不能定义整个元素的宽度。你只能定义内容区.补白.边框和边界的宽度,把这些全加起来就是整个元素的宽度。
块元素的默认宽度是”auto”,也就是说会延伸到所有的空间。记得”auto”使内容充满所有的空间(除了补白.边框.边界)。
如果没有边界.补白或者边框了?
若内容区的宽度为300像素,没有边界.补白或者边框,真个盒子的宽度就是300。
3.选择特定元素的子元素的方法
<body>
<div id=”zkk”>
<h1>O(∩_∩)O哈哈~</h1>
<h2>(*^__^*) 嘻嘻……</h2></div></body>
div h2 {color: black;} 如果另外一个文件中也有div,他们的h2文本也是黑色的,不想这样
的话,就更具体指定
#zkk h2 { color: black;}
4.<span>作用于内联元素
什么时候该用<span>而不用别的内联元素(如<em>或<strong>)?
通常,要用跟内容的意思最匹配的元素来标记内容。所以,如果想强调某些单词,就用<em>
;如果想重点强调,就用<strong>。但是,如果你真正的目的只是改变某些文字的样式,就应该用<span>并且把<span>元素放进适当的类中组成一组,一起设计样式。
5.伪类,例如
#zkk a:link { color: green;} 未被访问的链接用绿色
#zkk a:visited { color: gray;} 已访问的链接用灰色
#zkk a:hover { color: red;} 鼠标停留在链接上红色
6.text-align是一个作用于块的属性,可以使块元素中的所有内联内容居中,它可以被任何嵌套的块元素继承。
(四)布局
Folat:
浏览器用流来布置页面上的XHTML元素。浏览器从XHTML文件的开头开始,从头到尾跟着元素的流显示它遇到的每个元素。比如先显示文件中的第一个元素,接着显示换行,
在显示第二个元素,在换行等,从文件的开始一直到末尾。这就是流。
那么对于内联元素了?
内联元素在水平方向上一个接一个地流,从左上方到右上方。(只要右边可以有地方放)
注意:TEXT文本是内联元素的一个特殊例子,浏览器把他归为刚好适合与那个空间的内联元素。[text][em][text][a]
内联元素并排放置:2元素都有边界时,它们之间的空间就等于2个元素的边界之和。
并列放置:共同的边界重叠到一起,重叠边界的高度是最大边界的值。
Float属性让一个元素尽可能靠左或靠右(取决于float的值),然后让它后面的元素流到这个元素的周围。
Clear属性不允许漂移元素出现在这个元素的左边.右边或两边。
漂移元素必须是一个明确的宽度值,不能是默认的。
流动布局:当你扩大浏览器窗口时,页面内容也随之扩大来填满页面。
冻结布局:内容的宽度是固定的,不随浏览器窗口的变化而扩大或缩小。
凝胶物布局:内容区的宽度是固定的,但边界随着浏览器窗口的变化扩大而缩小。凝胶物布局通常用来把内容放在页面的中间。
Position: static 是默认布局,把元素放在页面的正常流中。
表格:
Border-collapse: collapse 上除边框间距。(或者把border-spacing:0px一样效果)
表单:
基本上是带有一块输入信息区域的网页,当表单提交时,表单中的信息被打包成一个数据包放松给WEB服务器,WEB应用程序对之进行处理。
浏览器给服务器发送数据的方式:
POST:把表单变量打包后隐藏在后台发送给服务器。
把所有的数据作为请求的一部分来发送,对用户来说是不可见的。
GET: 也把变量打包,不过在它向浏览器发送请求之前,附加在URL的末端部分。
表单数据直接添加给URL自身,用户能看到这些表单数据。