前端知识（css，html）

Web前段标准
    html--结构标准：负责网页结构的搭建
    css--样式标准：负责网页的美化工作
    js--行为标准：负责网页的行为动作

行业词条
    internet：互联网
    www：万维网（资料空间）world wide web 万维网
    URL：统一资源定位器（网络地址）eg：www。baidu.com
    https:超文本传输协议
    w3c：万维网联盟（组织）
    网站：多个页面的集合（首页，内容页，列表页）
    网页：网页文件就是后缀名以.html或者.htm结尾的文件。文字图片超链接。
    浏览器：观看网页最终效果的平台
        五大浏览器厂商（拥有自己的技术）                其余厂商没有自己的技术
            ie
            谷歌
            火狐
            苹果
            欧朋

html（超文本标记语言）
    html语法规则
        标签，标签符号（标记，标签，节点，元素）----<>又称尖括号；
        html语言必须写在标签符号里面；
        html中的标签大多是成对出现；
        关闭符号----/又称反斜杠；
        注：html文档不能正常识别回车和换行只能用特定的代码实现
        具体代码
                描述当前文件的版本信息，如果没有详细说明4.0还是x1.0那就是5.0版本
                html文件
                网页的头部
                utf-8是国际编码，如果不写或者写成其他都会有问题
            
            自己所写的代码都放这里面
            结束

编码工具：HBuilder
    标签语义化
        在合适的地方使用合适的标签
        为什么？因为浏览器只认识标签，没有语音语调所表达的东西只能使用对应的标签来表示
        好处：语义化做得好，可以使搜索引擎把网站排名更靠前

标签
        h标签和p标签
            ：代表文章标题，共六个依次变小
            

:代表文章段落
        img标签
            img是一个单标签
            
            注意属性名="属性值" 空格不能丢，符号都要使用英文状态下，属性设置不分先后，宽高设置其中一个，另外一个就能等比例缩放；
        bui标签及其他
            粗线  
                b表示加粗
                表示加粗，多了强调语义
                注意：strong表示特别强调，一篇文章中不要多次出现
            下划线
            斜线  
                i表示倾斜
                em表示倾斜，多了强调语义
                注意：em表示一般强调，一篇文章中可以多次出现
            删除线  
                s代表删除线
                del也代表删除线，del是主流，s标签已经逐渐被淘汰
            
换行
    超链接
        文字
            不加target=_blank就会在当前页面刷新，加了后会打开新的页面
            如果要跳转到线上地址必须加http：//，本地文件直接写路径
        空连接写法：1，###  2，JavaScript :; 3，JavaScript:void（0）三种均可
        锚点链接：点击之后直接跳转到页面的相对位置；给想要跳转的位置写一个id属性，a标签的href属性写#id的值
        子主题 4

表单
        所有用户输入内容都要放入form标签中；      

 
            action代表数据传输给哪个后台程序
            method代表传输数据的方法
                post表示加密
                get表示不加密
        或者
            input代表输入框标签（单标签）type类型决定这个输入框的类型，name属性代表这个输入框的名字，id打包输入框的id编号
                其中注意1，type="text"代表普通输入框2，type="password"代表密码输入框。
            value代表默认输入框（不符合用户体验，应该换成placeholder）
                注意：placeholder属性ie低版本不兼容，但是我们实际工作中还要使用，因为渐进增强（随着浏览器版本的提升，效果越来越好），优雅降级（在高浏览器版本显示效果好的前提下，保证了低版本浏览器不错乱）。
        按钮
            单选按钮
                女男
                    type=“radio”
                    如果想让文字能点击切换，那么要加label标签，并在里面设置for属性和对应的单选按钮的id属性值一致
                    必须给这一组单选按钮添加name值，才能实现单选效果
                    设置默认选中状态要给单选按钮添加checked=“checked”
            多选按钮
                爱好：测试测
            提交按钮
                
                    type值为submit
                    注意必须设置value值，否则浏览器之间有兼容性问题
            重置按钮
                
                    type值为reset
                    注意必须设置value值，否则浏览器之间有兼容性问题
            普通按钮
                
                button按钮
        下拉菜单选项
            select和option的组合
            如果需要设置多组下拉菜单，需要添加optgroup标签，并设置label属性为提示文字
            如果想设置默认选中状态，需要给对应的option添加selected选项
        文本框
            
            文本域不能设置rows，cols属性因为不同浏览器解析结果都不一样，如果想让每个浏览器大小相同必须设置width和height才可以
        细节
            刷新后如果想让第一个输入框默认选中状态，给输入框设置autofocus="autofocus“属性
    路径
        相对路径
        绝对路径，尽量不要用
    注释：ctrl+？

css
    定义：样式表，级联样式表，层叠样式表
    css引入方法
        内嵌式：style标签放到head标签   优点：方便课上案例书写；电商网站的首页必须使用这种方式，因为电商首页要求加载速度必须快，内嵌式比外链式快
        外链式：通过link放在head标签中，把外部的css文件引入到html文件中  优点：实现了代码分离，方便修改和管理；  缺点：运行速度比内嵌式稍慢
        行内式：不推荐使用，会加大代码量，不方便修改
    基础语法
        
        
        
        
    
            css代码写在style标签中，放到head标签中，大括号里写键值对语法
            例子：属性名1：属性值  属性名2;属性值  属性名3：属性值；
    css常用的文字控制属性
        字体：font-family
        字号：font-size
        颜色：color
        内容对齐方式：text-align:
            默认是left，还可以设置center居中，right居右
        首行缩进：text-indent：2em
            em代表一个文字的大小
    实体化三属性
        weight
        height
        black-color
    选择器
        标签选择器：直接在css语法中写标签的名字就可以选中对应的标签
        id选择器
            #名字，特点;不能重复，也不能一个人拥有多个
            
        class选择器
            .名字，特点：可以重复使用，一个人可以有多个类名（好像是人的称号一样）[class选择器的使用高于id选择器]
            
        选择器权重（id>class>标签）
        复合选择器
            后代选择器
                eg：div span     用空格来连接，代表的意思是找到后代的元素   注意：后代可以是儿子也可以是儿子的儿子
            并列，并集选择器
                eg：div，span，h1，#span2   用逗号连接选择器，代表这些元素同时被选中
            标签指定式/指定标签式
                eg：div.类名   注意：标签与类名之间没有空格，用.连接
                
            复合选择器权重
                引入方式对比：外链和内嵌权重相同，先写的会被后写的覆盖；行内式权重最大，如果想覆盖它就只能给样式添加！important先把权重提高
                复合选择器权重：id我们认为是100斤，class类名我们认为是10斤，标签认为是1斤，综合起来大的权重就高，如果权重一样，先写的被后写的覆盖
    css常用的文字属性
        font-weight：设置字体粗细的normal代表不加粗，bold代表加粗
        font-style：设置字体倾斜italic代表倾斜，normal代表不倾斜
        text-decoration设置线，none没有线，underline下划线，overunder上划线，line-throngh贯穿线（删除线）
        word-break：break-all强制换行
        ：hover伪类写法，代表鼠标悬停状态
        行高属性：一行文字的结束到上一行文字结束的间距：line-height
    边框属性
        eg：border：1px solid red  第一个代表粗细，第二个代表实线，第三个代表颜色红色；这样设置四个方向相同；
        如果想要单独设置某个方向只需要：border-left（right，top，bottom）
        注意：边框属性只有实线和虚线是没有兼容性问题的，其他方式的线都会有不同程度的兼容问题，如果程序员使用了，一定要报错！
    盒子模型
        div{width: 200px; height: 200px; background-color: #FF0000; border: 3px solid aqua; padding: 20px;margin: 10px；}
        宽高+边框+内边距（内容和边框的距离）+外边距（盒子和盒子之间的距离）=盒子模型

html5独有的标签
    

头部

        

导航条

        

侧导航

        

文章快

        

底部

    注意html5新标签只能使用在手机网络的书写中，可以提升搜素引擎对网站的优化，不能在pc端使用，因为ie低版本不识别这些标签