first head html css,《Head First HTML CSS》

一、HTML

1、HTML(HyperText Markup Language)，建立网页结构

2、CSS(Cascading Style Sheets)，控制网页表现

3、通过HTML，我们利用标记来标示内容提供结构

4、元素=开始标记+内容+结束标记

5、元素可以有属性，属性可以提供一个元素的附加信息

6、所有页面都要有一个元素，其中要有一个

元素和一个元素

7、可以在

8、大多数空白符(制表符、回车、空格)都会被浏览器忽略

二、HyperText

1、使用元素创建一个超文本链接，链接到另一个Web页面。元素的内容会成为Web页面中可单击的文本，href属性告诉浏览器链接的目标文件

2、利用属性，可以指定一个元素的附加信息。属性的写法：首先是属性名，后面是一个等于号，然后是用双引号括起来的属性值

3、Web浏览器只认识每个元素的一组预定义的属性

4、使用/分隔路径中的各个部分

5、使用..可以链接到源文件上层文件夹中的一个文件

三、Build

1、

、

、

、

1. 、

• 、
• 都是块元素，单独显示，在内容前后分别有一个换行

  2、、、、、是内联元素，元素中的内容与其包含元素的其余内容一起显示

  3、块元素特立独行、内联元素随波逐流

  4、void元素没有内容(确切的讲，void元素是在开始标记和结束标记之间没有任何内容的元素)，只有一个标记组成

  5、ol(ordered list) ul(unordered list) li(list item)

  6、

  1. 和
  • 元素被设计为只能包含
  • 元素，可以在列表中建立嵌套列表，将
    1. 或
    • 元素放在
    • 元素中

      7、要对HTML内容中特殊字符使用字符实体

      四、Link

      1、在所有元素中，属性的顺序都不重要

      2、域名是一个唯一的名字，用来唯一标识网站

      3、URL(Uniform Resource Locator，统一资源定位符)是一个全局地址，可以用来定位Web上的任意资源

      4、元素的href属性中可以使用相对路径或者URL。对于网站内的其他页面，最好使用相对路径，对外部链接使用URL

      5、为了便于访问，可以在元素中使用title属性提供链接的一个描述，可以为任何元素增加title属性

      6、可以使用id属性在页面中创建一个目标。使用#后面加一个目标id，可以链接到页面中的那个位置，在一个页面中id必须唯一

      7、target属性告诉浏览器在哪里打开Web页面，使用相同target名的所有链接都会在同一窗口打开，_blank则始终使用一个新窗口

      五、Image

      1、Web上最常用的3种图像格式：JPEG、PNG和GIF

      2、JPEG:适合照片和复杂图像、1600万种颜色、有损格式、不支持透明度、不支持动画，文件较小

      3、PNG:适合单色图像、百万种颜色、无损格式、支持透明、不支持动画，文件稍大

      4、GIF:适合单色图像、256种颜色、无损格式、支持透明、支持动画、文件较大

      5、浏览器对元素的处理与其他HTML元素稍有不同，读取HTML页面后，浏览器会从Web服务器获取各个图像并显示

      6、利用src属性指定图像文件的位置，可以使用相对路径包含自己网站中的图像，或者使用URL包含其他网站的图像

      7、alt属性是元素的必要属性

      8、直接使用width和height属性调整页面上图像的大小，浏览器在缩放图像前，仍然要获取整个大图像

      六、Standard

      1、文档类型定义(doctype)用来告诉浏览器使用HTML版本:

      2、

      元素中的标记告诉浏览器关于一个Web页面的额外信息，如内容类型和字符编码:

      七、CSS

      1、CSS包含一些简单语句，称为规则，每个规则为选择的元素提供样式，典型的规则包括一个选择器，以及一个或多个属性和值

      2、选择器指定规则将应用到哪些元素，通过用逗号分隔元素名，可以一次选择多个元素

      3、只能对body中的元素增加样式

      4、在CSS中把注释包围在/*和*/之间

      5、在HTML中包含CSS，可以使用

      6、可以使用class属性将元素增加到一个类

      7、可以通过在元素名和类名之间加一个.选择该类中的特定元素，可以使用.classname选择该类的所有元素

      8、元素可以加入多个类，把各个类名放在class属性中，各个类名之间用空格分隔，类名的顺序不重要

      9、如果多个选择器选择一个元素，则使用最特定的规则，如特定程度相同，使用CSS文件中最后列出的规则

      八、Font&Color

      1、color属性为文本设置颜色 (name、%、#)

      2、font-family属性定制页面中使用的字体

      3、font-size属性控制字体大小 (px、%、em、keyword:xx-small、x-small、small、medium、large、x-larger、xx-large)，指定字体大小时，选择一个关键字(推荐small或medium)，指定它作为body规则中的字体大小，即页面的默认字体大小，使用%或em，相对于body字体大小指定其他元素的字体大小

      4、font-weight属性控制字体粗细 (lighter、normal、bold、bolder)

      5、font-style属性为文本增加风格 (italic、oblique)

      6、text-decoration属性为文本增加更多风格 (none、underline、overline、line-through)

      7、line-height属性指定文本中各行之间的垂直间距

      8、CSS内置规则：

      @font-face可以获取Web字体，并为它分配font-family名字

      @import允许导入其他CSS文件

      @media允许创建特定于某些类型的CSS规则

      九、BoxModel

      1、盒模型(BoxModel)是CSS看待元素的一种方式，从内而外，内容区(content area)、内边距(padding)、边框(border)、外边距(margin)

      2、内边距是在内容区周围增加额外的空间，外边距提供元素之间的间距。如果有一个边框，内边距在边框内，外边距在边框外

      3、元素的背景颜色或背景图像会延伸到内边距下，但不会延伸到外边距

      4、使用id属性为元素指定一个唯一的名字，一个页面上有给定id的元素只能有一个

      5、一个元素不能有多个id，一个页面也不允许多个元素的id相同

      6、样式表的顺序很重要，一个样式表会覆盖在它上面链接的样式表中的样式

      7、可以在元素中使用媒体查询或者使用CSS中的@media规则指定设备

      内容：

      background-color

      background-image: url(path、URL)

      background-repeat:(repeat、no-repeat、repeat-x、repeat-y、inherit)

      background-position

      background:color image repeat

      内边距：

      padding: top right bottom left

      边框：

      border-color

      border-style:(solid、double、groove、outset、dotted、dashed、inset、ridge)

      border-width:(px、keyword:thin、medium、thick)

      border-radius

      border:color width style(顺序任意)

      外边距：

      margin: top right bottom left

      margin: top&bottom right&left

      margin: top&right&bottom&left

      十、div&span

      1、

      元素用于将相关的元素归组为一个逻辑区，可以将需要共同样式的元素归组

      2、元素用于将相关的内联元素和文本归组在一起

      3、width属性指定元素内容区的宽度

      4、text-align属性对块元素中的所有内联内容对齐，直接在内联元素上使用不起作用

      5、可以使用子孙选择器选择嵌套在其他元素中的元素

      6、子孙选择器会选择一个元素中嵌套的所有相应元素

      7、有些元素有不同的状态，可以用伪类单独为各个状态指向样式，如元素有link、visited、hover、focus、active

      十一、Flow

      1、浏览器使用流在页面上放置元素，块元素从上向下流，各元素之间有一个换行，默认每个块元素会占浏览器窗口的整个宽度，内联元素在块元素内部从左上方流向右下方

      2、正常页面流中的两个块元素上下相邻的外边距会折叠为最大外边距的大小

      CSS布局

      1、浮动布局

      浮动元素放在块元素之上，不会影响正常的页面流。内联元素内容会考虑浮动元素的边界，围绕浮动元素

      float属性：浮动元素会从正常流中取出，浮动到左边或者右边

      width属性：如果要浮动一个元素，必须为这个元素设置一个宽度

      clear属性：当元素流入页面时，元素左右不允许有浮动内容，设置了此属性的元素会下移

      2、凝胶布局

      内容的宽度是固定的，不会随着浏览器窗口扩展或收缩

      width属性

      auto属性

      3、绝对布局

      一个元素绝对定位时，浏览器将此元素从流中完全删除，对其他元素没有任何影响

      position属性

      1、static(静态)：默认，所有内容正常流入页面

      2、absolute(绝对)：将元素从流中取出，相对于最近的父元素指定绝对位置

      3、fixed(固定)：将元素放在一个相对于浏览器窗口的固定位置

      4、relative(相对)：相对其包含元素定位

      4、表格布局

      display属性：(table、table-row、table-cell)

      border-spacing

      vertical-align

      十二、HTML5

      1、:所包含的内容将作为页面的导航链接

      2、:将标题、Logo和署名等通常放在页面或区块最上方的内容组织在一起

      3、:将诸如文档信息、法律措辞和版权说明等通常放在页面或区块最下方的内容组织在一起

      4、:一个主题性内容分组，通常包含一个首部和底部

      5、:用于表示不作为页面主内容的次要内容，如插图和边栏

      6、:用于类似博客帖子、论坛帖子和新闻报道等独立的内容

      7、:用来标记时间和日期

      8、:为页面增加视频