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. postman（断言）

    一.断言 1.Code is 200 断言状态码是200 2.contains string 断言respoonse body中包含string 3.json value check (检查JSON值 ...

  2. Jenkins 介绍

    持续集成: 持续集成是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成.每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证 ...

  3. Java——Java中编码问题

    在开发过程中经常会遇到一会乱码问题,不是什么大问题,但是也挺烦人的,今天来将我们开发总结的经验记录下来,希望可以给大家一些帮助. 一些概念: 字符:人们使用的记号,抽象意义上的一个符号.比如:‘1’, ...

  4. 低价购买(LIS方案统计)

    题意:https://www.luogu.com.cn/problem/P1108 如果两个数列组成的数字完全相同,那我们说这两个数列相同. 求出最长下降子序列的方案数. 题解来自 wjyyy大神. ...

  5. D. Count the Arrays 计数题

    D. Count the Arrays 也是一个计数题. 题目大意: 要求构造一个满足题意的数列. \(n\) 代表数列的长度 数列元素的范围 \([1,m]\) 数列必须有且仅有一对相同的数 存在一 ...

  6. Spring Cloud 学习 之 Spring Cloud Ribbon（基础知识铺垫）

    文章目录 1.负载均衡: 2.RestTemplate详解: xxxForEntity/xxxForObject:主要介绍get跟post exchange: execute源码分析: 1.负载均衡: ...

  7. 认识mysql3个基本库

    一.3个基本库 数据库初始化安装完毕会有三个基本库mysql .information_schema.performace_schema.作为应用程序开发者,平时较少关注这些数据库尤其是后两者.但是通 ...

  8. 遍历HashMap常用的的三种方式

    遍历HashMap常用的的三种方式 HashMap是我们使用非常多的集合之一,下面就来介绍几种常用的HashMap的遍历方式. 1.首先定义一个新的HashMap,并往里面添加一些数据. HashMa ...

  9. [zoj3629]找规律

    题意:a[n] = ([n/1] + [n/2] + ... + [n/n]) & 1 == false,找出a数组的规律来就ok了. #pragma comment(linker, &quo ...

  10. css3盒子flex

    一.定义在容器上的属性有6个: 1.flex-direction: 决定主轴的方向,即项目的排列方向. 属性值:row.row-reverse.column.column-reverse: 2.fle ...