前端html css

编辑器

pycharm|sublime|Hbuild|webstrom|atom

前端

前端概念

广义:用户能看见并且交互的展示界面

狭义:运行在浏览器上的页面

html5 =>(h5架构+css3布局+javascript逻辑)

网页编写|移动端应用编写|(客户端编写)

前后台分离

脚本就是源代码的基础上加上功能.就是在源代码中嵌入一段代码程序块

HTML:标记语言

不具备程序逻辑

使用目的:完成页面结构的构建

三大组成:

标签:被尖括号包裹

指令:

转义字符:

注释:浏览器会将所有的空白符(空格,制表符,回车)都解析为一个空格

如果要换行br标签添加<br>

统一编码:<meta charset="utf-8">

style="color:#092ff25"

html的注释符号

语义给浏览器看的

css:样式层级表

学习css目的:完成页面布局(还原设计稿)

三大组成部分

选择器:由标签.类.id单独或者组合出现

作用域:一组大括号包含的区域

样式块:满足css连接语法的众多样式

选择器:

用来将css与html建立关联的桥梁.

将原来出现在标签内部的样式分离开来,可以用一个个选择器加以管理,达到页面也样式的解耦合目的,从而提高代码的复用性与开发效率

css三种引入方式

1.行间式

2.内联式

3.外联式

注:选择器的应用场景在内联式和外联式

总结:

开发: 最常用的是外联式, 内联与行间辅助样式布局

测试: 内联式, 可读性最强, 且解耦有复用性

行间的应用场景: 最简单粗暴, js操作的样式都是行间式

<style>
        /* css注释:书写在style标签内部的要采用css语法 */
        /*
        p:选择器
        {}:作用域
        宽高背景颜色:样式块
        */
        p{
            200px;
            height: 200px;
            background-color: purple;
        }
        h2{
            100px;
            height: 100px;
            background-color: aqua;

        }

    </style>
</head>
<body>

    <!--1.行间式-->
    <!--
        1.写在标签的style属性中,(style标签一般出现在head中)
        2.属性与属性之间用;隔开
        3属性与属性值之间用:赋值

    -->
    <div style="150px;height:150px;background-color: magenta"></div>
    <div style="150px;height:150px;background-color: magenta"></div>
    <!--2.内联式-->
    <!--
        1.写在style标签中
        2.用选择器与html建立连接
        3.样式块书写在作用域内
    -->
    <p></p>
    <h2></h2>

    <!--3.外联式-->
    <!--
        1.css样式完全与html文件脱离,形成单独的.css文件.样式写在.css文件中
        2.用选择器与html建立连接
        3.样式块写在作用域里面
        4.将.css文件与.html文件建立关联
    -->
    <h3></h3>
    <!--注:用link标签将css文件与html文件建立连接
    <link rel="stylesheet" href="css文件的相对路径"

    -->
    <link rel="stylesheet" href="css/h3样式.css">
</body>
</html>

前端html css

编辑器

前端

HTML:标记语言

标签:

页面

常用标签

css:样式层级表

选择器:

css三种引入方式