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

作者: 孟轲666 | 来源:发表于2017-07-27 10:17 被阅读13次

04-开发人员不的不懂得网页开发基础知识
Web 服务器有哪些
基于Jenkins的Android自动化打包分享
移动网页开发布局规范
web前端入门必知的10个技术
这周我没有写代码！！！
Ant+Jmeter+Jenkins自动化接口测试思路
前端也要懂的数据结构(1)--栈
为什么 Python 开发人员应该使用 Pipenv
敏捷测试四象限之一二

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

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

12.百度实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="CSS/index.css">
</head>
<body>

<div class="content">
    <div class="logo">
        ![](Images/logo.png)
    </div>
    <div class="nav">
        <ul>
            <li><a href="#">新闻</a></li>
            <li><a href="#" class="active">贴吧</a></li>
            <li><a href="#">知道</a></li>
            <li><a href="#">音乐</a></li>
            <li><a href="#">视频</a></li>
            <li><a href="#">百科</a></li>
            <li><a href="#">地图</a></li>
            <li><a href="#">文库</a></li>
            <li><a href="#">更多》》</a></li>

        </ul>
    </div>
    <div class="search">
        <input>

        <button>百度一下</button>
    </div>
</div>

</body>
</html>

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;
}

效果图：