html+css 常用的知识点

我发现经常在工作中老是忘记一些简单的html标签的写法，因为不常用的代码，我就会遗忘，所以我需要整理记录一下，这样就可以很好的查看了。

1、【m²】平方米/㎡    (注意：平方米的写法最好就是用代码转义，不然有些浏览器是不能解析的，比如：火狐)
(1)【>】大于号“>” 
(2)【&lt;】小于号“<” 

2、【input属性用法】
    (1) <input type="text" id="id" readOnly>//只能读不能写    
    (2) <input type="text" id="id" disabled>//只能读不能写    
    (3) <input type="text" id="code" autofocus>//自动获得焦点。    
    (4) <input class="search-input" name="search-info" value="" placeholder="好友圈" style="text">//占位符的写法，但是IE9以下不支持这个属性
    (5) <input type="text" name="usrname" required>//required 属性规定必需在提交表单之前填写输入字段
    (6)input的type属性类型如下：
    button 
    checkbox 
    color 
    date 
    datetime 
    datetime-local 
    email 
    file 
    hidden 
    image 
    month 
    number 
    password 
    radio 
    range 
    reset 
    search 
    submit 
    tel 
    text 
    time 
    url 
    week

3、【input不可编辑属性】
    怎样使input中的内容为只读，也就是说不让用户更改里面的内容。

    <input type="text" name="input1" value="中国" />
    <input type="text" name="input1" value="中国" readonly />
    <input type="text" name="input1" value="中国" disabled />
    最好不要用disabled,不然就无法取出里面的值了.

    <input type="text" name="input1" value="中国" readonly="true" />
    <input type="text" name="input1" value="中国" readonly />
    区别：
    (1)disabled  --  完全不可编辑，并且是不能复制的。
    (2)readonly   --  不可编辑，但是是可以复制。
    (3)Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。
    (4)表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去

    同点：
    使input不可编辑。

4、【常用html标签】
(1) 输入文本用法：<textarea></textarea> 【resize: none;//该属性禁止用鼠标拖拽放大缩小文本框】
(2) 复选框：<input name="" type="checkbox" value="" />  注意：加上这个disabled会让他的复选框不可以点击选中
(3) 按钮：
    a、<button type="submit" class="submit-btn">发布</button> 【提交按钮】
    b、<button type="button" class="submit-btn">发布</button> 【点击按钮】
    c、<input type="button" name="button">【点击按钮】
    d、<input type="submit" name="button">【提交按钮】
    e、<input type="file" name="upload"> 【上传按钮】
    f、<label><input type="radio" id="experience" name="radioBtn" value="1" checked="checked">有</label> 【单选按钮】 （注意：不同组的radio，它的name不同）

(4)数量加减框：   
    <div class="good-number">
        <button type="button" class="minus-btn"><a href="#">-</a></button>
        <input style="text" name="number" value="1">
        <button type="button" class="plus-btn"><a href="#">+</a></button>
    </div>
    【css样式】
    .good-number {
        position: relative;
        display: inline-block;
        width: 100px;
        height: 35px;
        padding: 0 30px;
        line-height: 33px;
        vertical-align: middle;
        border: 1px solid #ddd;
        overflow: hidden;
    }
    .goods-btn {
        position: absolute;
        top: 0;
        width: 30px;
        height: 100%;
        padding: 0;
        color: #333;
        border: 0 none;
        border-radius: 0;
        font-size: 24px;
        font-weight: 400;
        line-height: 100%;
    }
    .minus-btn {
        left: 0;
    }
    .plus-btn {
        right: 0;
    }
    .sample-list-numbox .numbox-input {
        display: inline-block;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0 3px !important;
        text-align: center;
        text-overflow: ellipsis;
        word-break: normal;
        border: none !important;
        border-right: 1px solid #ddd !important;
        border-left: 1px solid #ddd !important;
        border-radius: 0;
        outline: 0;
        line-height: 21px;
        color: #333;
        overflow: hidden;
    }
    .goods-input {
        display: inline-block;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0 3px !important;
        text-align: center;
        text-overflow: ellipsis;
        word-break: normal;
        border: none !important;
        border-right: 1px solid #ddd !important;
        border-left: 1px solid #ddd !important;
        border-radius: 0;
        outline: 0;
        line-height: 21px;
        color: #333;
        overflow: hidden;
    }   

5、【字体图标用法】
1、在iconfont.css中：
（1）font-face声明字体：
    @font-face {
        font-family: 'iconfont';
        src: url('../fonts/iconfont.eot');                  /* IE9 */                   
        src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),   /* IE6-IE8 */
             url('../fonts/iconfont.woff') format('woff'),                      /* chrome、firefox */
             url('../fonts/iconfont.ttf') format('truetype'),                   /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
             url('../fonts/iconfont.svg#iconfont') format('svg');               /* iOS 4.1- */
    }
（2）定义使用iconfont的样式
    .iconfont{
        font-family:"iconfont";
        font-size:16px;
        font-style:normal; 
        -webkit-font-smoothing: antialiased;/*图标样式进行抗锯齿处理*/
        -webkit-text-stroke-width: 0.2px; /*字体图标的边缘进行模糊*/
        -moz-osx-font-smoothing: grayscale;
    }
    .icon-mima:before { content: "\e600"; }
    .icon-gouwuche:before { content: "\e603"; }
    .icon-tishi:before { content: "\e602"; }
    .icon-user1e:before { content: "\e601"; }
（3）挑选相应图标并获取字体编码或者相应的类，应用于页面
    <i class="iconfont">&#33</i>
    或
    在html中添加：<link rel="stylesheet" href="css/iconfont.css">
    <div class="iconfont icon-gouwuche"></div>
    具体可以参考阿里巴巴矢量图标库：[阿里巴巴矢量图标库](http://www.iconfont.cn/repositories)