美文网首页
HTML网页学习day1

HTML网页学习day1

作者: 努力奋斗1231 | 来源:发表于2019-03-12 12:02 被阅读0次

    一、HTML理论介绍及常用格式

    1.HTML主体格式基本结构

    <!DOCTYPE html>

    <html>

    <head>

    <mate charset="utf-8"/>

    <title>标题</title>

    </head>

    <body>

    主要内容

    </body>

    </html>

    解说:整个HTML格式分为两大部分,一个是head部分,一个是body部分,其中head部分是用于书写网页样式,而body部分用于书写网页主题

    2.常用标签:

    标题标记

    <h1></h1>

    ...

    <h6></h6>

    <p></p>段落标签

    <b></b> <strong></strong>加粗  

    <i></i>倾斜

    <br/>换行

     空格

    <img src="" alt="" title=""/> 图片【gif,png,jpg】src:图片的链接地址 alt:图片加载失败的时候,在图片原本的位置显示的提示文本

    title:鼠标悬停的时候,显示的提示文本

    <a href="" target=""></a> 超链接  href:链接地址  target:打开新网页的打开方式,默认是在本页面打开

    <div></div> 盒子

    <span></span>

    3.css样式:

    内联样式: <标记 style="属性1:属性值1;属性2:属性值2;..."></标记>

    内部样式:在head中添加<style></style>

    4.选择器:

    (1)标签选择器:在<>中的标记都可以作为标签选择器

    语法:

    <style>

    标记{

    属性1:属性值1;

    属性2:属性值2;

                }

    </style>

    (2)class选择器:必须在style中进行声明,在标签中进行引用,声明的时候使用“.”进行声明,多个class选择器可以同时作用于一个标记。

    语法:

    <style>

    .color1{

    属性1:属性值1;

    属性2:属性值2;

                }

            .color2{

    属性1:属性值1;

    属性2:属性值2;

    }

    </style>

    <p class= "color1 color2">M</p>

    id选择器:必须在style中进行声明,在标签中进行引用,声明的时候使用“#”进行声明,他是唯一的,取名的时候不能使用关键字

    语法:

    <style>

    #color1{

    属性1:属性值1;

    属性2:属性值2;

    }

    #color2{

    属性1:属性值1;

    属性2:属性值2;

    }

    </style>

    <p id= "color1">M</p>

    :hover 伪类选择器,表示鼠标经过事件

    包含选择器:必须要有包含的关系

    比如:.box p

    <div class="box">

    <p></p>

    </div>

    (5)常用的css属性:

    width:宽  取值px/%

    height:高  取值px/%

    background-color 背景颜色

    font-size 字体大小

    font-weight:bold;字体加粗

    line-height  行高

    color 字体颜色

    text-align:center/left/right 文本居中/居左/居右

    border:边框宽度  边框颜色  边框样式; 边框

    box-showdow:水平阴影的位置,垂直阴影的位置,高斯模糊的距离,阴影的宽度,阴影的颜色以及透明度,阴影的样式

    border-radius:边框圆角

    transform:rotate(10deg) scale(1.2); 动画,旋转动画单位deg  缩放动画

    transtion:all 0.3s; 过渡动画,单位ms/s

    margin:外边距

    padding:内边距

    (6)元素类型

    块元素:

    特征:独占一行,可以设置宽高,一般情况下作为容器。

    若宽不指定的情况下默认与父元素宽度相等,若高不指定的情况下,则它的高度由其内容来决定。

    对于块元素,我们若指定了宽度,可以使用margin-left与margin-right取值为auto来进行水平居

    例如:div、p、h1~h6

    行内元素:

    特征:不独占一行,设置不上宽高。

    行内元素的大小由其内容大小来决定。

    例如:span、a

    行内块元素:隶属于行内元素,但是又具有块元素的特征。

    特征:既不独占一行,又能设置宽高。

    (7).元素类型转换

    display:block; 转为块元素

    display:inline; 转为行内元素

    display:inline-block;转为行内块元素

    (8)浮动

    float:left; 左浮动

    float:right; 右浮动

    作用:通过浮动,我们可以使块元素在同一行显示

    (9)列表

    无序列表

    <ul>

    <li></li>

    <li></li>

    ...

    </ul>

    有序列表

    type的取值:1、a、A、i、I

    <ol type="">

    <li></li>

    <li></li>

    </ol>

    自定义列表

    <dl>

    <dt>名词</dt>

    <dd>解释</dd>

    </dl>

    (10)css样式:

    外部样式的引用

    <link   href="外部样式文件的地址"></link>

    去掉下划线:

    text-decoration: none;

    去掉列表默认的样式:

    list-style: none;

    平移动画

    transform: translateX(20px) ;

    translateX:在x轴的平移,取值为正,向右平移,取值为负,向左平移

    translateY:在y轴的平移,取值为正,向下平移,取值为负,向上平移。

    (11)background:背景颜色  背景图片链接地址  背景图片平铺方式  背景图片水平方向的位置  背景图片垂直方向的位置

    参数二:url("")

    参数三:默认repeat,no-repeat 不平铺  repeat-x水平平铺   repeat-y垂直

    参数四:默认left,取值left/right/center/px/%

    参数五:默认top,取值top/bottom/center/px/%

    (12)position定位

    可以有四个方位进行定位:

    left、top、right、bottom

    绝对定位:position:absolute;

    特征:参照物是具有定位属性的父元素,不占据原本的位置(脱离文档流)

    相对定位:position:relative;

    特征:参照物是自己原本的位置,占据自己原本的位置(不脱离文档流),一般情况下作为包含块

    固定定位:position:fixed;

    特征:参照物当前窗口,它的位置与父元素无关,也与当前所在位置无关。

    (13)高度塌陷

    高度塌陷出现的契机:当没有给父元素高度,并且它里面所有的子元素都发生浮动的时候,会出现高度塌陷。

    why? 父元素没有指定高度,那么它的高度由其子元素来决定,当子元素都给了浮动,【浮动是脱离文档流的(不再占据自己原本的位置)】,

    父元素测量不到子元素的高度,高度显示为0

    解决:

    给父元素添加overflow:hidden;

    在子元素的最后添加一个空盒子,并且给这个空盒子添加clear:both;

    (14)opacity透明度

    他的取值[0,1] 0:全透明  1:不透明

    (15)display:none; 隐藏

    opacity:0; 与display:none;区别

    使用它们两个的时候,都可以实现不可见的功能,但是opacity:0的时候,这个元素它存在只是透明度发生变化

    ,而是display:none;这个元素不占据位置(移除)

    (16)选择器的权重

    “*”通配符权重为0000

    标签选择器的权重为0001

    class选择器的权重为0010

    id选择器的权重为0100

    内联样式的权重为1000

    伪类选择器的权重 0010

    群组选择器的权重等于它自己本身的权重

    包含选择器的权重为所有权重之和

    当属性出现重复的时候,会遵从权重高的那个,当权重相同的时候,后写的属性值会覆盖前面的那个

    (17)图片整合

    本质:就是对背景图片进行定位。

    使用的契机:背景图片大于盒子的时候。

    (18)锚链接

    定义锚点,使用id来定义 :<p id="back">锚点</p>

    定义锚链接,使用a标签:<a href="#back">锚链接</a>

    (19)overflow:hidden/scroll/auto

    hidden:超出显示区域的部分隐藏

    scroll:无论内容有木有超出显示区域,都会显示滚动条

    auto:当内容超出显示区域的时候,则显示滚动条,否则不显示。

    (20)子类选择器

    .nav li:nth-child(1),小括号中可以使用2n或者2n+1/2n+1,选中奇数或者是选中偶数个,

    通过1/2/3...可以选中.nav下面的第n个li。

    二、项目实战

    (一)一些粗浅的想法。

    1.拿到一个需求,第一步不是去按照自己的想法立刻去敲代码,首先应该做好规划,就以写静态网页为例,写规划的时间要远远小于你自己后期改代码的时间。

    2.添加注释。添加注释是很好的习惯,在刚写代码的时候,添加的注释要尽可能的详细,这会为后期的维护和项目的交接提供很好的便利,不然没人看的懂你的代码。

    3.变量名的选择。在取变量名的时候,千万不要使用拼音,因为拼音看多了,真的是接受不了。使用英文的变量名会好很多,见文知意。

    4.代码书写完,功能实现之后,要去优化自己的代码,让自己的代码更加简洁,可读性更强

    (二)书写项目导航栏(以CNDS为例)

    首先:对于这个导航栏分析一下,第一个cnds图标放在一个盒子里(logo),然后给文字信息一个盒子(content),所以CNDS和文字信息都在同一个盒子(nav)

    代码:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8" />

    <title>CNDS</title>

    <style type="text/css">

    /*上面这部分是书写这个box盒子的格式,其中包括大小,背景颜色,以及位置*/

    .nav{

    width: 1000px;

    height: 50px;

    /*给出背景颜色,可以更好的判断盒子的位置,最后再滤除背景颜色*/

    /*background: red;*/

    margin: 20px 10px;

    }

    .logo{

    width: 95px;

    height: 40px;

    /*margin-top: 10px;*/

    float: left;

    margin: 10px;

    }

    .logo img{

    line-height: 40px;

    }

    .content{

    width: 500px;

    height: 35px;

    margin: 5px;

    /*background: bisque;*/

    float: left;

    }

    .content ul{

    /*去除列表格式*/

    list-style: none;

    }

    .content li{

    /*去除列表格式*/

    list-style: none;

    /*使列表排成一排*/

    float: left;

    /*上下间隔为0,左右间隔为5个像素*/

    margin: 0 5px;

    /*上下居中*/

    line-height: 100%;

    }

    .content li a {

    /*去除超链接的下划线*/

    text-decoration: none;

    /*超链接的字体颜色:黑色*/

    color: black;

    }

    .content li a:hover{

    /*使用hover动画,改变鼠标经过事件*/

    color: red;

    }

    </style>

    </head>

    <body>

    <!--给出一个大盒子nav,用于存放CNDSlogo和文本-->

    <div class="nav">

    <div class="logo">

    <!--导入图片使用<img src="图片地址">-->

    <img src="img/CNDS.png"/>

    </div>

    <div class="content">

    <ul>

    <li><a href="#">首先</a></li>

    <li><a href="#">博客</a></li>

    <li><a href="#">学院</a></li>

    <li><a href="#">下载</a></li>

    <li><a href="#">GitChat</a></li>

    <li><a href="#">TinyMind</a></li>

    <li><a href="#">商城</a></li>

    <li><a href="#">VIP</a></li>

    <li><a href="#">其他</a></li>

    </ul>

    </div>

    </div>

    </body>

    </html>

    (三)一个完整页面的设计

    1.功能需求

    (1)以设计稿为主,页面宽度可以参考下面网址,设计稿相对于下面网址做了小修改

    (2)总时间为4小时 首页和文章详情页面(如图)

    (3)详情页面的新闻详情不需要自己单独排版,随便复制内容 调整 行高 和字体大小就可以了

    (4)轮播先用一张图片代替  images文件夹已经提供

    (5)分享也用一张图片代替,images文件夹已经提供

    (6)页面的制作完全按照设计稿   文字 和图片可以随便复制,但是布局出来的效果要和设计稿一样

    原网站:http://yigujin.wang/

    2.代码实现

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>上机考试</title>

    <style type="text/css">

    .box{

    width: 100%;

    height: 100%;

    /*background: red;*/

    }

    .box .head{

    width: 100%;

    height: 105px;

    background: white;

    }

    .head .logo{

    width: 235px;

    height: 65px;

    background: blue;

    float: left;

    margin: 0 20px;

    background: url(img/logo.jpg) no-repeat;

    }

    .head .nav{

    width: 650px;

    height: 65px;

    /*background: blueviolet;*/

    float: right;

    margin: 0 200px;

    }

    .nav ul{

    list-style: none;

    text-align: center;

    line-height: auto;

    }

    .nav li{

    width: 75px;

    height: 25px;

    list-style: none;

    float: left;

    margin: 0 10px;

    text-align: center;

    line-height: 25px;

    }

    .nav li a{

    text-decoration: none;

    color: black;

    font: 10px;

    font-weight: bold;

    display: block;

    }

    .nav li:nth-child(1):hover{

    background: ;

    }

    .nav li:nth-child(2):hover{

    background: red;

    }

    .nav li:nth-child(3):hover{

    background: red;

    }

    .nav li:nth-child(4):hover{

    background: red;

    }

    .nav li:nth-child(5):hover{

    background: red;

    }

    .content{

    width: 1100px;

    height: 2500px;

    /*background: blue;*/

    margin: 0 100px;

    margin-bottom: 200px;

    }

    .main{

    width: 800px;

    height: 100%;

    /*background: green;*/

    float: left;

    margin: 0 10px;

    }

    .main .bg{

    width:800px ;

    height: 300px;

    margin: 10px 0;

    }

    .bg img{

    width:100% ;

    height: 100%;

    }

    .text1{

    width: 100%;

    height: 215px;

    }

    .text1 .bg-sb{

    width: 270px;

    height: 200px;

    margin: 2px 2px;

    float: left;

    }

    .bg-sb img{

    width:100%;

    height: 100%;

    }

    .text1 .essay{

    width: 380px;

    height: 200px;

    float: left;

    /*background: violet;*/

    margin: 0 10px;

    }

    .essay ul{

    list-style: none;

    text-align: left;

    }

    .essay li{

    list-style: none;

    }

    .essay li:nth-child(1){

    font-size: 18px;

    font-weight: bold;

    }

    .essay li:nth-child(4){

    font-size: 18px;

    font-weight: bold;

    margin: 10px ;

    }

    .essay li a{

    display: block;

    text-decoration: none;

    font-size: 12px;

    color: rgb(168,181,213);

    float: left;

    margin:  0 10px;

    }

    .main .avd1{

    width: 800px;

    height: 200px;

    /*background: hotpink;*/

    }

    .adv1 img{

    width: 800px;

    height: 200px;

    }

    .consult{

    width:240px;

    height: 100%;

    /*background: gold;*/

    float: left;

    margin: 0 20px;

    }

    .consult1{

    width: 240px;

    height: 85px;

    /*background: yellowgreen;*/

    margin: 10px 0;

    }

    .consult1 img{

    width: 100%;

    height: 85px;

    margin: 10px 0;

    }

    .consult2{

    width: 240px;

    height: 480px;

    /*background: darkgrey;*/

    border: 1px solid white;

    }

    .consult2 p{

    font-size: 18px;

    font-weight: bold;

    margin: 5px 5px;

    }

    .consult2 ul{

    list-style: none;

    }

    .consult2 li{

    width: 200px;

    display: block;

    list-style: none;

    margin: 15px 0;

    /*border: 1px dashed black;*/

    border-bottom: 1px dashed black;

    }

    .consult2 li a{

    text-decoration: none;

    color: gray;

    }

    .foot{

    width: 100%;

    height: 260px;

    background: black;

    margin-bottom: 20px;

    }

    .title{

    width: 1100px;

    height: 100px;

    background: gray;

    margin: 10px 30px;

    }

    .title ul{

    list-style: none;

    }

    .title li{

    list-style: none;

    float: left;

    margin: 0 10px;

    }

    .title li a{

    text-decoration: none;

    color: white;

    }

    .num{

    width:1100px;

    height: 50px;

    margin: 100px 30px;

    }

    .num ul{

    list-style: none;

    }

    .num li{

    list-style: none;

    float: left;

    margin: 0 10px;

    color: white;

    }

    </style>

    </head>

    <body>

    <div class="box">

    <div class="head">

    <div class="logo">

    </div>

    <div class="nav">

    <ul>

    <li  ><a style="color: red;"href="#">本站首页</a></li>

    <li><a href="#">Nana主题</a></li>

    <li><a href="#">随笔笔记</a></li>

    <li><a href="#">技术文档</a></li>

    <li><a href="#">手气不错</a></li>

    <li><a style="background: rgb(192,30,34);color:white ;">搜索</a></li>

    </ul>

    </div>

    </div>

    <div class="content">

    <div class="main">

    <div class="bg">

    <img src="img/banner.jpg"/>

    </div>

    <div class="text1">

    <div class="bg-sb">

    <img src="img/news_pic01.jpg"/>

    </div>

    <div class="essay">

    <ul>

    <li>台下一年功,台上10分钟</li>

    <li>随笔笔记  :9小时前</li>

    <li>老薛主机市面上大多数都是 9 折或 85 折的优惠,经过与老薛主机首席运营官 Mars 的沟通联系,终于获得老薛主机终</li>

    <li><a href="">阅读26次</a></li>

    <li><a href="">博主生活</a></li>

    <li><a href="">工作生活</a></li>

    </ul>

    </div>

    </div>

    <div class="text1">

    <div class="bg-sb">

    <img src="img/news_pic01.jpg"/>

    </div>

    <div class="essay">

    <ul>

    <li>台下一年功,台上10分钟</li>

    <li>随笔笔记  :9小时前</li>

    <li>老薛主机市面上大多数都是 9 折或 85 折的优惠,经过与老薛主机首席运营官 Mars 的沟通联系,终于获得老薛主机终</li>

    <li><a href="">阅读26次</a></li>

    <li><a href="">博主生活</a></li>

    <li><a href="">工作生活</a></li>

    </ul>

    </div>

    </div>

    <div class="text1">

    <div class="bg-sb">

    <img src="img/news_pic02.jpg"/>

    </div>

    <div class="essay">

    <ul>

    <li>台下一年功,台上10分钟</li>

    <li>随笔笔记  :9小时前</li>

    <li>老薛主机市面上大多数都是 9 折或 85 折的优惠,经过与老薛主机首席运营官 Mars 的沟通联系,终于获得老薛主机终</li>

    <li><a href="">阅读26次</a></li>

    <li><a href="">博主生活</a></li>

    <li><a href="">工作生活</a></li>

    </ul>

    </div>

    </div>

    <div class="text1">

    <div class="bg-sb">

    <img src="img/news_pic01.jpg"/>

    </div>

    <div class="essay">

    <ul>

    <li>台下一年功,台上10分钟</li>

    <li>随笔笔记  :9小时前</li>

    <li>老薛主机市面上大多数都是 9 折或 85 折的优惠,经过与老薛主机首席运营官 Mars 的沟通联系,终于获得老薛主机终</li>

    <li><a href="">阅读26次</a></li>

    <li><a href="">博主生活</a></li>

    <li><a href="">工作生活</a></li>

    </ul>

    </div>

    </div>

    <div class="text1">

    <div class="bg-sb">

    <img src="img/news_pic02.jpg"/>

    </div>

    <div class="essay">

    <ul>

    <li>台下一年功,台上10分钟</li>

    <li>随笔笔记  :9小时前</li>

    <li>老薛主机市面上大多数都是9折或85折的优惠,经过与老薛主机首席运营官Mars的沟通联系,终于获得老薛主机终</li>

    <li><a href="">阅读26次</a></li>

    <li><a href="">博主生活</a></li>

    <li><a href="">工作生活</a></li>

    </ul>

    </div>

    </div>

    <div class="adv1">

    <img src="img/ad04.jpg"/>

    </div>

    <div class="text1">

    <div class="bg-sb">

    <img src="img/news_pic02.jpg"/>

    </div>

    <div class="essay">

    <ul>

    <li>台下一年功,台上10分钟</li>

    <li>随笔笔记  :9小时前</li>

    <li>老薛主机市面上大多数都是 9 折或 85 折的优惠,经过与老薛主机首席运营官 Mars 的沟通联系,终于获得老薛主机终</li>

    <li><a href="">阅读26次</a></li>

    <li><a href="">博主生活</a></li>

    <li><a href="">工作生活</a></li>

    </ul>

    </div>

    </div>

    <div class="text1">

    <div class="bg-sb">

    <img src="img/news_pic01.jpg"/>

    </div>

    <div class="essay">

    <ul>

    <li>台下一年功,台上10分钟</li>

    <li>随笔笔记  :9小时前</li>

    <li>老薛主机市面上大多数都是 9 折或 85 折的优惠,经过与老薛主机首席运营官 Mars 的沟通联系,终于获得老薛主机终</li>

    <li><a href="">阅读26次</a></li>

    <li><a href="">博主生活</a></li>

    <li><a href="">工作生活</a></li>

    </ul>

    </div>

    </div>

    <div class="text1">

    <div class="bg-sb">

    <img src="img/news_pic01.jpg"/>

    </div>

    <div class="essay">

    <ul>

    <li>台下一年功,台上10分钟</li>

    <li>随笔笔记  :9小时前</li>

    <li>老薛主机市面上大多数都是 9 折或 85 折的优惠,经过与老薛主机首席运营官 Mars 的沟通联系,终于获得老薛主机终</li>

    <li><a href="">阅读26次</a></li>

    <li><a href="">博主生活</a></li>

    <li><a href="">工作生活</a></li>

    </ul>

    </div>

    </div>

    <div class="text1">

    <div class="bg-sb">

    <img src="img/news_pic02.jpg"/>

    </div>

    <div class="essay">

    <ul>

    <li>台下一年功,台上10分钟</li>

    <li>随笔笔记  :9小时前</li>

    <li>老薛主机市面上大多数都是 9 折或 85 折的优惠,经过与老薛主机首席运营官 Mars 的沟通联系,终于获得老薛主机终</li>

    <li><a href="">阅读26次</a></li>

    <li><a href="">博主生活</a></li>

    <li><a href="">工作生活</a></li>

    </ul>

    </div>

    </div>

    <div class="text1">

    <div class="bg-sb">

    <img src="img/news_pic02.jpg"/>

    </div>

    <div class="essay">

    <ul>

    <li>台下一年功,台上10分钟</li>

    <li>随笔笔记  :9小时前</li>

    <li>老薛主机市面上大多数都是 9 折或 85 折的优惠,经过与老薛主机首席运营官 Mars 的沟通联系,终于获得老薛主机终</li>

    <li><a href="">阅读26次</a></li>

    <li><a href="">博主生活</a></li>

    <li><a href="">工作生活</a></li>

    </ul>

    </div>

    </div>

    <div class="adv2">

    </div>

    </div>

    <div class="consult">

    <div class="consult1">

    <img src="img/ad01.jpg"/>

    </div>

    <div class="consult2">

    <p>最新文章</p>

    <ul>

    <li><a href="#">台上一分钟台下十年功之折腾HJK集团电话交换机</a></li>

    <li><a href="#">wordPress调用指定tag标签下的所有文章制作专题文章</a></li>

    <li><a href="#">帝国之双面佳人第六十章</a></li>

    <li><a href="#">wordPress新手入门教程之文章管理篇新手入门教程之文章管理篇</a></li>

    <li><a href="#">wordPress新手入门教程之文章管理篇新手入门教程之文章管理篇</a></li>

    </ul>

    </div>

    <div class="consult1">

    <img src="img/ad01.jpg"/>

    </div>

    <div class="consult2">

    <p>最新文章</p>

    <ul>

    <li><a href="#">台上一分钟台下十年功之折腾HJK集团电话交换机</a></li>

    <li><a href="#">wordPress调用指定tag标签下的所有文章制作专题文章</a></li>

    <li><a href="#">帝国之双面佳人第六十章</a></li>

    <li><a href="#">wordPress新手入门教程之文章管理篇新手入门教程之文章管理篇</a></li>

    <li><a href="#">wordPress新手入门教程之文章管理篇新手入门教程之文章管理篇</a></li>

    </ul>

    </div>

    </div>

    </div>

    <div class="foot">

    <div class="title">

    <ul>

    <li>友情链接:</li>

    <li><a href="#">百度</a></li>

    <li><a href="#">博客</a></li>

    </ul>

    </div>

    <div class="num">

    <ul>

    <li>copyright@zbpNana主题</li>

    <li>桂ICP备1400471号</li>

    <li>Theme by zbpNana </li>

    <li>Powered by Z-BlogPHP</li>

    </ul>

    </div>

    </div>

    </div>

    </body>

    </html>

    结束语:第一次写博客,还有很多欠缺的地方,请各位大神多多指教。

    ---------------------

    作者:柏舟1230

    来源:CSDN

    原文:https://blog.csdn.net/qq_28891989/article/details/80290000

    版权声明:本文为博主原创文章,转载请附上博文链接!

    相关文章

      网友评论

          本文标题:HTML网页学习day1

          本文链接:https://www.haomeiwen.com/subject/qtcicttx.html