前端入门之——html day2

网站访问的本质可以理解为就是socket间的相互通信。

举个例子：

编写一个简单的socket服务端。

 1 #!/usr/bin/env python3
 2 #-*- coding:utf-8 -*-
 3 '''
 4 Administrator 
 5 2018/9/4 
 6 '''
 7 
 8 import socket
 9 def web():
10     sk=socket.socket()
11     sk.bind(('localhost',8090))
12     sk.listen(5)
13     while True:
14         conn,addr=sk.accept()
15         buf=conn.recv(1024)
16         print(buf.decode("utf8"))
17 
18         conn.sendall(bytes("HTTP/1.1 201 OK \r\n\r\n","utf8"))
19         conn.sendall(bytes("<h1>Hi,Changzhou!</h1>","utf8"))
20     conn.close()
21 if __name__=="__main__":
22     web()
23 # sk.close()

在服务端中，接受一个数据。然后发送一串数据。

使用谷歌浏览器作为客户端在地址栏输入访问id和port: 127.0.0.1:8090 

打印socket接受到的信息：

"D:\Program Files (x86)\python36\python.exe" F:/python从入门到放弃/9.4/demo.py
GET / HTTP/1.1
Host: 127.0.0.1:8090
Connection: keep-alive
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9


GET /favicon.ico HTTP/1.1
Host: 127.0.0.1:8090
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36
Accept: image/webp,image/apng,image/*,*/*;q=0.8
Referer: http://127.0.0.1:8090/
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
View Code

 

同样的道理：我们把服务端的文件改造一下：

import socket
def web():
    sk=socket.socket()
    sk.bind(('localhost',8090))
    sk.listen(5)
    while True:
        conn,addr=sk.accept()
        buf=conn.recv(1024)
        print(buf.decode("utf8"))
        with open("hello.html",'rb') as f:#打开文件，读取文件
            data=f.read()
        conn.sendall(data)
        # conn.sendall(bytes("HTTP/1.1 201 OK \r\n\r\n","utf8"))
        # conn.sendall(bytes("<h1>Hi,Changzhou!</h1>","utf8"))
    conn.close()
if __name__=="__main__":
    web()
# sk.close()

在同级文件夹下编写一个HTML文件：

1 HTTP/1.1 201 OK
2 
3 
4 <h1>Hi,Changzhou!</h1>
hello.html

运行结果：

HTML文档的后缀名

  • .html
  • .htm

以上两种后缀名没有区别，都可以使用。

什么是HTML?

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言: HyperText Markup Language
  • HTML 不是一种编程语言，而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签及文本内容
  • HTML文档也叫做 web 页面

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词，比如 <html>
  • HTML 标签通常是成对出现的，比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签

<标签>内容</标签>

HTML 元素

"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

HTML 元素:

<p>这是一个段落。</p>

什么是标签

  • 是由一对尖括号包裹的单词构成 例如: <html> *所有标签中的单词不可能以数字开头.
  • 标签不区分大小写.<html> 和 <HTML>. 推荐使用小写.
  • 标签分为两部分: 开始标签<a> 和 结束标签</a>. 两个标签之间的部分 我们叫做标签体.
  • 有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭和标签.例如: <br/> <hr/> <input /> <img />
  • 标签可以嵌套.但是不能交叉嵌套. <a><b></a></b>

标签的属性

  • 通常是以键值对形式出现的. 例如 name="alex"
  • 属性只能出现在开始标签 或 自闭和标签中.
  • 属性名字全部小写. *属性值必须使用双引号或单引号包裹 例如 name="alex"
  • 如果属性值和属性名完全一样.直接写属性名即可. 例如 readonly
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <h1>hello</h1>
 9     <h2>world</h2>
10     <hr/>
11     <div>
12         <p>
13             这是一段美丽的神话。
14         </p>
15     </div>
16         <input readonly="readonly">
17     <p>如果属性的名字和属性值是一样的，则可以只写一个属性名就可以了。</p>
18 
19     <!--<script>-->
20         <!--alert(window.top.document.compatMode)-->
21 
22     <!--</script>-->
23 </body>
24 </html>
demo.html

 

<!DOCTYPE html>标签

      由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在
W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为Compatibility 
Mode)；由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars
mode)，这就是二者最简单的区别。
      W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，
很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以
前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。这样浏览器渲染上就产生了Quircks mode
和Standars mode，两种渲染方法共存在一个浏览器上。

window.top.document.compatMode：
//BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。 
//CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

　　

  这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,

这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。

    如果你的页面添加了<!DOCTYPE html>那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的

标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。

这就是<!DOCTYPE html>的作用。

head标签

<meta>

         meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

        1: name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。     

 

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
 
<meta name="description" content="这是一个描述网站的简介地址。">

　　

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="keywords" content="软件，开发,项目管理系统,OA,科技公司">
 6     <meta name="description" content="这是一家软件公司。业务范围在全国各个地区提供开发服务
 7             为广大提起提供完善的企业解决方案">
 8 
 9     <title>Title</title>
10 </head>
11 <body>
12     <h1>hello</h1>
13     <h2>world</h2>
14     <hr/>
15     <div>
16         <p>
17             这是一段美丽的神话。
18         </p>
19     </div>
20         <input readonly="readonly">
21     <p>如果属性的名字和属性值是一样的，则可以只写一个属性名就可以了。</p>
22 
23     <script>
24         alert(window.top.document.compatMode)
25     </script>
26 </body>
27 </html>
网站搜索关键词和网站描述

　　2: http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，              content中的内容其实就是各个参数的变量值。  

1 <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> //(注意后面的引号，分别在秒数的前面和网址的后面)
2  
3 <meta http-equiv="content-Type" charset=UTF8">
4  
5 <meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />

 注意：X-UA-Compatible

每个主要版本IE新增的功能都是为了让浏览器更容易使用、增加安全性及更支持业界标准。以这些作为IE的特色，其中
一个风险就是旧版本网站无法正确的显示。

为了将这个风险降到最低，IE6允许网页开发人员选择IE编译和显示他们网页的方式。"Quirks mode"为预设，这会
使页面以旧版本浏览器的视点显示，"Standards mode"(也称为"strict mode")特点是支持业界标准最为完善。
然而要利用这个增强的支持功能，网页必须包含恰当的<!DOCTYPE>指令。

若一个网页没有包含<!DOCTYPE>指令，IE6会将它以quirks mode显示。若网页包含有效的<!DOCTYPE>指令但浏
览器无法辨识，IE6会将它以IE6 standards mode显示。因为少数网站已经包含<!DOCTYPE>指令，兼容性模式的
切换相当成功。这使网页开发人员能选择将他们的网页转移为standards mode的最佳时机。

随著时间经过，更多网站开始使用standards mode。它们也开始使用IE6的特性和功能来检测IE。举例来说，IE6
不支持universal selector(即css之全局选择器 * {})，一些网站便使用它来针对IE做特定的对应。

当 IE7增加了对全域选择器的支持，那些依赖IE6特点的网站便无法侦测出这个新版本的浏览器。因此那些针对IE的
特定对应无法应用于IE7，造成这些网站便无法如他们预期的显示。由于<!DOCTYPE>只支持两种兼容性模式，受到影
响的网站拥有者被迫更新他们的网站使其能支持IE7。

IE8 比之前的任何版本浏览器都更支持业界标准，因此针对旧版本浏览器设计的网页可能无法如预期般呈现。为了帮
助减轻所有问题，IE8引入文件兼容性的概念，使你能选择你的网页设计要对应的特定IE版本。文件兼容性在IE8增加
了一些新的模式，这些模式能告诉浏览器如何解析和编译一个网页。若你的网页无法在 ie8正确的显示，你可以更新
你的网站使它支持最新的网页标准(优先选项)或在你的页面上新增一个meta元素用于告诉IE8如何依照旧版本浏览器
编译你的页面。

这能让你选择将你的网站更新支持IE8新特点的时机。

当 Internet Explorer 8 遇到未包含 X-UA-Compatible 标头的网页时，它将使用 <!DOCTYPE> 指令来确
定如何显示该网页。 如果该指令丢失或未指定基于标准的文档类型，则 Internet Explorer 8 将以 IE5 模式
（Quirks 模式）显示该网页。
View Code

非meta标签

 <title>oldboy</title>
    <link rel="icon" href="http://www.jd.com/favicon.ico">
    <link rel="stylesheet" href="css.css">
    <script src="hello.js"></script>　

 

body标签

一 基本标签（块级标签和内联标签）

<hn>: n的取值范围是1~6; 从大到小. 用来表示标题.

<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.

<b> <strong>: 加粗标签.

<strike>: 为文字加上一条中线.

<em>: 文字变成斜体.

<sup>和<sub>: 上角标 和 下角表.

<br>:换行.

<hr>:水平线

<div><span>

 

块级标签：<p><h1><table><ol><ul><form><div>

内联标签：<a><input><img><sub><sup><textarea><span>

block（块）元素的特点

 总是在新行上开始；
 宽度缺省是它的容器的100%，除非设定一个宽度。
 它可以容纳内联元素和其他块元素

inline元素的特点

和其他元素都在一行上；
宽度就是它的文字或图片的宽度，不可改变
内联元素只能容纳文本或者其他内联元素

特殊字符

      &lt; &gt；&quot；&copy;&reg;

HTML特殊字符编码对照表

https://www.jb51.net/onlineread/htmlchar.htm

 1 <!doctype html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="utf-8">
 6         <title>demo2</title>
 7         <style>
 8             div{
 9                 color:red;
10                 /*background: #5cb85c;*/
11             }
12             span{
13                 /*background: #a6e1ec;*/
14             }
15 
16         </style>
17         
18     </head>
19 
20     <body>
21         hello,一行<div>hello,world!</div>hello,就换行了。
22         <span>span标签</span>
23 
24         <h1>hello</h1> wolrd!
25         <p>hello</p>小p<br/>
26 
27 
28         <strong>加粗</strong><br/>
29         <b>给字体加粗</b><br/>
30         <em>字体斜体</em><br/>
31         <strike>strike标记删除标签，不建议使用，但是可以使用。</strike><br/>
32         <del>delete标记删除标签,建议使用</del><br/>
33 
34         2<sub>3</sub><br/>
35         2<sup>3</sup><br/>
36         空&nbsp&nbsp;&nbsp;&hearts;格<br/>
37         &yen;36.80<br/>
38         <div>
39             <span style="font-size:40px;color:red">V</span><span style="color:red">钮鹏程</span>
40 
41         </div>
42         &copy;大宇宙科技所有。<br/>
43         小于号：&lt; less than  <br/> 大于号：&gt;greater than
44 
45 
46 
47 
48         <!--<div style="color:rebeccapurple">hello,world!</div>-->
49         
50 
51         
52     </body>
53 
54 </html>
demo.html

 

二 图形标签: <img> 

src: 要显示图片的路径.

alt: 图片没有加载成功时的提示.

title: 鼠标悬浮时的提示信息.

width: 图片的宽

height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

三 超链接标签(锚标签)<a>

href:要连接的资源路径 格式如下: href="http://www.baidu.com" 

target: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容.

name: 定义一个页面的书签.

用于跳转 href : #id.（锚）
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div id="fist">
 9     <a href="#chap1">第一章</a>
10     <a href="#chap2">第二章</a>
11     <a href="#chap3">第三章</a>
12 </div>
13 
14 
15     <div id="chap1">
16     阚清子，1988年4月15日出生于黑龙江省哈尔滨市，中国内地影视女演员。<br/>
17         <img src="http://image.9game.cn/2016/9/14/14256566.jpg" height="500" title="阚清子图1" alt="等待图片下载">
18         <br/><a href="#fist">目录</a>
19     </div>
20     <div id="chap2">
21     2007年，阚清子进入北京电影学院表演系本科班就读。2009年，阚清子在民国年代剧《娘妻》饰演杨静怡正式出道。2011年，凭借古装言情剧《新还珠格格》中的“欣荣格格”一角而被观众所熟知 [1]  ，该剧在优酷大剧盛典上荣获年度十大电视剧优秀奖。<br/>
22     <img src="http://image.9game.cn/2016/9/14/14256527.jpg" height="500"  title="阚清子图2" alt="等待图片下载"><br/><a href="#fist">目录</a>
23     </div>
24     <div id="chap3">
25     2013年，阚清子凭借情感励志剧《璀璨人生》中“腹黑女王”叶琳一角的出色发挥，使其人气与知名度一路飙升 [2]  ，该剧一经开播即数度占据全国同时段收视冠军，后一度创下收视率破4%的好成绩 [3]  。<br/>2016年，主演了谍战革命剧《麻雀》。2017年，主演了都市情感剧《如若巴黎不快乐》<br/>
26     <img src="http://image.9game.cn/2016/9/14/14256556.jpg" width="300" title="阚清子图3" alt="等待图片下载"><br/><a href="#fist">目录</a>
27     </div>
28     <style>
29         #chap1{
30             height:800px;
31             background: #cc3399;
32             color: white;
33         }
34         #chap2{
35             height:800px;
36             background: yellow;
37             color: black;
38         }
39         #chap3{
40             height:800px;
41             background:blue;
42             color: white;
43         }
44     </style>
45 
46 
47 
48 </body>
49 </html>
标签练习

 

四 列表标签：

<ul>: 无序列表

<ol>: 有序列表
         <li>:列表中的每一项.

<dl>  定义列表

         <dt> 列表标题
         <dd> 列表项

五 表格标签: <table>

 

border: 表格边框.

cellpadding: 内边距

cellspacing: 外边距.

width: 像素 百分比.（最好通过css来设置长宽）

<tr>: table row

         <th>: table head cell

         <td>: table data cell

rowspan:  单元格竖跨多少行

colspan:  单元格横跨多少列（即合并单元格）

<th>: table header <tbody>(不常用): 为表格进行分区.
<table border="slide" width="200px">
    <tr align="center"><th>姓名</th><th>年龄</th><th>性别</th></tr>
    <tr><td>牛有道</td><td>20</td><td>男</td></tr>
    <tr><td>虞姬</td><td>16</td><td>女</td></tr>
    <tr><td colspan="2">2018</td><td rowspan="2">中</td></tr>
    <tr><td>霸王</td><td>20</td></tr>
    <tr><td>楚留香</td><td>19</td><td>男</td></tr>
</table>
View Code

六 表单标签<form>

      表单用于向服务器传输数据。

      表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

      表单还可以包含textarea、select、fieldset和 label 元素。

1.表单属性

　　HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中.

            action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web

            method: 表单的提交方式 post/get 默认取值 就是 get（信封）

                          get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.

                          post:1.提交的键值对 不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.

                          get/post是常见的两种请求方式.

2.表单元素

           <input>  标签的属性和对应值    

type:        text 文本输入框

             password 密码输入框

             radio 单选框

             checkbox 多选框  

             submit 提交按钮            

             button 按钮(需要配合js使用.) button和submit的区别？

             file 提交文件：form表单需要加上属性enctype="multipart/form-data"   

 name:    表单提交项的键.注意和id属性的区别：name属性是和服务器通信时使用的名称；而id属性是浏览器端使用的名称，该属性主要是为了方便客
          户端编程，而在css和javascript中使用的
 value:   表单提交项的值.对于不同的输入类型，value 属性的用法也不同：

?12345type="button", "reset", "submit" - 定义按钮上的显示的文本 type="text", "password", "hidden" - 定义输入字段的初始值 type="checkbox", "radio", "image" - 定义与输入相关联的值　　

 checked:  radio 和 checkbox 默认被选中

 readonly: 只读. text 和 password

 disabled: 对所用input都好使.

　　

上传文件注意两点：

 1 请求方式必须是post

 2 enctype="multipart/form-data"

def index(request):
    print request.POST
    print request.GET
    print request.FILES
    for item in request.FILES:
        fileObj = request.FILES.get(item)
        f = open(fileObj.name, 'wb')
        iter_file = fileObj.chunks()
        for line in iter_file:
            f.write(line)
        f.close()
    return HttpResponse('ok')
上传文件

<select> 下拉选标签属性

name:表单提交项的键.

          size：选项个数

          multiple：multiple 

                 <option> 下拉选中的每一项 属性：

                       value:表单提交项的值.   selected: selected下拉选默认被选中

                 <optgroup>为每一项加上分组

　　

    <textarea> 文本域       

name:    表单提交项的键.

cols:    文本域默认有多少列

rows:    文本域默认有多少行

　　   <label>    

<label for="www">姓名</label>
<input id="www" type="text">

　　   <fieldset>

<fieldset>
    <legend>登录吧</legend>
    <input type="text">
</fieldset>

　　

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <!--<meta charset="UTF-8">-->
 5     <!--<title>表单</title>-->
 6     <meta charset="UTF-8">
 7     <!--<meta charset="UTF-8">==<meta http-equiv="content-Type" charset=UTF8">-->
 8     <meta name="keywords" content="软件，开发,项目管理系统,OA,科技公司">
 9     <meta name="description" content="这是一家软件公司。业务范围在全国各个地区提供开发服务
10             为广大提起提供完善的企业解决方案">
11     <!--这句话的意思是2秒后，给我跳转到百度网页  主要用于，从老网站把客户迁移到新网站-->
12     <!--<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> //(注意后面的引号，分别在秒数的前面和网址的后面)-->
13     <!--<meta http-equiv="Refresh" content="2"> //(注意后面的引号，分别在秒数的前面和网址的后面)-->
14 
15     <!--标志可以兼容到IE7,只针对微软的IE浏览器。-->
16     <meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE11" />
17     <title>表单</title>
18     <!-- 添加网页小图标ico -->
19     <link rel="icon" href="img/ooop8.ico">
20 </head>
21 <body>
22 <form action="" method="get">
23     <p>姓名：<input type="text" name="username"></p>
24     <p>性别：<input type="password" name="paword"></p>
25     <p><input type="submit" value="submit" ></p>
26     <!--<p><input type="button" value="button" ></p>button 没有意义，只是一个按钮-->
27 
28 
29 </form>
30 <form action="" method="get">
31     <p>爱好：篮球<input type="checkbox" name="hobby" value="1"></p>
32     <p>爱好：羽毛球<input type="checkbox" name="hobby" value="2"></p>
33     <input type="submit" value="提交">
34 </form>
35 
36 <form action="" method="get">
37   <p>Male<input type="radio" name="sex" value="Male" checked="checked"></p>
38   <p>Female<input type="radio" name="sex" value="Female"></p>
39   <input type="submit" value="提交">
40 </form>
41 用表 来布局
42 <form action="" method="get">
43     <table>
44         <tr><td>Male</td><td><input type="radio" name="sex" value="Male"></td></tr>
45         <tr><td>Female</td><td><input type="radio" name="sex" value="Female"></td></tr>
46         <tr>
47             <td colspan="2"><input type="submit" ></td>
48         </tr>
49     </table>
50 
51 </form>
52 
53 <form action="" method="get">
54     <p><input type="file" name="filename"></p>
55 
56     <p><input type="reset"><input type="submit"></p>
57 </form>
58 
59 
60 </body>
61 </html>
表单练习

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <form method="post">
 9         城市：<select name="city" multiple >
10             <option value="cz">常州</option>
11             <option value="nj">南京</option>
12             <option value="sq">宿迁</option>
13             <option value="sz">苏州</option>
14             <option value="wx">无锡</option>
15         </select>
16         
17             
18         <p><select name="prosion" multiple size="3">
19                 <optgroup label="江苏">
20                 <option value="cz">常州</option>
21                 <option value="nj">南京</option>
22                 <option value="sq">宿迁</option>
23                 <option value="sz">苏州</option>
24                 <option value="wx">无锡</option>
25             </optgroup>
26                 <optgroup label="山东">
27                 <option value="jn">济南</option>
28                 <option value="wf">潍坊</option>
29                 <option value="hz">菏泽</option>
30                 <option value="dz">德州</option>
31                 <option value="ly">临沂</option>
32             </optgroup>
33         </select>    
34         </p>
35         <p><textarea rows="20" cols="100" name="introduct">自我介绍</textarea></p>    
36         <p>
37             <label for="www">姓名：</label>
38             <input id="www" type="text" />
39         </p>
40         <p>
41             <label for="w">男</label>
42             <input id="w" type="radio" name="gender" value="男"/>
43         </p>
44         <p>
45             <fieldset>
46                 <legend>登录吧</legend>
47                 <input type="text" name="context_demo">
48             </fieldset>
49         </p>
50         
51         
52         <p><input type="submit" value="press"></p>
53         </form>
54         
55         
56         <!-- 标题    -->
57         <h1>道君</h1>
58         <h2>剑动山河</h2>
59         <h3>魔天记</h3>
60         <h4>辰南</h4>
61         <h5>莽荒纪</h5>
62         <h6>红楼梦</h6>
63         
64         <!-- 段落  -->
65         
66         <p>此时的清塞军身处吞云岭，四面尽是山歌</p>
67         <p>此时的清塞军身处吞云岭，</p><p>四面尽是山歌</p>
68         
69         <a href="http://www.runoob.com">这是一个链接</a>
70         <img src="http://p0.so.qhimgs1.com/t016997d986a16ebe7a.jpg" width="25" height="39" />
71     
72     </body>
73 </html>
表单练习2

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <h1> hello world!</h1>
 9 <!--    上传文件注意两点：
10         1 请求方式必须是post
11         2 enctype="multipart/form-data"    -->
12     <form action="xiaohu" method="post" enctype="multipart/form-data">
13         <p>用户名：<input type="text" name="username"></p>
14         <p>密&nbsp;&nbsp;&nbsp;码：<input type="password" name="password"></p>
15 
16         <p>性别：男<input type="radio" name="sex" value="1"></p>
17         <p>性别：女<input type="radio" name="sex" value="0"></p>
18         <fieldset>
19             <legend>爱好：</legend>
20            篮球<input type="checkbox" name="hobby" value="bsk">
21             足球<input type="checkbox" name="hobby" value="ftb">
22         </fieldset>
23 
24         <p><input type="file" name="file_name"></p>
25         <p><input type="submit"></p>
26 
27     </form>
28 </body>
29 </html>
文件上传练习

 

posted @ 2018-09-04 09:17  巨兽~墨菲特  阅读(195)  评论(0)  编辑  收藏  举报