---恢复内容开始---

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 元素创建）


 




　　


---恢复内容结束---
												


											
6、HTML5表单提交和PHP环境搭建的更多相关文章
	

    
						
  1. HTML5表单提交和PHP环境搭建
		
    HTML5表单提交相关内容和PHP环境搭建需要的软件(只备注) (2)举例介绍 (3)PHP环境搭建
    
		
    2. 
						
  2. HTML5表单提交与PHP环境搭建
		
    PHP服务器使用xampp集成套件 路径 D:\xampp\htdocs\MyServer\index.php 访问 http://localhost/MyServer/index.php 能够正常显 ...
    
		
    3. 
								
  3. HTML5 表单提交实例
		
    html <!DOCTYPE html> <html> <head> <title>表单</title> <meta charset= ...
    
		
    4. 
						
  4. Spring Boot 2 + Thymeleaf：表单字段绑定、表单提交处理
		
    Spring Boot中Thymeleaf对表单处理的一些用法:(1)使用th:field属性:进行表单字段绑定(2)使用ids对象:一般用于lable配合radio或checkbox使用(3)表单提 ...
    
		
    5. 
						
  5. HTML5：表单提交
		
    不加CSS.JavaScrips的HTML表单提交简单代码 <!DOCTYPE html> <html lang="en"> <head> &l ...
    
		
    6. 
						
  6. 实现跨浏览器html5表单验证
		
    div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float:  ...
    
		
    7. 
						
  7. jQuery html5Validate基于HTML5表单验证插件
		
    更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...
    
		
    8. 
						
  8. 第6章—渲染web视图—SpringMVC+Thymeleaf 处理表单提交
		
    SpringMVC+Thymeleaf 处理表单提交 thymleaf处理表单提交的方式和jsp有些类似,也有点不同之处,这里操作一个小Demo,并说明: 1.demo的结构图如下所示: pom.xm ...
    
		
    9. 
						
  9. HTML5表单
		
    1.placeholder placeholder="e.g. King Kong" 只需在input元素中加入placeholder属性,其属性值就会默认显示为占位符文字,输入框 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. IOS的H5页面滑动不流畅的问题：
			
    IOS的H5页面滑动不流畅的问题: -webkit-overflow-scrolling : touch; 需要滑动的是哪块区域,就在哪里加上这段代码就OK
    
			
    2. 
						
  2. [OC] Podfile 格式内容
			
    platform :ios, '8.0' target :'targetName' do pod 'Masonry', '~> 1.0.1' pod 'SDCycleScrollView', ' ...
    
			
    3. 
						
  3. linux 最小安装 需要的后续操作
			
    在centos7 最小安装后首先需要联网 设置dns vim /etc/resolv.conf dnsxiru 写入:nameserver 8.8.8.8nameserver 8.8.4.4 网络网关 ...
    
			
    4. 
						
  4. VS工具--GhostDoc
			
    一.介绍:    GhostDoc是Visual Studio的一个免费插件,可以帮助开发人员编写XML格式的注释文档.    C#中XML格式的文档注释好处多多:Visual Studio会在很多地 ...
    
			
    5. 
						
  5. this 的值到底是什么？
			
    你可能遇到过这样的 JS 面试题: var obj = { foo: function(){ console.log(this) } } var bar = obj.foo obj.foo() //  ...
    
			
    6. 
						
  6. Less环境搭建
			
    1.在页面中加入 .less 样式表的链接,并将 rel 属性设置为 "stylesheet/less": <link rel="stylesheet/less&q ...
    
			
    7. 
						
  7. CPU过高的排查方法
			
    一个应用占用CPU很高,除了确实是计算密集型应用之外,通常原因都是出现了死循环. (友情提示:本博文章欢迎转载,但请注明出处:hankchen,http://www.blogjava.net/hank ...
    
			
    8. 
						
  8. 各种文件的mime类型
			
    扩展名:abs MIME类型:audio/x-mpeg 扩展名:ai MIME类型:application/postscript 扩展名:aif MIME类型:audio/x-aiff 扩展名:aif ...
    
			
    9. 
						
  9. Pod 的安装
			
    1.如果之前已经安装过的 gem list --local | grep cocoapods 会看到如下输出: cocoapods (1.1.1)cocoapods-deintegrate (1.0. ...
    
			
    10. 
						
  10. 用流来读取文件（getline，istringstream）
			
    ifstream infile("fileanme"); 原型:getline(istream &infile, string &line); 函数说明:读取文件中 ...
    
			
    11.