之前写过不少前端界面,但是没有完整阅读过一本HTML与CSS的书籍,都是用到什么查什么,最近闲暇之余想巩固加深一下前端基础方面的知识,阅读了《Head First HTML与CSS》,感觉此书有点过于简单了,但还是学到了不少,这里只记录总结一些重要或自己之前并没有太过注意的知识点。
1. 元素属性的写法:属性名+等号(=)+用双引号括起来的属性值;
2. HTML中简短引用元素:<q>...</q>,浏览器会负责加上双引号,<q>一般作为现有段落的一部分,是内联元素(inline),<blockquote>元素用于较长的引用,需单独显示,是块元素(block);
3. 换行:<br>,没有实际内容,是void元素,<img>也是void元素,除要编写XHTML兼容的页面,一般都不使用<br/>;
4. <ol>有序列表,<ul>无序列表,<dl>为定义列表,每一项都有一个定义术语<dt>和一个定义描述<dd>;
5. 强调内容:<em>...</em>,特别强调<strong>;
6. <code>显示计算机程序代码,<time>显示日期或时间,<pre>使浏览器按输入的方式原样显示文本;
7. 建议<a>中的title属性值与链接的Web页面的<title>元素值相同,<a href="xxxx" title="所要链接的页面的文本描述">xxxx</a>;
8. <a>元素可以带一个id属性,直接访问页面中的一个特定点,例如:
<h2 id="chai">Chai</h2>
<p>xxxx</p>
可以直接使用<a href="index.html#chai">See Chai Tea</a>,访问到长文件中特定的位置;
如果在一个长文档中,顶部有一个元素id为top,则在底部想要返回顶部,可以使用:<a href="#top">Back to top</a>;
9. 浏览器在一个新页面打开链接:<a href="index.html" target="_blank">xxxx</a>;
10. JPEG适合连续色调图像,如照片,是一种“有损”格式,不支持透明度和动画;PNG适合单色图像和线条构成的图像,如logo,剪贴画和图像中的小文本,是“无损”格式的,压缩式不会丢掉信息,允许透明 ;
GIF适合领域与PNG类似,“无损”格式,允许透明,支持动画;
11. <img>元素在图片加载失败时,可使用alt属性位访问者提供提示,说明图像中包含哪些信息,还可以调整图像大小,具体如下:
<img src="http://www.baidu.com/test.png" alt="just for test." width="48" height="100">
12. 把图片作为链接:
<a href="html/test_png.html">
<img src="img/test.png" alt="just for test.">
</a>
13. 相比于HTML 4.01,HTML5的doctype相当简洁:<!doctype html>,指定字符编码:<meta charset="utf-8">;
14. W3C的HTML验证工具:http://validator.w3.org,CSS验证工具:http://jigsaw.w3.org/css-validator/;
15. HTML编写的一些原则:
- 一定要以<!doctype HTML>开头;
- 在<head>中要包含正确的字符编码<meta charset="UTF-8">;
- <head>中要包含<title>元素,一般在<head>中只放<meta>,<title>,<style>,<link>元素;
- 不允许在<img>等void元素中嵌套其他内联元素;
- <img>元素中src和alt属性都不可少;
16. 在<head>中引入外部CSS文件,<link rel="stylesheet" href="css/test.css">,<link>是一个void元素,href属性可以是相对地址,也可以是完整URL;
17. 元素可以加入多个类,各个类名之间用空格分隔,例如: <p class="greentea blueberry redheart">...</p>,如果元素属于多个类,且多个类中CSS都设置了相同的属性,则会选择CSS文件中最后 列出的那个规则;
18. CSS属性:
- top,left分别控制元素顶部和左边的位置;
- text-align控制文本左对齐,居中或右对齐;
- letter-spacing在字母之间设置间距;
- list-style改变列表中列表项的外观;
- line-height设置文本元素中的行间距,如line-height: 1.6em;
- background-image设置背景图片;
- p.classname选择该类中的所有p元素;
- p#idname选择id为idname的p元素;
19. font-family属性定制页面中使用的字体,共包括5个字体系列,sans-serif,serif,monospace,cursive,fantasy,其中最常用的还是sans-serif(无衬线)和serif(有衬线);
例如:
body {
font-family: Verdana, Geneva, Arial, "Couries New", sans-serif;
}
可以使用web字体向用户浏览器提供字体,使用CSS中的@font-face属性,例如:
@font-face {
font-family: "Emblema One";
src: url("http://xxxxxxxxxx/xxx.woff"),
src: url("http://xxxxxxxxxx/xxx.ttf");
}
h1 {
font-family: "Emblema One", sans-serif;
}
FontSquirrel提供了Web字体托管服务;
20. font-size属性控制字体大小,可以使用像素px,百分数%(相对于父元素),em(相对父元素),关键字四种方式指定字体大小,例如:
body {
font-size: 14px;(150%, 1.2em, small)
}
关键字,主要使用small和medimu,一般可指定它作为body规则中的字体大小,作为页面默认字体大小,再使用em或百分数相对于body字体大小指定其他元素的字体大小;
21. font-weight改变字体粗细,一般使用bold和normal比较多,font-style为文本增加斜体风格,italic(斜体)和oblique(倾斜文本);
22. 有时界面上我们不想让链接有下划线,可以使用text-decoration: none;来去除下划线,text-decoration的值可以为line-through(删除线),underline(下划线),overline(上划线)和
none(无装饰);
23. CSS元素盒模型:每个盒子由一个内容区、可选的内边距(padding)、边框(border)和外边距(margin)组成;
24. background-image只是要设置一个元素的背景图片,并不是用来在页面中放置图像,例如:
.classname {
background-image: url(image/background.gif);
background-repeat: no-repeat; /*repeat:水平垂直重复平铺,no-repeat:不重复,repeat-x:只在水平方向重复,repeat-y:只在垂直方向重复,inherit:继承父元素*/
background-position: top left; /*top,left,right,bottom,center*/
}
25. CSS中顺序很重要,后面设置的会将前面设置的覆盖掉;
26. 边框样式:border-style,共有8种样式,solid(实线),double(双线),groove(槽线),outset(外凸),dotted(虚线),dashed(破折线),inset(内凹),ridge(脊线);
边框宽度:border-width,可使用关键字(thin,medium,thick)和像素指定;
边框颜色:border-color,值可为rgb(100%, 0%, 0%),#ff0000,red几种形式;
边框圆角:border-radius: 15px,只指定左上角有圆角:border-top-left-radius: 3em;
27. 类名和id名都可以包含字母、数字和下划线,不能有空格,类名要以字母开头,id名可以以数字开头;
28. <link>元素中可以使用media属性指定应用这个样式表的设备类型,例如:
<link href="lounge-mobile.css" rel="stylesheet" media="screen and (max-device-width: 480px)">
也可以直接在CSS中指定,例如:
@media screen and (min-device-width: 481px) {
#guarantee {
margin-right: 30px;
}
}
@media规则中只包含特定于一种媒体类型的CSS规则;