前端三剑客

html–结构
css–样式
js–行为

标签tag

html 标准文档
html doctype 标签
html root 标签
html head 标签
html head title 标签
html head meta 标签
html head meta 标签
html body 标签
html body style 标签
html body script 标签
div[style=""] 内联样式
head>style 内部样式
head>link[ href="" rel=“stylesheet” type=“text/css” ] 外部部样式

html 按钮组件

<!--Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。-->
    <!--type = button  reset  submit-->
    <button type="button">点击</button>
    <button type="button" disabled>点击</button>

h5 表单

<!--novalidate 属性规定在提交表单时不应该验证 form 或 input 域。-->
<form action="" novalidate>
  <!--规定 form 或 input 域应该拥有自动完成功能。-->
  <p>text<input type="text" placeholder="请输入用户名" autocomplete="off"></p>
  <p>email<input type="email"></p>
  <p>search<input type="search"></p>
  <p>file<input type="file" multiple></p>
  <p>image<input type="image" width="99" height="99" alt="替代文本" title="鼠标提示"></p>
  <p><img src="" alt="替代文本" title="鼠标提示" width="99"></p>
  <!--min, max 和 step-->
  <p>number<input type="number" min="1" max="10"></p>
  
  <p>
    url_list<input type="url" list="url_list" name="link" />
      <datalist id="url_list">
        <option label="W3School" value="http://www.W3School.com.cn" >
        <option label="W3School" value="http://www.W3School.com.cn" >
        <option label="W3School" value="http://www.W3School.com.cn" >
        <option label="W3School" value="http://www.W3School.com.cn" >
      </datalist>
  </p>
</form>

css 选择器

/*css  id选择器*/
#test{}
#test span{}
/*css  class选择器*/
.test{}
.test span{}
/*css  属性选择器*/
P#test[title]{}
/*css  标签选择器*/
h2{}

css背景

 p{
    background-color: #fff; /*色彩*/
    background-image: url(..);/*图片路劲*/
    background-position: left;/*图片路劲*/
    background:#000 url(..) repeat fixed left top;
  }

css 文本对齐

  p{
    text-indent: 2px; /*缩进*/
    text-transform : capitalize; /*capitalize -首字大写 uppercase -英文大写 lowercase- 英文小写 */
    text-align: center;/*justify-两端对齐 center -居中  left-左对齐  right-右对齐*/
  }
  p{
    vertical-align: top;/*top-顶端 middle -中间  bottom-底部  baseline-基线*/
  }

css 字体

 p{
    color:#008834; /*文字颜色*/
    font-family : 宋体,sans-serif; /*字体家族*/
    font-size: 12px; /*字体大小*/
    line-height:15px; /*字间距*/
  }

A标签样式

  a{
    text-decoration: none; /*下滑线*/
  }
  a:link{}
  a:visited{}
  a:active{}
  a:hover{}

盒子模型

  div{
    display: none; /*block - 块级 inline - 行内*/
    display: block; /*block - 块级 inline - 行内*/
    display: inline-block; /*block - 块级 inline - 行内*/
  }
  div{
    width: 100px; /*宽*/
    height: 100px; /*高*/
    margin: 10px; /* top -上 right -右 bottom -下 left -左*/  /*外边界*/
    padding: 10px; /* top -上 right -右 bottom -下 left -左*/ /*内边界*/
    padding: 10px 20px; /*上右下左*/
    border-style: solid; /* solid - 实线 dotted - 点线*/
    border-width: 1px; /* 边框宽度*/
    border:1px solid #000000; /* 边框宽度 边框样式 颜色*/
  }

列表样式

 ul{
    position: absolute; /*absolute - 绝对定位 relative - 相对定位 static - 静止定位*/
    top:50px;
    left: 50px;
  }
  ul li{
    list-style-type:none; /* circle - 圆圈 disc - 圆点 square - 方块 decimal - 数字 outside - 外 inside -内*/
    list-style-position:outside; /* outside - 外 inside -内*/
    list-style-image:url(..); /* outside - 外 inside -内*/
  }

css可见控制

  div{
    visibility: hidden; /* hidden - 不可见 inherit - 继承 visible -可见 可占位*/
    overflow: hidden; /* hidden - 不可见 scroll - 滚动可见 visible -可见  auto - 自动  超出可见*/
  }