HTML的前世今生

　　　　　　　　　　　　　　　　　　　　HTML常用标签

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

　　三年前，我就听周围的一些工程师说，python就是一个脚本语言，没啥好学的，学JAVA吧，python能干的JAVA都能干，而且性能又好。确实如此，Python能干的活，JAVA都能干，而且效率还能实现的比Python高。而且JAVA在近几年的使用中排行榜中首居第一位。但是Python使用率是直线飙升我就不说了，这是大家有目共睹的。Python用途很广，就说我常用Python就写一些运维工具，链接数据库啊，做备份啊，当然有的大牛直接用Python写OA。为了实现python全栈，我们首先要懂一些前端的东西，比如HTMl,CSS，JavaScript等等。所以我们先从最简单的HTML开始说起，其实本篇博客就是在总结HTML这门语言的规则。接下来，就跟着正杰一起来体会一下Html的奇妙之处吧。

一.什么是HTML

 #！/usr/bin/env python

 #_*_coding:utf-8_*_

 #@author :yinzhengjie

 #blog:http://www.cnblogs.com/yinzhengjie/tag/python%E8%87%AA%E5%8A%A8%E5%8C%96%E8%BF%90%E7%BB%B4%E4%B9%8B%E8%B7%AF/

 #EMAIL:y1053419035@qq.com

 '''

 什么是HTML：

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

     2.具有规则的一门语言，可以被浏览器识别；

     3.HTML那点事：

         a>.后缀名称可以是不一样，但是他们本质上就是做模板用的，如：*.html,*.tpl,*cshtml等等。

         b>.静态网页，只要读取文件直接就会返回给客户，优点是访问速度快，没有数据库交互和逻辑交互

         c>.动态网页，动态网页的本质就是替换，就是读取到"*html"文件是，修改相应的字符串然后返回给用户就

         实现了动态网页（所以说HTML本质上就是一个模板（本质上是字符串），用于被真正的数据替换掉，返回给用户就实现了动态）。

         d>.请求周期：指的是用户请求数据，服务器讲数据传给给用户的一个过程。

         e>规则对应关系要掌握如：h1--->加大加粗。

 '''

二.HTML基础标签以及表格用法展示

 <!DOCTYPE html>       <!--Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档。html这种模式兼容浏览器是最好的-->

 <html lang="en">

     <head  name="尹正杰" age="25">  <!--标签的开头,其里面的内容（name="尹正杰"）是标签的属性,其属性可以定义多个。-->

         <meta charset="UTF-8"/>     <!--指定页面编码，我们称这种标签类型为自闭和标签，因为我们需要在标签的结尾写上“/”，为了方便我们识别标签类型。-->

         <meta http-equiv="refresh" content="30; Url=http://www.cnblogs.com/yinzhengjie/"> <!--这是做了一个界面的跳转，表示30s不运行的话就跳转到指定的URL-->

         <title>尹正杰的个人主页</title> <!--定义头部(标签)的标题-->

         <meta name="keywords" content="开发者,博客园,开发者,程序猿,程序媛,极客,编程,代码,开源,IT网站,Developer,Programmer,Coder,Geek,技术社区" /> <!--“content”定义关键字，其作用就是让浏览器通过搜索关键字时，会匹配该网站，这就是说如果你没有单独给百度钱的话，这些关键字就尤为重要啦！-->

         <meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享知识，从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。" />  <!--定义描述字符,其作用就告诉客户你的这个网站是干嘛使用的。-->

         <link rel="shortcut icon" href="https://baike.baidu.com/pic/%E9%82%93%E7%B4%AB%E6%A3%8B/6798196/0/d1a20cf431adcbef011db9bba6af2edda3cc9f66?fr=lemma&ct=single#aid=0&pic=d1a20cf431adcbef011db9bba6af2edda3cc9f66" type="image/x-icon" /> <!--定义头部图标-->

         <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <!--这个是IE的浏览器生效的规则，如果你用的是谷歌，360等浏览器的话，这行规则不生效，如果你用的是IE浏览器的话，表示用IE最新的引擎去渲染HTML-->

     </head> <!--标签的结尾，结合该标签的开头，这种标签类型我们称之为主动闭合标签。-->

     <body>

         <h1>尹正杰</h1><!--定义文件的内容，其中“h1”标签中-->

         <h2>尹正杰</h2>

         <h3>尹正杰</h3>

         <h4>尹正杰</h4>

         <h5>尹正杰</h5>

         <h6>尹正杰</h6>

         <h1>You are a good boy!</h1>

         <div style="width: 4000px">  <!--是其缩进代码的父级标签，给其定义宽度属性是200像素大小-->

                     <h1>尹正杰</h1><!--块级标签：也叫父级标签，即自己单独占了一行空间，或者说是占它父级标签的100%。作用：定义文件的内容-->

                     <h1>You are a good boy!</h1>

         </div>  <!--div的标签的结尾-->

         <p>素胚勾勒出青花笔锋浓转淡<br/>瓶身描绘的牡丹一如你初妆<br/>冉冉檀香透过窗心事我了然<br/>宣纸上走笔至此搁一半<br/>釉色渲染仕女图韵味被私藏<br/>而你嫣然的一笑如含苞待放</p> <!--其中<br/>表示换行符的意思，<p></p>表示一个段落的意思。-->

         <a>yinzhengjie</a> <!--内联标签，以a开头的标签都是内联标签，这些标签的内容时连接在一起的。:-->

         <a>2017</a>

         <a href="http://www.cnblogs.com/yinzhengjie/" target="_blank">尹正杰博客</a>  <!--a标签特有的性能，重定向，通过href属性定义需要跳转的网站，通过target="_blank"表示新打开一个标签页并打开新的URL地址-->

         <a href="#Y1">Golang第一章</a>  <!--a标签特有的性能，做锚，找ID为"Y1"的标签并跳转过去-->

         <a href="#Y2">Golang第二章</a>  <!--找ID为"Y2"的标签-->

         <a href="#Y3">Golang第三章</a>  <!--找ID为"Y3"的标签-->

         <div id="Y1" style="height:700px;background-color:antiquewhite">  <!--用id来定义标签为"Y1"（一般要具有唯一性，即尽量不要让标签的id的值相同）,用style来定义高度为700像素，颜色用background-color来定义。-->

                                                                             Golang进阶之路Day1<br/>

              Go语言官方自称,之所以开发Go 语言,是因为“近10年来开发程序之难让我们有点沮丧”。 这一定位暗示了Go语言希望取代C和Java的地位,成为最流行的通用开发语言。博客地址：http://www.cnblogs.com/yinzhengjie/p/6482675.html

         </div>

         <div id="Y2" style="height:700px;background-color:rebeccapurple;">

                                 <br/>Golang进阶之路Day2<br/>

             前者大家应该都很熟悉，因为我在上一篇（http://www.cnblogs.com/yinzhengjie/p/6482675.html）关于GO的博客中用"go build"命令编译不同的版本，但是在这里我们还是要演示一下go build的花式用法。博客地址：http://www.cnblogs.com/yinzhengjie/p/7000272.html

         </div>

         <div id="Y3" style="height:700px;background-color:brown;">

              Golang进阶之路Day3<br/>

             当然我这里只是介绍了Golang的冰山一角，对Golang感兴趣的小伙伴，可以看一下Golang官网的文档说明。毕竟官方才是最权威的，给出国内地址：https://golang.org/pkg/!博客地址：http://www.cnblogs.com/yinzhengjie/p/7043430.html

         </div>

         <!--功能最少的标签，最纯洁的易于加工的标签,即他们没有“h1”和"a"标签那么多的属性。-->

         <div>我是块标签</div>

         <span>我是内联标签</span> 　　　

         <!--列表-->

         <ul>    <!--打印字符穿前面带个小黑点-->

             <li>菜单一</li>

             <li>菜单二</li>

             <li>菜单三</li>

         </ul>

         <ol>  <!--打印字符串前面有数字标识-->

             <li>第一章</li>

             <li>第二章</li>

             <li>第三章</li>

         </ol>

         <ol>

             <dd>北京</dd>  <!--自带缩进，可以用于写新闻的标题-->

                 <dt>朝阳区</dt>

                 <dt>亦庄经济开发区</dt>

                 <dt>丰台区</dt>

                 <dt>海淀区</dt>

             <dd>河北</dd>

                 <dt>石家庄</dt>

                 <dt>保定</dt>

             <dd>陕西</dd>

                 <dt>西安</dt>

                 <dt>安康</dt>

         </ol>

     <!--表格-->

     <table border="1">   <!--定义一个表格，其属性是border="1"，表示加边框的意思。-->

         <thead>    <!--定义表头信息-->

             <tr>   <!--'tr'表示定义一行的数据，里面的内容由子标签<th></th>实现-->

                 <th>姓名</th>    <!--'th'定义同一行每一列的内容,也就是说只要带有这个标签的且在其父标签"tr"标签中就是写的同一行内容。-->

                 <th>年龄</th>

                 <td>性别</td>

             </tr>

         </thead>

         <tbody> <!--定义表格的内容-->

             <tr>  <!--'tr'表示每一行的数据，其定义的是行的操作。-->

                 <td>尹正杰</td> <!--td用来定义当前行的每一列的内容，与thead中的'th'用法相同。只不过'th’有加粗效果！-->

                 <td>25</td>

                 <td>boy</td>

             </tr>

             <tr>  <!--'tr'表示每一行的数据-->

                 <td>尹正杰</td> <!--‘<td></td>’标签定义的是列的操作-->

                 <td colspan="2">26</td>     <!--注意，'td'标签的colspan属性表示向右占锯的空间，我们给的值是“2”，就表示会从当前列往后在占一个列，共计当前行的两列空间！-->

             </tr>

             <tr>  <!--'tr'表示每一行的数据-->

                 <td>yinzhengjie</td> <!--‘<td></td>’标签定义的是列的操作-->

                 <td rowspan="2">26</td>     <!--注意，'td'标签的rowspan属性表示向下占据的空间，我们这里给的是还是“2”，即从当前行的当前列，向下扩充空一列内容。-->

             </tr>

             <tr>  <!--'tr'表示每一行的数据-->

                 <td>yinzhengjie</td> <!--‘<td></td>’标签定义的是列的操作-->

                 <td >26</td>     <!--表示这个'td'标签占两列的空间-->

             </tr>

         </tbody>

     </table>

     </body>

 </html>

三.HTML表单类的数据

　　表单类的数据主要目的是讲数据发送给后端。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>尹正杰</title>

 </head>

 <body>

     <label for="user">用户名</label> <input id="user" type="text"> <!--这个input标签和label标签就建立关联关系了，只要用户点击label的文字就会将光标投入到input标签里面哟。需要注意的是要给label标签设置for属性的值等于input标签id的值方能生效。-->

     <fieldset> <!--创建一个框，把内容都输入到该框内-->

         <legend>登录</legend> <!--在该框的最外侧（左上）的提示符-->

         <p>Q Q 账号：</p>  <!--定义一行的内容-->

         <p>用户密码：</p>

     </fieldset>

     <a href="http://www.xiaohuar.com"> <!--由于img标签只是加载图片的，无法实现跳转，因此我们可以在外面给他添加一个a标签来实行点击图片就跳转到指定的网站！-->

           <img src="尹正杰.jpg" alt="该图片加载失败，你咬我啊！" title="我是尹正杰"> <!--用img标签来定义打印一张图片在网页上，src表示文件的url(可以是绝对路径，也可以是相对路径)，

     alt表示当图片不存在或是加载失败时会提示给用户的报错信息，而title表示当你把鼠标移动到图片上时，会有提示信息，就是title的内容！-->

     </a>

     <from action="url" method="GET" enctype="multipart/form-data">  <!--接受from传来的数据，用action指定将参数传给谁（可以是一个URL地址），用method指定以哪种形式传参数，这里是以GET形式传参数，还可以用POST方法；

 【GET传参会将传来的值放在URL上发送，而POST传参会将传来的值放在请求体上发送，不会被用户在URL直接看到，但是这2种传参方式都不安全，post我们可以用自带的浏览器查看数据】一个html可以有多个from用来接收用户输入的值.用enctype="multipart/form-data"属性使得用户通过浏览器上传文件才能成功。-->

         <div>

             <span>用户名：</span>

             <input type="text" name="username" value="yinzhengjie"/>   <!--定义一个输入框，类型指定为文本类型（普通文本框），表示输入的字符串是明文显示给用户，用name定义一个变量username存放着用户输入的用户名;

 用value来定义name的默认值。-->

             <input type="email" name="em">  <!--定义邮箱格式的文本框，用于检测是否有@符号，一般适用于高版本浏览器，建议不要轻易使用，如果要验证可以用js来写，这样兼容性会比它自带的要好。-->

             <input type="text" name="sex" placeholder="请输入内容"> <!--表示会在输入框用浅色提示用户输入信息,但是placeholder也是高版本浏览器支持，低版本就够呛了，建议用js自己写。-->

         </div>

         <div>

             <span>密码：</span>

             <input type="password" name="pwd"/> <!--定义一个密码格式的文本框，类型指定为密文（密码格式文本框），表示输入的字符串是，密文显示给用户，用name定义一个变量pwd存放着用户输入的密码。-->

          <div>  <!--同一个div标签可以占一整行，定义一个单选框,需要用到关键字“radio”-->

              <input type="radio" name="yinzhengjie" value="1" checked>男 <!--type="radio"定义出一个可选的按钮,如果在同一个div标签的两个值要二选一的话，可以定义其name的值相等，这样的话就只能从中选出一个啦！checked表示默认选择的类型，所以这里如果你自己不选的话系统会默认选择你是男。-->

              <input type="radio" name="yinzhengjie" value="0">女  <!--要注意的是提交按钮是，发送这个标签的不是发送的"男"或者"女",而是value的值.也就是说你选择的是男就会把value的值（即：“1”）发送给后端，反之亦然。-->

              <div>   <!--定义一个复选框，即多选框，需要用到关键字“checkbox”-->

                 <input type="checkbox" name="habby" value="100"  />男

                 <input type="checkbox" name="habby" value="200" />女

                 <input type="checkbox" name="habby" value="300" />男女通吃

             </div>

              <div> <!--需要from有enctype="multipart/form-data"属性才能把文件成功提交。-->

                  <input type="file"  name="data" >

                  <textarea name="memo">我是默认值</textarea> <!--定义一个表格可以多行输入，默认值都在2两个标签之间-->

              </div>

          </div>

             <input type="submit" value="Submit提交" />  <!--"submit"用于定义提交内容的按钮-->

             <input type="button" value="Button提交" onclick="alert(123);" />  <!--"button"默认是什么功能都没有,用onclick="alert(123);"来定义当用户输入了123就会出现一个小的对话框，更多功能得用js来开发。我们提交数据用"submit"即可。-->

             <input type="reset" value="重置"> <!--表示清空用户的选择，恢复默认状态-->

         </div>

         <dir>

             <select name="city"> <!--定义一个下拉框-->

                 <option value="bj" selected="selected">北京</option>  <!--用selected="selected"定义默认北京北选中了，最终传至也不是传的“北京”字符串而是value所对应的值，即“bj”。-->

                 <option value="sh">上海</option>

                 <option value="sz">深圳</option>

             </select>

             <select name="city2" multiple> <!--定义多个下拉框，我们可以用关键字multiple属性来定义可以多选。-->

                 <option value="bj" selected="selected">朝阳</option> <!--定义默认北京和上海被选中，因为他们都有selected="selected"-->

                 <option value="sh" selected="selected">海淀</option>

                 <option value="sz">亦庄</option>

             </select>

         </dir>

         </from>

 </body>

 </html>


　关于HTML的更多符号学习网址：http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

HTML的前世今生的更多相关文章

【调侃】IOC前世今生
前些天,参与了公司内部小组的一次技术交流,主要是针对<IOC与AOP>,本着学而时习之的态度及积极分享的精神,我就结合一个小故事来初浅地剖析一下我眼中的“IOC前世今生”,以方便初学者能更 ...
[C#] 回眸 C# 的前世今生 - 见证 C# 6.0 的新语法特性
回眸 C# 的前世今生 - 见证 C# 6.0 的新语法特性序目前最新的版本是 C# 7.0,VS 的最新版本为 Visual Studio 2017 RC,两者都尚未进入正式阶段.C# 6.0 ...
docker4dotnet #1 – 前世今生 & 世界你好
作为一名.NET Developer,这几年看着docker的流行实在是有些眼馋.可惜的是,Docker是基于Linux环境的,眼瞧着那些 java, python, node.js, go 甚至连p ...
Atitit 智能云网络摄像机的前世今生与历史优点密码默认888888
Atitit 智能云网络摄像机的前世今生与历史优点密码默认888888 用户名admin 密码aaaaaa 网络摄像机是一种结合传统摄像机与网络技术所产生的新一代摄像机,它可以将影像通过网络传 ...
阿里开源消息中间件RocketMQ的前世今生-转自阿里中间件
昨天,我们将分布式消息中间件RocketMQ捐赠给了开源软件基金会Apache. 孵化成功后,RocketMQ或将成为国内首个互联网中间件在Apache上的顶级项目. 消息一出,本以为群众的反应是这样 ...
JavaScript的前世今生
和CSS一样,JavaScript在各浏览器下并非完全一致,它所带来的兼容性问题时常困扰着我们,以至于现在“能否处理流行浏览器的兼容性问题”成为了检验一个程序员是否合格的标准之一.了解JavaScri ...
主成分分析PCA的前世今生
这篇博客会以攻略形式介绍PCA在前世今生. 其实,主成分分析知识一种分析算法,他的前生:应用场景:后世:输出结果的去向,在网上的博客都没有详细的提示.这里,我将从应用场景开始,介绍到得出PCA结果后, ...
SpringMVC源码剖析（二）- DispatcherServlet的前世今生
上一篇文章<SpringMVC源码剖析(一)- 从抽象和接口说起>中,我介绍了一次典型的SpringMVC请求处理过程中,相继粉墨登场的各种核心类和接口.我刻意忽略了源码中的处理细节,只列 ...
（转）word2vec前世今生
word2vec 前世今生 2013年,Google开源了一款用于词向量计算的工具——word2vec,引起了工业界和学术界的关注.首先,word2vec可以在百万数量级的词典和上亿的数据集上进行高效 ...
Spring学习总结（2）——Spring IOC的前世今生
前些天,参与了公司内部小组的一次技术交流,主要是针对<IOC与AOP>,本着学而时习之的态度及积极分享的精神,我就结合一个小故事来初浅地剖析一下我眼中的“IOC前世今生”,以方便初学者能更 ...

随机推荐

CSS字体大小之em,px,百分比
首先要记住网页中常规字体的大小为16px. px是用来设置字体的绝对大小.通常为用于物理值的设置.我们在互联网上看到的常规字体大小为16px.而em是指相对于父元素的大小.1em是父元素的1倍,2em ...
(Alpha)Let's-M1后分析报告
Chronos团队Let's项目 Postmortem结果设想和目标 1. 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 在最初的用户需求和市场调研方面,团队进 ...
NSLog debug时打印 release时不打印
创建.h文件,添加以下代码 #ifdef DEBUG #define NSLog(...) NSLog(__VA_ARGS__) #else #define NSLog(...) {} #end ...
pom.xml mevan 的配置文件
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
shell脚本--权限分配
因为shell脚本内部是很多命令的集合,这些命令也许会涉及到操作某一个文件,而且shell脚本的运行,也是需要当前用户对脚本具有运行的权限,否则,会因为权限不够而失败. 首先最重要的一点:修改权限,只 ...
Docker 执行nginx以及简单进入container
1. docker run -d --name mynginx nginx 运行起来nginx镜像之后 2. docker exec -ti mynginx /bin/bash 能够进入操作界面发现 ...
Centos6.5下VNC Server配置
整个流程如下~ 1.首先,检查下本机是否安装了vnc: 提示没有安装,那么开始装吧: 2.先关闭防火墙查看防火墙状态: 关闭防火墙: 注:要切到root下 [carsonzhu@localhost ...
Java之反射举例
package reflection; import bean.User; public class ReflectionDemo { public static void main(String[] ...
codeforces515B
Drazil and His Happy Friends CodeForces - 515B Drazil有很多朋友,他们中有些人是快乐的,有些人是不快乐的. Drazil想让他的朋友变得快乐.于是, ...
mysql 创建表指定字符类型与存储引擎
DROP TABLE IF EXISTS apilog; /*==============================================================*/ /* T ...

HTML的前世今生

HTML的前世今生的更多相关文章

随机推荐

热门专题