• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > H5学习之旅-H5的块标签的使用(9)

H5学习之旅-H5的块标签的使用(9)

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含H5,学习之旅,块标签等相关知识,匿名希望在学习及工作中可以帮助到您

块元素的基本语法

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

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

3.html的p元素,p也被称为块元素,其主要作为组合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>
    <p id="pId">
        <p>
            这是一个段落        </p>
        <a>这是一个超链接</a>
    </p>
    <p>
        <P><span>这是一个span测试,</span>测试效果</P>
    </p></body></html>

css代码

#pId p{    color:red;}

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

效果图

这里写图片描述

块元素的基本语法

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

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

3.html的p元素,p也被称为块元素,其主要作为组合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>
    <p id="pId">
        <p>
            这是一个段落        </p>
        <a>这是一个超链接</a>
    </p>
    <p>
        <P><span>这是一个span测试,</span>测试效果</P>
    </p></body></html>

css代码

#pId p{    color:red;}

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

效果图

这里写图片描述

以上就是H5学习之旅-H5的块标签的使用(9)的内容,更多相关内容请关注微课江湖()!

您可能想查找下面的文章:

  • 详解HTML5之pushstate、popstate操作history,无刷新改变当前url
  • HTML5各种头部meta标签的功能(推荐)
  • 如何用H5实现一个触屏版的轮播器的实例
  • H5新属性audio音频和video视频的控制详解(推荐)
  • HTML5页面音视频在微信和app下自动播放的实现方法
  • H5 meta小结(前端必看篇)
  • 浅谈h5自定义audio(问题及解决)
  • h5调用摄像头的实现方法
  • HTML5单页面手势滑屏切换原理
  • Html5实现二维码扫描并解析

相关文章

  • 2018-12-03极简的HTML5模版_html5教程技巧
  • 2018-12-03html5 worker 实例(一) 为什么测试不到效果_html5教程技巧
  • 2017-08-06使用jquery实现HTML5响应式导航菜单教程
  • 2018-12-03突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述_html5教程技巧
  • 2018-12-03随机字符变换效果的jQuery插件开发教程
  • 2018-12-03为什么人人网把 iOS 客户端从原生写成 HTML5,Facebook 却将半 HTML5 重写成原生?
  • 2018-12-03HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦_html5教程技巧
  • 2018-12-03html5使用canvas画空心圆与实心圆_html5教程技巧
  • 2018-12-03html5需遵循怎样的6个设计原则?
  • 2018-12-03HTML5 用来手机建站能不能实现在各种设备上的良好展现?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 基于javascript的组件开发方式
    • 如何通过html5实现摇一摇的功能
    • HTML 5之表单新功能解析
    • 为什么移动平台还是 Native 更流行,较少 HTML5 应用?
    • html5 canvas标签的作用以及canvas标签的历史由来介绍
    • 如何理解扎克伯格说「Facebook 最大错误是在 HTML5 上押注过大,在移动平台上浪费两年时间」?
    • HTML5Canvas save如何保存恢复状态?
    • H5同层Video播放器接入实例分享
    • HTML5 Canvas API中drawImage()方法的使用实例
    • span设为inline-block之后,为什么未包含文字时下面会多出一条空白?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有