注意点：

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

　　　　块级元素：

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

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

　　　　　　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. C#-关于TcpListener的AcceptTcpClient()方法造成线程阻塞，进而程序无法彻底关闭的问题

    https://blog.csdn.net/nuistchn/article/details/50809158 在<C#高级编程>第7版第24章,有提到使用TCP类. 书中写了一个实例,两 ...

  2. pandas连接多个表格concat()函数

    网易云课堂该课程链接地址 https://study.163.com/course/courseMain.htm?share=2&shareId=400000000398149&cou ...

  3. sql server中raiserror的用法（动态参数传值）

    1.raiserrror定义: 返回用户定义的错误信息并设系统标志,记录发生错误.通过使用 RAISERROR 语句,客户端可以从 sysmessages 表中检索条目, 或者使用用户指定的严重度和状 ...

  4. MYSQL报错：1055 - Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column

    1055 - Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column 'rpa ...

  5. Spring Web Flux 相关概念

    Reactive Streams.Reactor 和 Web Flux 上面介绍了反应式编程的一些概念,以及 Reactor 和 Web Flux.可能读者看到这里有些乱.这里介绍一下三者的关系.其实 ...

  6. 在 Windows 服务中托管 ASP.NET Core

    众所周知,ASP.NET Core采用了和传统ASP.NET不同的托管和HTTP处理方式,即把服务器和托管环境完全解耦.ASP.NET Core内置了两个HTTP服务器实现,一个是基于libuv实现的 ...

  7. thinkphp5---路由问题

    在做thinkphp的开发项目中,遇到一个需求:要求让网站的链接,必须以 .html结尾. 原因:在thinkphp开发的项目中,使用伪静态,路由格式:xxx.com/xxx/2.html ,但是后面 ...

  8. 转 oracle 正则表达式和查询最大文件号 SQL

    ###sample 1 https://www.cnblogs.com/lxl57610/p/8227599.html Oracle使用正则表达式离不开这4个函数: 1.regexp_like 2.r ...

  9. unittest===unittest 的几种执行方式

    #demo.py import requests import json class RunMain: def __init__(self, url, method, data=None): self ...

  10. dotnet core 项目脚手架这种小事嘛...

    dotnet core脚手架批处理.bat @echo 请修改批处理文件名后,如:Example.Core ,注释掉goto end,再执行脚本 pause goto end ::goto end s ...