H5-元素类型笔记

2019-05-08 07:24:38来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

注意点:

  元素类型分为 块级元素 和 行内元素

    块级元素

      在网页中以块的形式显示,默认情况都会占据一行,两个相邻的块级元素不会出现并列显示的元素,按照顺序自上而下排列。

      块级元素可以定义自己的宽度和长度。

      div:

      dl:与dt、dd搭配使用

      form:交互表单

      h1-h6:标题

      hr:水平线

      ol:有序列表

      ul:无序列表

      p:段落

      fieldset:表单字段级

      colgroup-col:表单列分组元素

      table-tr-td:表格及行,单元格

    行内元素

      在网页中始终以行内逐个显示,没有自己的形状并且不能定义自己的宽和高,他显示的宽和高根据所包含内容的宽和高确定。

      内联元素也会遵循盒模模型基本法则,如定义padding,border,margin,background等属性,但是个别属性不能正确显示。

      a:锚点

      b:粗体

      strong:粗体

      sub:下标

      sup:上标

      u:下划线

      i:斜体

      br:换行

      em:强调

      input:输入框

      img:图片

      label:表格标签

      span:内联容器

      textarea:富文本

    可变元素

      需要根据上下文确定该元素是块元素还是内联元素。

      applet:java applet

      button:按钮

      del:删除文本

      iframe:inline iframe

      ins:插入文本

      map:图片区域

      object:对象

      script:客户端脚本

  元素类型的转换

    display属性:用于定义建立布局时元素生成的显示框类型

    常见属性值:

      none:此元素不会被显示,隐藏元素并脱离文本流

      block:将元素设置为块级元素,独占一行。不设置宽度时宽度撑满一行。当元素设置了float属性后就相当于给元素加了display:block;属性

      inline:在元素后面删除行符,多个元素可以在一行显示。非独占一行,不支持宽度,代码换行被解析成空格

      list-item:将元素转换成列表,li 的默认类型。不设置宽度时宽度撑满一行,独占一行,支持高度设置

    大部分块元素display属性值默认为block,其中列表的默认值为list-item

    大部分内联元素的display属性值默认为inline,其中img,input默认值为inline-block

 

练习

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        * {margin: 0; padding: 0;}
        .nav {height: 60px; background: #2a063a;}
            .nav ul { width: 960px; margin: 0 auto; text-decoration: none; overflow: hidden;}
                .nav ul li {float: left; border-right: 1px #fff solid;}
                    .nav ul li a {display: block; width: 119px; height: 60px; color: #fff; 
                                    text-align: center; line-height: 60px; text-decoration: none; font-size: 18px;}
                    .nav ul li a:hover {background: rgb(224, 28, 28);}
                .nav ul .last{border-right: none;}
    </style>
</head>
<body>
    <div class="nav">
        <ul type="none">
            <li><a href="#">博客首页</a></li>
            <li><a href="#">添加随笔</a></li>
            <li><a href="#">欢迎练习</a></li>
            <li><a href="#">订阅查看</a></li>
            <li class="last"><a href="#">后台管理</a></li>
        </ul>
    </div>
</body>
</html>

 

结果:

                  


原文链接:https://www.cnblogs.com/tynam/p/10827800.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:纯 CSS 画 iphone

下一篇:怎样才能学好WEB前端