HTML|CSS总结与补充

Posted 2020-11-08 wyb666

知识内容：

1.html总结

2.CSS总结

 

 

 

一、HTML总结

详细内容见：http://www.cnblogs.com/wyb666/p/8733699.html

　1、HTML是一套规则，浏览器认识的规则

    2、开发者：
        学习Html规则
        开发后台程序：
            - 写html文件（充当模板的作用） ******
            - 数据库获取数据，然后替换到html文件的指定位置（Web框架）

    3、本地测试
         - 找到文件路径，直接浏览器打开
         - pycharm打开测试

    4、编写Html文件
        - doctype对应关系
        - html标签，标签内部可以写属性 ====> 只能有一个
        - 注释：  <!--  注释的内容  -->

    5、标签分类
        - 自闭合标签
            <meta charset="UTF-8">
        - 主动闭合标签
            <title>老男孩</title>

 

　6.HTML常用标签：
    head内标签：
            - <meta  -> 编码，跳转，刷新，关键字，描述，IE兼容
                    <meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />
            - title标签 网页标题
            - <link /> 引入CSS
            - <style /> CSS有关
            - <script> javascript有关

   body内标签：
         - 图标，  &nbsp;  &gt;   &lt;

         - p标签，段落

         - br，换行

         ======== 小总结  =====
            所有标签分为：
                块级标签： div（白板），H系列（加大加粗），p标签（段落和段落之间有间距）
                行内标签： span（白板）
            标签之间可以嵌套
            标签存在的意义，css操作，js操作
            ps:chorme审查元素的使用
                - 定位
                - 查看样式

        - h系列(h1 h2 h3 h4 h5 h6 大小依次减小，均加粗加黑)

        - div -> 块级标签

        - span -> 内联标签

        - input系列 + form标签
            input type=‘text‘     - name属性，value="赵凡"
            input type=‘password‘ - name属性，value="赵凡"
            input type=‘submit‘   - value=‘提交‘ 提交按钮，表单
            input type=‘button‘   - value=‘登录‘ 按钮

            input type=‘radio‘    - 单选框 value，checked="checked"，name属性（name相同则互斥）
            input type=‘checkbox‘ - 复选框 value, checked="checked"，name属性（批量获取数据）
            input type=‘file‘     - 依赖form表单的一个属性 enctype="multipart/form-data"
            input type=‘rest‘     - 重置

            <textarea >默认值</textarea>  - name属性
            select标签            - name,内部option value, 提交到后台，size，multiple

        - a标签
            - 跳转
            - 锚     href=‘#某个标签的ID‘    标签的ID不允许重复

        - img
             src
             alt
             title

        - 列表
            ul
                li
            ol
                li
            dl
                dt
                dd

        - 表格
            table
                thead
                    tr
                        th
                tbody
                    tr
                        td
            colspan = ‘‘
            rowspan = ‘‘

        - label
            用于点击文件，使得关联的标签获取光标
            <label for="username">用户名：</label>
            <input id="username" type="text" name="user" />

        - fieldset -> 分组
            legend -> 定义标题

    - 共计18组标签

 

 

 

二、CSS总结

详细内容见：http://www.cnblogs.com/wyb666/p/8970209.html
        1. CSS样式可以写在标签的style属性中
        2. 在head里面 style标签中写样式
            - id选择区
                  #i1{
                    background-color: #2459a2;
                    height: 48px;
                  }

            - class选择器 ******

                  .名称{
                    ...
                  }

                  <标签 class=‘名称‘> </标签>

            - 标签选择器
                    div{
                        ...
                    }


                    所有div设置上此样式

            - 层级选择器（空格） ******
                   .c1 .c2 div{

                   }
            - 组合选择器（逗号） ******
                    #c1,.c2,div{

                   }

            - 属性选择器 ******
                   对选择到的标签再通过属性再进行一次筛选
                   .c1[n=‘alex‘]{ width:100px; height:200px; }

            PS:
                - 优先级，标签上style优先，编写顺序，就近原则

            css样式也可以写在单独文件中，再使用link标签引入
            <link rel="stylesheet" href="commons.css" />

        3、注释
            /*   */

        4、CSS常用属性

　    (1)字体

　　　　font-family  字体种类

　　　　font-size     字体大小

　　　　font-weight 字体加粗

　　　　color字体颜色

　　　
        (2)文本属性
    　　 text-align 对齐(重要)
            text-decoration 装饰 (去除a标签的下划线(text-decoration: none))
            text-indent 首行缩进
            
        (3)背景属性
            background-color  背景颜色
            background-image  背景图片(九宫格涮葫芦娃)  url() no-repeat 50% 50%
            
        (4)color
            red (直接写名字)
            #FF0000
            rgb(255, 0, 0)  --> rgba(255,0,0,0.5)
            
       (5) 边框属性 border
            1. border-width (边框宽度)
            2. border-style (边框样式)
            3. border-color (边框颜色)
            简写:
                border: 1px solid red;

　　(6)居中

　　　　text-align:ceter, 水平方向居中
            line-height，垂直方向根据标签高度

　　(7)高度宽度

　　　height，         高度 百分比
            width，          宽度 像素，百分比　

        6、float
            让标签浪起来，块级标签也可以堆叠
            老子管不住：
                <div style="clear: both;"></div>

        7、display
            display: none; -- 让标签消失
            display: inline;
            display: block;
            display: inline-block;
                     具有inline,默认自己有多少占多少
                     具有block，可以设置无法设置高度，宽度，padding  margin
            ******
            行内标签：无法设置高度，宽度，padding  margin
            块级标签：设置高度，宽度，padding  margin


        8、CSS盒子模型
        
            content (内容)
            padding (内填充) 调整内容和边框之间距离时使用这个属性
            border  (边框)
            margin  (外边距) 多用于调整调整标签之间的距离 (注意两个挨着的标签margin取最大值)
            注意: 要习惯看浏览器console窗口那个盒子模型

 

　　 9.伪类和伪元素
           (1)伪类
                :link
                :visited
                :hover (重要)
                :active
                :focus(input标签获取光标焦点)
           (2)伪元素
                :first-letter
                :before(重要 在内部前面添加)
                :after(重要 在内部后面添加)