块元素的基本语法

1. Html块元素 ,块元素在开始时候通常以新行开始,比如h1,p,ul

2.内联元素,通常不会以新行开始,比如a,b,img

3.html的div元素,div也被称为块元素,其主要作为组合html元素的容器

4.html的span元素,span元素是内联元素,可作为文本的容器

!!!!!!代码实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5块元素</title>
    <link rel="stylesheet" type="text/css" href="myStyle.css">
    <style>
        span{
            color:chartreuse;
        }
    </style>
</head>
<body>
    <p>这是一个段落</p>
    <h1>这是一个标题</h1>
    <b>这是一个加重</b>
    <a>这是一个超链接</a>
    <div id="divId">
        <p>
            这是一个段落
        </p>
        <a>这是一个超链接</a>
    </div>
    <div>
        <P><span>这是一个span测试,</span>测试效果</P>
    </div>
</body>
</html>

css代码

#divId p{
    color:red;
}

divId是di的id,后面的p是指定P标签

效果图

H5学习之旅-H5的块标签的使用(9)的更多相关文章

  1. H5学习之旅-H5的基本标签(2)

    H5的标签和html的标签没什么区别,主要介绍H5的基本标签 1.基础标签header和body,header的<title>元素主要是显示在标签页面里面,以及设置使用的语言和编码格式.b ...

  2. H5学习之旅-H5的新特性(1)

    随着H5的发展,网页开发呈现了跨平台的特性,目前H5是兼容各大平台的,这也为一些其他的技术的跨平台开发提供了基础,所以我预测后H5会成为很重要的开发语言 新特性介绍 1.用于回话的canvas标签 2 ...

  3. H5学习之旅-H5列表(8)

    列表的基本语法 ol:有序列表 ul:无序列表 li:列表项 dl:列表 dt:列表项 dd:列表描述 常用列表 1.无序列表:使用标签 ul,li 属性:disc(默认实心圆) circle (空心 ...

  4. H5 学习之旅-H5表格(7)

    表格语法 table:简历表格 captian:表格标题 th:表格行表头 tr:表格行 td:单元格 thead:表格页眉 tfoot:表格页脚 tbody:表格主体 col:列属性 !!!代码实例 ...

  5. H5学习之旅-H5的超链接以及图片链接(6)

    链接内容 1.文本链接 2.图片链接 属性 href:指向另一个文档的链接 name:文档内部的链接 img标签属性 alt:替换文本属性 width:宽 height:高 代码实例 <!DOC ...

  6. H5学习之旅-H5的框架(13)

    H5框架语法介绍 :frame:框架对于页面的设计有很大的作用 frameSet:框架集标签定义如何将窗口分割为框架 ,每一个frameset定义一些列行或者列,rowS/COLS规定了每行或者每列占 ...

  7. H5学习之旅-H5的表单(11)

    H5的表单元素 form:表单 input:输入域,type属性可以设置text,password,button等不同的属性 textarea:文本域 lable:控制标签 fieldset:定义域 ...

  8. H5学习之旅-H5的样式(5)

    样式的引入方式 外部样式表 link rel = "stylesheet" type = "text/css" href = "mystyle.css ...

  9. H5学习之旅-H5的格式化(4)

    H5的格式设置: b代表是粗体 i斜体 big 字体变大 small变小 em强调 strong 加强和变粗差不多 sub 定义下标字 sup 定义上标字 ins 插入字 del 删除字 代码实例 & ...

随机推荐

  1. Node.js 常用工具util

    util 是一个Node.js 核心模块,提供常用函数的集合,用于弥补核心JavaScript 的功能 过于精简的不足. util.inherits util.inherits(constructor ...

  2. 配置 docker0 网桥

    Docker 服务默认会创建一个 docker0 网桥(其上有一个 docker0 内部接口),它在内核层连通了其他的物理或虚拟网卡,这就将所有容器和本地主机都放到同一个物理网络. Docker 默认 ...

  3. Tinyhttpd for Windows

    TinyHTTPd forWindows 前言 TinyHTTPd是一个开源的简易学习型的HTTP服务器,项目主页在:http://tinyhttpd.sourceforge.net/,源代码下载:h ...

  4. RDO Stack:VMs cannot access external network.

    Issue: There are many root causes to make your openstack vm instances cannot be reached from externa ...

  5. React Native自定义导航条

    Navigator和NavigatorIOS 在开发中,需要实现多个界面的切换,这时候就需要一个导航控制器来进行各种效果的切换.在React Native中RN为我们提供了两个组件:Navigator ...

  6. ELK平台的搭建

    ELK是指Elasticsearch + Logstash + Kibaba三个组件的组合.本文讲解一个基于日志文件的ELK平台的搭建过程,有关ELK的原理以及更多其他信息,会在接下来的文章中继续研究 ...

  7. android面试手册

    1. Android dvm的进程和Linux的进程, 应用程序的进程是否为同一个概念 DVM指dalivk的虚拟机.每一个Android应用程序都在它自己的进程中运行,都拥有一个独立的Dalvik虚 ...

  8. [Pelican]Pelican入门(一)

    听说这个静态博客很好用,最近又在协助"蟒周刊"翻译,于是先学习下基本的用法 office site You can startup for here. 安装环境 我的os是win7 ...

  9. 仿淘宝购物车demo---增加和减少商品数量

    在上一篇博客中,小编简单的介绍了如何使用listview来实现购物车,但是仅仅是简单的实现了列表的功能,随之而来一个新的问题,买商品的时候,我们可能不止想买一件商品,想买多个,或许有因为某种原因点错了 ...

  10. Cocos2D添加精灵纹理滤镜实现图像复古效果的转换

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 大家知道Cocos2d本身是一个非常强悍的2d游戏引擎,其中自 ...