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. URL中的保留和不安全字符
			
    书写URL时要使用US-ASCII字符集可以显示的字符. http://www.google.com 如果需要在URL中使用不属于此字符集的字符,就要使用特殊的符号对该字符进行编码. 如:最常使用的空 ...
    
			
    2. 
						
  2. easyui validatebox 验证类型DEMO
			
    <script> $.extend($.fn.validatebox.defaults.rules, { idcard: {// 验证身份证 validator: function (va ...
    
			
    3. 
						
  3. 【前端】【转】JS跨域问题总结
			
    详情见原博客:详解js跨域问题 概念:只要协议.域名.端口有任何一个不同,都被当作是不同的域. 跨域资源共享(CORS) CORS(Cross-Origin Resource Sharing)跨域资源 ...
    
			
    4. 
						
  4. linux的三种安装软件包的方式（小白的学习之旅）
			
    tar包,整个安装过程可以分为以下几步: 1) 取得应用软件:通过下载.购买光盘的方法获得: 2) 解压缩文件:一般tar包,都会再做一次压缩,如gzip.bz2等,所以你需要先解压.如果是最常见的g ...
    
			
    5. 
						
  5. OpenLayers元素选择工具
			
    OpenLayers的selector工具相信挺多人都没有用过,其实这个工具用处还是不少的.比如完成元素查询时,需要实现图属性联动,使用这个工具很方便.最近做项目时也使用到这个工具,使用起来确实挺方便 ...
    
			
    6. 
						
  6. td在relative模式下，IE9不显示border
			
    方法一 .thisTd {    background-clip: padding-box;     position:relative; } 方法二 .thisTd {   z-index=-1;  ...
    
			
    7. 
						
  7. 关于 jquery和js获取宽度时只能取整数，取不到小数点
			
    最近在改版自已的一个网站的时候,遇到了一个问题. 用jquery的width()函数获取元素宽度的时候,返回得到的是整数,而不是小数. 如下图,谷歌上显示的宽度为1078.89px 而我用控制台输出了 ...
    
			
    8. 
						
  8. 使用Yii框架完整搭建网站流程入门
			
    下载地址: http://www.yiiframework.com/ http://www.yiichina.com/ 由美籍华人薛强研究而出, Yii 这个名字(读作易(Yee))代表 简单(eas ...
    
			
    9. 
						
  9. （原创）QuartusII设置虚拟引脚（Virtual Pin）
			
    方法一: 在Quartus II中Assignments->Assignment Editor, 在Category栏选择logic options, 到列表中To列下添加要设置的引脚接口,如果 ...
    
			
    10. 
						
  10. miniui
			
    //android提供了一个库minui用于简单的UI输出,源码在bootable/recovery/minui中, //gr_init()和gr_font_size()为minui库提供方法,gr_ ...
    
			
    11.