Head First HTML CSS XHTML笔记

最近在看点前端的东西，看到了这本入门级的好书

<head></head>中的title和style

<q></q> inline元素在<p>中

<blockquote><blockquote> 块元素

<br> 空元素

<ol></ol> 有序(前面有1,2,3...)
<li><li> 项列表，嵌入在ol或者ul中
<ul></ul> 无序

列表是一组项目，<li>元素用来确定每个项目，<ol>把它们组成一组
所以<ol>和<li>必须一起用。

使用<a>来跳转到链接页面的指定区域
a.html:
<html>
<body>
<h1>hihi</h1>
<h2><a id="chai">Chai Tea</a></h2>
</body>
</html>

b.html:
<html>
<body>
<a href="a.html#chai">See Chai Tea</a>
</body>
</html>

打开b后，点击链接，可以跳转到a页面的Chai Tea区域

打开新窗口，添加target对象为_blank
<html>
<body>
<a target="_blank" href="index.html#chai">See Chai Tea</a>
</body>
</html>

img是内联元素

如果图形没有显示，alt的文字用来代替图片
<img src="url.gif" alt="no pages">

标准，提示浏览器该页面符合协议
<!DOCTYPE html PUBLIC ""...>
去w3c检测自己的网页是否符合标准

head是放置title,meta,style元素的唯一地方

内联和文本必须在块元素中才可以运行

块元素不鞥呢内嵌在内联元素里

xhtml是xml

xhtml的空元素都以 /> 结尾

css

在head中，使用link，添加css文件
<link type="text/css" rel="stylesheet" href="my.css" />
type为类型
rel为关系，即样式表

p{
color: red;
}

p.greentea{
color: green;
}

<p class="greentea">...

用图片做背景
background-image: url(images/background.gif)

p.specials{}选择specials class的段落
.specials{}选择specials class的所有元素
#footer{} 选择id为footer的任意元素
p#footer{} 选择id为footer的<p>元素

可以多样式表，多个link即可
还能多样式表用于不同的设备，如打印机，在link添加media="print"

div来进行逻辑分区

选择子孙
div h2{}
#elixirs h2{}

<span>用于创建一组内联字符和元素，用来对<p>进行设置
因为不能用div，会引起换行

链接也可以设置样式
a.link{ color: green}
a.visited{}
a.hover{}
a.focus{}
a.active{}

这就是伪类

流，块是从上到下，内联是从左到右

table，从上到下，从左到右
<table summary="table's data"> 摘要
<tr> 第一列
<th></th> 表头
<th></th>
<th></th>
</tr>
<tr> 第二列
<td></td> 第二行
<td></td>
<td></td>
</tr>
<tr> 第三列
<td></td> 第三行
<td></td>
<td></td>
</tr>
</talbe>

li table的样式设置
li还可以自定义样式

表单

w3c不建议使用框架<frame> <frameset>

媒体元素<object>

秒客网

Head First HTML CSS XHTML笔记

相关文章