Please enable JavaScript.

Coggle requires JavaScript to display documents.

Website (HTML (基本结构 (<head> (<meta> (移动：<meta name="…

- - - - <title>
      - <meta>
        
        以下几种常用（name）
        
        编码：<meta charset="utf-8">
        
        关键字：<meta name="keywords" content="...">
        
        描述：<meta name="description" content="...">
        
        移动：<meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        编码
        
        关键字
        
        描述
        
        移动端
      - <link>
- - - - <p style=“”>
    - - <style>...</style>
    - - <head><link rel=“stylesheet” type=“text/css” href=“mystyle.css”></head>
  - - - 元素（标签）选择器
        
        p {color: black;}
        
        h1 {font-weight: bold;}
      - 后代选择器
        
        两个selector之间带空格：
        
        h3 p {padding-left: 2em;}
        
        实质：标签的嵌套
      - ID选择器“#”
      - 类选择器“.”
      - 结合以上
        
        #content h3 {font-size: 1.2em;}
    - - 标签重置
        
        *{margin:0; padding:0;}
      - 强大但少用
    - - 子选择器
        
        直接后代，不定位孙：
        
        #nav>li {padding-left: 20px} #
        
        IE7 有小bug
      - 一般兄弟选择器
        
        h1~p {}
        
        ① <h1>和<p>具有相同父元素（即兄弟）
        
        ② <h1>后所有的兄弟<p>均生效，<h1>否
      - 相邻兄弟选择器
        
        h1+p {}
        
        ① <h1>和<p>具有相同父元素（即兄弟）
        
        ② 紧邻<h1>的兄弟<p>生效，<h1>否
        
        有意思的例子
        
        li+li {} 效果：除第一个<li>不生效
    - - body,div,a,h1 {}
      - 说白了就是“多选”
    - - :link
      - :visited
      - :hover
      - :active