之前写过不少前端界面，但是没有完整阅读过一本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规则；

Head First HTML与CSS阅读笔记（一）的更多相关文章

  1. Head First HTML与CSS阅读笔记（二）

    上一篇Head First HTML与CSS阅读笔记(一)中总结了<Head First HTML与CSS>前9章的知识点,本篇则会将剩下的10~15章内容进行总结,具体如下所示. div ...

  2. normalize.css阅读笔记

    最近在被各种浏览器的CSS兼容折磨,所以看了看normalize的源代码来了解一些常见的浏览器间不一致的CSS渲染问题…… 源代码在这里 text-size-adjust 用法参见Apple的文档和M ...

  3. CI框架源码阅读笔记3 全局函数Common.php

    从本篇开始,将深入CI框架的内部,一步步去探索这个框架的实现.结构和设计. Common.php文件定义了一系列的全局函数(一般来说,全局函数具有最高的加载优先权,因此大多数的框架中BootStrap ...

  4. javascript高级程序设计阅读笔记（一）

    javascript高级程序设计阅读笔记(一) 工作之余开发些web应用作为兴趣,在交互方面需要掌握javascript和css.HTML5等技术,因此读书笔记是必要的. javascript简介 J ...

  5. QCon 2015 阅读笔记 - 移动开发最佳实践

    所有ppt下载地址:http://pan.baidu.com/s/1mg9o4TM 下面是移动开发实践部分的阅读笔记. 移动开发网络性能优化实践 - 陈浩然 (携程) 携程是非常标准的移动App架构, ...

  6. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

  7. HTML+CSS学习笔记（3）- 认识标签（2）

    HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...

  8. HTML+CSS学习笔记(2) - 认识标签（1）

    HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...

  9. CI框架源代码阅读笔记3 全局函数Common.php

    从本篇開始.将深入CI框架的内部.一步步去探索这个框架的实现.结构和设计. Common.php文件定义了一系列的全局函数(一般来说.全局函数具有最高的载入优先权.因此大多数的框架中BootStrap ...

随机推荐

  1. EIP权限工作流平台总结-4跨域配置

    1.预览地址:www.eipflow.com (1) 权限工作流:www.demo.eipflow.com/Account/Login (2) 基础权限版:www.auth.eipflow.com/A ...

  2. 利用Fitnesse测试外部jar包

    1. 下载Fitnesse官方jar http://www.fitnesse.org/FitNesseDownload 2. 下载后,创建下面目录,其中FitnesseRoot目录,不需要创建,Fit ...

  3. KOL运营之——如何与网文作者高效地约稿？

    本文来自网易云社区,转载务必请注明出处. 随着网络文学的发展,影响力逐渐扩大,越来越多的同事在工作中遇到需要和这些作者打交道的时候.对于作者这个群体,很多时候都是只闻其书,不见其人.要跟这样的群体打交 ...

  4. [Django笔记] django结构分析

    看了一段时间django官方文档,先把自己理解的django目录结构记录一下 目录结构 一个成熟的django项目的结构大致如下: /project/ |-- project/ |-- setting ...

  5. luogup3834（主席树模板）

    luogup3834(主席树模板) 给定由N个正整数构成的序列,将对于指定的闭区间查询m次其区间内第k小值.1≤N,M≤2e5. 有一个做法,是对于每个序列的前缀建一颗权值线段树,然后通过权值线段树相 ...

  6. CLR Via C#: CLR 的执行模型

    CLR(Common Language Runtime)公共语言运行时:是一个可由多种编程语言使用的“运行时”. 编译源代码文件的过程: C# 源代码文件 -> C# 编译器->托管模块( ...

  7. springboot2.0+Neo4j+d3.js构建知识图谱

    Welcome to the Neo4j wiki! 初衷这是一个知识图谱构建工具,最开始是对产品和领导为了做ppt临时要求配合做图谱展示的不厌其烦,做着做着就抽出一个目前看着还算通用的小工具 技术栈 ...

  8. Exadata Smart Flash Logging工作原理

    Exadata在V2时代,ORACLE为了进一步拓宽客户人群,除了宣称Exadata适用OLAP系统,同时也适用于OLTP系统,那怎么才能满足OLTP系统的高IOPS要求呢?于是Exadata引入了闪 ...

  9. python中enumerate、xrange、range

    enumerate可以给列表自动生成一列,默认从0开始,自动增长1,可以指定默认开始值 list_product = ["thinkpad","macbook" ...

  10. CentOS Linux解决Device eth0 does not seem to be present【转】

    在VMware里克隆出来的CentOS Linux,ifconfig...没有看到eth0,然后重启网卡又报下面错误. 故障现象: service network restartShutting do ...