H5-前端学习-02常用标签和CSS认识

        哈喽，各位小伙伴，我们会更新一些前端的文章，想学习前端的小伙伴，特别是0基础的小伙伴，或者对此感兴趣的小伙伴，可以关注我，我会保持更新。

 常用标签：
            1.div标签：<div></div>
                作用：用来排版布局，划分区域
            2.span：<span>文本内容</span>
                作用：通常来放置一段文本，想要看到文本有样式效果，需要配合CSS一起使用
            3.列表标签
                1.无序列表标签（没有顺序性的列表）
                    <ul type="dics">
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                 type(列表项样式)取值：
                     dics--------黑色实心圆
                     circle------空心圆
                     square------黑色实心方块
                     none--------取消默认列表样式
                2.有序列表标签（有顺序性的列表）
                    <ol type="A/a/I/i/1" stare="4">
                        <li></li>
                    </ol>
                    type更改有序列表列表项类型
                    stare指定列表项起始值,取值为数值
                3.自定义列表标签
                    <dl>
                        <dt>图片/问题</dt>
                        <dd>图片的解释说明/回答/dd>
                    </dl>
            4.表单的使用
                    作用:用来收集用户信息，并将收集到的用户信息提交给后台数据库
                    <form action="">

                    </form>
                表单元素：input 
                    type取值：
                        1.text---------文本输入框
                        2.password-----密码框
                        3.submit-------提交按钮
                        4.reset--------重置按钮
                    value属性：值 的意思，给value什么内容就在页面中显示什么（内容可以编辑）
                    placeholder="请输入用户名"----表示提示信息，不占位置，不可编辑

        CSS部分：
            CSS概念：层叠样式表
            语法：选择器{属性:属性值;属性:属性值;属性:属性值;}
            特点：
                1.一共由两部分组成，选择器部分和声明部分，声明部分里面包含属性和属性值
                2.属性和属性值用冒号连接
                3.属性和属性值之间用分号分隔
                4.最后一个属性值后面可以不加分号，但是我们建议最好加上分号
            选择器：用来查找页面元素的一种方法(方式)
            {}：里面写样式规则
        CSS使用方式：
            1.行内样式(内联样式，内嵌样式)
                语法：<div style="属性:属性值"></div>
                备注：P标签能够设置宽高，不设置宽度，宽度占父元素的%100
                      b标签不能设置宽高，宽高由里面的元素撑开
                弊端：当页面元素过多时，使用行内样式导致页面过于沉重，看起来凌乱
            2.内部样式
                需要将CSS样式放在style标签里，style标签需要放置在head标签中
                <style>
                    CSS样式
                </style>
                优点：能过做到结构和表现的分离(但是没有做到完全分离)，使页面看起来更加简洁
                弊端：当页面标签与CSS内容过多时需要拖动滚动条来查找CSS，使用起来不方便
            3.外部样式：(推荐使用，工作中常用)
                将CSS代码单独写在一个CSS文件内
                优点：做到结构层和表现层完全分离
                需要使用Link标签将外部样式表引入(面试题)
                1.<link rel="stylesheet" href="css/08-外部样式.css">
                2.@import url(路径)
                注意：使用@import，@和import中间不能有空格，URL与()之间不能有空格，()后面要加分号
                      @import url(路径)要放在标签内
                区别：
                    1.link是标签，@import是CSS提供的方法
                    2.加载顺序不同，使用link标签引入外部样式，浏览器同时渲染HTML和CSS，
                      使用@import，浏览器先渲染HTML，然后再解析CSS，可能导致页面有几秒钟的混乱效果
                    3.兼容性区别：link标签没有兼容性问题，@import在低版本浏览器上不支持
                    4.JS操作DOM时的区别：link标签引入样式，JS可以更改标签样式；@import导入样式JS不能更改样式

            4.样式表的优先级：
                (通常将引入的外部样式放在title标签后)
                样式表的优先级遵循就近原则
                ！important>行内样式>内部样式>外部样式
                ！important是放在属性和属性值后
            CSS中选择器：
                1.通配符选择器：
                    符号：*
                    *{
                        margin:0;//外边距
                        padding:0;//内边距
                    }
                2.标签选择器：
                    用标签的名字来当选择器
                    特点：能够匹配到对应的标签，无论标签的嵌套层级有多深