html

一、Web前端介绍 

1. 什么是网页

网页是基于浏览器的应用程序，是数据展示的载体 

2. 网页的组成

  • 浏览器

    • 代替用户向服务器发请求
    • 接收并解析数据展示给用户

  • -主流浏览器（根据浏览器的引擎和内核划分）：划分为5大浏览器：chrome（谷歌）、IE/Edge(微软) Firefox（火狐） Opera （欧朋） Safari（苹果）

  • -浏览器引擎：渲染引擎、js引擎

  1. 服务器

    • 存储数据
    • 接收请求处理并响应请求 
      web服务器：Apache、IIS、Nginx

  2. 协议

    • 规范数据在传输过程中的打包方式 

3. 开发前的准备

  1. 运行环境：浏览器，设置chrome为默认浏览器，作为网页文件的运行环境。
  2. 调试工具：浏览器自带的调试工具，使用快捷键"F12"或右键"检查"打开。
  3. 开发工具：不限，选用个人习惯的即可。（Sublime、VSCode、EditPlus、PyCharm等） 

二、 HTML语法介绍 

1. HTML介绍

超文本标记语言（HyperText Markup Language）浏览器能够识别和解析的语言，通过标签的形式构建页面结构和填充内容 

2. 标签

标签也称为标记或元素，用于在网页中标记内容

  1. 语法：标签使用< >为标志，标签名不区分大小写，推荐小写表示

  2. 分类：双标签(主动闭和标签)：成对出现，包含开始标签和结束标签。例：<html></html>

　　　　　　 单标签（自闭和标签）：只有开始标签，没有结束标签，可以手动添加“/”表示闭合。例：<br>或<br/> 

　　标签属性：

    • 标签属性书写在开始标签中，使用空格与标签名隔开，用于设置当前标签的显示内容或者修饰显示效果。由属性名和属性值组成，属性值使用双引号表示。

　　　　　　例：<meta charset="utf-8">

　　　　　　同一个标签中可以添加若干组标签属性，使用空格间隔。例：<img src="lily.jpg" width="200px" height="200px">

 

3. 使用

  1. 创建网页文件，使用.html或.htm作为文件后缀

  2. 添加网页的基本结构 

  1. 标签嵌套

    在双标签中书写其他标签，称为标签嵌套

    • 嵌套结构中，外层元素称为父元素，内层元素称为子元素；

    • 多层嵌套结构中，所有外层元素统称为祖先元素，内层元素统称为后代元素

    • 平级结构互为兄弟元素

  2. HTML语法规范

  • 标签名不区分大小写，建议使用小写
  • 调控台使用Ctrl加+号放大，-号缩小 
  • html文件中可用！号+table键补全，创建html框架 
  • 字体单位em，默认像素px，1em=16px 

三、常用标签介绍

  •  1. 基本结构解析  

<title>first</title>

<!-- 小图标 、路径或者图片以.ico结尾的矢量图，类型图片 -->

<link rel="shortcut icon" href="web.ico" type="image/x-icon">
<!--h标签-->
<h1>H标签my first web 中国</h1>

<!--段落标签，字体默认大小16px-->
<p>段落标签</p>

<!--普通文本标签，行内标签-->
<span>普通文本标签</span>
<lebal>普通文本标签</lebal>

<!--带有格式的标签 -->
<b>加粗标签</b>
<strong>加粗标签strong</strong>

<!--换行标签-->
<br/>


<!--水平线标签-->
<hr>

<!--斜体 了解-->
<i>斜体italic</i>

<s>删除线</s>
<u>下划线标签underline</u>

<span>

x <sub>1</sub>

y <sup>2</sup>

</span>
View Code

 2. body中常用标签 

文本标签 

标题标签：自带加粗效果，从h1到h6字体大小逐级递减

<h1>一级标题</h1>

<h2>二级标题</h2>

<h3>三级标题</h3>

<h4>四级标题</h4>

<h5>五级标题</h5>

<h6>六级标题</h6> 

段落标签：

<p>段落文本</p> 

普通文本标签： 

  • <span>行分区标签，用于对特殊文本特殊处理</span>
  • <b>加粗标签</b>
  • <strong>强调标签，效果同b标签</strong>
  • <label>普通文本标签，常与表单控件结合实现文本与控件的绑定</label>
  • <i>斜体标签</i>
  • <u>删除线标签</u> 

格式标签：

浏览器会忽略代码中的换行和空格，只显示为一个空格。想要实现页面中的换行，需要借助于换行标签。 

<br> 

水平线标签，在页面中插入一条水平分割线 

<hr> 

字符实体：

某些情况下，浏览器会将一些特殊字符按照HTML的方式解析，影响显示结果。此时需要将这类字符转换为其他的形式书写 

例：

  • 使用 &lt; 在页面中呈现 "<"
  • 使用 &gt; 在页面中呈现 ">"
  • 使用 &nbsp; 在页面中呈现一个空格
  • 使用 &copy; 在页面中呈现版权符号"©"
  • 使用 &yen; 在页面中呈现人民币符号"￥"

 

容器标签：

常用于页面结构划分，结合CSS实现网页布局

  • <div id="top">页面顶部区域</div>
  • <div id="main">页面主体区域</div>
  • <div id="bottom">页面底部区域</div> 

图片与超链接标签

图片标签 ：用于在网页中插入一张图片。 

  • 属性 src 用于给出图片的URL，必填。
  • 属性 width/height 用于设置图片尺寸，取像素值，默认按照图片的原始尺寸显示。
  • 属性 title 用于设置图片标题，鼠标悬停在图片上时显示
  • 属性 alt 用于设置图片加载失败后的提示文本

语法： 

<img src="" width="" height="" title="" alt="">

 属性：src=文件路径、width=更改宽度，height=更改高度，title设置图片标题，鼠标停在图片上时显示，alt设置图片加载失败时显示提示文本；

代码如下：

<img src="mm.jpg" width="300px" height="200px" title="mm" alt="美女图片加载失败了">

超链接标签：用户可以点击超链接实现跳转至其他页面

  • 属性 href 用于设置目标文件的URL，必填。
  • 属性 target用于设置目标文件的打开方式，默认在当前窗口打开。可以设置新建窗口打开目标文本(取"_blank") 

<a href="http://www.taobao.com" target="_self">淘宝</a>

<a href="rongrong.jpg" target="_blank">rongrong</a>

<a href="">href=""</a> 点击后页面刷新

<a href="#">链接地址为#</a>  点击后url后加#，称之为锚点，指定文件的指定位置

<a href="javascript:void(0)">阻止默认的跳转行为</a>点击不刷新不加#， 一般使用在轮播图，购物车加减操作

图片超链接代码如下：

<a href="https://www.baidu.com">

　　<img src="rongrong.jpg" alt="">

</a> 

属性：href="链接地址"，target="_blank"开辟一个新的窗口，不写则默认在当前窗口上更换。 

状态：超链接文本页面上文本下方自带下划线，字体蓝色表示未被访问，访问过后字体颜色为紫色，清除缓存可使字体恢复为蓝色，鼠标按住文本文件不抬起字体显示红色，表示激活状态。 

超链接使用锚点使用 
以#为锚点： 
实现：在指定位置添加锚点  

本地页面

<a name="top"></a>打个锚点记号

<a href="#top">回到顶部</a> 锚点

跳转到另外一个页面的锚点

<a name="bottom"></a>要跳转的指定页面位置做标记

<a href="day01容器标签pm.html#bottom">底部</a>在当前页面添加链接以#加锚点的位置。

参考代码： 

<!--目录超链接-->
<a href="#one">1</a>  点击1跳转到1的位置
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="#last">5</a>点击5跳转到5的位置 

<!--指定位置添加锚点-->
<a name="one"></a> 空标签，没有显示价值，用户看不到
<h1 style="height:300px;background:green;">１.早年经历</h1>
<h1 style="height:300px;background:green;">２.早年经历</h1>
<h1 style="height:300px;background:green;">３.早年经历</h1>
<h1 style="height:300px;background:green;">４.早年经历</h1>
<a name="last"></a>
<h1 style="height:300px;background:green;">５.早年经历</h1>

 <a href="05_anchor.html#last">5号位置</a>跳转到其他页面指定位置，先写文件后加#last 

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!--目录超链接-->
  <a href="#one">1</a>
  <a href="">2</a>
  <a href="">3</a>
  <a href="">4</a>
  <a href="#last">5</a>

  <!--添加锚点-->
  <a name="one"></a>
  <h1 style="height:300px;background:green;">１.早年经历</h1>
  <h1 style="height:300px;background:green;">２.早年经历</h1>
  <h1 style="height:300px;background:green;">３.早年经历</h1>
  <h1 style="height:300px;background:green;">４.早年经历</h1>
  <a name="last"></a>
  <h1 style="height:300px;background:green;">５.早年经历</h1>
</body>
</html>
View Code 
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!--插入图片-->
  <img src="happy.gif" width="500px"
       title="happy"
       alt="此处为图片">
  <img src="rongron.jpg"
       style=" 300px;height:300px"
       alt="此处为蓉蓉">
  <!--超链接：通过点击跳转到指定的目标文件-->
  <a href="02_tag.html" target="_blank">淘宝</a>
  <a href="http://www.taobao.com">买买买</a>
  <a href="">
    <img src="" alt="">
  </a>
  <a href="">链接地址为空</a>
  <!--#表示锚点，链接至指定文件的指定位置-->
  <a href="#">链接地址为#</a>
  <a href="05_anchor.html#last">5号位置</a>
  <a href="javascript:void(0)">阻止默认的跳转行为</a>

</body>
</html>
View Code 

3. 常用结构标签 

列表标签 

无序列表（ordered list）默认使用阿拉伯数字标识每条数据 

<ol>

<li>list item 列表项</li>

<li>list item 列表项</li>

<li>list item 列表项</li>

</ol>

有序列表（unordered list） 默认使用实心圆点标识列表项 

<ul>

<li>list item 列表项</li>

<li>list item 列表项</li>

<li>list item 列表项</li>

</ul>

代码： 

<!--列表标签有序列表-->ol>

<li>风清扬</li>

<li>独孤九剑</li>

<li>独孤求败，只求一败</li>

</ol>

<!--无序列表-->

<ul>

<li>风清扬</li>

<li>独孤九剑</li>

<li>独孤求败，只求一败</li>

</ul>

注意：有序列表开头以阿拉伯数字作为标识，可以更改显示属性，type更改显示表头，从哪个位置开始用start方法，方法如<ol type="A" start="2">，有1，a，A，i，I等

无序的可以使用none，circle空心圆，square（实心方块）

列表嵌套 
在已有列表中嵌套添加另一个列表，常见于下拉菜单，使用父子关系

 <ol>

<li>

西游记

<ul>

<li>孙悟空</li>

<li>孙悟空</li>

<li>孙悟空</li>

</ul>

</li>

</ol> 

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!--有序列表　
  ol中可以添加type属性设置项目符号，
  取值"1"/"a"/"A"/"i"/"I",
  ul中可取：circle/square（实心方块）/none(取消项目符号)-->
  <ol type="i">
    <li>老祁</li>
    <ul>
      <li>抽烟</li>
      <li>喝酒</li>
      <li>烫头</li>
    </ul>
    <!--父子嵌套实现下拉菜单-->
    <li>
      小泽
      <ul>
        <li>抽烟</li>
        <li>喝酒</li>
        <li>烫头</li>
      </ul>
    </li>
    <li>老王</li>
  </ol>
  <ul>
    <li>抽烟</li>
    <li>喝酒</li>
    <li>烫头</li>
  </ul>

</body>
</html>
View Code

表格标签 

表格由行和单元格组成，常用于直接的数据展示或辅助排版,基本结构如下

 <!-- 创建表格标签 -->此种表格没有线框

<table border="5px" cellspacing="0px" cellpadding="20px" width="500px" height="500px" bgcolor="red">

<!-- 创建行标签 -->

<tr bgcolor="yellow" align="left" valign="bottom">

<!-- 行中创建单元格以显示数据 -->

<th>姓名</th> th标签有加粗居中效果

<td>年龄</td>

<td>班级</td>

</tr>

<tr>

<td>迪丽热巴</td>

<td>20</td>

<td>002</td>

</tr>

</table> 

- 其中table属性中border：表示边框，单元格也会自动添加1px边框，cellspacing表示内边框与外边框的距离，cellpadding表示内部字体与边框的距离。width:表示宽度，height：表示高度。bgcolor="red"表示边框的背景颜色；margin：表示边框与边框的调整，padding：表示内容与边框的距离.

- tr标签属性:bgcolor="yellow"设置行背景颜色；align="left"设置行中内容水平对齐方式，默认居左，可取left/center/right; valign="bottom"设置内容的垂直对齐方式，默认居中，可取top/middle/bottom

重点理解** 单元格合并：用于调整表格结构，分为跨行合并和跨列合并，合并之后需要删除被合并的单元格，保证表格结构完整**

  | 单元格属性 |             作用           | 取值       |
 
  | colspan    | 跨列合并单元格（横向合并） | 无单位数值 |

  | rowspan    | 跨行合并单元格（纵向合并） | 无单位数值 | 

<th colspan="3" align="center"valign="center">info</th>合并修改在th标签和td标签中使用

----------

注意：一旦发生单元格合并，需要删除多余的单元格，保证表格结构的统一

垮列合并：删除当前行中多余的单元格

跨行合并：删除其后行中多余的单元格

----------

- 行分组标签：可以将表格中的若干行划分为一组，表示表头，表尾及表格主体，默认在表格中创建的所有行都会被自动加入表格主体中 

<table border="1px" width="300px" height="300px">

<thead></thead>

<tfoot></tfoot>

<tbody></tbody>

</table>

使用：

1、结构化的分组标签根据需要添加，不是必填项

2、默认所有行都会自动添加tbody中

3、推荐书写顺序 thead、tfoot、tbody，不影响表格的结构，优化加载速度 

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <table border="3px" width="300px" height="300px">
    <tr>
      <!--th表示单元格，自带文本加粗和居中效果-->
      <!--跨列合并-->
      <th colspan="3">个人信息</th>
      <!--删除被合并的单元格-->
      <!--<th>年龄</th>-->
      <!--<th>班级</th>-->
    </tr>
    <tr>
      <td>老祁</td>
      <!--向下合并单元格（跨行合并）无单位数值-->
      <td rowspan="2">35</td>
      <td>001</td>
    </tr>
    <tr>
      <td width="200px" height="200px">小泽玛利亚</td>
      <!--删除被合并的单元格-->
      <td>002</td>
    </tr>
  </table>
  <table border="1px"
         width="300px" height="300px">
    <!--表格内部结构划分（行分组）：
    将若干行划分为表头，表尾和表格主体，
    默认所有的行都会被自动加入表格主体中（tbody）
    -->
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>班级</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th colspan="3">总人数：</th>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>老祁</td>
        <td>35</td>
        <td>001</td>
      </tr>
      <tr>
        <td>老祁</td>
        <td>35</td>
        <td>001</td>
      </tr>
    </tbody>
  </table>

</body>
</html>
View Code

 表单标签 重点 

表单用于采集用户的信息并提交给服务器，由表单元素和表单控件组成。表单元素form负责提交数据给服务器，表单控件负责收集数据。  

  • - 表单使用

| 属性名  | 取值                                             
| action  | 设置数据的提交地址                                           |

| method  | 设置数据的提交方式，默认为get方式，可以设置为post            |

| enctype | 设置数据的编码类型，涉及二进制数据提交（例如图片，文件，音视频等），必须设置数据的提交方式为post,编码类型为：
"multipart/form-data"；
|如果使用get方式则提交的是文件名。 

例如： 

  • <form action="提交数据地址" method="方法get或post" enctype="编码类型，默认">
  • <!--此处为表单控件-->
  • </form>

表单控件使用（重点）

表单控件用于采集用户信息，可设置以下标签属性： |属性名|取值|

| type | 设置控件类型 |

| name | 设置控件名称，最终与值一并发送给服务器 |

| value | 设置控件的值 |

| placeholder | 设置输入框中的提示文本 |

| maxlength | 设置输入框中可输入的最大字符数 |

| checked | 设置单选按钮或复选按钮的默认选中 |

| selected | 设置下拉菜单的默认选中  

设置账号和密码

<p> 用户名:<input type="text" name="username" maxlength="10" placeholder="由字母和数字组成"> </p>

<p> 密码:<input type="password" name="passwd"></p>

属性中： name控件的名称必填项，和输入值一起发送服务器

maxlength：允许输入的最大字符数值

placeholder="由字母和数字组成"：文本进行用户提示。 

用户性别选择：单选按钮属性使用radio

<input type="radio" name="gender" value="man">男

<input type="radio" name="gender" value="women" checked>女

说明：

1、按钮的控件名称必须保持一致

2、value属性必填，设置控件的值，最终发送给服务器

3、checked属性设置默认选中

 

多选框：属性使用checkbox

<input type="checkbox" name="hobby" value="music">lebal

<input type="checkbox" name="hobby" value="study">学习

<input type="checkbox" name="hobby" value="play">玩

说明：value必填

属性值和文本控件绑定在一起 

<input type="checkbox" name="hobby" value="music" id="music">

<label for="music">音乐</label>

步骤：

1、给“音乐”添加label标签，在标签内属性用for="music"

2、input标签内添加Id属性id="music"

隐藏域和文件选择 

用户头像：

<input type="hidden" name="uid" value="001">

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

下拉菜单（了解） 

<p>

选择城市：

<select name="city" >

<option value="beijing">北京</option>

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

<option value="tianjin">天津</option>

<option value="nanjing">南京</option>

<option value="hangzhou" selected>杭州</option>

</select>

</p>

说明：select属性name必填写，option属性值value值必须填写，默认选择 在option属性中输入selected

 

多行文本域（了解 ） 

<p>

个人介绍：

<textarea name="userinfo" id="" cols="30" rows="10"></textarea>

</p>

多功能按钮：重点 

1、提交按钮submit，重置按钮reset，普通按钮button需要结合js自定义处理

<p>

<!-- value用来设置按钮的显示文本 -->

<input type="submit" value="提交">

<input type="reset" value="重置">

<input type="button" value="自定义">

</p>

注意：数据提交需要经过form表单

标签button 

<button>提交</button>

用法：

1、使用在form内相当于submit

2、使用在form外的标签相当于botton

**<button onclick="alert('按钮被单击')">提交</button>**

相当于窗口提示框:alter为提示框信息 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--网页表单-->
    <!--form负责提交数据给服务器.标签属性:
    action指定数据的提交地址
    method指定数据的提交方式,默认为get
    enctype指定数据的编码方式,默认转换字符串,
    拼接在URL后面(urlencoded),
    如果涉及二进制数据(图片,音视频等),必须设置提交方式为post,
    同时指定编码类型为multipart/form-data

    -->
    <form action="/login" method="get" enctype="application/x-www-form-urlencoded">
        <!--表单控件-->
        <p>
            用户姓名:<input type="text" name="username"
                        placeholder="用户名由数字和字母组成"
                        maxlength="10">
        </p>
        <p>
            用户密码:<input type="password" name="userpwd"
                        placeholder="请输入密码">
        </p>
        <p>
            用户性别:
            <!--一组按钮的控件名称必须保持一致-->
            <input type="radio" name="gender"
                   value="boy" checked="checked">男
            <input type="radio" name="gender" value="girl">女
        </p>
        <p>
            兴趣爱好:
            <!--label for id 实现文本与控件的绑定,
            将label标签的属性for取值为对应控件的id值:
            1.使用label标签表示文本
            2.为相应控件添加id标识
            3.label与控件绑定:for属性值与id属性值保持一致-->
            <input type="checkbox" name="hobby"
                   value="smoke" checked id="smoke">
            <label for="smoke">抽烟</label>

            <input type="checkbox" name="hobby"
                   value="masage" id="masage">
            <label for="masage">保健</label>

        </p>
        <!--隐藏域(了解):将一些服务器端需要,
        但是用户不需要了解的数据提交过去,对用户不可见-->
        <input type="hidden" name="uid" value="001">
        <!--下拉菜单-->
        <select name="city" id="">
            <!--默认选中第一个option,可以手动设置selected表示选中-->
            <option value="beijing">北京</option>
            <option value="shangshai">上海</option>
            <option value="guangzhou">广州</option>
            <option value="shenzhen" selected>深圳</option>
        </select>
        <!--文件选择框:涉及二进制数据提交,必须使用post方式,
        同时设置编码类型为multipart/form-data-->
        用户头像:<input type="file" name="uimg">

        <!--功能按钮-->
        <!--1.提交按钮,点击时提交数据到后台,
        可以设置value属性,表示按钮的显示文本-->
        <input type="submit" value="注册">
        <!--2.重置按钮,点击时将表单还原至初始状态-->
        <input type="reset" value="重填">
        <!--3.普通按钮,需要自定义点击处理-->
        <input type="button" value="点击">
        <!--button标签表示按钮,标签内容即为按钮显示文本
        书写在form中,相当于submit提交按钮;
        书写在表单外,相当于普通按钮,需要自定义点击操作-->
        <button>form内</button>
    </form>
    <button>form外</button>

</body>
</html>
View Code

**###其他属性方式****

1、对齐居中text-align=center; 向右对齐align=right；

文本居中对齐

<h1 align="center">H标签my first web 中国</h1>

文本向右对齐

<h1 align="right">H标签my first web 中国</h1> 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--网页表单-->
    <!--form负责提交数据给服务器.标签属性:
    action指定数据的提交地址
    method指定数据的提交方式,默认为get
    enctype指定数据的编码方式,默认转换字符串,
    拼接在URL后面(urlencoded),
    如果涉及二进制数据(图片,音视频等),必须设置提交方式为post,
    同时指定编码类型为multipart/form-data

    -->
    <form action="/login" method="get" enctype="application/x-www-form-urlencoded">
        <!--表单控件-->
        <p>
            用户姓名:<input type="text" name="username"
                        placeholder="用户名由数字和字母组成"
                        maxlength="10">
        </p>
        <p>
            用户密码:<input type="password" name="userpwd"
                        placeholder="请输入密码">
        </p>
        <p>
            用户性别:
            <!--一组按钮的控件名称必须保持一致-->
            <input type="radio" name="gender"
                   value="boy" checked="checked">男
            <input type="radio" name="gender" value="girl">女
        </p>
        <p>
            兴趣爱好:
            <!--label for id 实现文本与控件的绑定,
            将label标签的属性for取值为对应控件的id值:
            1.使用label标签表示文本
            2.为相应控件添加id标识
            3.label与控件绑定:for属性值与id属性值保持一致-->
            <input type="checkbox" name="hobby"
                   value="smoke" checked id="smoke">
            <label for="smoke">抽烟</label>

            <input type="checkbox" name="hobby"
                   value="masage" id="masage">
            <label for="masage">保健</label>

        </p>
        <!--隐藏域(了解):将一些服务器端需要,
        但是用户不需要了解的数据提交过去,对用户不可见-->
        <input type="hidden" name="uid" value="001">
        <!--下拉菜单-->
        <select name="city" id="">
            <!--默认选中第一个option,可以手动设置selected表示选中-->
            <option value="beijing">北京</option>
            <option value="shangshai">上海</option>
            <option value="guangzhou">广州</option>
            <option value="shenzhen" selected>深圳</option>
        </select>
        <!--文件选择框:涉及二进制数据提交,必须使用post方式,
        同时设置编码类型为multipart/form-data-->
        用户头像:<input type="file" name="uimg">

        <!--功能按钮-->
        <!--1.提交按钮,点击时提交数据到后台,
        可以设置value属性,表示按钮的显示文本-->
        <input type="submit" value="注册">
        <!--2.重置按钮,点击时将表单还原至初始状态-->
        <input type="reset" value="重填">
        <!--3.普通按钮,需要自定义点击处理-->
        <input type="button" value="点击">
        <!--button标签表示按钮,标签内容即为按钮显示文本
        书写在form中,相当于submit提交按钮;
        书写在表单外,相当于普通按钮,需要自定义点击操作-->
        <button>form内</button>
    </form>
    <button>form外</button>

</body>
</html>
View Code

其他：

运行结果：

  

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/gyl10/p/11125855.html