注意点：

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

　　　　块级元素：

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

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

　　　　　　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. VS2015 创建C++动态库及使用

    转载:https://blog.csdn.net/w_x_myself/article/details/82252646 1.dll的特点 代码复用是提高软件开发效率的重要途径.一般而言,只要某部分代 ...

  2. docker run启动的容器挂掉了，数据怎么办

    情景描述 在某个系统中,功能性的服务使用 docker stack deploy xxx 启动,某个国产数据库的服务单独使用 docker run xxx 启动,数据库服务没有将存储的位置挂载出来: ...

  3. mysql5.7同步复制报错1060故障处理

    mysql5.7同步复制报错故障处理 # 报错 1060,具体如下Last_Errno: 1060Last_Error: Coordinator stopped because there were ...

  4. pycharm安装、首次使用及汉化

    摘自:https://blog.csdn.net/qq_30463497/article/details/84992480 一.下载pycharm安装包打开PyCharm的官方下载地址:http:// ...

  5. python初级(302) 6 对象（二）

    一.复习 1.什么是对象 2.什么是类 3.什么是属性 4.什么是方法 5.创建一个dog类,dog的属性有颜色,方法有汪汪叫 随堂练习: class Dog: def __init__(self, ...

  6. 【LeetCode算法-53】Maximum Subarray

    Given an integer array nums, find the contiguous subarray (containing at least one number) which has ...

  7. [MySQL] MySQL存储过程 事务transaction 数据表重建

    直接上代码 -- 删除存储过程 DROP PROCEDURE IF EXISTS `renew_message_queue`; -- 添加; 的转义 DELIMITER ;; CREATE PROCE ...

  8. LinkedHashMap原理

    作者:艺旭家 链接:https://www.jianshu.com/p/8f4f58b4b8ab 总结 LinkedHashMap是继承于HashMap,是基于HashMap和双向链表来实现的. Ha ...

  9. log4j Logger 使用简介

    项目结构: log4j.properties 内容: log4j.rootCategory=info,stdout log4j.appender.stdout=org.apache.log4j.Con ...

  10. asp.net core使用水晶报表问题

    背景     最近项目上遇到一个需求,要后台通过定时任务把水晶报表生成pdf文件,然后邮件发送给相关人. 技术实现思路     选用ASP.NET Core框架(基于2.2版本),通过IHostedS ...