基本标签

html

• 什么是html

  • 超文本标记语言，用于网站开发。

• html运用于什么场景

  • 手机端和原生代码结合处理业务逻辑，加快开发速度，节约维护成本，效率高。

• html5相比之前有什么进步

  • 标准统一，所以浏览器都可以打开阅读且效果一致。

块标签

• 特征：
  • 独占一行，换行显示，可以设置宽高，块可以套块和行
  • 新起一行开始 一般可以包含多行
• div
  • 定义：
    • 一个没有修饰的容器
    • 空白区域，内部可以添加块属性和行属性标签

代码如下
   
我是div
  
我是div
  
我是div
效果如图：

div.png

• h1-h6
  • 标题，从1-6依次变小变细

代码如下：
我是h1标签
我是h2标签
我是h3标签
我是h4标签
我是h5标签
我是h6标签
效果如下：

h1-h6.png

• p（ 段落）
  • 有P标签的时候会自动换行且行距比较大

代码如下：
我是p标签
我是p标签
我是p标签
效果如图：

P标签.jpg

• br
  • （换行）
• ol
  • 有序列表，只有一列的表格并且有序
  • 每一行前面有数字和点表示 eg: 1. 2. 3.`
• ul
  • 无序列表，只有一列的表格且无序
  • 每一行前面有一个圆点

代码如下：
    
      
我是有序列表第一行
    
      
我是有序列表第二行
      
我是有序列表第三行

    
       
我是无序列表第一行
    
       
我是无序列表第二行
    
       
我是无序列表第三行

效果如下：

有\无序列表.jpg

• dl
  • 定义列表
  • 比如词典里面的词的解释或定义就可以用这种列表

代码如下：
    
       
乔布斯
    
       
乔布斯他是一个。。。等等等

效果如下：

dl\dt\dd.jpg

• table (表格)

代码如下：

(行）





(列)

星期一	星期二	星期三
今天很好	今天也很好	今天都很好

效果如下：

![table\\th\\tr\\td.jpg](http://upload-images.jianshu.io/upload_images/2106624-1287b2eb67bfbf1d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


## 行标签
   - 在行内显示，内容撑开宽高，不可以设置宽高（img、input除外），行只能套行
    - 不新起一行
    - 一般只含有行标签

- span 
    - 无语义标签，类似div 
```html
代码如下：
这是一个span
效果如图：

span.jpg

• a
  • 定义超链接，用于从一张页面链接到另一张页面（网址）

代码如下：
百度一下
效果如图：

百度一下，你就知道.png

• img
  • 定义图片，用于在页面中显示图片

代码如下：
    

• var &em（斜体）

• strong（更强的强调)显示为 粗体

    - 粗体

• b（加粗）

   - 粗体

• textarea
  • 文本框

代码如下：
    这是一个文本框
效果如下：

textarea.png

• input

  • 输入框，属性有type name value

  • 后缀六种type 分别：

  • text(输入）

  • password（密码）

代码如下：
      
      
效果如下：

text password.png

• radio（单选）
• checkbox（多选）

代码如下：





效果如图：

radio checkbox.png

• button（按钮）
• submit（提交）

代码如下：






效果如图：

button submit.png

• select
  • 定义选择列表（下拉列表）
• option
  • 定义选择列表的选项

代码如下：
          
                  第一项    
                  第二项    
                  第三项
       
效果如图：

下拉选框.png

CSS

• 什么是CSS

  • (cascading style sheet)的缩写，可译为层叠样式表，用于控制web页面的外观

• CSS的特点

  • 页面内容与表现形式分离，也可将css单独存放在另一个css文件中
  • 可很好的控制页面的布局
  • 提高网页加载速度
  • 降低服务器成本
  • 呈现一致的效果

• css 的引入方式

  • 外部引入（页外），
  • 头部引入
  • 标签内引入

• css常用选择器

  • ID选择器 #
  • 类选择器 .
  • 标签选择器
  • 群组选择器
  • 后代选择器

• css的引入方式

  • 在标签内直接引入，直接在标签里面加style样式

        
css

        
用于控制web页面的外观

• head 头部引入 （在head部分加入