标签：基本 form 标签 前端 表单 HTML 2.3 2.2 2.1

【前端】【HTML】【HTML的基本使用】

一、总概

1.常用标签的使用
2.新增的标签
3.使用技巧

二、总体内容

2.1、常用标签

2.1.1、a标签

1.href不不仅可以跳转网址还可以跳转本地文件

<a href="href_test.html">你点不点</a>
<a href="https://www.baidu.com/s?ie=UTF-8&wd=%E7%BE%8E%E5%A5%B3">不要点</a>

2.锚点的使用

#应用--回到顶部 回到底部
<p><a id="top" name="hah">这里是顶部</a></p>
--通过id
<a href="#top">回到</a>
--通过name
<a href="#hah">回到</a>

2.1.2、form表单

1、重要属性使用

1.1、enctype

application/x-www-form-urlencoded:表单的默认提交方式,一般省略不写
multipart/form-data：一般用于含有文件上传的表单提交
text/plain：文本

扩展：一般将数据提交到后台有两种提交方式，一种是表单提交，另一种就是json提交（application/json）

1.2、action

表单提交地址，由于ajax使用更加频繁（ajax里面的url），一般省略不写；如果要写的话，没人阻止

1.3、method

get/post  
一般为post,加密

1.4、target

前两种用的比较多，一般默认不写，使用第一种；后面两种我没用过
_blank	在新窗口/选项卡中打开。
_self	在同一框架中打开。（默认）
_parent	在父框架中打开。
_top	在整个窗口中打开。

1.5、autocomplete

on/off   自动完成是否开启，就是浏览器输入时下方是否有之前提示文字显示

1.6、novalidate

true/false
是否无需验证表单里的标签

2.1.3下拉框

1.示例

    <select name="11" id="test_select">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>

2.属性

2.1、multiple

支持多选，直接展开，不再下拉

2.2、size

每次显示几个，默认显示一个，一般不写，也用不到，除非特殊要求，包括上面那个

2.1.4选择框

单选框 和 多选框 
checked  
name值一样就是同一组的

2.1.5文件上传

1.示例

 <input type="file" id="file" name="file" accept="application/zip"/>

2.重要属性

2.1、accpet

上传文件支持类型
1.mime类型 
application/zip
...
2.其他类型
audio/*	接受所有的声音文件。	.mp3, .wav ...
video/*	接受所有的视频文件。  .avi, .mpg, .mpeg, .mp4 ...
image/*	接受所有的图像文件。 	.png, .jpg ...

扩展：https://www.iana.org/assignments/media-types/media-types.xhtml

2.2、multiple

multiple="multiple"  multiple 
两种格式都可以，在xhtml里必须写成第一种

2.1.6、input通用属性

#输入框公用参数
required 必须的
disabled 禁用   一般用于编辑时只能查看，不能修改
readonly 只读
placeholder 提示文字
pattern 正则     使用比较频繁，需要掌握正则表达式
autofocus 自动聚焦
autocomplete  自动完成  优先级比form的自动完成优先级高

####值得记住的新知识
form 可以将form标签范围外的字段包含到form表单之内
formaction   input:submit  修改form表单的url

2.2新增标签的使用

2.2.1、数值类型

1.示例

<!-- 整数输入框 --><input type="number" name="number" id="number1">
<!-- 范围输入框 --><input type="range" name="range" id="range" min="1" max="200" step="2" value="2" oninput="show()">
<!-- 手机号码 --><input type="tel" name="tel" id="tel">

2.属性

min、max、step
主要用于前两个输入框

2.2.2、时间类型

<!-- 年月日 时分 目前好像浏览器都不兼容 --><input type="datetime" name="test_month" id="test_month2">
<!-- 年月日 时分 --><input type="datetime-local" name="test_month" id="test_month3">
<!-- 年月日 --><input type="date" name="test_month" id="test_month">
<!-- 时分 --><input type="time" name="test_month" id="test_month1">
<!-- 年月 --><input type="month" name="month" id="r_month">

2.2.3、文本类型

<!--搜索框 不支持简单的css样式设置 --><input type="search" name="e" id="e" width="1000px">

2.2.4、颜色类型

<input type="color" name="color" id="color1">
不同的浏览器显示的功能也不同，Google支持三种模式切换

2.2.5、其他类型

#网址
<input type="url" name="url" id="url1">
#视频
<!-- 增加muted属性后 autoplay属性就可以生效 实现自动生效 -->
<video width="300" height="400" controls="controls" loop="loop" muted="muted" autoplay="autoplay">
    <source src="../img/1473413179.mp4" type="video/mp4"></source>
</video>
#音频
<audio src="../img/1.mp3" controls="controls" loop="loop">
    当前浏览器不支持audio
</audio>

2.3使用技巧

2.3.1行级标签的换行与< br />换行的区别

<br/>换行只是换行，而行级标签换行还涉及到元素的行间距的变换（magin与padding）

2.3.2背景图片的显示要点（自适应背景图片）

css部分关键代码：
background-image: url(../img/2.jpeg) ;
/* 如果不生效可以使用!important， 最高权限 必须执行 */
background-repeat: no-repeat !important;
background-size:100% 100% !important;

2.3.3 前端到后端数据提交的几种方式

表单提交
ajax -json

2.3.4、前端和后端数据类型及类型转换

2.3.5、input 的width和height使用注意

只能用于image类型的

标签：基本,form,标签,前端,表单,HTML,2.3,2.2,2.1
From： https://www.cnblogs.com/simpletime/p/16768668.html