简单的html思维框架

1.html的结构

    (1)doctype
        strict:该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不   允许框架集（Framesets）。
        transtional:该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
        frameset:该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。
    (2)head
        title:html的标题
        meta:元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
    (3)body
        div以及各种标签

2.div布局

    (1)布局原则:
        从上到下,从左到右,从大到下,从top开始的逆时针
    (2)盒子模型:
        width:宽度
        height:高度
        border:边框
        margin:外边距
        padding:内边距
    (3)浮动布局
        float
            right,left,top,buttom
        clear:
            right,left,top,buttom

3.css效果

    (1)选择器:
        1.id
        2.class
        3.标签选择器
        4.伪选择器:CSS 伪类用于向某些选择器添加特殊的效果
        5.通配选择器:在CSS中,一个星号(*)就是一个通配选择器.它可以匹配任意类型的HTML元素.在配合其他简单选择器的时候,省略掉通配选择器会有同样的效果.
    (2)控制效果:
        段落控制:
            text-indent:首行缩进
            text-align:水平文字方向
            text-decoration:文本装饰线
            text-spaing:字符间距
            text-transform:文字大小写转化
        文字控制:
            color:文字颜色
            front-style:文字样式
            front-size:文字大小
            line-height:行高
            front-family:字体
        背景控制:
            background-color:背景颜色
            background-image:背景图片
            background-repeat:背景图重复
            background-position:背景图位置
    (3)引入方式
        页内style标签
        行内style标签
        外部css文件
        import导入
    (4)初始化
        目的:解决html在不同浏览器不兼容问题
        原因:不同的浏览器的初始css设定不同主要有margin border front-size等
        解决:对其进行初始化

4.html标签

    (1)无语义标签
        div:块状元素,布局
        span:内联元素,文字
    (2)有语义标签
        h(h1-h6):标题,不同的表示标题大小不同.
        p:段落
        img:图片
        embed:视频
        a:链接
        ul:无序列表
        ol:有序列表
        table:表格