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

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. 【前端】CommonJS的模块加载机制
			
    CommonJS的模块加载机制 CommonJS模块的加载机制是,输入的是被输出的值的拷贝.也就是说,一旦输出一个值,模块内部的变化就影响不到这个值. 例如: // lib.js var counte ...
    
			
    2. 
						
  2. Win10 Hyper-V 配置
			
    Win10 Hyper-V 配置 安装 Hyper 程序和功能 -> 启用和关闭windows -> Hyper-V Hyper-V 虚拟网类型 外部网络 [外网/物理机/虚拟机] 内部网 ...
    
			
    3. 
						
  3. js跳转
			
    window.location.reload(); //刷新当前页,参数保留
    
			
    4. 
						
  4. php-sql-parser sql防注入脚本
			
    <?php /** * SQL Parser from: http://code.google.com/p/php-sql-parser/ * License: New BSD */ class ...
    
			
    5. 
						
  5. iOS NSURLConnection POST异步请求封装,支持转码GBK,HTTPS等
			
    .h文件 #import <Foundation/Foundation.h> //成功的回调 typedef void(^successBlock)(id responseObj); // ...
    
			
    6. 
						
  6. 用FileInputStream读取数据，计算机如何实现将两个字节拼接成中文的？
			
    package itcast_02; import java.util.Arrays; /* * 在计算机中如何识别将连个字节转换为中文的呢? * 在计算机中中文的存储为两个字节 : * 第一个字节  ...
    
			
    7. 
						
  7. 我的Markdown笔记
			
    一片简单的Markdown笔记,共8项,基本上满足Markdown文档的编写(表格不建议用Markdown),每项上半部分是源码,下半部分是效果图片. 标题 段落 列表 强调 分割线 代码 连接 图片 ...
    
			
    8. 
						
  8. maven命令参考简要
			
    命令参考简要说明 mvn archetype:generate — 创建生成Tiny骨架工程 参数名 说明 groupId 用户项目的包目录,用户需要根据实际情况设置.比如com.abc artifa ...
    
			
    9. 
						
  9. weex 小结 -- <list>
			
    可以包含各种子组件 <refresh style="width:750;padding:30;flex-direction:row;justify-content:center;&qu ...
    
			
    10. 
						
  10. 不使用插件实现对WordPress默认编辑器的增强
			
    四处寻觅无果.无意看了一下wordpress官方的API函数.苍天有眼啊!原来,后台的编辑器可以插入很多增强功能.果断卸载掉CK and SyntaxHighlighter编辑器插件.事实上,Word ...
    
			
    11.