1.html初识

  • 超文本标记语言（Hypertext Markup Language，HTML）通过标签语言来标记要显示的网页中的各个部分。一套规则，浏览器认识的规则
  • 浏览器按顺序渲染网页文件，然后根据标记符解释和显示内容。但需要注意的是，对于不同的浏览器，对同一标签可能会有不完全相同的解释（兼容性）
  • 静态网页文件扩展名：.html 或 .htm

　　1.1 html不是什么?

　　HTML 不是一种编程语言，而是一种标记语言 (markup language)
　　HTML 使用标记标签来描述网页

　　1.2  html结构

  • <!DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档
  • <html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档，在它们之间是文档的头部<head>和主体<body>。
  • <head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。
  • <title></title>定义网页标题，在浏览器标题栏显示。
  • <body></body>之间的文本是可见的网页主体内容

　　1.3 html标签格式

2. html 结构

  1. <!DOCTYPE HTML>
  2. <html>
  3.  
  4. <head>
  5. 	<!--1.设置编码集-->
  6. 	<meta charset="utf-8" />
  7. 	<!--2.设置网站标题-->
  8. 	<title>这是前端内容</title>
  9. 	<!--3.设置网站图标   http://www.bitbug.net/  在线制作ico-->
  10. 	<link href="https://csdnimg.cn/public/favicon.ico" rel="SHORTCUT ICON" />
  11. 	<!--4.设置搜索引擎抓取页面的关键字-->
  12. 	<meta name="keywords" content="html在线学习,css在线学习,js在线学习" />
  13. 	<!--5.设置搜索引擎抓取页面的网站描述-->
  14. 	<meta name="description" content="在线学习html , css , js" />
  15. 	<!--6.设置几秒之后页面跳转-->
  16. 	<!--
  17. 	<meta http-equiv="refresh" content="3;url=http://www.baidu.com" />
  18. 	-->
  19. </head>
  20.  
  21. <body>
  22. 	<!--字符实体
  23. 		<  <=>  <  小于
  24. 		>  <=>  >  大于
  25. 		&nbsp 代表的是空格
  26. 	-->
  27. 	5<d 8>3
  28. 	5<d            8 >3
  29.  
  30. 	<!--  <br />代表换行 -->
  31. 	<br />
  32. 	11122233
  33. 	<br />
  34. 	44455566
  35.  
  36. 	<!--  <hr />代表分割线 -->
  37. 	 <hr />
  38. 	 7788
  39. 		<hr />
  40.  
  41. 	<!--  <pre />格式化预览标签  (所有想要原型化输出的内容放到该标签中) -->
  42. 	<pre>
  43.     333
  44.    +444
  45.     </pre>
  46. </body>
  47.  
  48. </html>

3. 常用标签

  1. <!-- 常用标签 -->
  2. <!DOCTYPE HTML>
  3. <html>
  4. <head>
  5. <title>常用标签</title>
  6. </head>
  7. <body>
  8. 	<h1>一级标签</h1>
  9. 	<h2>二级标签</h2>
  10. 	<h3>三级标签</h3>
  11. 	<h4>四级标签</h4>
  12. 	<h5>五级标签</h5>
  13. 	<h6>六级标签</h6>
  14. 	标签标签标签
  15.  
  16. 	<!-- 逻辑强调 w3c 带有语义上的强调  -->
  17. 	<strong>你好</strong> <!--粗体-->
  18. 	<em>世界</em>		  <!--斜体-->
  19.  
  20. 	<!-- 物理强调 (只是单纯展示效果,没有语义化的概念) -->
  21. 	<b>你好2</b>
  22. 	<i>世界2</i>
  23.  
  24. 	<hr />
  25. 	h<sub>2</sub>o     <!-- h2o -->
  26. 	x<sup>2</sup>=100  <!-- x2 = 100 -->
  27.  
  28. 	<hr />
  29. 	<p>这是一段话</p>   		   <!-- 段落标签 -->
  30. 	<p>这是二段话</p>   		   <!-- 段落标签 -->
  31. </body>
  32.  
  33. </html>

4. 块状和行内标签

  1. <!DOCTYPE HTML>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8" />
  5. 		<title> 块状和行内标签 </title>
  6. 	</head>
  7. 	<body>
  8. 		<!--
  9. 		span 和 div 用来划分 网页内容 和 网页结构 的无语义化标签
  10. 			div  是块状元素  独占一行    , 可以直接设置宽高
  11. 			span 是行内元素  不能独占一行,不能直接设置宽高
  12. 		px 是像素单位,1px 表示一个像素点
  13. 		-->
  14. 		<span style="color:green;background-color:yellow;">
  15. 			张俊文<span style="color:red">黄启新</span>
  16. 		</span>
  17.  
  18. 		<div style="width:400px;height:400px;background-color:red;" >我是网页的头部</div>
  19. 		<div style="width:400px;height:400px;background-color:blue;">我是网页的内容</div>
  20. 		<div style="width:400px;height:400px;background-color:green;">我是网页的脚部</div>
  21. 	</body>
  22. </html>

5. 列表标签

  1. <!DOCTYPE HTML>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8" />
  5. 		<title>列表标签</title>
  6. 	</head>
  7. 	<body>
  8. 		<!-- 无序列表 (最为常用) -->
  9. 		<ul type="circle"> <!-- type = square 方块 circle 空心圆-->
  10. 			<li>姜子牙</li>
  11. 			<li>我和的家乡</li>
  12. 			<li>夺冠</li>
  13. 			<li>唐人街探案3</li>
  14. 		</ul>
  15.  
  16. 		<!-- 有序列表-->
  17. 		<ol start=5 type="i"> <!-- start=5 起始值  type="i" 代表指定罗马数字-->
  18. 			<li>姜子牙</li>
  19. 			<li>我和的家乡</li>
  20. 			<li>夺冠</li>
  21. 			<li>唐人街探案3</li>
  22. 		</ol>
  23.  
  24. 		<!-- 定义列表-->
  25. 		<dl>
  26. 			<!--列表标题用dt-->
  27. 			<dt>女生曾经说过的谎言</dt>
  28. 			<!--列表内容-->
  29. 			<dd>不要</dd>
  30. 			<dd>你真坏</dd>
  31. 			<dd>你是个好人</dd>
  32. 			<dd>给你介绍个特别漂亮的姑娘</dd>
  33. 		</dl>
  34. 	</body>
  35. </html>

6. 超链接标签

  1. <!DOCTYPE HTML>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8" />
  5. 		<title>超链接标签</title>
  6. 	</head>
  7. 	<body>
  8.  
  9. 		<!--
  10. 			.  代表相对当前路径
  11. 			.. 代表上一级的路径
  12. 			_self : 指定跳转的方式是当前窗口
  13. 			_blank: 指定跳转的方式是新窗口
  14. 		-->
  15.  
  16. 		<h1>超链接标签</h1>
  17. 		<a href="./3.html" target="_self" > 点击我1 </a>
  18. 		<hr />
  19. 		<a href="./3.html" target="_blank" > 点击我2 </a>
  20. 		<hr />
  21. 		<!--显示传参-->
  22. 		<a href="./3.html?a=1&b=2&c=3" target="_blank" > 点击我3 </a>
  23. 		<hr />
  24. 		<!--刷新原页面-->
  25. 		<a href="">点击我4</a>
  26. 		<hr />
  27. 		<!--原页面没有刷新-->
  28. 		<a href="#">点击我5</a>
  29. 		<hr />
  30. 		<!--把文件直接写在a链接中实现下载操作-->
  31. 		<a href="./W3CSchool.chm">点击我6</a>
  32. 	</body>
  33. </html>

7. 跳锚点

  1. <!DOCTYPE HTML>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8" />
  5. 		<title>跳锚点</title>
  6. 	</head>
  7. 	<body>
  8. 		<h1>跳锚点练习</h1>
  9. 		<ul>
  10. 			<li><a href="#a1">第一章</a></li>
  11. 			<li><a href="#a2">第二章</a></li>
  12. 			<li><a href="#a3">第三章</a></li>
  13. 		</ul>
  14.  
  15. 		<a id="a1" >第一章</a>
  16. 		<p style="width:400px;height:1000px;background-color:pink;"> 孙悟空怒捶红孩儿  </p>
  17.  
  18. 		<a id="a2">第二章</a>
  19. 		<p style="width:400px;height:1000px;background-color:green;"> 孙悟空怒捶红孩儿  </p>
  20.  
  21. 		<a id="a3">第三章</a>
  22. 		<p style="width:400px;height:1000px;background-color:blue;"> 孙悟空怒捶红孩儿  </p>
  23.  
  24. 		<a href="#">回到顶部</a>
  25. 		<p style="height:1000px;"></p>
  26. 	</body>
  27. </html>

8. 图片标签

  1. <!DOCTYPE HTML>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8" />
  5. 		<title>图片标签</title>
  6. 	</head>
  7. 	<body>
  8. 		<!--
  9. 			img 属于行内块状元素 , 不能独占一行, 但可以设置宽高
  10. 			如果想要等比例缩放,只调节width即可,如果同时调整宽高有可能图片失真
  11. 			width  宽
  12. 			height 高
  13. 		-->
  14. 		<img src="./zhouxingchi.jpg" width="260px" height="260px"  title="周星驰" />
  15. 		<a href="https://baike.baidu.com/item/%E5%91%A8%E6%98%9F%E9%A9%B0/169917?fr=aladdin"><img src="./zhouxingchi.jpg" width="260px" height="260px"  title="周星驰" /></a>
  16. 	</body>
  17. </html>

　9. 表格标签

  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>表格标签 table </title>
  6.     </head>
  7.     <body>
  8.         <!--
  9.             tr 表示一行
  10.             th 表示一个单元格(可以将文字加粗,表达标题)
  11.             td 表示一个单元格            
  12.  
  13.             colspan : 横向合并
  14.             rowspan : 纵向合并
  15.         -->
  16.         <table border="1" width="1000px">
  17.             <!--表格头thead-->
  18.             <thead style="background-color:red;">
  19.                 <tr>
  20.                     <th>姓名</th>
  21.                     <th>年龄</th>
  22.                     <th>薪水</th>
  23.                     <th>部门</th>
  24.                 </tr>
  25.             </thead>
  26.  
  27.             <!--表格体tbody-->
  28.             <tbody style="background-color:blue;">
  29.                 <tr>
  30.                     <td>王文</td>
  31.                     <td>18</td>
  32.                     <td>20</td>
  33.                     <td>python</td>
  34.                 </tr>
  35.  
  36.                 <tr>
  37.                     <td>陈勇</td>
  38.                     <td>19</td>
  39.                     <td>30</td>
  40.                     <td>运维</td>
  41.                 </tr>
  42.  
  43.                 <tr>
  44.                     <td>黄金生</td>
  45.                     <td>20</td>
  46.                     <td>40</td>
  47.                     <td>网络</td>
  48.                 </tr>
  49.             </tbody>
  50.  
  51.             <!--表格脚tfoot-->
  52.             <tfoot style="background-color:yellow;">
  53.                 <tr>
  54.                     <td>黄启新</td>
  55.                     <td>98</td>
  56.                     <td>50</td>
  57.                     <td>高管</td>
  58.                 </tr>
  59.             </tfoot>
  60.  
  61.         </table>
  62.  
  63.         <!--对单元格进行合并 -->
  64.  
  65.         <table border="1" width="1000px">
  66.             <!--表格头thead-->
  67.             <thead style="background-color:red;">
  68.                 <tr>
  69.                     <th>姓名</th>
  70.                     <th>年龄</th>
  71.                     <th>薪水</th>
  72.                     <th>部门</th>
  73.                 </tr>
  74.             </thead>
  75.  
  76.             <!--表格体tbody-->
  77.             <tbody style="background-color:green;">
  78.                 <tr>
  79.                     <td colspan="2"> 左右合并 </td>
  80.  
  81.                     <td>20</td>
  82.                     <td rowspan="4">python</td>
  83.                 </tr>
  84.  
  85.                 <tr>
  86.                     <td>陈勇</td>
  87.                     <td>19</td>
  88.                     <td>30</td>
  89.  
  90.                 </tr>
  91.  
  92.                 <tr>
  93.                     <td>黄金生</td>
  94.                     <td>20</td>
  95.                     <td>40</td>
  96.  
  97.                 </tr>
  98.  
  99.                 <tr>
  100.                     <td>黄启新</td>
  101.                     <td>98</td>
  102.                     <td>50</td>
  103.  
  104.                 </tr>
  105.             </tbody>
  106.  
  107.             <!--表格脚tfoot-->
  108.             <tfoot style="background-color:yellow;">
  109.                 <tr>
  110.                     <td colspan="4">横向合并</td>
  111.                 </tr>
  112.             </tfoot>
  113.  
  114.         </table>
  115.  
  116.     </body>
  117. </html>

10. table属性

  1. <!DOCTYPE HTML>
  2. <html>
  3.  
  4. <head>
  5. 	<meta charset="utf-8" />
  6. 	<title> table 的方向属性 </title>
  7. </head>
  8.  
  9. <body>
  10. 	<!--
  11. 		cellspacing td与td之间的间距(单元格之间的间距)
  12. 		cellpadding td与其中内容之间的间距
  13. 		align   水平对齐 left center right
  14. 		valign  垂直对齐 top  middle bottom
  15. 	-->
  16.  
  17. 	<table border = "1" width = "400px" height = "200px" cellspacing = "0" cellpadding="0">
  18.  
  19. 		<tr align="right"  valign="top">
  20. 			<td>张三</td>
  21. 			<td>90</td>
  22. 			<td>100万</td>
  23. 			<td>辽宁</td>
  24. 		</tr>
  25.  
  26. 		<tr align="left" valign = "bottom">
  27. 			<td>李四</td>
  28. 			<td>90</td>
  29. 			<td>100万</td>
  30. 			<td>丹东</td>
  31. 		</tr>
  32.  
  33. 		<tr align="center"  valign="middle">
  34. 			<td>王五</td>
  35. 			<td align="center" valign="bottom">90</td>
  36. 			<td>100万</td>
  37. 			<td>广东</td>
  38. 		</tr>
  39.  
  40. 	</table>
  41.  
  42. </body>
  43.  
  44. </html>

　11. iframe子窗口

  1. <!DOCTYPE HTML>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8" />
  6.     <title>iframe 子窗口 </title>
  7. </head>
  8.  
  9. <body>
  10.     <iframe src="" name="zichuangkou"  width="800px" height="500px"></iframe>
  11.  
  12.     <hr />
  13.     <a href="http://www.baidu.com" target="zichuangkou" > 点击我跳转百度 </a>
  14.     <hr />
  15.     <a href="9.html" target="zichuangkou" > 点击我跳转9.html </a>
  16.     <hr />
  17.     <a href="10.html" target="zichuangkou" > 点击我跳转10.html </a>
  18. </body>
  19.  
  20. </html>

12. 音视频标签

  1. <!DOCTYPE HTML>
  2. <html>
  3.  
  4. <head>
  5. 	<meta charset="utf-8" />
  6. 	<title>音视频标签</title>
  7. </head>
  8.  
  9. <body>
  10. 	<!-- audio -->
  11. 	<video src="ceshi1.mp4" controls = "controls">
  12. 	抱歉,您的浏览器不支持...视频播放..
  13. 	</video>
  14.  
  15. 	<audio src="ceshi2.mp3" controls = "controls">
  16. 	抱歉,您的浏览器不支持...音频播放..
  17. 	</audio>
  18. </body>
  19.  
  20. </html>

13. 表达操作

　　【模拟服务器代码】

  1. from flask import Flask , render_template , request , redirect
  2. """安装flask  pip3 install flask"""
  3. print(__name__)
  4.  
  5. # (1) 实例化一个flask的应用对象
  6. app = Flask(__name__)
  7.  
  8. # (2) 定义路由(url)
  9. """ The return type must be a string, dict, tuple"""
  10. @app.route("/")
  11. def index():
  12.     return "<h1 style='color:red'>服务器运转正常~ flask已经启动~</h1>"
  13.     # return 1233 error
  14.  
  15. @app.route('/ceshi1')
  16. def func():
  17.     # 获取访问的方法(get , post)
  18.     print(request.method  ,  "<====================>") # GET
  19.     strvar = """
  20. <!DOCTYPE HTML>
  21. <html>
  22.  
  23. <head>
  24.     <meta charset="utf-8" />
  25. </head>
  26.  
  27. <body>
  28.  
  29.     <!--
  30.     action 表示吧数据提交给哪个地址进行处理
  31.     method 表示数据以哪种方式进行提交
  32.         get  显示提交数据(参数在地址栏上,参数大小2k~8k左右)
  33.         post 隐式提交数据(参数不在地址上,参数大小没有限制)
  34.  
  35.     input 行内块状元素
  36.     -->
  37.     <form action="" method="get">
  38.         账号:<input type="text" name="username" value="" />
  39.         <br />
  40.         密码:<input type="password" name="username" value="" />
  41.         <br />
  42.         <input type="submit" value="登录" style="color:red;background-color:yellow;" />
  43.     </form>
  44.  
  45. </body>
  46.  
  47. </html>
  48.  
  49.     # return strvar
  50.     """
  51.  
  52.     """
  53.     # render_template 操作过程;  文件夹的名称必须是templates
  54.     with open("./templates/1.form表单.html" mode="rb") as fp:
  55.         res = fp.read()
  56.     return res.decode()
  57.     """
  58.     return render_template("1.form表单.html")
  59.  
  60.     # return strvar
  61.  
  62. # get方法提交到 http://127.0.0.1:9008/ceshi2 地址 (路由默认以GET方法接收数据)
  63. @app.route('/ceshi2',methods=("GET",))
  64. def func2():
  65.     """    """
  66.     if request.method == "GET":
  67.         return "ok,就是我 GET"
  68.  
  69. # post方法提交到 http://127.0.0.1:9008/ceshi2 地址
  70. @app.route('/ceshi2',methods=("POST",))
  71. def func3():
  72.     if request.method == "POST":
  73.  
  74.         # to_dict 把响应的数据转换成字典
  75.         dic = request.values.to_dict()
  76.         return dic
  77.  
  78.         # return "ok,就是我 post"
  79.  
  80. @app.route('/ceshi3',methods=("GET",))
  81. def func4():
  82.     if request.method == "GET":
  83.         return render_template("2.单选框_复选框_下拉框.html")
  84.  
  85. @app.route('/ceshi4',methods=("POST",))
  86. def func5():
  87.     if request.method == "POST":
  88.         # 获取表单对应的数据,通过to_dict转化成字典,但无法获取到复选框的所有内容
  89.         # return request.values.to_dict()
  90.         # 获取复选框时,使用getlist方法,但是返回时需要字典,借助enumerate间接变成字典
  91.         # print(request.values.getlist("hobby"))
  92.         return dict(  enumerate(request.values.getlist("hobby"))  )
  93.  
  94. @app.route('/ceshi5',methods=("POST","GET"))
  95. def func6():
  96.     if request.method == "GET":
  97.         return render_template("3.文件上传.html")
  98.  
  99.     if request.method == "POST":
  100.         # 获取上传图片的数据信息
  101.         tupian_obj = request.files.get("myfiles")
  102.         # 获取上传文件的名字
  103.         print(tupian_obj.filename)
  104.         # 保存上传的数据
  105.         tupian_obj.save(  tupian_obj.filename  ) # 按照这个名字保存数据
  106.         print(request.values.to_dict)
  107.         # return request.values.to_dict()
  108.  
  109.         strvar = """
  110.         恭喜你上传成功,3秒后自动跳转到百度!!!
  111.         <meta http-equiv="refresh" content="0;url=http://www.baidu.com" />
  112.         """
  113.         # return strvar
  114.  
  115.         # redirect 重定向
  116.         # return redirect("http://www.baidu.com")
  117.         # return redirect("/ceshi2")
  118.  
  119. # (3) 启动服务
  120. app.run(host="127.0.0.1" ,port=9008,debug=True)

（1）form表单

  1. <!DOCTYPE HTML>
  2. <html>
  3.  
  4. <head>
  5. 	<meta charset="utf-8" />
  6. 	<title>form表单</title>
  7. </head>
  8.  
  9. <body>
  10.  
  11. 	<!--
  12. 	action 表示吧把数据提交给哪个地址进行处理
  13. 	method 表示数据以哪种方式进行提交
  14. 		get  显示提交数据(参数在地址栏上,参数大小2k~8k左右)
  15. 		post 隐式提交数据(参数不在地址上,参数大小没有限制)
  16.  
  17. 	input 行内块状元素
  18. 	-->
  19.  
  20. 	<form action="/ceshi2" method="post">
  21. 		账号:<input type="text" name="username" value="" />
  22. 		<br />
  23. 		密码:<input type="password" name="password" value="" />
  24. 		<br />
  25. 		<input type="submit" value="登录" style="color:red;background-color:yellow;" />
  26. 	</form>
  27.  
  28. </body>
  29.  
  30. </html>

（2）单选框_复选框_下拉框

  1. <!DOCTYPE HTML>
  2. <html>
  3.  
  4. <head>
  5. 	<meta charset="utf-8" />
  6. 	<title>form表单</title>
  7. </head>
  8.  
  9. <body>
  10.  
  11. 	<!--
  12. 	action 表示吧把数据提交给哪个地址进行处理
  13. 	method 表示数据以哪种方式进行提交
  14. 		get  显示提交数据(参数在地址栏上,参数大小2k~8k左右)
  15. 		post 隐式提交数据(参数不在地址上,参数大小没有限制)
  16.  
  17. 	input 行内块状元素
  18. 	-->
  19.  
  20. 	<form action="/ceshi2" method="post">
  21. 		账号:<input type="text" name="username" value="" />
  22. 		<br />
  23. 		密码:<input type="password" name="password" value="" />
  24. 		<br />
  25. 		<input type="submit" value="登录" style="color:red;background-color:yellow;" />
  26. 	</form>
  27.  
  28. </body>
  29.  
  30. </html>

　（3）文件上传

  1. <!DOCTYPE HTML>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8" />
  6.     <title>文件上传</title>
  7. </head>
  8.  
  9. <body>
  10.     <!-- 文件上传的表单方法必须是post,并且指定上传数据的编码格式 multipart/form-data -->
  11.     <form action="/ceshi5" method="post" enctype = "multipart/form-data" >
  12.         头像:<input type="file" name="myfiles" />
  13.  
  14.         <hr />
  15.         <!-- 大段文本框 -->
  16.         个人介绍: <textarea name="info" style="width:100px;height:20px;"></textarea>
  17.         <!-- 隐藏的表单框 => 隐藏提交的id -->
  18.         <hr />
  19.         <input type="hidden" name="sid" value="23" />
  20.         <!-- update 表明 set name = "王文" where id = 23 -->
  21.         <input type="submit" value="提交" />
  22.     </form>
  23. </body>
  24.  
  25. </html>

（4）input属性

  1. <!DOCTYPE HTML>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8" />
  6.     <title>input属性</title>
  7. </head>
  8.  
  9. <body>
  10.     <!-- placeholder  灰色输入提示 -->
  11.     <!-- required     必填 -->
  12.     <!-- readonly     只能读不能改   可以被提交 -->
  13.     <!-- disabled     只能读不能改   不会被提交 -->
  14.     <!-- size         设置输入框的大小 -->
  15.     <!-- maxlength    输入框最多可以输入多少字符 -->
  16.     <!-- minlength    输入框最少需要输入多少字符 -->
  17.     <!-- autofocus    自动获取焦点, 整个页面只能有一个 -->
  18.     <!-- tabindex     设置tab的切换顺序 -->
  19.  
  20.     <form action="" method="post">
  21.  
  22.         用户:<input type="text" name="username" placeholder="请输入用户名" disabled  tabindex="5" />
  23.         <br />
  24.         密码:<input type="password" name="password" required tabindex="4" />
  25.  
  26.         <br />
  27.         年龄:<input type="text" name="age" value="18" readonly  size="30" tabindex="3"/>
  28.         <br />
  29.         班级:<input type="text" name="classroom" value="" maxlength="4" minlength ="2" tabindex="2" />
  30.         <br />
  31.         祖籍:<input type="text" name="country" value="" autofocus tabindex="1" />
  32.         <br />
  33.         <input type="submit" value="提交" />
  34.  
  35.     </form>
  36.  
  37. </body>
  38.  
  39. </html>

　　

Day12 HTML知识的更多相关文章

  1. 【JAVA零基础入门系列】Day12 Java类的简单应用

    俗话说的好,实践出真知,所以除了理论知识掌握扎实以外,更重要的是要多加操练,这样才能掌握核心科技. 今天我们就用刚学会的类来实践一下,目标便是完成上一篇中的剁手任务. 我们的商品类已经准备好了,代码重 ...

  2. day12 查找文件

    day12 查找文件 find命令:查找文件 find命令:在linux系统中,按照我们的要求去查询文件. 格式: find [查询的路径] [匹配模式] [匹配规则] 匹配模式: -name : 按 ...

  3. 你必须知道的EF知识和经验

    注意:以下内容如果没有特别申明,默认使用的EF6.0版本,code first模式. 推荐MiniProfiler插件 工欲善其事,必先利其器. 我们使用EF和在很大程度提高了开发速度,不过随之带来的 ...

  4. MySQL高级知识- MySQL的架构介绍

    [TOC] 1.MySQL 简介 概述 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB公司开发,目前属于Oracle公司. MySQL是一种关联数据库管理系统,将数据保存在不同的表中,而 ...

  5. 学点HTTP知识

    不学无术 又一次感觉到不学无术,被人一问Http知识尽然一点也没答上来,丢人丢到家了啊.平时也看许多的技术文章,为什么到了关键时刻就答不上来呢? 确实发现一个问题,光看是没有用的,需要实践.看别人说的 ...

  6. java中的字符串相关知识整理

    字符串为什么这么重要 写了多年java的开发应该对String不陌生,但是我却越发觉得它陌生.每学一门编程语言就会与字符串这个关键词打不少交道.看来它真的很重要. 字符串就是一系列的字符组合的串,如果 ...

  7. [C#] C# 知识回顾 - 你真的懂异常（Exception）吗？

    你真的懂异常(Exception)吗? 目录 异常介绍 异常的特点 怎样使用异常 处理异常的 try-catch-finally 捕获异常的 Catch 块 释放资源的 Finally 块 一.异常介 ...

  8. [C#] C# 知识回顾 - 学会处理异常

    学会处理异常 你可以使用 try 块来对你觉得可能会出现异常的代码进行分区. 其中,与之关联的 catch 块可用于处理任何异常情况. 一个包含代码的 finally 块,无论 try 块中是否在运行 ...

  9. [C#] C# 知识回顾 - 学会使用异常

    学会使用异常 在 C# 中,程序中在运行时出现的错误,会不断在程序中进行传播,这种机制称为“异常”. 异常通常由错误的代码引发,并由能够更正错误的代码进行 catch. 异常可由 .NET 的 CLR ...

随机推荐

  1. Ribbon源码分析（一）-- RestTemplate 以及自定义负载均衡算法

    如果只是想看ribbon的自定义负载均衡配置,请查看: https://www.cnblogs.com/yangxiaohui227/p/13186004.html 注意: 1.RestTemplat ...

  2. 061 01 Android 零基础入门 01 Java基础语法 06 Java一维数组 08 一维数组总结

    061 01 Android 零基础入门 01 Java基础语法 06 Java一维数组 08 一维数组总结 本文知识点:一维数组总结 总结 注意点

  3. 018 01 Android 零基础入门 01 Java基础语法 02 Java常量与变量 12 数据类型转换的基本概念

    018 01 Android 零基础入门 01 Java基础语法 02 Java常量与变量 12 数据类型转换的基本概念 本文知识点:Java中的数据类型转换 类型转换 类型转换分类 2类,分别是: ...

  4. VS 高级版本新建的项目如何降级使低版本 VS 可以打开

    转载:https://blog.csdn.net/u012814856/article/details/70325267 一.引言 这里因为工作的原因,公司项目使用的是 VS2015 的编译环境,但是 ...

  5. c语言gets函数

    函数gets的原型为:char*gets(char*buffer); 在 stdio.h中定义,如果要程序中用到此函数需包含#include<stdio.h> gets()函数用来从标准输 ...

  6. ansible-playbook定义变量与使用

    1. ansible-playbook变量定义与使用 命令行 在Inventory中定义 在Playbook中定义 在Role中定义 注册变量(register) 系统信息变量(facts) 2. 在 ...

  7. 2017年 实验四 B2C模拟实验

    实验四 B2C模拟实验                [实验目的] 掌握网上购物的基本流程和B2C平台的运营 [实验条件] ⑴.个人计算机一台 ⑵.计算机通过局域网形式接入互联网. (3).奥派电子商 ...

  8. java中break、continue、return作用

    java中break.continue.return作用 0.首先要明确:break和continue是作用对象是循环体:而return的作用对象是方法 break:在执行完本次循环后,跳出所在的循环 ...

  9. beego增删改查

    package main import ( "fmt" "github.com/astaxie/beego/orm" _ "github.com/go ...

  10. css变量复用 全局变量-局部变量

    前言 简单使用场景:同一套后台系统有多套主题的情况下,主题色作为一个最常用到的可复用的颜色,非常有必要像js的全局变量一样存在全局变量中以作复用,之前我第一个想到的是sass的变量声明,未曾想到css ...