注意点：

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

　　　　块级元素：

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

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

　　　　　　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. 用openssl 生成证书的过程

    1. 安装 openssl 后可以执行如下命令来生成私钥和对应的证书请求文件 ca openssl req -new -keyout private.key -out for_request.csr ...

  2. i系列标准-互联网周刊

    原文:http://www.enet.com.cn/article/2019/0429/A20190429062899.html 传统意义上的规模.现代意义上的工具时代感.永远不会改变的最高意义上的使 ...

  3. 关于Android Studio3.2新建项目无法运行出现Failed to find Build Tools revision 28.0.3的解决方法

    关于Android Studio3.2新建项目无法运行出现Failed to find Build Tools revision 28.0.3的解决方法 https://blog.csdn.net/h ...

  4. 什么时候会进行 SpringMVC重定向保存参数（FlashMap）？

    SpringMVC重定向保存参数(FlashMap):两种情况会保存参数:    1. 当前视图为RedirectView,也即是说当前请求为重定向请求.        org.springframe ...

  5. java 日志框架 pom配置

    使用log4j https://blog.csdn.net/qq_37936542/article/details/80839389[slf4j+logback实现web项目日志输出] 只需引入一个包 ...

  6. Windows上的那些效率神器，让你快到飞起

    转自:https://zhuanlan.zhihu.com/p/41771626 本文为Windows上有哪些让你效率倍增的软件和小技巧系列第二篇,上一篇请点击蓝字查看:打造高逼格PC,让你的电脑好用 ...

  7. PMP 1~3章错题总结

    工作到了一定的年限,都或多或少想了解管理的知识,PMP是国际认证的一项考试,招聘要求上也有提及. 不需要报名培训班,万能的某宝即可解决报名.PDU.学习资料的问题,但3900的考试费还是免不了的,为了 ...

  8. 数据结构各种算法实现(C++模板)

    目 录 1.顺序表    1 Seqlist.h    1 Test.cpp    6 2.单链表    8 ListNode.h    8 SingleList.h    10 test.cpp   ...

  9. Invoke 和 BeginInvoke 的真正涵义

    BeginInvoke 方法真的是新开一个线程进行异步调用吗? 参考以下代码: public delegate void treeinvoke(); private void UpdateTreeVi ...

  10. Arch Linux 启用 MTU 探测

    最近在家里经常遇到 ssh 超时的问题,一开始也没太当回事,感觉是网络不稳定导致的,但是后来慢慢的发现这种超时问题只会出现在跟 ssh 相关的程序中,例如 git.ssh.这成功的引起了我的注意,于是 ...