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. CUDA编程学习相关

    1. CUDA编程之快速入门:https://www.cnblogs.com/skyfsm/p/9673960.html 2. CUDA编程入门极简教程:https://blog.csdn.net/x ...

  2. centos下的redis一键安装shell脚本

    #!/bin/bash yum install cpp binutils glibc-kernheaders glibc-common glibc-devel gcc make wget #安装依赖库 ...

  3. Hadoop入门学习笔记-第二天 （HDFS：NodeName高可用集群配置）

    说明:hdfs:nn单点故障,压力过大,内存受限,扩展受阻.hdfs ha :主备切换方式解决单点故障hdfs Federation联邦:解决鸭梨过大.支持水平扩展,每个nn分管一部分目录,所有nn共 ...

  4. js上传文件过大导致上传失败原因以及解决办法

    背景:项目需要用到上传视频功能,由于视频有知识产权,要求必须上传到自己的服务器上不允许用第三方视频网站接口上传,于是一开始开始用的是input type=file去上传,小的视频上传没有问题,上传将近 ...

  5. apache反向代理和负载均衡

    正向代理:正如我们用的游戏加速代理,大多的个人PC把请求发给正向代理服务器,代理服务器通常配置高端的带宽,替我们请求相应的服务 负载均衡中的反向代理:通常意义上,是一个请求转发的代理.类似一个收发室的 ...

  6. 折腾了一晚上的“equals”和“==”

    最近在仿写美团这个项目的时候,遇到了一点关于字符串比较的问题,这里记录一下,避免以后再犯. 由于之前学c语言的时候,习惯性用“==”进行比较,初识Java,不知道有什么别的方法可以进行字符串比较,于是 ...

  7. LeetCode #188场周赛题解

    A题链接 给你一个目标数组 target 和一个整数 n.每次迭代,需要从 list = {1,2,3..., n} 中依序读取一个数字. 请使用下述操作来构建目标数组 target : Push:从 ...

  8. 一步步打造QQ群发消息群发器

    最近为了做公众号号推广,吸粉,然后加了几百个QQ群,感觉QQ群的群发效果还是不错的,一天能捞到100个粉丝左右,好的时候也有200个,少的时候几十个,但是由于太多的群了,手工一个个点击开来群发,几百个 ...

  9. java web程序员微信群

    关注微信公众号"程序员成长日志",回复关键字"java"扫码进群 本群主要为大家解决工作中遇到的问题遇到的问题发到群里大家集思广益平时可以瞎扯不定期红包

  10. 自动化运维工具Ansible之LNMP实践环境部署

    Ansible-实战指南-LNMP环境部署,并使用zabbix监控 主机规划 系统初始化:必要的系统初始化 基础组件包括:zabbix监控,mariadb(用于存放zabbix监控信息) 业务组件包括 ...