chayibei-html

    HTML一些笔记.
    base    可以设置整体链接的打开状态    <base href="_blank">
    特殊符号        
        空格符号    ＆nbsp
    <    小于号    ＆lt
    >    大于号    ＆gt
    &    和号    ＆amp
    ￥    人民币    ＆yen
    ©    版权    ＆copy
    ®    注册商标    ＆reg
    °    摄氏度    ＆deg
    ±    正负号    ＆piusmn
    ×    称号    ＆times
    ÷    除号    ＆divide
    ²    平方3    ＆sup2
    ³    立方3    ＆sup3
            
    b、strong    文字加粗    
    i  em    文字斜体    normal
    s  del    文字加删除线    
    u  ins    文字加下划线    
    字体        
    font-size    控制文字大小    
    font-family    文字字体库    SimSun,,Microsoft YaHei
    font-weight    文字粗细    400,700
    font-style    字体风格(斜体)    italic
    line-height    行间距    
    list-style:none    清楚小圆点用于li标签    
    text-align    水平对齐方式    left, right center
    text-indent    首行缩进    2em
    text-decoration    文本的装饰(下划线)    "none默认。定义标准的文本。underline定义文本下的一条线。下划线 也是我们链接自带的overline定义文本上的一条线。line-through定义穿过文本下的一条线。
    "
    text-shadow    设置文字阴影    text-shadow: 2px 2px 20px red;(分别意思为,水平、垂直阴影位置，可模糊距离，阴影颜色)
    text-decoration    文本的装饰(一般是给a标签使用,去除、添加下划线    "none默认。定义标准的文本。underline定义文本下的一条线。下划线 也是我们链接自带的overline定义文本上的一条线。line-through定义穿过文本下的一条线。
    "
    color: rgba(r,g,b,a)    设置颜色透明    a 是alpha  透明的意思  取值范围 0~1之间    color: rgba(0,0,0,0.3)
    background-color    背景颜色    
    background-image    背景图片地址    
    background-repeat    是否平铺    repeat | no-repeat | repeat-x | repeat-y 
    background-position    背景位置    top | center | bottom | left | center | right 
    background-attachment    背景固定还是滚动    "scroll : 　背景图像是随对象内容滚动 默认值 fixed : 　背景图像固定
    "
    background-size    背景缩放(CSS3)    "background-image: url('images/gyt.jpg');
       background-size: 300px 100px;
       /* background-size: contain; */
       /* background-size: cover; */"
    标签伪类选择器        
    :link    未访问的链接    a:link{color:red;}
    :visited    已访问的链接    
    :hover    鼠标移动到链接上    
    :active    选定的链接    
    位置伪类选择器        
    :first-child    选取属于其父元素的首个子元素的指定选择器    "li:first-child { /*  选择第一个孩子 */
              color: pink; 
             }"
    :last-child     选取属于其父元素的最后一个子元素的指定选择器    
    :nth-child(n)     匹配属于其父元素的第 N 个子元素，不论元素的类型      n是数值,2n是偶数,odd是奇数
            
    表单标签(input)        
        outline:none    清除轮廓线
    text    <input type="text">    单行文本输入框
    password    <input type="password">    密码输入框
    radio    <input type="radio">    单选按钮
    checkbox    <input type="checkbox">    复选框
    button    <input type="button">    普通按钮
    submit    <input type="submit">    提交按钮
    reset    <input type="reset">    重置按钮
    image    <input type="image" src="图片地址">    图像形式的提交按钮
    file    <input type="file">    文本域
    email    <input type="email">    输入邮箱格式
    tel    <input type="tel">    输入手机号码格式
    url    <input type="url">    输入url格式
    number    <input type="number">    输入数字格式
    search    <input type="search">    搜索框（体现语义化）
    range    <input type="range">    自由拖动滑块
    time    <input type="time">    小时分钟
    date    <input type="date">    年月日
    datetime    <input type="datetime">    时间
    month    <input type="month">    月年
    week    <input type="week">    星期 年
    placeholder    <input type="text" placeholder="请输入用户名">    占位符  当用户输入的时候 里面的文字消失  删除所有文字，自动返回
    autofocus    <input type="text" autofocus>    规定当页面加载时 input 元素应该自动获得焦点
    multiple    <input type="file" multiple>    多文件上传
    autocomplete    <input type="text" autocomplete="off">    规定表单是否应该启用自动完成功能  有2个值，一个是on 一个是off      on 代表记录已经输入的值  1.autocomplete 首先需要提交按钮 <br/>2.这个控件必须给他名字
    required    <input type="text" required>    必填项  内容不能为空
    accesskey    <input type="text" accesskey="s">    规定激活（使元素获得焦点）元素的快捷键   采用 alt + s的形式
    name    由用户自定义    控件的名称
    value    由用户自定义    input控件的默认文本值
    size    正整数    input控件在页面中的显示宽度
    checked    checked    定义选择控件默认被选中的项
    maxlength    正整数    控件允许输入的最多字符数
    label    label标签 绑定    "label for=""male"">姓名</label>
    <input type=""radio"" name=""sex"" id=""male"">"
    textarea    textarea控件(文本域)    "<textarea cols=""每行中的字符数"" rows=""显示的行数"">
      文本内容
    </textarea>"
    select    下拉菜单    "<select>
      <option>选项1</option>
      <option>选项2</option>
      <option>选项3</option>
      ...
    </select>"
            
    link    外链    <link href="CSS文件的路径" type="text/CSS" rel="stylesheet" />
    link    网页图标    <link rel="shortcut icon" href="favicon.ico"/>(这是统一命名,放在跟目录)
    继承 《 通配符 《 标签选择器 《 类选择器 《 id选择器 《 行内样式 《 ！important        
    行内、块元素        
    diaplay:block    行内转块    <h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
    display:inline    块转行内    <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
    display:inline-block    块、行内元素转换为行内块    <img />、<input />、<td>
            
    盒子        transparent(设置颜色透明的，属性值)
    border     边框    border : border-width || border-style || border-color  (连写)
    border-radius    圆角边框()半径    
    padding    内边距    
    margin    外边距    盒子居中margin: 0 auto; 必须是块级元素.行内元素对padding与margin设置无效
    box-shadow    盒子阴影    box-shadow:3px 3px 5px 4px rgba(0,0,0,1){水平阴影 垂直阴影 模糊程度 阴影尺寸 阴影颜色  内/外阴影}
            
    浮动        
    float        "left元素向左浮动  right元素向右浮动 none  元素不浮动（默认值）
    "
    clear    清除浮动    " 额外标签法,给浮动元素最后添加一个额外标签,并给这个标签赋值:选择器{clear:both;}  left不允许左侧有浮动元素（清除左侧浮动的影响）  right不允许右侧有浮动元素（清除右侧浮动的影响） both同时清除左右两侧浮动的影响
    "
        父级添加overflow属性清除    可以给父级添加： overflow为 hidden|auto|scroll  都可以实现。
        使用after伪元素清除浮动    ".clearfix:after {  content: """"; display: block; height: 0; clear: both; visibility: hidden;  }   
    
     .clearfix {*zoom: 1;} "
        使用before和after双伪元素清除浮动    ".clearfix:before,.clearfix:after { 
      content:"""";
      display:block;
      /* 这句话可以触发BFC BFC可以清除浮动,BFC我们后面讲 */
    }
    .clearfix:after {
     clear:both;
    }
    .clearfix {
      *zoom:1;
    }"
        给父级元素设置高    
            
    定位    {position:属性值;    
    relative    相对定位，相对于其原文档流的位置进行定位    
    "static
    
    
    "    静态定位（默认定位方式）所有的标签在一开始都是静态定位（标准流）    
    absolute    绝对定位，相对于其上一个已经定位的父元素进行定位    
    fixed    固定定位，相对于浏览器窗口进行定位    
    z-index    叠放次序    
    cursor :  default  小白 | pointer  小手  | move  移动  |  text  文本        鼠标样式
            
    vertical-align:    图片与文字对齐方式    只针对行内或行内块元素
        baseline    基线对齐
        top     顶部对齐
        middle    垂直居中
        bottom    底部对齐
            
    word-break:    溢出的文字隐藏    主要处理英文单词
        normal    使用浏览器默认的换行规则。
        break-all    允许在单词内换行。
        keep-all    只能在半角空格或连字符处换行。
    white-space    设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容    
        normal :     　默认处理方式
        nowrap : 　    强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。
    text-overflow    文字溢出    设置或检索是否使用一个省略标记（...）标示对象内文本的溢出
        clip     不显示省略标记（...），而是简单的裁切 
        ellipsis    当对象内文本溢出时显示省略标记（...）
            
    outline:none    清除轮廓    
            
    display 显示        
            
    display 设置或检索对象是否及如何显示。        
    display : none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外，同时还有显示元素的意思。        
    特点： 隐藏之后，不再保留位置。        
            
    visibility 可见性        
            
    设置或检索是否显示对象。        
    visible : 　对象可视        
    hidden : 　对象隐藏        
    特点： 隐藏之后，继续保留原有位置。（停职留薪）        
            
    overflow 溢出        
            
    检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。        
    visible : 　不剪切内容也不添加滚动条。        
    auto : 　 超出自动显示滚动条，不超出不显示滚动条        
    hidden : 　不显示超过对象尺寸的内容，超出的部分隐藏掉        
    scroll : 　不管超出内容否，总是显示滚动条        
            
    transition     过渡    要过渡的属性  花费时间  运动曲线  何时开始   （四个属性连写）
        transition-property    规定应用过渡的 CSS 属性的名称。
        transition-duration    定义过渡效果花费的时间。默认是 0。
        transition-timing-function    规定过渡效果的时间曲线。默认是 "ease"。
        transition-delay    规定过渡效果何时开始。默认是 0。
    transition: all 0.6s        
            
    transform:    2D变形    
    transform:translate(x, y)    "使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。
    
    可以改变元素的位置，x、y可为负值；
    "           要定位才能使得盒子居中。left（right）：50%;transform:translate(-50%,y)
    移动    translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动    
    
            translateX(x)仅水平方向移动（X轴移动）    
            translateY(y)仅垂直方向移动（Y轴移动）    
        transform：scale(x, y)    缩放    
            scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）    
            scaleX(x)元素仅水平方向缩放（X轴缩放）    
            scaleY(y)元素仅垂直方向缩放（Y轴缩放）    
            旋转    
        transform：rotate(deg)    可以对元素进行旋转，正值为顺时针，负值为逆时针；    transform:rotate(45deg);
        transform-origin：    可以调整元素转换变形的原点    
        transform：skew(deg, deg)    倾斜    
            3D变形    
        transform：rotateX(*deg)    沿着 x 立体旋转**度    
        transform：rotateY()    沿着y轴进行旋转***度    
                
            
        表格  格式        
        <table>    table  border="1" cellpadding="0" cellspacing="0"    
            <thead>        
                <tr>        
                    <th>姓名</th>        
                    <th>邮箱</th>        
                    <th>手机</th>        
                    <th>地址</th>        
                </tr>        
            <thead>        
            </tbody>        
                <tr>        
                    <td>小黑</td>        
                    <td>xiaohei@126.com</td>        
                    <td>19999009090</td>        
                    <td>北京</td>        
                </tr>        
            </tbody>        
        </table>