基础再回顾

<span>标签是没有语义的，它的作用就是为了设置单独的样式用的。

<q>这里有几句话</q>这样写法浏览器会为文本自动添加双引号，但是其实际意义在于引用别人说的话，而不是为了代替双引号。

table标签，认识网页上的表格   https://www.imooc.com/code/292

https://www.imooc.com/code/294

标题，肯定在最上面，也不能跑到表外面吧。所以在<table>下一行的位置写就行。
备注，是这个表的备注，所以，紧跟着table吧。  <table summary="本表是2012年的库存表">
另外，备注是给自己看的，不是在网页上展示的。就是只有看html源代码的时候才能看到，网页是看不到的。
跟html的注释<!--本表是2012年的库存表-->，效果一样。都是为了方便看源码，防止表太多你改错了。

在新建浏览器窗口中打开链接
  
  

   
   

    
    
<a>标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。
    
    
如下代码：
    
    
<a href="目标网址" target="_blank">click here!</a>
   
   
  
  

CSS代码语法

css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：

http://img.mukewang.com/52fde5c30001b0fe03030117.jpg

选择符：又称选择器，指明网页中要应用样式规则的元素

声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示：
p{
font-size:12px;
color:red;
}

每一条css样式声明（定义）由两部分组成，形式如下：

选择器{
    样式;
}

在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。

子选择器
 
 

  
  

   
   
还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码：
   
   
.food>li{border:1px solid red;}
   
   
这行代码会使class名为food下的子元素li  加入红色实线边框。
  
  
 
 

包含(后代)选择器
 
 

  
  

   
   
包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码：
   
   
.first  span{color:red;}
  
  
 
 

分组选择符
 
 

  
  

   
   
当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：
   
   
h1,span{color:red;}
  
  
 
 

以下几个页面元素都具有盒子模型的特征：
<div>、<ul>、<ol>、<p>、<h>、<table>

参考：https://zhuanlan.zhihu.com/p/24778275

盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。
因此
一个元素的宽度（盒子的宽度）=左边框+左填充+内容宽度+右填充+右边框。
一个元素占据的空间 (待确定，好像有个margin重叠问题；)左边界+左边框+左填充+内容宽度+右填充+右边框+右边界
元素的高度也是同理。



text-align 对齐“元素中的”文本    （text-align 属性规定元素中的文本的水平对齐方式）
看不懂https://www.imooc.com/code/4336
http://www.w3school.com.cn/css/css_text.asp

首先说明两点：
（1）行内元素居中是让 容器中的元素 居中， 容器本身不居中而是占满整个页面（准确应该是父容器）的宽。
（2）块元素居中是让容器居中，因为div是块级元素，其默认的width是占满整个页面（准确应该是父容器）的，所以要定宽。

css样式优先级问题：