一.标签分类

HTML中标签元素三种不同类型:块状元素,行内元素,行内块状元素。

常用的块状元素:

<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>

常用的行内元素:

<a> <span> <br> <i> <em> <strong> <label>

常用的行内块级元素:

<img> <input>

块级元素特点:display:block

  1.每个块级元素都从新的一行开始,并且其后的元素也另起一行.自己独占一行.

  2.元素的高度,宽度,行高,顶边距和底边距都可以设置

  3.元素的宽度在不设置的情况下,默认是本身父容器的的宽度.

行内元素(内联元素)的特点:display:inline

  1.和其他元素在同一行上

  2.元素的高度,宽度,顶边距和底边距都不可以设置

  3.元素的宽度就是它包含的文字或者图片的宽度,不可改变

行内块级元素:display:inline-block

  1.和其他元素都在一行上

  2.元素的高度,宽度,行高,顶边距和底边距都可以设置

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签分类</title>
</head>
<body>
<div class="wapper">
<!--块状元素: <div> <p> <h1>~<h6> <ol> <ul> <table><form> <li> -->
<div class="left">
我的学校
<div>我的区域
<div style="width:500px;height:100px">我的爱好
</div>
<ul>
<li>
<h2>抽烟</h2>
</li>
<li>
<ol>
<li>喝酒</li>
<li>烫头</li>
</ol> </li> </ul>
</div>
</div>
<div class="right">
<!-- 行内元素:<a> <span> <br> <i> <em> <strong> <label> -->
<a href="#">顶部</a>
<a href="https://www.baidu.com" target="_blank">百度</a> </div>
<div class="inline-block">
<!-- img input -->
<img src="./homesmall.png" alt="加载失败时显示我" title="浏览时显示我">
<!-- <img src="./homesmall2.png" alt="加载失败时显示我" title="浏览时显示我"> -->
用户名:
<input type="text" name="user" style="width:100px;height:50px"> </div> </div> </body>
</html>

例子

二.嵌套规则

  1.块元素可以包含内联(行内)元素或某些块元素,但内联元素却不能包含块元素,它只能包含其它的内联元素,例如:

<div><div></div><h1></h1><p><p></div> ✔️

<a href=”#”><span></span></a> ✔️

<span><div></div></span> ❌

  2.块级元素不能放在p标签里面,例如:

<p><ol><li></li></ol></p> ❌

<p><div></div></p> ❌

  3.有几个特殊的块级元素只能包含内嵌元素,不能再包含块级元素,这几个特殊的标签是:  

h1、h2、h3、h4、h5、h6、p

  4.li元素可以嵌入ul,ol,div等标签

<ul>
<li>
<ul>
<li>
<div> </div>
</li>
<li>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</li>
</ul>
</li>
</ul>

Unit 3.标签的分类和嵌套规则的更多相关文章

  1. HTML标签嵌套规则

    摘要:  最近在整理项目时发现有些同事写的页面代码嵌套的太多,而且有些嵌套不对,比如<a><div>内容</div></a>.虽然功能实现了,但是对于浏 ...

  2. 常见的HTML标签的嵌套规则

    众所周知,HTML标签有两类: 块级元素div.h1~h6.address.blockquote.center.dir.dl.dt.dd.fieldset.form.hr.isindex.menu.n ...

  3. web@HTML常用标签分类,标签嵌套规则

    一.html标签又叫做html元素,它分为块级元素和内联元素(也可以叫做行内元素),都是html规范中的概念.1.块级元素块级元素是指本身属性为display:block;的元素.因为它自身的特点,我 ...

  4. HTML5标签嵌套规则

    × 目录 [1]分类 [2]子元素 [3]总结 前面的话 在html5中,<a>元素的子元素可以是块级元素,这在以前是被认为不符合规则的.本文将详细介绍html5的标签嵌套规则 分类 ht ...

  5. XHTML标签的嵌套规则分析

    在 XHTML 的语言里,我们都知道:ul 标签包含着 li.dl 标签包含着 dt 和 dd——这些固定标签的嵌套规则十分明确.但是,还有许多标签是独立的,它们没有被捆绑在一起,比如 h1.div. ...

  6. HTML标签的嵌套规则

    我在平时在写html文档的时候,发现不太清楚标签之间的嵌套规则,经常是想到什么标签就用那些,后来发现有些标签嵌套却是错误的.通过网上找资料,了解了html标签的嵌套规则. 一.HTML 标签包括 块级 ...

  7. XHTML标签的嵌套规则--很基础很重要

    XHTML的标签有许多:div.ul.li.dl.dt.dd.h1~h6.p.a.addressa.span. strong……我们在运用这些标签搭建页面结构的时候,是可以将它们无限嵌套的,但是,嵌套 ...

  8. html标签的嵌套规则分析

    1.a标签最好不要嵌套块级元素,可以嵌套内联元素,但是不能嵌套a标签和input之类的标签.能嵌套的标签像,等等. 2.ul和ol的子元素不能是别的元素只能是li,不能是别的比如div等,但是li中可 ...

  9. 5.html基础标签:块级+行级元素+特殊字符+嵌套规则

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. [android]常见的adb指令

    /**********************2016年4月23日 更新**************************************/ 知乎:在windows的cmd执行adb she ...

  2. CSS3图片翻转动画技术详解

    CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家 ...

  3. iOS----------YYModel

    weaterInfoModel *weather = [weaterInfoModel yy_modelWithDictionary:returnData[@"weatherinfo&quo ...

  4. MySQL InnoDB下关于MVCC的一个问题的分析

      这个是网友++C++在群里问的一个关于MySQL的问题,本篇文章实验测试环境为MySQL 5.6.20,事务隔离级别为REPEATABLE-READ ,在演示问题前,我们先准备测试环境.准备一个测 ...

  5. MVC Controller return 格式分类及用法

    概述 所看到的Action都是return View();我们可以看作这个返回值用于解析一个aspx文件.而它的返回类型是ActionResult如 public ActionResult Index ...

  6. selenium-历史(一)

    简介 Selenium是ThoughtWorks公司研发的一个强大的基于浏览器的开源自动化测试工具,它通常用来编写web应用的自动化测试.早期也即Selenium1.x时期主要使用Selenium R ...

  7. UPUPW配置

    UPUPW下载地址 https://sourceforge.net/projects/upupw/files/ANK/?tdsourcetag=s_pctim_aiomsg 配置 在这里插入图片描述

  8. SQL Server -- 回忆笔记(四):case函数,索引,子查询,分页查询,视图,存储过程

    SQL Server知识点回忆篇(四):case函数,索引,子查询,分页查询,视图,存储过程 1. CASE函数(相当于C#中的Switch) then '未成年人' else '成年人' end f ...

  9. Jenkins自动化部署-----持续交付【转】

    感谢之前带领过我的leader,让我能够知道什么是好的开发方法. 在很早之前就接触过敏捷开发.什么是敏捷开发,简单来说就是让软件可靠地,快速地发布出来的一种开发方法和技巧. 而敏捷开发中有许多的实践, ...

  10. 【原创】Windows平台下Git的安装与配置

    一.下载     msysgit是Git for Windows版,其Home Page为:http://msysgit.github.io/ 点击页面中“Download”进入下载列表.可根据个人喜 ...