前端从零开始

最新推荐文章于 2024-11-11 22:26:09 发布

akv64029

最新推荐文章于 2024-11-11 22:26:09 发布

阅读量191

点赞数

文章标签：前端 xhtml photoshop ViewUI

原文链接：http://www.cnblogs.com/qingxinblog/p/4048945.html

版权

《Head First HTML 与CSS、XHTML》读书笔记

1、background 背景色 color：前景色（即字体颜色）

front-size设置字体的尺寸。 front-size:180% 字体大小应该占另一个字体大小的180%.因为font-size是一个从父元素继承来的属性，定义字体大小为a%，是相对于父元素的。

CSS text-indent 属性规定文本块中首行文本的缩进。

padding:10px 5px 15px 20px;

上内边距是 10px
右内边距是 5px
下内边距是 15px
左内边距是 20px

2、颜色

用CSS有许多方法来指定颜色，最普遍的做法叫做“十六进制编码”，#d2b48c就是这种格式，代表土黄色。

3、相对路径

上溯一个文件夹：上溯用“..”，表示上溯到父目录。可以上溯的最大上限：可以上溯直至你网站的根目录。

在同一个文件夹里的话就直接写文件名就可以。

路径有字数的限制，最多255个。

在网页设计中只能使用“/”，而不能用“\”。许多操作系统使用不同的文件分隔符（例如windows用“\”代替“/”）。但是无论你使用什么操作系统，在你的HTML路径中必须使用“/”分割符。

网站中的文件名或者文件夹名中不能出现空格。

当你点击一个相对链接时，浏览器会在后台根据相对路径和你所点击的网页的路径生成一个绝对路径。所以，所有Web服务器看到的都是绝对路径，这归功于你的浏览器。

4、HTML有一个<q>元素，就是为引用文字准备的。用<q>和</q>来包围每段引用。<q>元素是简短地引用现有文字的一部分。某些浏览器对于<q>包围的文字周围不显示双引号，有的显示。所以不能自己再加双引号，否则某些浏览器会显示两组引号。解决这个难题的唯一方法就是使用CSS给引用添加视觉样式，如斜体字。相似地，<blockquote>则喜欢块引用，他经常记下书上或者诗歌中的整段文字并独立显示，它创建了一段单独的文字（功能如同<p>标记），另外，文本有缩进，显得更像一段引用的文字（某些浏览器不能）。

在不同浏览器中显示可能不同，能确定他们如何显示的唯一方法是样式化引用。

5、块（block）元素和内联（inline）元素

块元素是网页的主要结构模块，而内联元素则用来标记内容的小片段。每个块元素都独立显示，前后都有换行。内联元素只显示在段落的文字流中，在网页中随着文字流出现在“行内”。

<h1><h2>,……<h6>和<blockquote>，<p>,<ol><ul>和<li>都是块元素；<q><a>和<em>都是内联元素。<em>强调文段,对于所有浏览器来说，这意味着要把这段文字用斜体来显示。

6、空元素（<br><img>）没有任何内容（元素=开始标记+内容+结束标记，因为它没有内容，所以是空的），不写结束标记

<br>元素的作用是换行；

7、总是要选择方法与内容结构最接近的HTML元素。如果是个列表，就使用列表元素。列表可以嵌套。

把每个列表项目放进一个<li>元素中；用<ol>或者<ul>封装列表元素。如果使用<ol>元素来封装列表元素，那么它们将显示为有序列表（浏览器会给列表标上序号）。如果使用<ul>，列表将显示为无序列表。还有一种类型：自定义列表。自定义列表的形式是<dl>来封装列表元素，列表中的每个项目都有一个项限<dt>和一个描述<dd>。可以用start属性指定你自己的列表顺序（start 属性规定有序列表的开始点），用value属性改变每个项的值。

eg：<ol start="5">
     <li>HTML</li>
     <li>XHTML</li>
     <li>CSS</li>
    </ol>
在 HTML 4.01 中，不赞成使用 ol 元素的 start 属性；在 XHTML 1.0 Strict DTD 中，不支持 ol 元素的 start 属性。尽管不赞成使用 start 属性，不过所有浏览器都支持 start 属性。注释：目前，仍然没有 start 属性的 CSS 替代方案。

unordered list=ul;ordered list=ol;list item=li

8、字符实体

在HTML中使用实体来显示特殊字符。

>符号的缩写是>,而<是<,如果你想在HTML中使用&，可以使用字符实体&代替&本身。（说&是特殊的，准确来说是因为它是其他实体的首字符。）

eg：如果你想在你的网页中国输入“The <html> element rocks.”，使用字符缩写，你可以这样输入：The <html> element rocks.

9、元素的意义

<strong>使用这个元素来标识你着重强调的部分；<pre>当你要浏览器显示你输入的文本时，使用这个元素来格式化文本；<hr>水平线；<em>强调文段；<code>代码元素用来显示计算机程序的代码；

<address>元素告诉浏览器这段内容是个地址，例如你的联系信息。

XHTML中有一个元素<del>，它可以表明XHTML中应该被删除掉的内容。同样，有一个叫做<ins>的元素，可以表明应该插入的内容。

10、域名

不要混淆域名和网站名：starbuzzcoffee.com是个域名，而www.starbuzzcoffee.com是个网站名。购买域名就像购买一块土地，比如100mainstreet.com，在这块土地上你可以随你喜欢来决定建筑的数量，举例来说，你可以建：home.100mainstreet.com，toolshed.100mainstreet.com和outhouse.100mainstreet.com。所以www.100mainstreet.com只是100mainstreet.com域名中的一个网站。

11、一般的Web服务器在大多数情况下用端口80来接收请求。如果不专门指定，则默认为80.

12、链接

（1）添加标题使得链接更易理解

eg：This is my HTML <a href="index.jsp" title="jsp示例">链接</a> page.则把鼠标悬停在链接上并停留一段时间，会看到工具条。

（2）链接到目标锚

使用<a>元素创建目标锚 eg：<h2><a id="chai">The first chapter</a></h2>

链接到目标锚：<a href="index.html#chai">See the first chapter</a>

注意：用id属性代替href之后文本下就不会加下划线了；id不能含空格。

（3）使用target（对象）打开一个新窗口。

可以通过在<a>元素中添加target属性来告诉浏览器使用不同的窗口。target属性的值就是浏览器页的“对象窗口”。如果没有target，浏览器会在同一个窗口打开链接。如果把对象值指定为“_blank”，浏览器将总是打开新窗口来显示网页。如果全部<a>元素中的对象名称都是“_blank”的话，那么每个链接都会在新的空白窗口中打开。如果你给它起另外一个名字如“coffee”，所有对象名为“coffee”的链接都会在相同的窗口打开。

13、网站中常用的图像格式只有两种：JPEG和GIF。照片和复杂图像使用JPEG格式，纯色图像、logo和几何图形使用GIF格式。

JPEG：可在连续调次（复制品中有中间层次，如照片）图像中获得最好效果；可以用1600万种不同的颜色显示图像；是一种有损格式，因为文件缩小时会丢失部分图像信息；不支持透明。

对于几种纯色组成的图像、线条组成的图像（如logo、剪贴画）和含有小段文字的图像，使用GIF比较合适；用256种颜色显示图像；GIF同样会压缩文件来减小尺寸，但是不会丢失任何东西，是中无损格式；允许把背景颜色设为透明的，图像背景就可以穿透显示。

一个JPEG照片通常比同质量的GIF小，而GIF logo通常看起来更佳，而且文件比JPEG格式的小。

PNG是最新型的图像格式，支持JPEG和GIF图像样式。而且比GIF有更高级的透明特点。但不是所有浏览器都支持它。

GIF 格式支持多图像文件和动画文件（来自网络）。

其他（来自网络）：BMP：Windows 位图，它不支持文件压缩，也不适用于 Web 页。BMP 文件适用于 Windows 中的墙纸。

14、<img>元素 <img src="images/drinks.gif">

（1）<img>是个内联元素，前后不会插入换行；是个空元素。src属性指定了要在网页上显示的图像文件的位置，不只用于相对路径，也可把URL放到src属性中。如果想指向另外一个网站的图像，则通常会用URL定位它（若链接和图像都在相同的网站，用相对路径更好）

（2）alt属性要求是一小段描述图像的文字，如果图像不能显示，就用这段文字替代。width、height属性告诉浏览器页面中图像应该显示的宽度、高度，不写单位则表示都是用像素的数量指定的。这样浏览器会在显示网页之前先安排好布局。

（3）当图像太大时，比浏览器窗口还大，怎么处理？

这时为什么不能用width和height来调整网页上的图像的尺寸？

因为浏览器在缩小大图像来配合网页之前要先下载整个大图像。

这是要做的——调整图像大小以符合浏览器规格：用图像编辑软件（如Photoshop）打开图像，减小图像尺寸，保存图像再使用。

15、像素

（1）你的电脑显示屏是由数以百万计的称为像素的点组成的。显示屏的尺寸和分辨率有很多种，800像素是大多数人设置的浏览器的典型宽度。所以，800像素作为图像的最大宽度是最佳的显示方案（网页也一样）。

（2）像素的数目和屏幕上图像的尺寸有什么关系？

72像素/英寸是个非常好的方案，你可以根据你的显示器提升到120像素/英寸。假设你的显示器是72像素/英寸，如果你想一张宽和高近似3英寸的图像，你要用72（像素）X3（英寸）=246刑诉，或者四舍五入到250像素。

16、

JPEG格式保存为.jpg文件？GIF格式保存为.gif文件？

蒙版

用反锯齿处理柔化边缘的过程和背景颜色有关。在Photoshop Elements中的蒙版选项允许你指定文字所处的背景颜色，所以当文字柔化后可以和背景颜色匹配。

17、W3C校验器：http://validator.w3.org/ 免费的在线设备来校验网页。校验器读取你的DOCTYPE声明来确定它校验的是哪一种文本。

18、meta标记的意思是我们将告诉浏览器关于网页的一些信息。

在严格的HTML中，内联元素必须包含于块元素；但是在旧版的HTML中和在过渡的HTML4.01中可以通过。

只有文本和其他内联元素可以嵌入内联元素中，块元素在任何情况下都不允许包含在内联元素里；块元素禁止包含在<p>元素之中；文本或内联元素最好先置于块元素之内，再一起添加到<blockqoute>.

19、HTML和XHTML（将HTML转化我iXHTML）

（1）将DOCTYPE改为严格的XHTML 1.0

（2）添加xmlns属性、lang属性和xml:lang属性到<html>元素。

（3）所有的空标记都应以“/>”结尾，而不是“>”。例如，在HTML里，我们只须写<br>，但是在XHTML里，要写成<br />。在斜杠之前插入一个空格是预防一些较旧的浏览器无法识别“/>”。

有一个小工具叫做Tide，它能帮你规范文本，并把HTML转化为XHTML。可以在http://tidy.sourceforge.net找到Tidy。

20、样式

（1）以p{ color:maroon; }为例，p称为选择符，即花括号中的样式适用于选择符选择的元素。 CSS允许你定义各种选择符来决定你的样式适用于哪些元素。

设置文本下划线 text-decoration:underline; 加下划线（即底部边框下划线，这种下划线将延伸到网页边沿）：border-bottom:1px solid black;

（2）可以把样式从html中提出来作为一个css文件（外部样式表），但注意，.css中不用写<style></style>标记。然后把需要用到css的html链接到外部样式表，用<link>。

（3）继承。意指当你向CSS p选择符中添加了样式，则<p>中的元素也从<p>元素继承了样式（注意，不是所有的样式都能被继承的，只是一部分。）

CSS哪些属性可被继承，哪些不能呢？大体上，影响你文本外观的样式，如字体颜色、字体，还有其他和字体相关的属性，如字体大小、字体宽度（如黑体）和字体样式（如斜体），都可以被继承。其他的属性（比如边框）不被继承。

（4）继承的覆盖。你总能用一个更具体的选择符覆盖一个来自于父结点的属性。如果你因为两个选择符具有相同的具体性而无法解决冲突，可以使用你的样式表里的规则排序来解决冲突。也就是说，使用CSS文件里最靠后的规则。

（5）CSS里如何添加注释：用/* */

（6）类。使用XHTML和CSS，你可以定义一个元素类，然后提供样式给属于那个类的任何元素。要把元素添加到一个类中，只需添加一个带有类名的“class”属性。

eg：<p class="greentea">XXX</p> CSS中 p.greentea{color:green;}表示greentea类里的所有段落应用这个样式；blockquote.greentea, p.greentea{color:green;}则这个规则将适用于绿茶类里的<p>元素和<blockquote>元素；.greentea{color:green;}像这样如果用一个句点并且后接一个类名，那么这个规则将适用于该类内的所有成员。

（7）一个元素可以加入多个类。只需将每个类名赋给“class”属性值，类名之间用一个空格隔开。顺序无关紧要。eg：<p class="greentea blueberry raspberry">XXX</p>

（8）如果你的CSS有错误，通常错误后面的所有规则都会被忽略。

（9）CSS校验器：http://jigsaw.w3.org/css-validator/

（10）CSS中有很多样式属性：color:用来设置文本元素的字体颜色；background-color:用来控制元素的背景颜色；front-weight:（lighter/normal/bold/bolder）用来控制文本的粗细，用它把文字加粗，也可以把属性值设为100~900之间的一个数，但还是会有浏览器或字体不支持这种方法，所以这种方法并不常用；left:用它告诉元素如何放置它的左侧；line-height:用来设置文本元素的行间距；top:控制元素顶部的位置；text-align:用这个属性让文本左对齐，右对齐或居中（center）；letter-spacing:用来设置字母之间的间距；border:用来在元素周围加边框，可以设置成实心边框、虚线边框……； margin:如果想在元素的边缘和内容之间有一些空间，就用边界；font-size:把文字变大或变小；font-style:用这个属性得到斜体文本，属性值一般为italic，但又的字体并不支持italic（斜体）格式，可以用oblique倾斜文本代替；list-style:用来设置列表项的样式；background-image:用这个属性把一个图像放到元素后面。text-decoration:用这个属性给文本添加更多样式（如overlines、underlines、linethroughs等），可以同时设置几个decoration值，中间用空格隔开，即可同时拥有这几种效果；如果文本继承了你不想要的文本修饰，用值“none”就可以去掉。

（11）font-family通常指定几个不同的字体名列表，它们属于同一系列，末尾通常加一个通用的字体系列名，像“serif”、"sans-serif"、"monospace"。浏览器工作时先查找计算机中有没有指定的第一种字体，如果有，就用这个，否则再看第二个，依次类推。最后，如果前几种都没有，就用末尾加的那个，即浏览器默认的那个系列中的字体来代替你末尾指定的。如果字体名由几个单词组成，则需要加双引号。

（12）当把一个内容区的宽度设置为“auto”时，浏览器根据内容区的需要调整内容区的宽度。把边界设置成“auto”，浏览器会计算出合适的边界是多少，并且保证左右边界相等，以使内容居中。

21、CSS—调整字体大小

（1）font-size:14px; 用像素定义字体大小，就是告诉浏览器字母的高是多少像素。

（2）font-size:150%; 与像素精确地规定字体大小不同，百分数用与别的字体大小的相对值来定义字体大小。表明字体大小应该是父元素的150%。

eg：body{font-size:14px;} h1{font-size:150%;} 这儿我们用像素定义body字体大小，用百分数150%定义一号标题字。标题<h1>是<body>字体大小的150%，是14X150%=21px.我们没定义<p>的字体大小，它就继承了<body>的字体大小，是14px。

（3）还可以用"em"定义字体大小，它跟百分数一样，是另一种相对测量单位。不过用em不是指定百分数，而是指定比例因数。（不要把这跟<em>元素弄混淆了）以下是em的用法：

font-size:1.2em; 这表明字体大小应该按比例放大1.2倍。

body{font-size:14px;} h2{font-size:1.2em;} <h2>标题会是父元素字体大小的1.2倍，即14pxX1.2=16.8px，但大多数浏览器会四舍五入到17.

（4）另外还有一种定义字体大小的方法：关键字。可以把字体大小定义为：xx-small,x-small,small,medium,large,x-large或者是xx-large.

body{font-size:small;} 在大多数浏览器中，这部分会将body文本显示为12像素。

默认的body文本字体大小（尽管也取决于浏览器）通常是16像素。默认标题字体大小时多大？这也取决于浏览器，但一般说来，<h1>是默认body字体大小的200%，<h2>是150%，<h3>是120%，<h4>是100%，<h5>是90%，<h6>是60%。默认的<h4>和body字体大小一样，<h5>和<h6>要更小一些。

那么应该用哪种方法定义我的字体大小呢？这里有一个小技巧，可以使字体大小在大多数浏览器中显示一致。

a、选择一种关键字（推荐用small或medium）定义body字体大小，也就是网页的默认字体大小。

b、用em或百分数把别的元素的字体大小指定为相对于body字体大小的字体尺寸（选em还是百分数都无所谓，效果是一样的）。

这个技巧有什么好处呢？把字体大小定义成与body字体大小相对的形式，就可以很容易地通过改变body字体大小来改变整个网页的字体大小了。想重新设计网页，把字体变大一些，如果你的body字体大小值是small，只需把它改为medium，所有别的元素也以相应比例自动变大了，因为你已经把那些字体的大小定义为与body字体大小相关联的了。另外一个好处是，如果用户想调整页面中的字体尺寸，也没问题，用上这个小技巧，页面中所有的字体都会自动调整。

注意：用像素指定大小时，IE不支持比例缩放。这就是要少用像素指定字体大小的一个原因。

如果指定body字体大小时不用关键字而用em或%，也是可以的，例如指定body部分字体大小为90%，就是默认字体大小的90%，即通常的默认字体大小时16像素，它的90%就是14像素左右。

22、Web颜色——如何指定Web颜色？

（1）用名字定义颜色。用这种方法只能定义17种颜色。如Red、silver等。不区分大小写。

（2）用红色、绿色和蓝色值（或各自比例）定义颜色。例如桔红色是由红色80%，绿色40%和蓝色0%组成的，那么要定义桔红色可以这么做： body{background-color:rgb(80%,40%,0%);}

也可以用0~255之间的某个数值定义红色、绿色和蓝色的值。所以可以用红色204、绿色102和蓝色0代替红色80%、绿色40%和蓝色0%： body{background-color:rgb(204,102,0);}

204、102、0这些数字是怎么来的？255的80%是204,255的40%是102,255的0%是0.

（3）用十六进制代码定义颜色。如#cc6600.十六进制代码以#开头，前两位数字代表红色，中间两位代表绿色，最后两位代表蓝色。每一组两位数代表一个0~255的数字。如果每两位数字都一样，就可以简写。例如，#ccbb00可以缩写成#cb0，但如果十六进制代码是#ccbb10这样的，就不能缩写了。

关于如何确定Web颜色：方法一：在调色板上选择颜色，调色板就会同时以rgb值和十六进制代码显示出来。方法二：使用在线颜色表。再表中选择网页中要用到的颜色，然后把它的十六进制代码复制到CSS中就可以了。这个表在http://en.wikipedia.org/wiki/web_colors上。还可以通过搜索“HTML color charts”找到更多颜色表。

关于网页安全颜色：早起的网页浏览器，支持大量颜色的电脑屏幕很少，因此创建了网页安全调色板来保证网页在大多数显示器中显示一致。现在基本可以把“网页安全颜色”当历史来看了。

关于如何搭配字体颜色：最终要的是文本和背景用高对比的颜色以提高可读性。例如，白背景黑文本就是最高的对比。最好做到文本用深颜色，背景用浅颜色。

23、line-height属性

使用line-height属性可以定义文本的行间距。跟其他与字体相关的属性一样，也可以用像素、em或百分数等与字体大小相关的值定义行间距。(eg:1.6em指相当于字体大小的1.6倍)

转载于:https://www.cnblogs.com/qingxinblog/p/4048945.html