程序博客网 > 怎样做软件开发

HTML5基础之代码入门

来源：互联网 发布：怎样做软件开发 编辑：程序博客网 时间：2024/06/08 09:58

HTML5基础之代码入门

2016-11-12 15:24 515人阅读 评论(0)收藏举报
分类：
作者同类文章X

    版权声明：本文为博主原创文章，如需要转载，请标明文章出处，谢谢。

    目录(?)[+]

    1. 一样式表
    2. 二边框
    3. 三背景相关
    4. 四文字
    5. 五文本
    6. 六padding
    7. 七margin
    8. 八盒模型

      之前一直在修改现成的项目，学习的内容也是现学现用，没有很系统的学习，这次决定发一些时间，系统的学习，以便充实自己的前端知识，也想提升自己的前端技术。

      今天总结的是HTML5基础的第一部分代码入门，主要涉及样式表、边框、背景设置、文字文本、padding、margin以及盒模型等。

    一、样式表

      层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
      我们在写html页面的时候，除了写html的结构之外，为了让网页更友好或者说显示的更美观，我们就需要进行页面的修改，这也是为什么我们需要写css的原因。那我们要如何写css代码呢。通过学习，我们了解到了一些css的样式表达，比如说width,height等，但是我们不知道怎么应用到页面中，所以接下来讲解如何将这些css样式代表嵌入到html页面中。

      嵌入方式分为三种，第一种是行间样式，第二种是内部样式表，第三种是外联样式表。接下来分别讲解三种的用法以及如何使用的小案例。

    1、行间样式

      行间样式就是给单独的标签添加样式，在每个标签中添加style属性，然后在其中写入你想要的样式设置。
      语法：如<div style="……"></div>

      如：

    [html] view plain copy
    print?
    1. <div style="width: 100px;height: 100px;background-color: #37cad2">行间样式</div>  

      效果：

     

    2、内部样式表

      内部样式表是写在HTML的<head></head>里面的。内部样式表只对所在的网页有效。

    在使用内部样式表进行样式修饰时，必须获取到你想要修饰的标签才可以进行样式的编写。

    语法：在<head></head>中添加<style></style>标签，然后在其中写入样式。

    如：

    [html] view plain copy
    print?
    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <title>Title</title>  
    6.     <style>  
    7.         #div1{  
    8.             width:100px;  
    9.             height: 100px;  
    10.             background-color: #5cfc68;  
    11.         }  
    12.     </style>  
    13. </head>  
    14. <body>  
    15.     <div id="div1">内部样式表</div>  
    16. </body>  
    17. </html>  

    效果：


    3、外联样式表

     外联样式表就是将所有的样式独立写在一个css的文件中，然后通过语句<link href="###.css" rel="stylesheet"/>将样式表应用到当前网页中。可以同时引入多个css文件。

     语法：<link href="###.css" rel="stylesheet"/>

     如：

    test.css:

    [css] view plain copy
    print?
    1. #div1{  
    2.     width:100px;  
    3.     height: 100px;  
    4.     background-color: #ff9ee9;  
    5. }  
    test.html:

    [html] view plain copy
    print?
    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <title>Title</title>  
    6.     <link href="css/test.css" type="text/css" rel="stylesheet">  
    7. </head>  
    8. <body>  
    9.     <div id="div1">外联样式表</div>  
    10. </body>  
    11. </html>  

     效果：


    二、边框

      元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。
      边框由三个部分组成：1）边框的粗细；2）边框的样式；3）边框的颜色
    1、边框的方向
      一共有4个方向：top right bottom left。
      边框的基本样式有dotted,solid,double,dashed.分别是点状、实线、双线、虚线。
      边框的颜色可以有三种方式进行定义，第一种是直接写颜色的英文单词，如red,yellow等；第二种是rgb(),如rgb(255,255,255)是白色；第三种是十六进制，如#ffffff是白色。
      边框的粗细可以直接用px进行，比如1px;
     border-top
       border-top-width  //粗细
       border-top-style  //样式
       border-top-color  //颜色
     border-right
       border-right-width
       border-right-style
       border-right-color
     border-bottom
       border-bottom-width
       border-bottom-style
       border-bottom-color
     border-left
       border-left-width
       border-left-style
       border-left-color
    如：
    [html] view plain copy
    print?
    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <title>border的应用</title>  
    6.     <style>  
    7.         #div1{  
    8.             width:100px;  
    9.             height: 100px;  
    10.             background-color: #d3fcff;  
    11.             border:2px solid #00A2E9;  
    12.         }  
    13.     </style>  
    14. </head>  
    15. <body>  
    16.     <div id="div1">border的应用</div>  
    17. </body>  
    18. </html>  

     有人可能会问，border的形状是什么，是矩形或者梯形吗？其实border的形状取决于容器是否定义width和height，只能说是border的形状是非矩形。接下来举两个例子说明border的形状应用。
    1）利用border制作三角形：

    代码：
    [html] view plain copy
    print?
    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <title>border制作三角形</title>  
    6.     <style>  
    7.         div{  
    8.             width: 0;  
    9.             height: 0;  
    10.             border: 20px solid #fff;  
    11.             border-left-color: #cc50a5;  
    12.         }  
    13.     </style>  
    14. </head>  
    15. <body>  
    16.     <div></div>  
    17. </body>  
    18. </html>  
    2）用border制作梯形：

    代码：
    [html] view plain copy
    print?
    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <title>border制作三角形</title>  
    6.     <style>  
    7.         div{  
    8.             width: 100px;  
    9.             height: 0px;  
    10.             border-bottom: 100px solid #ffb23d;  
    11.             border-left: 50px solid transparent;  
    12.             border-right: 50px solid transparent;  
    13.         }  
    14.     </style>  
    15. </head>  
    16. <body>  
    17.     <div></div>  
    18. </body>  
    19. </html>  

    三、背景相关

     我们设计的时候，通常会想改变容器的背景，使其显得更美观，不会过于枯燥。就我们所知，背景可以用两种设置方法，一种是直接利用颜色，另一种是利用图像做背景。需要注意的是，内容是会撑开容器的宽高，而背景不会占用容器宽高。
     利用颜色做背景，这里就不详细说了，在前面一个例子中一直在用background-color来设置容器的背景。
     这里主要说的是利用图片做背景。首先来看看属性有哪些：
    1）background-image 背景图，背景图默认铺满整个容器大小，如果单张图片无法铺满整个容器，那么就会重复使用这张图片，知道铺满为止；
    2）background-repeat 背景图是否重复。
     有4种属性值：no-repeat不重复；repeat-x x轴重复；repeat-y y轴重复；repeat x/y都重复。
     如下图所示，如果没有进行设置background-repeat属性，会默认x/y重复。所以我们需要进行这个属性的设置。

    案例代码：
    [html] view plain copy
    print?
    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <title>background的应用</title>  
    6.     <style>  
    7.         div{  
    8.             width: 400px;  
    9.             height: 400px;  
    10.             border:1px solid #e9452b;  
    11.             background-image: url(images/12.png);  
    12.         }  
    13.     </style>  
    14. </head>  
    15. <body>  
    16.     <div>  
    17.         这是图片的应用案例  
    18.     </div>  
    19. </body>  
    20. </html>  
    进行background-repeat的属性设置：

    案例代码：
    [html] view plain copy
    print?
    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <title>background的应用</title>  
    6.     <style>  
    7.         div{  
    8.             width: 400px;  
    9.             height: 400px;  
    10.             border:1px solid #e9452b;  
    11.             background-image: url(images/12.png);  
    12.             background-repeat: no-repeat;//设置不重复  
    13.         }  
    14.     </style>  
    15. </head>  
    16. <body>  
    17.     <div>  
    18.         这是图片的应用案例  
    19.     </div>  
    20. </body>  
    21. </html>  
    3）background-position：x y  背景图位置
     x和y有两种设置方式，一种是具体的数值，另一种是利用具体的方向进行设置。
     如：
     x:left  center  right
     y:top   center  bottom
     如果第二个属性值没有填写，那么就直接默认是居中的。
    、
    4）background-attachment 背景图是否滚动
      当我们用滚动条上下拉的时候，内容会上下移动，那么我们要怎么样让图片一直固定在浏览器可视区域或者说跟随滚动条滚动呢？这个时候就需要用到background-attachment这个属性来进行设置。
      属性值有三种：
        scroll:默认值，背景图片会随着滚动条而滚动。
        fixed:当页面的其他部分滚动时，背景图片不会跟随着移动，即可以一直固定在浏览器可视区域。
        inherit:规定应该从父元素继承 background-attachment 属性的设置。
    [html] view plain copy
    print?
    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <title>background的应用</title>  
    6.     <style>  
    7.         div{  
    8.             width: 400px;  
    9.             height: 2000px;;  
    10.             border:1px solid #e9452b;  
    11.             background-image: url(images/12.png);  
    12.             background-repeat: no-repeat;  
    13.             background-position: center top;  
    14.             background-attachment: scroll;//跟着滚动  
    15.         }  
    16.     </style>  
    17. </head>  
    18. <body>  
    19.     <div>  
    20.         这是图片的应用案例  
    21.     </div>  
    22. </body>  
    23. </html>  

    5）复合样式
      我们通常可以在其他人的网页中看到，他们在写background的一系列相关属性时，都是直接一句话写完，这个就是复合样式，即将background开头的样式直接写成background:red url(img/1.jpg) no-repeat center top scroll;这种格式。注意：在用复合样式时，不分属性书写顺序。
      所以可以将上面的实例直接写成：
    [html] view plain copy
    print?
    1. background: #b6f3ff url(images/12.png) no-repeat center top scroll;  

    四、文字

      文字的基本样式包括文字加粗、倾斜、大小、颜色、字体、行高等。
      即：font-weight   font-style  font-size   font-color  font-family  line-height
       font-weight:有两个属性值，bold加粗  normal正常
       font-size：可以用px或者em定义
       font-style:有两个属性值，italic斜体，normal正常
       font-color:三种定义方式，跟前面说到的方法是一样的，这里就不再写一遍
       font-family：字体样式，比如"宋体","楷体"，"微软雅黑"等
       line-height:行高，文字在一行里面所占用的位置大小，当行高的值与容器的高度一致时，文字会垂直居中显示。
    重点：多行文字测量行高的方法（当设计师给我们一个设计稿时，我们如何进行编写一样的效果）
      1）确认文字大小
      2）确认两行文字之间的空隙大小
      3）空隙大小除以2，得出来的值就是每行文字的上下的空隙大小
         3.1）当行高为奇数时，那么文字的上方要比下方少一个像素
         3.2） 当行高为偶数是，那么文字上下空隙值一致
      4）通过辅助项测量多行文字的行高

    文字的设置也同样有复合样式：font：font-style | font-weight | font-size/line-height | font-family；
    注意：font复合样式需要注意书写顺序

    五、文本

     文本的设置包括文字的颜色、文本对齐方式、文本修饰、字母间距、单词间距、强制不换行等。
     即：
       color:文字颜色
       text-align:文本对齐（显示）方式，有三种属性值，left 默认值；center；right ；
       text-decoration：文本修饰方式，underline:添加下划线；none：无修饰；
       letter-spacing：字母间距；
       word-spacing:单词间距，以空格为解析单位，在中文中，如果没有以空格隔开，那么这个属性就体现不出来，因为我们的解析器并不知道具体的词组组合。
       white-space：强制不换行。即normal:正常；nowrap:强制不换行，如固定了容器宽度，就会超出容器。

    例子：强制不换行的情况

    代码：
    [html] view plain copy
    print?
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <title>文本设置</title>  
    6.     <style>  
    7.         div{  
    8.             width:200px;  
    9.             border: 1px solid black;  
    10.             color: red;  
    11.             text-align: left;  
    12.             font-size: 24px;  
    13.             text-indent: 2em;  
    14.             text-decoration: none;  
    15.             letter-spacing: 10px;  
    16.             white-space: nowrap;  
    17.         }  
    18.     </style>  
    19. </head>  
    20. <body>  
    21. <div>  
    22.     文本设置-hello  world!  
    23. </div>  
    24. </body>  
    25. </html>  
    设置了换行之后的效果：

    代码修改：
    white-space: normal;

    六、padding

      padding可以进行设置内边距或者说内填充。需要注意的是，设置padding后撑大容器的大小。padding的设置有4个方向。
      paading复合写法 : top right bottom left
       1）只有一个属性值时: 4个方向都是同一个值
       2）设置两个属性值时： 
           第一个属性值设置的是上下两个方向，
           第二个属性值设置的是左右两个方向。
       3）设置三个属性值时： 
           第一个属性值设置的是上边一个方向，
           第二个属性值设置的是左右两个方向，
           第三个属性值设置的是下边一个方向。
       4）设置四个属性值时： 
           第一个属性值设置的是上边一个方向，
           第二个属性值设置的是右一个方向，
           第三个属性值设置的是下边一个方向，
           第四个属性值设置的是左边一个方向。
    如：

    代码：
    [html] view plain copy
    print?
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <title>padding的设置</title>  
    6.     <style>  
    7.         div{  
    8.             width: 120px;  
    9.             height: 120px;  
    10.             background-color: pink;  
    11.             padding:40px 30px 20px 10px;  
    12.         }  
    13.     </style>  
    14. </head>  
    15. <body>  
    16. <div>  
    17.     padding的设置  
    18. </div>  
    19. </body>  
    20. </html>  

    七、margin

      margin 即外边距，标签与标签之间的间隔（距离），不占用盒子的大小。
      margin的复合写法意义参考padding的写法以及对应的含义。
    重点：
     在使用margin的时候会出现一点点小问题，即margin-top传递问题，margin上下叠压问题。
    如图所示：

    代码：
    [html] view plain copy
    print?
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <title></title>  
    6.     <style>  
    7.         #box{  
    8.             width:500px;  
    9.             background-color: red;  
    10.         }  
    11.         #div1{  
    12.             height: 50px;  
    13.             background-color: pink;  
    14.             margin: 100px ;  
    15.         }  
    16.         #div2{  
    17.             height: 50px;  
    18.             background-color: yellow;  
    19.             margin: 100px;  
    20.         }  
    21.     </style>  
    22. </head>  
    23. <body>  
    24. <div id="box">  
    25.     <div id="div1">div1</div>  
    26.     <div id="div2">div2</div>  
    27. </div>  
    28. </body>  
    29. </html>  
    我们在两个div中都设置了margin为100px，但是在所示的图中，我们可以看到第一个div的margin-top没有效果，而且在两个div中的间距也不是100px+100px。

    解决方法：
     1）margin-top传递
        解决方法：仅用以学知识点可以使用border解决
     2）margin上下叠压
       解决技巧：
          1、还是使用margin，可以将某一个元素方向设置成预想的值。margin叠压会取最大的margin值.
          2、如果元素没有特殊特征，也可以用padding代替

    代码：
    [html] view plain copy
    print?
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <title></title>  
    6.     <style>  
    7.         #box{  
    8.             width:500px;  
    9.             background-color: #b6f3ff;  
    10.             border:1px solid red;  //增加border属性，解决第一个问题  
    11.         }  
    12.         #div1{  
    13.             height: 50px;  
    14.             background-color: #ff8fdc;  
    15.             margin: 100px 100px 200px 100px; //将margin-bottom设置为200px，解决第二个问题  
    16.         }  
    17.         #div2{  
    18.             height: 50px;  
    19.             background-color: yellow;  
    20.             margin: 100px;  
    21.         }  
    22.     </style>  
    23. </head>  
    24. <body>  
    25. <div id="box">  
    26.     <div id="div1">div1</div>  
    27.     <div id="div2">div2</div>  
    28. </div>  
    29. </body>  
    30. </html>  

    八、盒模型

     盒模型中包括margin\border\padding\box 4个部分的内容。下图就是盒模型的结构：

      盒模型大小：border + padding + width/height
      盒模型的宽度：border-left-width + padding-left + width + padding-right + border-right-width
      盒模型的高度：border-top-width + padding-top + height + padding-bottom + border-bottom-width
    举例说明：
    效果：

    代码：
    [html] view plain copy
    print?
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <title></title>  
    6.     <style>  
    7.         div{  
    8.             width: 100px;  
    9.             height: 100px;  
    10.             border: 10px solid #90ecff;  
    11.             margin: 20px;  
    12.             padding: 20px;  
    13.         }  
    14.     </style>  
    15. </head>  
    16. <body>  
    17.     <div></div>  
    18. </body>  
    19. </html>  
    宽和高计算：
       宽度：100px + 20px + 40px = 160px
       高度：100px + 20px + 40px = 160px



    顶
    1
    踩
    0
     
     

      相关文章推荐
    • • 【基础html5 基础知识点】(全)
    • • 【直播】机器学习之凸优化--马博士
    • • HTML5基础入门
    • • 【直播】计算机视觉原理及实战--屈教授
    • • 10分钟HTML5入门基础知识（一）
    • • 机器学习&数据挖掘7周实训--韦玮
    • • html5基础入门
    • • 机器学习之数学基础系列--AI100
    • • HTML5快速入门（一）—— HTML简介
    • • 【套餐】2017软考系统集成项目管理工程师顺利通关套餐--徐朋
    • • HTML5基础入门教程
    • • 【课程】深入探究Linux/VxWorks的设备树--宋宝华
    • • 一，细说 HTML5 之 HTML5 基础讲解
    • • Html5学习之路 基础
    • • HTML5入门学习总结
    • • 同学们零基础入门学写代码的最佳途径之一哦
    阅读全文
    0 0
    怎样做软件开发 怎样做软件开发
    原创粉丝点击
    热门IT博客
    本西蒙斯 知乎本西蒙斯 知乎
    醴陵陶瓷批发市场 知乎醴陵陶瓷批发市场 知乎
    linux sz 下载目录
    江苏微盛网络孙
    删除sql server 2008
    java时间格式转换
    win10更改网络为家庭
    数学作图软件
    音乐相册软件下载
    五子棋黑石软件
    淘宝201711月新规则
    潮汕话软件下载
    传世引擎源码
    浙江黄金宝软件
    html5编程软件
    台湾短视频 软件
    npm和node.js
    淘宝店卖零食
    淘宝手办先行预订
    淘宝退款后优惠券退吗
    热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 四个月宝宝干咳怎么办 4个多月宝宝干咳怎么办 小孩吃饭不嚼怎么办 四个月宝宝积食怎么办 新生儿睡枕头了怎么办 宝宝半夜练翻身怎么办 宝宝牙齿长歪怎么办 婴儿睡觉头歪怎么办 婴儿放在床就哭怎么办 宝宝米粉没吃完怎么办 宝宝吃米粉上火怎么办 幼儿发烧怎么办 两岁 七个月婴儿厌食怎么办 打卤时肉总是沾在一起怎么办 宝宝大便头干硬怎么办 婴儿辅食机的水怎么办 三岁宝宝牙痛怎么办 5岁宝宝牙痛怎么办 6岁儿童脑维缩怎么办 产后奶水多胀痛怎么办 新生儿心脏偏大怎么办 婴儿脸上长虫斑怎么办 婴儿脸上长斑怎么办 婴儿润肤油过敏怎么办 青少年眼袋太重怎么办 婴儿床油漆味怎么办 宝宝误食沐浴露怎么办 误喝洗衣粉水怎么办 洗发露误入口怎么办? 幼儿误食沐浴露怎么办 小孩误喝花露水怎么办 宝宝口误沐浴露怎么办? 宝宝误食眼霜怎么办 小孩误食塑料片怎么办 我不会搭配衣服怎么办 婴儿床比大床高怎么办 单位倒闭了社保怎么办 缎绸面料抽丝怎么办 开会没有正装怎么办 纯棉衣服小了怎么办 耐克鞋子掉色怎么办

    程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里