HTML讲解-网页中的文本框

们在上网的时候，经常有一些登录界面进行输入账号和密码，以及我们在网上填一些信息，这些功能的实现都是通过表单来完成的，今天我们就来讲讲表单。

表单不是指一个标签，而是指一类标签。

我们表单里所有的内容都要写在<form></form>标签中 form的action属性是将表单所填的内容发送到想要发送的后台，而method属性有两个值，分别是get和post。get和post的主要区别是get表单所传的内容会在地址栏里显示出来，并且有长度限制，而post表单所传的内容不会在地址栏显示出来，并且可以视为没有长度限制。一般系统默认get。当然get和post的细区别还是有的，在这里我就不赘述了。

其中最重要的是<input>标签，input标签也是单标签。input标签的type属性值不同，其产生的作用也不同：如：<input type="text">产生的是文本框，一般都是我们登录时输入的账号那样的文本框。<input type="password">,产生的是密码框，一般都是我们登录时输入密码的那个框框。<input type="submit">产生的是提交框，一般是我们登录的那个按钮。这些标签都有value属性，但只有提交框用最合适用，因为文本框和密码框虽然也会展示出来，但效果却差强人意，我们一般都用placeholder属性替代它。

不知大家有没有在网上做过选择题，作者是做过的。网页中的选择题也是用的input。

input的type属性值还有radio，是单选框，有几个选项就写几个input，但要注意每一个input里都要写相同的name属性和属性值，这样的话浏览器才会知道这些是同一道题。

既然有单选题那一定也有多选题了，type的checked属性是多选框，其和单选的用法一样，也都要注意name一样的为一道题，还有一个属性是checked=“checked”，这个可以设定默认选择的选项。

我们也一定遇到过选择文字就能勾选而不用非得去点选框的情况，其实input选择框只有被点击的时候才能选中，但有的时候太小不容易点击甚至有的根本没有显示出来，这样的话用户体验就会非常的差，所以我们引进了一个标签：<label></label>标签，这个标签可以实现点击文字就进行选择的功能，用法就是将input标签和文字写在同一个label标签中，注意每一个选项写一起。

我们来看一下代码和结果：

作者已经尽量去说清楚了，欢迎大家批评指教，希望多多关注[送心]

.HTML 介绍

是网页的后缀，txt 后缀是文本，py 后缀是 python ，html 后缀就是网页的意思。我们如果想创建一个网页的话，可以直接将文本的后缀改为 html 。HTMLSHI 超文本标记语言，是一种标识性的语言。它包括一系列标记标签，通过这些标记标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。

1.html 的介绍

页面整体分为两部分：

一部分是head部分，主要是页面的整体信息和配置，内容不会出现在浏览器内部。

一部分是body部分，这部分内容则会在浏览器中展示出来

我们使用 pycharm 创建一个 html ，打开后就是下图模样。

（1）文档类型声明（默认的可以不用设置）

<!DOCTYPE html>

（2）开始标签和结束标签

一般的标签是成对出现的，一般称第一个标签是开始标签，第二个是结束标签。开始和结束标签也称为开放标签和闭合标签。

开始标签：

<html lang="en">

其中的 html 为根元素，是所有元素的基础。lang 表示语言，en 表示英文。

结束标签：

</html>

（3）头部标签

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

其中 utf-8 表示字符编码格式，如果没有写这个就会发生乱码。Title 表示文档的标题。

（4）身体标签

<body>

</body>

身体标签是文档的主题，可视化区域，所有的音频，视频，图片，文字都可在其中搭建，相当于我们打开网页时所看到内容。

（5）标签的特点

标签是由一对尖括号包裹单词构成的，标签要使用小写。一般的标签是成对出现的，一般称第一个标签是开始标签，第二个是结束标签。开始和结束标签也称为开放标签和闭合标签。

二.标签

标签分为块级标签和内联标签（运行时点击右上角的谷歌模式的小圆圈就可以）

1.内容的书写

（1）块级标签（p）

两个 p 中间可随意书写内容

<p>故事和酒，淘宝都有</p>

（2）内联标签（span）

<span>故事和酒，淘宝都有</span>

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 块级标签--> 
<p>故事和酒，淘宝都有</p>
<!--内联标签-->
<span>故事和酒，淘宝都有</span>
</body>
</html>

运行后：

运行后看不出块级标签和内联标签的区别，所有我们使用检查。右击后点击检查

在点击下图中左上角的方框箭头，变成蓝色说明正在运行，之后就可以查看有关的数据了

无需点击，只要将箭头放在文字上就会出现相关内容

上面两图可以明显看出两句话的宽度不相同。

块级标签：在不设置宽度的情况下，宽度始终和浏览器宽度保持一致。

内联标签：宽度和内容有关

2.设置高度宽度

<p style="width: 500px;height: 50px;">故事和酒，淘宝都有</p>

<span style="width: 500px;height: 50px;">故事和酒，淘宝都有</span>

如图所示，只有块级标签宽高改变了，内联标签不改变。由此可得，块级标签设置宽高有效，内联标签设置宽高无效。

3.多个标签同时存在

<body>
<!-- 块级标签-->
<p>故事和酒，淘宝都有</p>
<p>故事和酒，淘宝都有</p>
<!--内联标签-->
<span>故事和酒，淘宝都有22</span>
<span>故事和酒，淘宝都有22</span>
</body>

多个块级标签同时存在的情况下，排列方式从上往下
多个内联标签同时存在的情况下，排列方式从左往右

4.是否包含

<body>
<!-- 块级标签-->
<p>故事和酒，淘宝都有
    <span>故事和酒，淘宝都有22</span>
</p>

<!--内联标签-->
<span>故事和酒，淘宝都有22
    <p>故事和酒，淘宝都有</p>
</span>

</body>

由此可知，块级标签可以包含内联标签，但内联标签不可以包含块级标签，只可以包含内联标签。

5.块级标签与内联标签相互转换

（1）块级转内联

<body>
<!--将块级标签转化成内联标签-->
<p style="display: inline">故事和酒，淘宝都有</p>
<p style="display: inline">故事和酒，淘宝都有</p>

</body>

（2）内联转块级（display: block）

内联转为块级之后，具有了块级的性质。

<span style="display: block">故事和酒，淘宝都有222</span>
<span style="display: block">故事和酒，淘宝都有222</span>

（3）内联块元素（display: inline-block）

内联块元素包含了内联标签和块级标签的部分特性。

<span style="display: inline-block">故事和酒，淘宝都有333</span>
<span style="display: inline-block;height: 50px">故事和酒，淘宝都有333</span>

（4）段落标签（p）

<!--段落标签-->
<p></p>

（5）标题标签（h）

TMl 的标签可以分为单个标签和成对标签。

单个标签：html4 规定单个标签要有一个 / 表示结尾， html5 则不用

<!--单个标签-->
<meta>
<!--成对标签 -->
<div></div>

以下是HTMl中常用的一些标签

div 标签

div 标签主要用来将相关的内容组合到一块，就像菜市场把各个蔬菜分成不同种类区分摆放是一个道理。

div 是最常见也是比较重要的标签，网页布局中经常使用的一类标签。通常布局被称为 DIV + CSS 布局

<div>
  div 就是一个分类的存储箱子
</div>

p标签

p标签表示段落，在网页文字中应用的比较多

<!--段落和段落间会换行-->
<p>第一段</p>
<p>第二段</p>

H-标题标签

h标签分为六个

标签	语义
h1	一级标题
h2	二级标题
h3	三级标题
h4	四级标题
h5	五级标题
h6	六级标题

引用标题标签后，字体会加粗、字号一会变大

ul 无序标签

无序标签是没有显示顺序的列表，无序列表前面通常会有一个“小点”，这个小点可以用type属性控制。其中有三个展示方式（不过这种方式比较固定，不够灵活和美观，已经被CSS的效果代替），如下：

值（type属性）	描述
disc	默认值，实心圆
circle	空心圆
square	实心方框

举例:

<!--ul标签内部只能放置li标签-->
<!--li标签内部可以放其他的标签-->
<ul type=">
    <li>无序列表元素1</li> <!--列表项-->
    <li>无序列表元素2</li>
</ul>




实心圆
<ul type="disc">
  <li>西红柿</li>
  <li>黄瓜</li>
</ul>
空心圆
<ul type="circle">
  <li>西红柿</li>
  <li>黄瓜</li>
</ul>
实心方框
<ul type="square">
  <li>西红柿</li>
  <li>黄瓜</li>
</ul>

ol 有序标签

ol 前面的标签是有序的，可以是数字、字母、罗马数字等。同样控制这些样式使用的是type属性。

type属性值	意义
a	小写英文字母编号
A	大写英文字母编号
i	小写罗马数字编号
I	大写罗马数字编号
1	数字编号（默认）

设置start属性，表示从哪个编号开始
加 reversed 表示倒叙排列

有序列表, 从2开始
<ol start="2">
  <li>元素1</li>
  <li>元素2</li>
</ol>


小写字母表示
<ol type="a">
  <li>元素1</li>
  <li>元素2</li>
  <li>元素3</li>
</ol>


倒叙
<ol reversed>
  <li>元素1</li>
  <li>元素2</li>
  <li>元素3</li>
</ol>

dl 自定义列表

dl标签表示自定义列表

dt表示数据项，dd表示数据定义， dd是dt标签的解释

<dl>
    <dt>西红柿</dt>
    <dd>红、酸</dd>
    <dt>黄瓜</dt>
    <dd>绿、涩</dd>
  </dl>

img标签

img 用来插入图片，包括但不限于以下图片格式

图片格式	备注
.jpg、.jpeg	通常用于照片，是一种有损压缩格式
.png	通常用于logo、背景，支持透明和半透明。便携式网络图像
.svg	矢量图片

<!-- src(source)属性， 图片地址，可以为相对路径，也可以为绝对路径-->
<!-- alt 如果遇到图片无法加载的情况，网页上会展示 alt的 值 -->
<!-- width 和 height 表示 宽和高， 如果只设置一个， 那么另外一个就会跟着成比例缩放-->
<img src="./images/images.jpg" alt="星期一" width="120" height="20">

a 标签

用a标签来制作超级链接

<!-- href 属性 表示 其他页面的链接，支持相对路径和绝对路径，还可以链接到其它网站 -->
<!--target 属性表示 打开其他链接的方式-->
<!-- title 属性表示 链接的标题， 当鼠标移动到链接上，会展示出来-->
<a href="http://www.baidu.com" target="blank" title="文字标题">百度</a>






<!--也可以用a标签作为锚点 锚点可以是本页面的锚点，也可以是其他页面的锚点-->
<h1 id="title">头部标题</h1>
... 此处省略一些代码
<a href="#title">返回标题</a>




<!--下载链接，指向 doc， zip， zip等文件格式时，a标签将成为自动下载链接-->
<a href="./download/halou.zip">发邮件</a>
<!-- mailto:前缀的链接是邮件链接，系统将自动打开email相关软件-->
<a href="mailto:halouworld@126.com">发邮件</a>
<!-- tel: 前缀链接是电话链接，系统将自动打开拨号键-->
<a href="tel:11111111111">打开拨号键盘</a>

audio标签

audio标签用来插入音频标签

<!--添加 controls 后才会显示 播放控件-->
<!--常用音频格式 mp3 和 ogg格式-->
<!--autoplay 自动播放属性-->
<!--loop 属性表示循环播放-->
<audio controls src="./video/demo.mp3">
       您的浏览器不支持 audio标签，请升级
</audio>




<audio controls src="./video/demo.mp3" autoplay loop>
     您的浏览器不支持 audio标签，请升级
</audio>

video标签

video 标签用于插入一段视频

<!--有的视频不能播放 ，详见 https://blog.csdn.net/weixin_34272308/article/details/94614657 -->
<!-- controls 显示视频播放控件  -->
<!-- autoplay 自动播放 -->
<!-- loop 循环播放 -->
<!-- 常见的 视频格式 mp4 ogv webm 等-->
<video controls autoplay loop src="./video/5-4 RDB2.mp4" >
    您的浏览器不支持 video标签，请升级
</video>

其它区块标签

以前的区块标签只有div，现在为了更好的方便搜索引擎抓取网站，因此有了以下语义更加明确的区块标签

<section>	文档的区域，比div语义上还要大一点
<header>	页头
<main>	网页核心部分
<footer>	页脚

其他的语义标签

span 标记文本标记区域，没有特殊效果，结合CSS使用

b 标签加粗文章（可以使用CSS实现同样效果）

u 加下换线文字

br 换行

i 倾斜文字（可以使用CSS实现同样效果）

strong 代表特别重要的文字

em 需要强调的文字，有一定的倾斜，也可以用其配置CSS做表情文字

mark 高亮文字

figure 和 figcaption 。figure - 一段独立的内容 figcaption- figure 内部元素的说明性内容

表单

表单用来收集信息并且可以完成和后端的数据传输

表单中大致可以分为三种标签

form标签，标识表单区域，内部的元素都可能被表单提取信息
input 标签，标识输入、点击等需要和用户交互的场景
datalist 下拉框，支持搜索，通常和input一块使用

一些表单的示例

<!--action 表示要提交到后端的网址-->
<!--method 表示表单提交的方式，通常有 get 、 post 、put、delete等-->


<form action="/save" meththo="post"></form>


<!--<form> 标签中 input 文本框 type="text" 表示文本框-->
<!-- value 表示文本框中的值 -->
<!--planceholder表示提示文字，在没任何输入值的情况下，作为提示信息-->
<!--disabled 表示禁用-->
<input type="text" value="123" planceholder="提示文字" disabled>


<!---单选按钮，name相等，表示选择了一个，另一个就不能选择了-->
<!--checked 表示默认被选中-->
<!-- value 属性表示要提交到后端服务器的值-->
<input type="radio" name="radio_group" checked>
<input type="radio"  name="radio_group">




<label>
    <input type="radio" name="sex"> 男
</label>
<label> 
    <input type="radio" name="sex"> 女
</label>




<!--html4 中的标签 通过for 属性 和 其他标签的id属性进行绑定-->


<input type="radio" name="sex" id="nan"> 
<label for="nan">男</label>


<input type="radio" name="sex"   id="nv">
<label for="nv">女</label>


<!--复选框 type="checkbox" 同一组的的复选框，name值应该相同 ，复选框也有value值， 用于向服务器提交数据-->
<input type="checkbox" name="hobby" value="soccer" > 足球
<input type="checkbox" name="hobby" value="basket" > 篮球


<!--密码框-->
<input type="password" placeholder="请输入密码">


<!-- 下拉菜单 -->
<select>
  <option value="alipay">支付宝</option>
  <option value="wxpay">微信支付</option>
</select>


<!--多文本框 rows 和  clos 分别用于设置 行数 和 列数-->
<textarea rows="3" cols="5"></textarea>


<!--三种按钮 submit 提交按钮  button 普通按钮 可以简写为  <button></button> reset 按钮 重置按钮-->
<input type="button" value="普通按钮">
    <input type="reset" value="重置按钮"> 
    <input type="submit" value="提交表单">




<!--像 email 和 url 等格式，如果点击提交按钮，不符合格式，会有提示-->
<form>
    日期空间: <input type="date">  <br/>
    时间空间: <input type="time">  <br/>
    日期时间空间 <input type="datetime-local">  <br/>


    文件:<input type="file"> <br/>  <br/>
    数字控件: <input type="number"> <br/>
    拖拽条: <input type="range"> <br/>
    搜索框: <input type="search"> <br/>
    网址控件: <input type="url"> <br/>
    邮箱控件: <input type="email" >
    <input type="submit" value="提交">
</form>




<!-- datalist 备选项示例 -->
<input type="text" list="province">
<datalist id="province">
  <option value="陕西"></option>
  <option value="山西"></option>
  <option value="河北"></option>
  <option value="山东"></option>
</datalist>

表格

可以用html渲染表格

table 标签表示表格

tr 表示行
td 表示单元格
caption 表格的标题，通常放在表格的第一行
th 表示列标题

<!--表格示例-->
<table border="1">
  <caption>我是标题</caption>
  <tr>
      <th>第一列标题</th>
      <th>第二列标题</th>
  </tr>
  <tr>
      <td>第一行第一列</td>
      <td>第一行第二列</td>
  </tr>
  <tr>
      <td>第二行第一列</td>
      <td>第二行第二列</td>
  </tr>
</table>

单元格的合并, clospan 用来设置td 或者th的列跨度， rowspan属性用来设置td或者th的行跨度

<!--跨列示例-->
<table border="1">
    <caption>我是标题</caption>
    <tr>
        <th>第一列标题</th>
        <th>第二列标题</th>
    </tr>
    <tr>
        <td colspan="2">跨两行</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
</table>


<!--跨行示例-->
<table border="1">
        <caption>我是标题</caption>
        <tr>
            <th>第一列标题</th>
            <th>第二列标题</th>
        </tr>
        <tr>
            <td rowspan="2">第一行第一列</td>
            <td>第一行第二列</td>
        </tr>
        <tr>
            <td>第二行第二列</td>
        </tr>
        <tr>
            <td>第三行第一列</td>
            <td>第三行第二列</td>
        </tr>
  </table>

表格的其他标签， thead 定义表头， tbody 定义表格的主题内容， tfoot 标签定义表格底部，通常用来汇总等

在线咨询

上一篇：在线HTML编辑器快速转将内容为HTML原始码网页设着计利器
下一篇：问题：HTML中表示文字粗体的标记除了使用<strong>外，还可以使用

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商