注意点：

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

　　　　块级元素：

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

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

　　　　　　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. SpringBoot入门-集成mybatis（四）

    pom.xml <parent> <groupId>org.springframework.boot</groupId> <artifactId>spr ...

  2. c# 通过win32 api 得到指定Console application Content

    已知的问题: 1. 调试的时候会报IO 异常,非调试环境是正常的 2. Windows 应用程序才可以使用,可以用非windows应用程序包一层 using System; using System. ...

  3. Egret自定义位图文字（自定义+BitmapLabel）

    一 自定位图文字 因为egret的位图文字是texturemerger做的,需要多张单图片导入tm,然后导出两个文件来使用,过程比较麻烦. 而Laya的位图文字则是一张整图数字图片,使用FontCli ...

  4. IDEA代码折叠

    IDEA代码折叠 觉得有用的话,欢迎一起讨论相互学习~Follow Me 选中内容-->右键 folding -->fold selection/remove region

  5. 新手學python之新體驗

    1. 使用縮進方式做為程式塊開始結束的標示,程式換行在行末尾加 "\" 2. 元祖(Tuple)數據類型,和List的不同是Tuple不能修改,優點是執行速度比List快,因為不能 ...

  6. oracle python操作 增删改查

    oracle删除 删除表内容 truncate table new_userinfo; 删除表 drop table new_userinfo; 1.首先,python链接oracle数据库需要配置好 ...

  7. [转帖]从0开始的高并发（一）--- Zookeeper的基础概念

    从0开始的高并发(一)--- Zookeeper的基础概念 https://juejin.im/post/5d0bd358e51d45105e0212db 前言 前面几篇以spring作为主题也是有些 ...

  8. 【转帖】Kafka入门介绍

    Kafka入门介绍 https://www.cnblogs.com/swordfall/p/8251700.html 最近在看hdoop的hdfs 以及看了下kafka的底层存储,发现分布式的技术基本 ...

  9. 测试函数——python编程从入门到实践

    测试函数 学习测试,得有测试的代码.下面是一个简单的函数: name_function.py def get_formatted_name(first, last): ""&quo ...

  10. ETCD服务

    ETCD 简介 ETCD是一个开源的.分布式的键值对数据存储系统,由Go语言实现,用于存储key-value键值对,同时不仅仅是存储,主要用途是提供共享配置及服务发现,使用Raft一致性算法来管理高度 ...