04-开发人员不的不懂得网页开发基础知识

1.一个有具体功能的完整网页，一般由三部分组成

• HTML
  网页具体内容和结构

• CSS
  网页的样式（美化网页最重要的一块）

• JavaScript
  网页的交互效果，比如用户对鼠标事件作出响应

学习网站：一个不错的网页学习网站

2.HTML常见标签

Snip20170727_6.png

• 演示：

Snip20170727_7.png

• 运行效果图

Snip20170727_9.png

3.CSS的编写格式是键值对形式的，比如：

color: red;
background-color: blue;
font-size: 20px;

4.CSS的三种书写形式

Snip20170727_11.png

5.CSS-选择器

Snip20170727_13.png

Snip20170727_14.png

Snip20170727_15.png

Snip20170727_16.png

Snip20170727_17.png

Snip20170727_18.png

Snip20170727_19.png

Snip20170727_20.png

Snip20170727_21.png

Snip20170727_22.png

Snip20170727_23.png

Snip20170727_25.png

Snip20170727_26.png

6.选择器优先级

Snip20170727_27.png

Snip20170727_29.png

7.HTML标签类型

Snip20170727_31.png

8.经常用到的属性

Snip20170727_38.png

• PS.块级标签可以修改宽度和高度，但是行内标签不能修改宽度和高度，其宽度和高度有其内部的内容决定。但是inline-block既可以显示在同一行，也可以设置宽度和高度。

9.CSS属性：

Snip20170727_40.png

Snip20170727_43.png

Snip20170727_45.png

10.盒子模型

Snip20170727_49.png

Snip20170727_50.png

Snip20170727_51.png

11. 如果是块级元素，可以通过 margin: auto;来设置其居中显示，如果不是块级元素而是行内元素，可以通过设置其父元素的text-align: center;使其居中显示。img是非块级元素。

12.百度实例：

    
    
    




    

        ![](Images/logo.png)
    
    

        

            
新闻
            
贴吧
            
知道
            
音乐
            
视频
            
百科
            
地图
            
文库
            
更多》》

        
    
    

        

        百度一下
    

index.css
body{
    background-image: url("../Images/bg.jpg");
    background-size: 100% 750px;
}
.content{
    background-color: cadetblue;
    width: 700px;
    /*margin-left: auto;*/
    /*margin-right: auto;*/
    margin: 0 auto 0;
}
.content .logo{
    text-align: center;

}
.content .logo img{
    width: 270px;
    height: 129px;
}
.content .nav ul{
    list-style: none;
    text-align: center;
}
.content .nav ul li{
    display: inline;
}

.content .nav ul li a{
    color: white;
    font-size: 16px;
    margin-right: 5px;
    margin-left: 5px;
}
.content .nav ul li a.active{
    text-decoration: none;/*去除文字的下划线*/
}
.content .search{
    text-align: center;
}
.content .search input{
    width: 521px;
    height: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
    font-size: 18px;
    border-left: 1px solid #add;
    border-bottom: 1px solid #add;
    border-top: 1px solid #add;
}
.content .search button{
    width: 120px;
    height: 40px;
    font-size: 18px;
    margin: 0px;
}

效果图：

Snip20170728_56.png

13.CSS布局

Snip20170728_57.png

如果想要设置垂直居中，就得设置inline-height属性和父节点的高度一样。

摆脱标准流的两种方式：

Snip20170728_58.png

Snip20170728_59.png

子绝父相，就可设置子标签随着父标签的位置

13.前端框架--bootstrap