注意点：

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

　　　　块级元素：

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

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

　　　　　　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>

结果：

　　　　　　　　　　　　　　　　　　

Html-元素类型笔记的更多相关文章

  1. js：给定两个数组，如何判断他们的相对应下标的元素类型是一样的

    题目: 给Array对象原型上添加一个sameStructureAs方法,该方法接收一个任意类型的参数,要求返回当前数组与传入参数数组(假定是)相对应下标的元素类型是否一致. 假设已经写好了Array ...

  2. MyBatis 元素类型为 "configuration" 的内容必须匹配 ".....

    修改MyBatis配置文件时,添加typeAliases节点,报了一个BuilderException: org.apache.ibatis.exceptions.PersistenceExcepti ...

  3. CSS元素类型

    前面有一篇文章讲到在css世界中,html元素的表现都是一个个盒子,而css中盒子的显示方式有三种方式,分别是块元素.行内元素和行内块元素.本文总结这三种显示方式的特征和区别. 1 写在前面 最近在整 ...

  4. Caused by: 元素类型为 "package" 的内容必须匹配 "(result-types?,interceptors?,default-interceptor-ref?,default-action-ref?,default-class-ref?,global-results?,global-exception-mappings?,action*)"

    Caused by: 元素类型为 "package" 的内容必须匹配 "(result-types?,interceptors?,default-interceptor- ...

  5. selenium判断元素类型

    在做级联的下拉框时发现第一次选择了下拉框(如省份),第二个下拉框可能是输入框,也可能是下拉框,这个时候就需要判断他的元素类型,来做判断 图1 图2 原理很简单:获取控件的html文件内容,拿到内容后在 ...

  6. 《Programming WPF》翻译 第5章 4.元素类型样式

    原文:<Programming WPF>翻译 第5章 4.元素类型样式 命名样式非常有用,当你得到一组属性并应用到特点的元素上.然而,如果你想要应用一个统一的样式到所有确定元素类型的实例, ...

  7. 解决 Mybatis 元素类型为 "resultMap" 的内容必须匹配 "(constructor?,id*,result*,association*,collection*,discriminat

    在配置 mybatis mapper.xml文件时, 一不小心就会报如下类似的异常: Caused by: org.springframework.beans.factory.BeanCreation ...

  8. HTML基础--元素类型及类型转换

    元素类型及类型转换 一.XHTML元素分类 根据css显示分类,XHTML元素被分为三种类型:块状元素,内联元素,可变元素 1.块状元素(block element) 1)块状元素在网页中就是以块的形 ...

  9. Parse Fatal Error at line 41 column 24: 元素类型 "url-pattern" 必须由匹配的结束标记 "</url-pattern>" 终止

    1.错误描述 严重: Parse Fatal Error at line 41 column 24: 元素类型 "url-pattern" 必须由匹配的结束标记 "< ...

  10. 解决：org.xml.sax.SAXParseException: 元素类型 "head" 必须由匹配的结束标记 "</head>问题

    事件背景: 今天就碰到了这样的问题, org.xml.sax.SAXParseException: 元素类型 "head" 必须由匹配的结束标记 "</head&g ...

随机推荐

  1. arris1750 pandorabox安装bandwidthd之后带宽监控(nlbwmon)报资源不足

    nlbwmon 报错资源不足不能看的原因很可能是内存不足导致,因为重启进程会概率可用一下,且删除老的数据后又好用了. 可能与设置的最大数据库条数有关,条数过大导致申请内存大,改成默认的10000. 可 ...

  2. kotlin基础 尾递归

    尾调用的重要性在于它可以不在调用栈上面添加一个新的堆栈帧——而是更新它,如同迭代一般. 尾递归因而具有两个特征: 调用自身函数(Self-called): 计算仅占用常量栈空间(Stack Space ...

  3. java初中级面试题（最新版）

    Java基础方面: 概念 1.什么是面向对象? 万物皆对象,把现实中有共同特性行为的对象抽象成类,类是程序中最基本的单位. 2.类和对象 面向对象的思想是如何在java展现的呢? 就是通过类和对象 * ...

  4. SDN实验---Ryu的应用开发（二）Learning Switch

    一:自学习交换机(二层MAC交换机)的编程思路 (一)明确问题 如何实现软件定义的自学习交换机? (二)设计解决方案 通过控制器来实现自学习交换算法,然后指导数据平面实现交换机操作 (三)确定具体的技 ...

  5. 创建Observer

    观察者 观察者作用就是监听事件, 然后对这个事件做出响应, 或者说任何响应时间的行为都是观察者 1. 在subscribe()方法中创建监听者 创建观察者最直接的方法就是在Observable的sub ...

  6. iOS - NSURLConnection finished with error - code -1002

    网络请求会异常,比如报错:Error domain: 在回调的地方打一个断点,然后用命令行查看下什么错误: po error 当错误是:**[Error Domain=NSURLErrorDomain ...

  7. Ubuntu14 配置开机自启动/关闭

    1.ubuntu默认运行级别为2(runlevel),所以在/etc/rc2.b中S开头的链接文件(连接到/etc/init.d)就是自启动项.不想开机自动启动可以把S开头的文件重命名或删除,重命名好 ...

  8. Docker容器中启动OPMS项目

    1.上传opms项目包到Linux下面 2.解压赋权 3.执行文件即可 4.浏览器输入服务器ip地址加上8088端口号

  9. Kubernetes 原理架构介绍(一)

    目录 一.Kubernetes 是什么 二.Kubernetes 设计架构 三.Kubernetes的核心技术概念和API对象 Cluster Master Node Pod Controller D ...

  10. prototype和__proto__的关系是什么？

    我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个对象,它的用途是包含可以由特定类型的所有实例共享的属性和方法.(这个对象下面有个属性,这个属性是另外一个对象的应用 ,这个属性就 ...