HTML|CSS总结与补充

Posted wyb666

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML|CSS总结与补充相关的知识,希望对你有一定的参考价值。

知识内容:

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(重要 在内部后面添加)

 

































































































































































































以上是关于HTML|CSS总结与补充的主要内容,如果未能解决你的问题,请参考以下文章

27-前段补充总结,素材库

自己总结的web前端知识体系大全欢迎补充

python——基础补充(总结廖雪峰论坛知识点)

python css功能补充讲解

HTML与CSS布局技巧总结

补充四周总结