1.块元素

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

　　如：<h1> <p> <ul>

　　　　<!-- 块—>注释

　　　　<p>hello</p>

　　　　<h1>world</h1>

　　出来的结果是:

　　hello

　　空一行

　　world

　　hello 和world 之间有新的一行

2.HTML内联元素

　　内联元素通常不会以新行开始 如<b> <a> <img>　

<b>这是一个加重标签</b>
<a>哈哈</a>

　　结果是 　　这是一个加重标签 哈哈

　　没有 再起一行

3. HTML <div>元素

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

4.HTML<span>元素

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

　　例子：

　　代码：

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 块-->
    <title>块元素</title>
    <style type = text/css>
        span{
            color: aqua;
        }
    </style>
</head>
<body>
    <p>大家好!</p>
    <h1>的第三款了你的扣篮考虑到那看的扣篮了卡单身快乐你登陆看两三款单你卡上</h1>
    <b>这是一个加重标签</b>
    <a>哈哈</a>
    <div>
        <p>
            极客学院
        </p>
    </div>
    <div>
        <p>
           <span>
            这是一个测试结果
           </span>
            span 是一个什么样子
        </p>
    </div>
</body>
</html>

5.DIV元素布局 和 table元素布局

DIV布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div布局</title>
    <style type = "text/css">
        body{
            margin: 0px;
        }
        #container{
            width: 100%;
            height: 950px;
            background-color: lightgray;
        }
        #heading{
            width: 100%;
            height: 10%;
            background-color: aqua ;
        }
        #content_menu{
            width: 30%;
            height: 80%;
            background-color: aquamarine;
            float: left;
        }
        #content_body{
            width: 70%;
            height: 80%;
            background-color: blueviolet;
            float: left;
        }
        #footing{
            width: 100%;
            height: 10%;
            background-color: black;
            clear: both;
        }
    </style>
</head>
<body>
    <div id = "container" >
        <div id="heading">头部</div>
        <div id=" content_menu">内容菜单</div>
        <div id="content_body">内容主题</div>
        <div id="footing">底部</div>

    </div>
</body>
</html>

其中：
在html中常用于布局、定位、区分。DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。
个人感觉像OC里面的View。
在上面 container 为最外层的View 相当于OC一个ViewController的View，id = "container" 个人CO理解的是 这块View 的name 叫 container，
<div id="heading">头部</div> 理解的是 一块叫heading的view 里面 加了一个label ， label的内容显示的是 头部，
  #footing{
            width: 100%;
            height: 10%;
            background-color: black;
            clear: both;
        }
这块代码的OC理解就是拿到footing的地址，对这块View做布局和颜色等等的操作。
# 就相当于 OC 里面的 * 
footing 就相当于下面的 view（地址名字）
UIView *view = [UIView new];
CGRect frame = controller.view.bounds;
frame.size.width = controller.view.frame.size.width
frame.size.height = controller.view.frame.size.height * 0.1
view.backGroundColor = [UIColor blackColor];
得在body 使用DIV标签（标签里面声明 view），在head 里面设置 DIV标签的一些属性.
浏览器的结果是： 去掉 黑色上面 那一栏 就把2个图片综合一下



table布局：


　　


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table布局</title>
</head>
<body marginheight="0px" marginwidth="0px">
    <table width="100%" height = "950px" style="background-color: lightgray">
    <tr>
        <td colspan="3" width="100%" height="10%" style="background-color: aqua">这是头部</td>
    </tr>
        <tr>
            <td width="30%" height="80%"style="background-color: blue">
                <ul>
                    <li>iOS</li>
                    <li>HTML5</li>
                    <li>swift</li>
                </ul>

            </td>
            <td width="60%" height="80%" style="background-color: blueviolet">主题内容</td>
            <td width="20%" height="80%" style="background-color: deeppink">右菜单</td>
        </tr>
        <tr>
            <td width="100%" height="10%" colspan="3" style="background-color: darkcyan">这是底部</td>
        </tr>
    </table>

</body>
</html>


<body>里面 给一个table


<table width="100%" height = "950px" style="background-color: lightgray"> 设置tale 的 宽和高 PX就像素


100%就是全屏的宽度 * 1


<tr>是表格的一行,放在table或者body标签里面的


<td> 标签定义 HTML 表格中的标准单元格。td 元素中的文本一般显示为正常字体且左对齐。


HTML 表格有两类单元格：


  • 表头单元 - 包含头部信息（由 th 元素创建）
    • 

  • 标准单元 - 包含数据（由 td 元素创建）


 




　　
												


											
5、HTML5列表、块和布局的更多相关文章
	

    
						
  1. HTML5学习笔记<四>: 列表, 块和布局
		
    HTML列表 列表标签 标签 描述 <ol> 定义有序列表. <ul> 定义无序列表. <li> 定义列表项. <dl> 定义定义列表. <dt& ...
    
		
    2. 
						
  2. 小程序-列表块/类式ul-li格式（1）
		
    摘要 目前列表能布局出来,但是目前我个人还没解决的问题是:如果每个列表块都有详情页怎么解决呢? 1:我的效果图 2.正常的每个都能点击的html 注:上面的代码确实能够实现我的每个[menu2_vie ...
    
		
    3. 
						
  3. html5/css3响应式布局介绍及设计流程
		
    html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...
    
		
    4. 
						
  4. 第九十一节，html5+css3pc端固定布局，完成首页
		
    html5+css3pc端固定布局,完成首页 此时我们的首页就完成了 首页效果 其他页面我就不做了,原理相同,做其他页面时将头尾css分离调用即可 大纲算法 我们看看大纲算法比较清晰,说明符合规则 h ...
    
		
    5. 
						
  5. 第九十节，html5+css3pc端固定布局，底部区域，说明区域，版权区域
		
    html5+css3pc端固定布局,底部区域,说明区域,版权区域 完成: HTML代码: <!--尾部--> <footer class="wei-bu"> ...
    
		
    6. 
						
  6. 第八十九节，html5+css3pc端固定布局，热门旅游取，标题介绍区，旅游项目区
		
    html5+css3pc端固定布局,热门旅游取,标题介绍区,旅游项目区 样式: html代码: <!--主体--> <section class="zhu-ti" ...
    
		
    7. 
						
  7. 第八十八节，html5+css3pc端固定布局，搜索区，插入大图，搜索框
		
    html5+css3pc端固定布局,搜索区,插入大图,搜索框 设置一个div作为搜索区域 1.宽度为百分之百 2.最小宽度为1263,因为要考虑到手机,等小屏幕缩小后宽度会自适应,导致破坏布局,将最小 ...
    
		
    8. 
						
  8. 第八十七节，html5+css3pc端固定布局，大纲算法，section和div，结构分析
		
    html5+css3pc端固定布局,大纲算法,section和div,结构分析 一．大纲算法 在HTML5中有一个很重要的概念,叫做HTML5 大纲算法(HTML5Outliner),它的用途是为用户 ...
    
		
    9. 
						
  9. 第八十六节，html5+css3pc端固定布局,网站结构,CSS选择器,完成导航
		
    html5+css3pc端固定布局,网站结构,CSS选择器,完成导航 页面采用1280的最低宽度设计,去掉滚动条为1263像素. 项目是PC端的固定布局,会采用像素(px)单位. 网站结构语义 在没有 ...
    
		
    10. 
						
  10. 微信小程序电商实战-商品列表流式布局
		
    今天给大家分享一下微信小程序中商品列表的流式布局方式,根据文章内容操作就可以看到效果哦~~~ 流式布局概念 流式布局也叫百分比布局 把元素的宽,高,margin,padding不再用固定数值,改用百分 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. QLPreViewController的初步实用
			
    前一阵项目需要添加一个文档文件的查看功能,于是就各种找资料,一开始想实用webView,然而webView有的格式不支持,而且占内存太大了.找着找着就找到QLPreViewController.用了一 ...
    
			
    2. 
						
  2. SQL 已有数据的表创建标识列
			
    针对已有数据的表创建标识列: ,) constraint FID_1 primary key(FID)
    
			
    3. 
						
  3. centos7 docker  zookeeper
			
    docker run --name=zookeepertmp -i -t centos7/jdk7 /bin/bash cd /home wget http://apache.fayea.com/zo ...
    
			
    4. 
						
  4. .net 网站开发学习资源
			
    慕课网 前端基础学习 http://www.imooc.com/course/list?c=fe 了解需求 例子之一 http://wenku.it168.com/d_000517899.shtml  ...
    
			
    5. 
						
  5. 【转载】动态新增svg节点
			
    原文地址:http://blog.csdn.net/tomatomas/article/details/50442497 原文作者:番茄大圣 创建svg节点时,要使用createElementNS函数 ...
    
			
    6. 
						
  6. 【Extjs】large按钮，图片全部覆盖按钮
			
    在网上找了一些办法,不太好用,还是该Extjs的样式来的最快... 将下列css加到Extjs所用页面. .x-btn-default-large-mc { padding-bottom:0px !i ...
    
			
    7. 
						
  7. Linux提权基础
			
    英文原文: Basic Linux Privilege Escalation 在开始之前,我想指出 - 我不是专家. 据我所知,在这个巨大的领域没有一个“魔法”的答案. 这只是我的发现,写出来,共享而 ...
    
			
    8. 
						
  8. [原创] Win7全自动精简批处理_绝对原创，绝对给力_感谢无忧给了我一年的潜水
			
    2011htpcfans发表于 2012-5-5 http://bbs.wuyou.net/forum.php?mod=viewthread&tid=210043 @echo 全自动/手动精简 ...
    
			
    9. 
						
  9. 从resfful API设计到加密算法
			
    众所周知,SOAP 是基于XML的webservice协议,传的数据都是xml格式的,而当下resftul设计比较火,因为快效率高,但是安全性就不及SOAP, SOAP定义了xml-security的 ...
    
			
    10. 
						
  10. 自定义UI集成微信、QQ、微博分享功能
			
    目前社会化分享是一个非常常见的功能,通过阅读官方文档可以进行对应平台的分享.在项目中原本有微信的分享,后来需要集成QQ和微博的分享,于是想着用ShareSDK,在使用的过程中发现ShareSDK中的w ...
    
			
    11.