第一节 HTML与CSS重点知识总结

超链接    <a href=""></a>

图片标签    <img src = " " alt = "">***</img>

内联样式    <iframe src = " "></iframe>

选择器    
类选择器(.)
元素选择器 (标签名)
 id选择器(#)
通配选择器(*)
并集选择器(*,*)
交集选择器(*.*)
关系选择器(父子(' ') 后代(>) 兄弟('+' '~') )
属性选择器（title）    '='     '^='     '$='     '*='     'title'
伪类选择器：
         ：first-child 第一个子元素
         ：last-child  最后一个子元素
         ：nth-child(n)选中第n个子元素
         ：first-of-type    
         ：last-of-type
         ：nth-of-type()        以上三个都是在同类型中排序的

：not（）否定伪类        将符合条件的第n个元素从中去除

    伪元素：

        ::first-letter  表示第一个字母
        ::first-line    表示第一行字母
        ::selection     表示选中的内容
        ::before        元素的开始
        ::after         元素的结尾
            ::before 和 after 必须结合content属性来使用

伪类选择器    （伪类一般都是以‘：’开头的）

    ：link     作用于没有访问过的链接（可以设置颜色及其他）
    ：visited    作用于访问过得超链接
    ：hover    作用于鼠标移动到该链接时
    ：active    作用于超链接正在被点击的颜色

结构伪类
    ：first - child    匹配第一个子元素
    ：last - child    匹配最后一个子元素
    ：nth - child()    匹配第n个子元素
    ：nth - last = child()    匹配倒数第几个子元素

样式的优先级

    内联样式id > 选择器类和伪类选择器 > 元素和伪元素选择器 > 通配选择器 > 继承样式

-------------------------------------------------------------------

盒子模型
    content    内容区
    padding    内边距
    border    边框
    margin    外边距（盒子与盒子之间的距离称为外边距）
            
         box-sizing ：border - box；（固定格式，把盒子宽高定死）
         box-shadow    用来设置元素的阴影效果，不影响页面布局（inset 内阴影）

设置文本超出为小点固定格式：
p{
    width: 200px;
    border: 2px red solid;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
<p>很长的文字，就不写了</p>            （lorem+Enter：一段文字）

背景设置：
    background-color 表示背景颜色
    background-image 设置背景图片
    background-repeat 设置背景图片的重复的方式
    background-size 用来设置背景图片的大小     （cover-撑满可能不完整 contain-相反）
    background-clip 设置背景显示的区域
    background-position 可以用来设置背景图片的位置

    background-origin 用来指定背景图片的坐标的原点
        padding-box 默认值，背景图片的原点在内边距上
        content-box 背景图片的原点在内容区上
        border-box 背景图片的原点在边框上

表单：

     <form action = "填写提交地址">
         用户名：<input type="text" name="username">    //text是文本类型
         密 码 :<input type="password" name="password">//password是密码类型
     </form>

    readonly 设置后标签改为只读，会提交
    disabled    设置后标签会变成不可用状态，不会提交
    required    必须填写的字段
    autocomplete    自动提示
    autofocus    页面加载时自动聚焦到此表单控件