html块

  • html块元素

块元素在显示时，通常会以新行开始

如：<h1>、<p>、<ul>

  • html内联元素

内联元素头通常不会以新行开始

如：<b>、<a>、<img>

  • html<div>元素

<div>元素也被称为块元素，其主要的是组合html元素的容器

  • html<span>元素

<span>元素是内联元素，可作为文本的容器

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>块元素</title>

    <link rel="stylesheet" type="text/css" href="mycss02.css">

</head>

<body>

    <!-- 块 -->

    <p>hello</p>

    <h3>world</h3>

    <b>这是一个</b>

    <a>zheshiyige </a>

    <div id="divID">

        <p>hello world</p>

        <a href="http://baidu.com">点击我</a>

    </div>

    <div id="divspan">

        <p><span>这是一个测试</span>程序编后话</p>

    </div>

</body>

</html>
<p>hello</p>、<h3>world</h3>是块元素，他们之间不会在同一行，有新行开始。<b>这是一个</b>、<a>zheshiyige </a>不会换行，如图：

div通过css设置，设置一个id，id="divID"，通过<link rel="stylesheet" type="text/css" href="mycss02.css"> </head>引入，就可以在css中设置编辑

#divID a {

    color: red;

}

#divID p{

    color: gold;

}

#divspan span{

    color: magenta;

}

上述就是css的内容，其中#divID a { color: red; }定义了<a></a>中的内容颜色为red，<p></p>中的颜色为gold；<span></span>中颜色为magenta。如图：

本站文章为宝宝巴士 SD.Team原创，转载务必在明显处注明：（作者官方网站：宝宝巴士)

转载自【宝宝巴士SuperDo团队】 原文链接: http://www.cnblogs.com/superdo/p/4752981.html

html5学习之路_002的更多相关文章

  1. HTML5学习之路

    出于公司项目需求,我现在开始学习html5,虽然零零散散有过一点,比如说新出的语义化标签,本地存储之类的,但是从来都没有系统的去了解.

  2. html5学习之路_001

    安装环境 安装intellij idea作为开发环境 打开环境 新建一个html文件,打开之后出现代码框架,再次基础上继续编码即可,例如: <!DOCTYPE html> <html ...

  3. html5学习之路_007

    CSS概述 CSS指层叠样式表 CSS样式表极大地提高了工作效率 CSS基础语法 selector { property:value } 例:hi {color:red; font-size:14px ...

  4. html5学习之路_006

    表单与php交互 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. html5学习之路_005

    PHP环境搭建 1.下载安装xampp 2.打开xampp,开启mysql和apache 3.在开发环境eclips中下载插件 4.安装php 5.切换到php开发环境 6.创建一个php项目 7.打 ...

  6. html5学习之路_004

    HTML表单 表单用于获取不同类型的用户输入 常用表单标签 下面为一个简单的表单: <!DOCTYPE html> <html> <head lang="en& ...

  7. html5学习之路_003

    html布局 使用<div>元素布局 使用<table>元素布局 <div>元素布局 <!DOCTYPE html> <html> < ...

  8. 8年，从2D到3D，我的学习之路

    Mickey 写了一篇 <一个本科毕业生创业两年的感悟>,从他的视角,总结了我们合作的两年经历. 我也来写一篇,介绍我的学习之路,希望对大家有所帮助,谢谢大家- 我的学习方法 1.直接从0 ...

  9. springboot 学习之路 8 (整合websocket(1))

    目录:[持续更新.....] spring 部分常用注解 spring boot 学习之路1(简单入门) spring boot 学习之路2(注解介绍) spring boot 学习之路3( 集成my ...

随机推荐

  1. POJ - 2387 Til the Cows Come Home （最短路入门）

    Bessie is out in the field and wants to get back to the barn to get as much sleep as possible before ...

  2. HTML（css 样式）

    1.CSS 可以通过以下方式添加到 HTML 中: 内联样式 -- 在 HTML 元素中使用 "style" 属性 内部样式表 -- 在 HTML 文档头部 <head> ...

  3. SQL 文件导入数据库

    1.首先通过 xshell 连接数据库服务器,执行命令 mysql -u root -p 命令,按照提示输入密码,连接上数据库 2.在连接终端上执行命令 create database JD_Mode ...

  4. RF（For 循环）

    一.介绍:RobotFrameWork 支持 FOR 循环语句,语法和 Python 的语法基本相同,但 RobotFrameWork 中,"FOR" 关键字前面需要增加一个 &q ...

  5. 2-MyBatisPlus教程（HelloWorld）

    1,准备数据 DROP TABLE IF EXISTS user; CREATE TABLE user ( id ) NOT NULL COMMENT '主键ID', name ) NULL DEFA ...

  6. Java——枚举

    枚举类简介: Java5新增了一个enum关键字(它与class.interface关键字的地位相同),用以定义枚举类.枚举类也是一种特殊的类,所以也具有和类相同的变量和方法,也可以定义自己的构造器. ...

  7. nginx反向代理做负载均衡以及使用redis实现session共享配置详解

    1.为什么要用nginx做负载均衡? 首先我们要知道用单机tomcat做的网站,比较理想的状态下能够承受的并发访问在150到200, 按照并发访问量占总用户数的5%到10%技术,单点tomcat的用户 ...

  8. php时间输出结果减去一分钟

    如: <?=date("m-d H:i",strtotime($rs["kgtime"]));?> 假设结果是09-03-23:30,如何让它变成0 ...

  9. Try-Catch包裹的代码异常后，竟然导致了产线事务回滚！

    导读:​一段被try-catch包裹后的代码在产线稳定运行了200天后忽然发生了异常,而这个异常竟然导致了产线事务回滚.这期间究竟发生了什么?日常在项目过程中该如何避免事务异常?就在这个时候,老板拿着 ...

  10. Java TCP案例网络聊天室

    收获:1,加深了对多线程的一边一边的理解,可以将行为写成不同的类然后多线程 2,IO流的复习! 3,多线程中一边读取一边操作时容器最好(CopyOnWriteArrayList); 4,Tcp流程的熟 ...