美文网首页
HTML // CSS

HTML // CSS

作者: 錦魚 | 来源:发表于2019-11-26 15:41 被阅读0次
    HTML常用标签
    <!DOCTYPE html>             // h5声明标签
    <html></html>               // 总盒子
    <head></head>               // 头信息
    <title></title>             // 网页标题(爬虫抓取点)
    <meta charset="utf-8">      // 设置(字符集...)
    <style></style>             // CSS内联样式
    <link>                      // 外联文件
    <!-- -->                    // 注释
    <body></body>               // 体信息
    <hr>                        // 横线占行
    <br>                        // 空占行
    <h1></h1>                   // 1~6级标题
    <font></font>               // 文字标签
    <p></p>                     // 段落标签
    <b>                         // 标签后加粗
    <i>                         // 标签后倾斜
    <img>                       // 图片
    <i></i>                     // 小图标
    
    <em></em>                   // 倾斜 // 有语义--语气
    <strong></strong>           // 加粗 // 有语义--内容
    <small></small>             // 小字体
    特殊符号                     // 字符实体
    <iframe></iframe>           // 内联框架
    <a></a>                     // 超链接
    

    文本标签
    <center></center>           // 居中标签
    <sup></sup>                 // 上标
    <sub></sub>                 // 下标
    <del></del>                 // 删除线
    <pre></pre>                 // 代码
    <code></code>               // 包裹代码
    
    
    ...
    

    常用
    块元素   --> 布局
    <div></div>                 // 布局盒子
    <ol></ol>                   // 有序列表
    <ul></ul>                   // 无序列表
    <li></li>                   // 列表项
    
    <dl></dl>                   // 自定义列表
    <dt></dt>                   // 列表 key
    <dd></dd>                   // 列表 value
    
    内联元素 --> 样式
    <span></span>               // 行内元素
    <input>                     // 输入信息
    

    CSS 样式与选择器
    xxx {
        color:red;              // 字体颜色
        font-size: 30px/em/rem  // 字体大小
        width:100px;            // 盒子宽
        height:100px;           // 盒子高
        background-color:red;   // 背景颜色
    }
    

    /* 元素选择器 */
    p {}
    /* id选择器 */
    #id {}
    /* class选择器 */
    .cls {}
    /* 通配选择器 */
    * {}
    /* 并集选择器 */
    p,#id,.cls {}
    /* 复合选择器(交集选择器) */
    p.cls {}
    /* 子元素选择器(直接) */
    div > span {}
    /* 后代元素选择器(间接) */
    div .cls {}
    

    /* 伪类选择器 */
    a:link {}                正常链接
    a:visited {}             访问过链接
    
    ie6以上可用以下属性至非a
    a:hover {}               悬停
    a:active {}              点击
    
    a:focus {}               获取焦点
    a:before {}              指定元素前
    a:after {}               指定元素后
    a::selection {}          选中的元素(复制文本时)
    a::-moz-selection {}     兼容火狐写法
    
    p:first-letter {}        首字母
    p:first-line {}          首行
    p:before {}              之前添加字母
    

    /* 属性选择器 */
    p[title="hello"] {}       属性为hello
    p[title^="abc"] {}        选择开头
    p[title$="abc"] {}        选择结尾
    p[title*="abc"] {}        选择结尾  
    

    /* 其他子元素选择器 */
    * body>p:first-child {}   第一个孩子
    p:last-child {}           最后一个孩子
    p:nth-child(odd/even/3n+0) {}  指定位置的子元素(奇偶/公式)
    p:first-of-type {}        
    p:last-of-type {}
    p:nth-of-type {}
    p:not(.hello) {}        非选中其他
    

    /* 兄弟元素选择器 */
    span + p {}        兄弟后第一个p
    span ~ p {}        兄弟后所有的p元素
    

    /* 内联样式      优先级1000  */
    /* id           优先级100   */
    /* 类           优先级10    */
    /* 元素         优先级1     */
    /* 通配*        优先级0     */
    /* 继承的样式   无          */
    

    快捷语法
    h1*3            =    <h1></h1><h1></h1><h1></h1>
    div>span        =    <div><span></span></div>
    

    相关文章

      网友评论

          本文标题:HTML // CSS

          本文链接:https://www.haomeiwen.com/subject/kkcswctx.html