HTML（hyper text markup language）：

超文本标记语言，标准通用标记语言下的一个应用。

超文本就是指页面内可以包含图片、连接、音乐、程序等非文字元素。

超文本标记语言的结构包括“头”部分（head）和“主体”部分。其中“头”部提供关羽网页的信息，“主体”部分提供网页的具体内容。

1、定义：

超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准。超文本标记语言通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本中添加标记符，可以告诉浏览器如何显示其中的内容（如文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编织者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因为可能会有不同的显示效果。

2、基本组成：

  1. <!DOCTYPE html>  <!--文档类型；后面参数意义是浏览器按什么标准来解释网页。-->
  2.  
  3. <html lang="en">
  4. <head>
  5.     <!-- html编码类型-->
  6.     <meta charset="UTF-8">
  7.     <!--刷新与跳转-->
  8.     <!--<meta http-equiv="Refresh" content="2">-->
  9.     <!--<meta http-equiv="Refresh" content="3; Url=http://www.163.com">-->
  10.     <!--关键字与描述-->
  11.     <meta name="keywords" content="fuck">
  12.     <meta name="description" content="fuck you everyday">
  13.     <!--标头的图标-->
  14.     <!--<link rel="shortcut icon" href="1.png"/>-->
  15.     <link rel="stylesheet" type="text/css" href="1.png">
  16.     <title>标头</title>
  17. </head>
  18. <!-- 下面部分是浏览器呈现的内容-->
  19. <body>
  20. </body>

基本信息

3、标签、样式、等：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <!--刷新与跳转-->
  6.     <!--<meta http-equiv="Refresh" content="2">-->
  7.     <!--<meta http-equiv="Refresh" content="3; Url=http://www.163.com">-->
  8.     <!--关键字与描述-->
  9.     <meta name="keywords" content="fuck">
  10.     <meta name="description" content="fuck you everyday">
  11.     <!--标头的图标-->
  12.     <!--<link rel="shortcut icon" href="1.png"/>-->
  13.     <link rel="stylesheet" type="text/css" href="1.png">
  14.     <title>标头</title>
  15. </head>
  16. <body>
  17.     <!--特殊符号，大于、空格、小于-->
  18.     <a href="http://www.baidu.com">一人&nbsp;&lt;饮酒&gt;醉</a>
  19.     <p>你好，换行吧<br/> ok,换完了</p>
  20.     <p>p标签用来做段落</p>
  21.     <h1>我是h1</h1>
  22.     <h6>我是h6</h6>
  23.     <span>我是span标签1</span>
  24.     <span>我是span标签2，默认是白板的</span>
  25.     <div>我是div标签，默认我是白板的</div>
  26.     <form action="http://localhost:6969/index" method="get">
  27.         <input type="text" name="user"/>
  28.         <input type="password" name="pwd"/>
  29.         <input type="button" value="button"/>
  30.         <input type="submit" value="submit"/>
  31.     </form>
  32.     <form action="https://www.sogou.com/web">
  33.         <input type="text" name="query" value="我是默认值"/>
  34.         <input type="submit" name="搜索" />
  35.     </form>
  36.     <form>
  37.         <div>
  38.             <p>性别：</p>
  39.             男<input type="radio" name="gender" value="M" checked="checked"/>
  40.             女<input type="radio" name="gender" value="F"/>
  41.             <p>爱好：</p>
  42.             撩妹<input type="checkbox" name="hobby" value="1" checked="checked"/>
  43.             健身<input type="checkbox" name="hobby" value="2" checked="checked"/>
  44.             上网<input type="checkbox" name="hobby" value="3"/>
  45.         </div>
  46.         <p>备注:
  47.             <textarea name="ps">默认值</textarea>
  48.         </p>
  49.  
  50.         <input type="submit" value="提交"/>
  51.         <input type="reset" value="重置"/>
  52.     </form>
  53.     <form enctype="multipart/form-data">
  54.         <p>上传照片</p>
  55.         <input type="file" name="fname"/>
  56.         <input type="submit" value="提交"/>
  57.     </form>
  58. </body>
  59. </html>

基本设置

  1. #!/usr/bin/env python
  2. # -*- coding:utf-8 -*-
  3. # Author:Tong Cable
  4.  
  5. import tornado.web
  6. import tornado.ioloop
  7.  
  8. class MainHandler(tornado.web.RequestHandler):
  9.     def get(self):
  10.         print('')
  11.         u = self.get_argument('user')
  12.         p = self.get_argument('pwd')
  13.         if u == 'cab' and p == '':
  14.             self.write('登陆成功')
  15.         else:
  16.             self.write('登录失败')
  17.  
  18.     def post(self, *args, **kwargs):
  19.         u = self.get_argument('user')
  20.         p = self.get_argument('pwd')
  21.         print(u,p)
  22.         if u == 'cab' and p == '':
  23.             self.write('恭喜你，登陆成功')
  24.         else:
  25.             self.write('用户名或密码错误')
  26.  
  27. application = tornado.web.Application([
  28.     (r"/index", MainHandler),
  29. ])
  30. if __name__ == '__main__':
  31.     application.listen(6969)
  32.     tornado.ioloop.IOLoop.instance().start()

server

4、select及a标签等：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <div>
  9.         <select>
  10.             <option value="1" >北京</option>
  11.             <option value="2">山东</option>
  12.             <option value="3" selected="selected">上海</option>
  13.             <option value="4">深圳</option>
  14.         </select>
  15.     </div>
  16.     <hr/>
  17.     <div>
  18.         <select size="5" multiple="multiple">
  19.             <option value="1" >北京</option>
  20.             <option value="2">山东</option>
  21.             <option value="3" selected="selected">上海</option>
  22.             <option value="4">台湾</option>
  23.             <option value="5" >西藏</option>
  24.             <option value="6">新疆</option>
  25.             <option value="7" selected="selected">广东</option>
  26.             <option value="8">海南</option>
  27.         </select>
  28.     </div>
  29.     <div>
  30.         <select size="5" multiple="multiple">
  31.             <optgroup label="北京">
  32.                 <option value="1" >朝阳</option>
  33.                 <option value="2">丰台</option>
  34.                 <option value="3" >昌平</option>
  35.                 <option value="4">大兴</option>
  36.             </optgroup>
  37.             <optgroup label="山东">
  38.                 <option value="5" >德州</option>
  39.                 <option value="6">济南</option>
  40.                 <option value="7" selected="selected">青岛</option>
  41.                 <option value="8">淄博</option>
  42.             </optgroup>
  43.             <optgroup label="黑龙江">
  44.                 <option value="5" >哈尔滨</option>
  45.                 <option value="6">鸡西</option>
  46.                 <option value="7" selected="selected">北安</option>
  47.             </optgroup>
  48.         </select>
  49.     </div>
  50.     <hr/>
  51.     <a href="#i1">第一章</a>
  52.     <a href="#i2">第二章</a>
  53.     <a href="#i3">第三章</a>
  54.     <div id="i1" style="height: 600px;">第一章内容</div>
  55.     <div id="i2" style="height: 500px">第二章内容</div>
  56.     <div id="i3" style="height: 400px;">第三章内容</div>
  57. </body>
  58. </html>

view

5、图片、超链接、表格等：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <a href="http://www.sogou.com/web?query=麻生希">
  9.     <img src="2.jpg" title="麻生希" style="height: 300px; width: 200px;" alt="美女"/>
  10. </a>
  11. <ul>
  12.     <li>上边那是谁啊？</li>
  13.     <li>已经过时了...</li>
  14.     <li>多么老了她都!</li>
  15. </ul>
  16. <ol>
  17.     <li>那是90年代的事情了</li>
  18.     <li>那天偶然间看到的</li>
  19.     <li>还有桃谷</li>
  20. </ol>
  21. <dl>
  22.     <dt>我是小明，今年12岁</dt>
  23.     <dd>老司机们谈论嘛呢</dd>
  24.     <dd>老司机带带我</dd>
  25.     <dd>老司机发车了，赶紧上车</dd>
  26.     <dt>我是老王，今年96岁</dt>
  27.     <dd>小明们，坐好了</dd>
  28.     <dd>走咯。。。</dd>
  29. </dl>
  30. <table border="1">
  31.     <thead>
  32.         <tr>
  33.             <td>主机名</td>
  34.             <td>端口</td>
  35.             <td>操作</td>
  36.         </tr>
  37.     </thead>
  38.     <tbody>
  39.         <tr>
  40.             <td>10.1.2.19</td>
  41.             <td>8080</td>
  42.             <td>
  43.                 <a href="first.html">查看</a>
  44.             </td>
  45.         </tr>
  46.         <tr>
  47.             <td>10.233.12.128</td>
  48.             <td>9000</td>
  49.             <td>
  50.                 <a href="2.jpg">调试</a>
  51.             </td>
  52.         </tr>
  53.          <tr>
  54.             <td rowspan="2">10.233.12.128</td>
  55.             <td colspan="2" >9000</td>
  56.         </tr>
  57.          <tr>
  58.             <td>9000</td>
  59.             <td>
  60.                 <a href="1.png">调试</a>
  61.             </td>
  62.         </tr>
  63.     </tbody>
  64. </table>
  65. <br/>
  66.     <!--通过lable的for与input的id进行关联，获取光标，即点击文字就可获取光标？？-->
  67.     <label for="username">用户名</label>
  68.     <input id="username" type="text" name="user"/>
  69.     <br/>
  70.     <fieldset>
  71.         <legend>登陆</legend>
  72.         <lable for="user">用户名：</lable>
  73.         <input id="user" type="text" name="use"/>
  74.         <br/>
  75.         <label for="pwd">密 &nbsp;码：&nbsp;</label>
  76.         <input id="pwd" type="password" name="passwd"/>
  77.     </fieldset>
  78. </body>
  79. </html>

更多：http://www.cnblogs.com/evilliu/p/5750539.html

html操作的更多相关文章

  1. 关于DOM的操作以及性能优化问题-重绘重排

     写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...

  2. Sql Server系列：分区表操作

    1. 分区表简介 分区表在逻辑上是一个表,而物理上是多个表.从用户角度来看,分区表和普通表是一样的.使用分区表的主要目的是为改善大型表以及具有多个访问模式的表的可伸缩性和可管理性. 分区表是把数据按设 ...

  3. C# ini文件操作【源码下载】

    介绍C#如何对ini文件进行读写操作,C#可以通过调用[kernel32.dll]文件中的 WritePrivateProfileString()和GetPrivateProfileString()函 ...

  4. js学习笔记：操作iframe

    iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...

  5. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

  6. ASP.NET Aries 入门开发教程7：DataGrid的行操作（主键操作区）

    前言: 抓紧勤奋,再接再励,预计共10篇来结束这个系列. 上一篇介绍:ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑 本篇介绍主键操作区相关内容. 1:什么时候有默认的 ...

  7. 如何在高并发环境下设计出无锁的数据库操作（Java版本）

    一个在线2k的游戏,每秒钟并发都吓死人.传统的hibernate直接插库基本上是不可行的.我就一步步推导出一个无锁的数据库操作. 1. 并发中如何无锁. 一个很简单的思路,把并发转化成为单线程.Jav ...

  8. 【翻译】MongoDB指南/CRUD操作（四）

    [原文地址]https://docs.mongodb.com/manual/ CRUD操作(四) 1 查询方案(Query Plans) MongoDB 查询优化程序处理查询并且针对给定可利用的索引选 ...

  9. 【翻译】MongoDB指南/CRUD操作（三）

    [原文地址]https://docs.mongodb.com/manual/ CRUD操作(三) 主要内容: 原子性和事务(Atomicity and Transactions),读隔离.一致性和新近 ...

  10. 【翻译】MongoDB指南/CRUD操作（二）

    [原文地址]https://docs.mongodb.com/manual/ MongoDB CRUD操作(二) 主要内容: 更新文档,删除文档,批量写操作,SQL与MongoDB映射图,读隔离(读关 ...

随机推荐

  1. Angular2 获取当前点击的元素

    <a (click)="onClick($event)"></a> onClick($event){ console.log($event.target); ...

  2. Spring JdbcTemplate详解

    为了使 JDBC 更加易于使用,Spring 在 JDBCAPI 上定义了一个抽象层, 以此建立一个JDBC存取框架. 作为 SpringJDBC 框架的核心, JDBC 模板的设计目的是为不同类型的 ...

  3. tap 和click 事件区别

    clike事件和 Zepto.js 中tap的区别 首先介绍下Zepto: 最初是作为移动端开发的库,但是却可以作为JQuery轻量级的替代品,因为API和JQuery相似,而文件更小. 介绍下tap ...

  4. 微信小程序学习资料整理

    基础篇 官网: https://mp.weixin.qq.com/cgi-bin/wx 微信小程序: 小程序是一种新的开放能力,开发者可以快速地开发一个小程序.小程序可以在微信内被便捷地获取和传播,同 ...

  5. sql count执行速度测试

    要对数据库里面的数据数量进行统计使用,数据库的大概有2000w多的数据.数据库是mysql5.6 用的是远程连接测试 ELECT COUNT(*) 执行语句: select count( *) fro ...

  6. 手把手教你写一个java的orm（二）

    创建映射关系 ​ 想要实现一个orm的功能,我觉得就是要将class和数据库中的表创建映射关系.把class的名称和表的名称,class属性名称和表的字段名称,属性类型与表的字段类型一一对应起来.可以 ...

  7. Windows标准控件

    学习目的 学习创建, 使用Windows标准控件(按钮, 滚动条, 静态控件, 列表框, 编辑框, 组合框); 学习使用子窗口控件操作函数(EnableWindow, MoveWindow, SetW ...

  8. html.div

    使用div构造简单的信息图片 html: <!DOCTYPE html><html><head><meta charset="utf-8" ...

  9. Ubuntu 添加删除用户 How to Add and Delete Users on Ubuntu 16.04

      Introduction One of the most basic tasks that you should know how to do on a fresh Linux server is ...

  10. strConnection连接Access数据库

    string strConnection = "Provider=Microsoft.ACE.OLEDB.12.0;";            strConnection += @ ...