HTML常用标签介绍

本文来自于网上资料：https://www.cnblogs.com/fylong/p/8597456.html

  一 .head中的各种标签        

1.       <!DOCTYPE html><html>文档类型声明   声明当前文件是一个HTML5文件文档类型声明在一个html文件中必不可少   而且必须在网页第一行
2.       <!---->     键盘按键为Ctrl+？   注释  
3.       <head>     head中用于设置网页的相关信息
4.       <meta charset="utf-8" />   声明当前网页所采用的字符编码格式

常见的中文编码格式   gb-2312 :国标码简体中文的编码格式

                                   GBK：扩展的国标码 也是简体中文，但是比GB2312多了更多的编码格式

                                   utf-8:unicode万国码 基本兼容各国语言编码。现在最常用

1.   <meta name="keywords"content="html5,web前端，网页开发" />

name="keywords" 表示这一行meta语句是要设置网页的关键字,content=""设置当前网页的关键字内容，多个关键字用英文逗号分隔,name属性与content属性必须同时设置，name表示需要设置的项目 content表示设置的具体内容

设置网页的描述，网页描述在网页中非常重要，在搜索引擎中搜索网页时，网页标题下面显示的一段文字就是网页的描述

1.         <title>这是我的第一个网页</title>           title表示网页的标题 ，1也就是网页选项卡上的文字
2.        <link rel="icon" href="img/icon.png"/>    形如<link  />这样的标签叫做自闭合标签 ,也叫空标签 ,这样的空标签只有一个标签 ,标签在最后用/表示结束,link 标签用于将网页和其他文件进行连接

rel ="icon",rel属性表示即将连接的文件与当前网页的关系  , 属性值选择icon表示即将连接的文件是当前网页的图标,rel是标签的属性，“icon”是标签的属性值 属性值必须用引号引起来href=""表示所要连接的图片地址

二 .body中的各种标签

1.从写法上，HTML标签分为成对标签和自闭合标签（空标签）

   ①成对标签：标签成对出现有开始标签就有结束标签，内容包裹在两个标签之间

   ②自闭合标签（空标签），只有一个标签用/标识标签的自动闭合。

2.从功能上，HTML标签分为块级标签和行级标签

【块级标签和行级标签的区别】

1.块级标签会自动换行，前后隔一行   行级标签不会自动换行，从左向右依次排列

2.块级标签默认宽度都是100%         行级标签宽度由里面的文字撑开

3.块级标签可以设置宽度高度内外边距等属性    行级标签不能设置上述属性

 

 

基本块级标签

块级标签自动换行 前后隔一行

 

  1.h标签：自动加粗 h1最大  h6最小

 代码示例为    <h1>这是h1标签</h1>   <h2>这是h2标签</h2>   <h3>这是h3标签</h3><h4>这是h4标签</h4>   <h5>这是h5标签</h5>   <h6>这是h6标签</h6>

 

  2.hr标签            表示水平线标签         

代码示例为   <hr />

 

  3.p标签表示段落标签，没有特殊含义，仅仅表示当前文字是一个段落    

代码示例为      <p>这是一段文字这是一段文字</p>

 

 4.br 标签表示换行符号，代码中直接敲回车，并不能在网页中显示   &nbsp；表示空格但是网页开发中尽量不用

 

 5.blockquote表示引用标签，表明当前文字引用自其他地方，浏览器会默认向右缩进显示但可以通过CSS进行调整       cite属性表示引用的来源，通常是一个网站的地址

代码示例为          <blockquote cite="www.baidu.com">这句话是我引用的</blockquote>   

 

6.pre标签表示预格式标签，会保留代码中的回车缩进空格等，并在网页中显示pre标签最常用于在网页中展示代码，保留代码格式

代码示例为

<pre>

这是一段文字

这是一段文字

这是一段文字

这是一段文字

</pre>

 

7.有序列表：ol (order list) 有序列表中的每一项用li表示type属性表示序号的类型：1表示数字， A/a表示字母，i/I表示罗马数字

代码示例为

<ol type="">

<li>www</li>

<li>www</li>

<li>www</li>

</ol>

8.无序列表：ul unorder list有序列表中的每一项用li表示type属性表示序号的类型：circle表示。disc表示.square表示正方形

代码示例为

  <ul type="square">

                  <li>第一项

               <ul>

                      <li>1-1</li>

                      <li>1-2</li>

                       <li>1-3</li>

              </ul>

                 </li>

               <li>第二项</li>

               <li>第三项</li>

   </ul>

 

9.定义描述列表dl 使用dt表示标题 使用dd表示描述项   标题一般只有一个，描述项可以有多个标题顶格显示，描述项相对于标题向右缩进显示

代码示例为

                       <d1>

               <dt>标题</dt>

              <dd>描述项</dd>

             <dd>描述项</dd>

              <dd>描述项</dd>

                     </d1>

 

10.图片组合标签figure 用于将图片与下方的标题进行包裹，图片用img表示，标题用figcaption表示

   代码示例为                      <figure>

                             <img src="img/icon.png" />

                       <figcaption>图片标题</figcaption>

                                           </figure>

 

 

11.分区标签div  (px代表像素)是网页开发过程中最常用的标签，div标签可以包裹任何标签，通常配合css使用

代码示例为      <div style="width: 100px;height: 50px;">

                            分区

                           </div>

 

基本行级标签

1.span标签 用于包裹行内的文字，没有其他特殊的含义，可以配合CSS修改某一部分字体的样式

  代码示例为    <span style="color: red;">文字</span>

 

2. 倾斜加粗标签

em,strong,i,b的区别

①em和i都能倾斜 strong和b都能加粗，但是em和strong多了一层强调的含义。（强调的作用：可以让搜索引擎抓取网页的重点内容，实现代码的语义化)

②em和strong都是强调，但是em显示为倾斜，strong显示为加粗，而且strong的强调含义要比em更高

 

3.引用标签

常见的引用标签blockquote/q/cite的区别

        ①从显示效果上，blockquote是块级标签而且整段缩进，q为加引号，cite显示为倾斜

        ②从功能上，blockquote用于引用一整段内容，q标签用于引用一句话，cite通常用于书画名，作品名等标题引用

                              

4. 图片标签 img

  【路径的表示方法】

             1.网络图片地址，但不建议使用

             2.使用图片在本机的绝对路径，但是严禁使用。因为绝对路径使用file：//协议引入图片  而网页使用的是     http：//协议 ，所以无法访问file：//协议引入的文件

             3.使用相对路径，推荐使用的唯一方式  

                 a.当图片在当前文件的下一层时，使用“文件夹名/图片名“表示

                 b.当图片在当前文件的同一层时，使用“图片名”表示

                 c.当图片在当前文件的上一层时，使用”../图片名“表示

             注意：图片必须包含在项目目录里面，不能退出文件根目录

 

    图片标签的各种属性

         ①src属性：表示图片的所在位置             

         ②width/height 属性     图片的宽度高度

         ③title属性            当鼠标指上后显示的文字

         ④ait属性                 图片无法加载时显示的文字，如果省略alt属性，则图片无法加载时显示title的文字

         ⑤align属性            图片两边文字的相对位置  top 文字居上   centenr文字居中    bottom 文字居下（默认）

            

5.超链接标签  a

        ①href属性 超链接即将要跳转的页面，可以是网络地址也可以是本地的HTML文件

        ②target属性 设置新页面打开的位置_self 当前页面打开（默认）_blank在新页面打开

        ③title 当鼠标指上后显示的文字

代码示例为  <a href="http://www.bilibili.com"target="_blank">这是一个超链接</a>

   [功能性链接] 

<a href="mailto://jianghao@jerei.com">youjian </a>        mailto 给指定邮箱发邮件

<a href="tencent://message/?uin=qq号">tenxunqq </a>       Tencent 与指定QQ聊天

                               

6.锚链接 点击超链接，跳转到指定位置（锚点）

            ①在页面指定位置定义一个锚点<a name="ww"></a>

            ② 将超链接的href属性，设置为#锚点名称 <a href="#ww">点击我回顶部</a>

            ③跳到其他其他页面位置的方式       <a href="其他页面地址.html#锚点名称">跳到其他其他页面位置</a>

其他行级标签 （了解）

 

dfn标签 用于定义专业术语

 

abbr标签 用于定义缩写词，常配合dfn使用

 

code标签 声明当前为一段代码，配合pre标签使用。

 

var 标签 定义变量

代码示例为：    <var>x</var>+<var>y</var>=<var>z</var>  显示为 x+y=z

 

 

bdo标签 定义文字的显示方向使用dir属性控制文字显示：ltr从左往右显示   rtl从右往左显示

代码示例为： <bdo dir="rtl">12345678</bdo>      显示为87654321

 

 

kbd标签 用于表示键盘输入的文字

 

 

sup标签 上标文本  

sub 标签  下标文本

 

 

mark标签  显示为高亮文本

 

 

time标签 表示时间

 

表格标签

 

表格标签用 table表示，表格中的每一行用tr表示，一行中的每个单元格用td表示。表头中的单元格用th表示，会默认加粗居中！层次关系：table>tr>td/th

 

[表格的各种属性]---作用于table标签

 

1. border： 给表格的每个td和整个table添加边框。 如果border>1,则只有最外层边框会加粗，td上的边框不会变化。

2. width/height: 表格的宽度、高度。

3. cellspacing: 设置单元格与单元格之间的间距。如果cellspacing="0"，则单元格之间的间距为0，但是相邻的边框不会合并。而是显示两条边框的宽度。

4. cellpadding： 设置单元格内边距，单元格中的文字与边框之间的距离。

5. align: 设置表格在父容器中居左、居中、居右。 align属性相当于使表格浮动，会影响表格后面内容的布局。

6. bgcolor: 表格背景色background: 表格背景图。 背景色和背景图同时存在时，背景图生效。 bordercolor: 边框颜色。

 

设置表格边框合并

可以CSS设置：设置边框合并后，cellspacing属性将会失效，因为两条边框已经合并到一起，不能再产生间距。

 

【行列的各种属性】---作用于tr和td

1. width/height: 宽度、高度

2. bgcolor: 背景色 如果行列属性与table属性冲突，以行列属性为准。

3. align：设置单元格中的文字，水平对齐方式；

4. valign： 设置单元格中的文字，垂直对齐方式。

 

[表格的跨行与跨列]

1.表格跨列，colspan如果一个单元格跨n列，则其右方n-1个单元格删掉

2.表格跨行， rowspan如果一个单元格跨n行，则其下方n-1个单元格删掉

 

表格的结构化

 

完整的表格应包含以下几部分

• caption，表格的标题，用于表格最上方居中
• thead，表头部分，无论thead在什么地方显示时永远在表格最上方
• tbody，表格表格的的主体部分，在thead之下
• tfoot，表格的尾部，无论tfoot在什么地方显示时永远在表格最下方

表格的直列化

• 表格有几列，就可以在表格最上方写几个<col />标签，每个都对应着表格的每一列，这就是表格 的直列化
• 如果要同时修改多列，可以将多个<col />标签用<colgroup></colgroup>进行包裹，统  一修改

注意：直列化通常用于给每一列起统一的name或class名字，一般不直接修改样式。

 

 

 

表单标签

 

表单有两个重要属性

①action表示表单提交的后台服务器地址

②method表单提交数据的方法，可选值有get和post两种

 

 【get和post的区别】

      ①get使用URL地址栏进行传递数据，所有数据在地址栏可见，不安全post传递数据在地址栏不可见，比较安全

      ②get传递的数据量有限，而且只能传输纯文字数据post可以传输大量数据，而且可以传输图片视频文字等

      ③get传递数据的速度比post快

 

【get传递数据的URL格式】

http：//原来的地址.html?name1=valuel&name2=value2...   比如http://127.0.0.1:8020/H51801.html?username=123&password=123

所以，input使用时name属性必不可少，缺少name将导致该输入框的数据不向后台传递

 

input标签

input的常用属性

①type    表示当前输入框是什么类型

②name    给输入框取名字，向后台传输数据时必不可少

③value    给input赋默认值

④placeholder    输入框的提示内容，当输入框存在value时，提示内容消失

⑤disabled=disabled    禁用当前输入框 ，可以显示， 不能编辑，被disabled="disabled禁用的输入框，数据将不再向后传递

⑥hidden=hidden      隐藏输入框，隐藏的输入框中的数据，依然可以向后台传递

⑦readonly="readonly"    只读     与disabled=disabled 的区别，readonly可以向后台传递

 

input的type类型

①text 文本输入框

②password 密码输入框 输入的内容为小数点

③radio 单选框单选按钮的value不能省略 ，这个value需要向后台传递，radio凭借name是否相同区分是否同一组，同一组中name必须相同，而且只能选一个。checked="checked"设置单选按钮的默认选中项

④checkbox 多选框 其他与radio相同

⑤file 文件上传框，multiple=multiple设置可以多选文件上传，accept属性设置可以上传的类型，*表示所有文件，image/*表示所有图片

⑥submit 表单提交按钮

⑦reset 表单重置按钮   将表单恢复到最初状态

⑧image 图形提交按钮 src属性用于导入图片，功能与submit相同

⑨button 显示为按钮形状，但是没有任何功能

⑩hidden  隐藏输入框，隐藏的输入框中的数据，依然可以向后台传递

 

select下拉选择组件

 

①下拉框用<select ></select>表示列表中的每一项用<option></option>表示

②下拉框的name要统一写在<select >上

③如果<option></option>设置了value属性，则向后台传输的是value中的值

如果<option>没有设置value属性，则向后台传输的是<option></option>标签中的文字

④在<option>上使用selected="selected"属性，可以设置默认选中项

⑤在select上使用multiple=multiple属性，可以设置为多选

⑥使用<optgroup></optgroup>可以对所有的option进行分组，使用label属性可以作为分组名

 

textarea文字区块  

 

• • 使用cols= rows=属性，可以设置文本域的大小        注意cols表示多少列是每列多少的字符，一个
  • 汉字两个字符  一般使用css调整宽高而不是使用这两个属性

②使用style="resize: none;",可以设置文本域大小不允许拖放

③使用readonly属性，设置文本域为只读

④使用style=o

  一 .head中的各种标签        

1.       <!DOCTYPE html><html>文档类型声明   声明当前文件是一个HTML5文件文档类型声明在一个html文件中必不可少   而且必须在网页第一行
2.       <!---->     键盘按键为Ctrl+？   注释  
3.       <head>     head中用于设置网页的相关信息
4.       <meta charset="utf-8" />   声明当前网页所采用的字符编码格式

常见的中文编码格式   gb-2312 :国标码简体中文的编码格式

                                   GBK：扩展的国标码 也是简体中文，但是比GB2312多了更多的编码格式

                                   utf-8:unicode万国码 基本兼容各国语言编码。现在最常用

1.   <meta name="keywords"content="html5,web前端，网页开发" />

name="keywords" 表示这一行meta语句是要设置网页的关键字,content=""设置当前网页的关键字内容，多个关键字用英文逗号分隔,name属性与content属性必须同时设置，name表示需要设置的项目 content表示设置的具体内容

设置网页的描述，网页描述在网页中非常重要，在搜索引擎中搜索网页时，网页标题下面显示的一段文字就是网页的描述

1.         <title>这是我的第一个网页</title>           title表示网页的标题 ，1也就是网页选项卡上的文字
2.        <link rel="icon" href="img/icon.png"/>    形如<link  />这样的标签叫做自闭合标签 ,也叫空标签 ,这样的空标签只有一个标签 ,标签在最后用/表示结束,link 标签用于将网页和其他文件进行连接

rel ="icon",rel属性表示即将连接的文件与当前网页的关系  , 属性值选择icon表示即将连接的文件是当前网页的图标,rel是标签的属性，“icon”是标签的属性值 属性值必须用引号引起来href=""表示所要连接的图片地址

二 .body中的各种标签

1.从写法上，HTML标签分为成对标签和自闭合标签（空标签）

   ①成对标签：标签成对出现有开始标签就有结束标签，内容包裹在两个标签之间

   ②自闭合标签（空标签），只有一个标签用/标识标签的自动闭合。

2.从功能上，HTML标签分为块级标签和行级标签

【块级标签和行级标签的区别】

1.块级标签会自动换行，前后隔一行   行级标签不会自动换行，从左向右依次排列

2.块级标签默认宽度都是100%         行级标签宽度由里面的文字撑开

3.块级标签可以设置宽度高度内外边距等属性    行级标签不能设置上述属性

 

 

基本块级标签

块级标签自动换行 前后隔一行

 

  1.h标签：自动加粗 h1最大  h6最小

 代码示例为    <h1>这是h1标签</h1>   <h2>这是h2标签</h2>   <h3>这是h3标签</h3><h4>这是h4标签</h4>   <h5>这是h5标签</h5>   <h6>这是h6标签</h6>

 

  2.hr标签            表示水平线标签         

代码示例为   <hr />

 

  3.p标签表示段落标签，没有特殊含义，仅仅表示当前文字是一个段落    

代码示例为      <p>这是一段文字这是一段文字</p>

 

 4.br 标签表示换行符号，代码中直接敲回车，并不能在网页中显示   &nbsp；表示空格但是网页开发中尽量不用

 

 5.blockquote表示引用标签，表明当前文字引用自其他地方，浏览器会默认向右缩进显示但可以通过CSS进行调整       cite属性表示引用的来源，通常是一个网站的地址

代码示例为          <blockquote cite="www.baidu.com">这句话是我引用的</blockquote>   

 

6.pre标签表示预格式标签，会保留代码中的回车缩进空格等，并在网页中显示pre标签最常用于在网页中展示代码，保留代码格式

代码示例为

<pre>

这是一段文字

这是一段文字

这是一段文字

这是一段文字

</pre>

 

7.有序列表：ol (order list) 有序列表中的每一项用li表示type属性表示序号的类型：1表示数字， A/a表示字母，i/I表示罗马数字

代码示例为

<ol type="">

<li>www</li>

<li>www</li>

<li>www</li>

</ol>

8.无序列表：ul unorder list有序列表中的每一项用li表示type属性表示序号的类型：circle表示。disc表示.square表示正方形

代码示例为

  <ul type="square">

                  <li>第一项

               <ul>

                      <li>1-1</li>

                      <li>1-2</li>

                       <li>1-3</li>

              </ul>

                 </li>

               <li>第二项</li>

               <li>第三项</li>

   </ul>

 

9.定义描述列表dl 使用dt表示标题 使用dd表示描述项   标题一般只有一个，描述项可以有多个标题顶格显示，描述项相对于标题向右缩进显示

代码示例为

                       <d1>

               <dt>标题</dt>

              <dd>描述项</dd>

             <dd>描述项</dd>

              <dd>描述项</dd>

                     </d1>

 

10.图片组合标签figure 用于将图片与下方的标题进行包裹，图片用img表示，标题用figcaption表示

   代码示例为                      <figure>

                             <img src="img/icon.png" />

                       <figcaption>图片标题</figcaption>

                                           </figure>

 

 

11.分区标签div  (px代表像素)是网页开发过程中最常用的标签，div标签可以包裹任何标签，通常配合css使用

代码示例为      <div style="width: 100px;height: 50px;">

                            分区

                           </div>

 

基本行级标签

1.span标签 用于包裹行内的文字，没有其他特殊的含义，可以配合CSS修改某一部分字体的样式

  代码示例为    <span style="color: red;">文字</span>

 

2. 倾斜加粗标签

em,strong,i,b的区别

①em和i都能倾斜 strong和b都能加粗，但是em和strong多了一层强调的含义。（强调的作用：可以让搜索引擎抓取网页的重点内容，实现代码的语义化)

②em和strong都是强调，但是em显示为倾斜，strong显示为加粗，而且strong的强调含义要比em更高

 

3.引用标签

常见的引用标签blockquote/q/cite的区别

        ①从显示效果上，blockquote是块级标签而且整段缩进，q为加引号，cite显示为倾斜

        ②从功能上，blockquote用于引用一整段内容，q标签用于引用一句话，cite通常用于书画名，作品名等标题引用

                              

4. 图片标签 img

  【路径的表示方法】

             1.网络图片地址，但不建议使用

             2.使用图片在本机的绝对路径，但是严禁使用。因为绝对路径使用file：//协议引入图片  而网页使用的是     http：//协议 ，所以无法访问file：//协议引入的文件

             3.使用相对路径，推荐使用的唯一方式  

                 a.当图片在当前文件的下一层时，使用“文件夹名/图片名“表示

                 b.当图片在当前文件的同一层时，使用“图片名”表示

                 c.当图片在当前文件的上一层时，使用”../图片名“表示

             注意：图片必须包含在项目目录里面，不能退出文件根目录

 

    图片标签的各种属性

         ①src属性：表示图片的所在位置             

         ②width/height 属性     图片的宽度高度

         ③title属性            当鼠标指上后显示的文字

         ④ait属性                 图片无法加载时显示的文字，如果省略alt属性，则图片无法加载时显示title的文字

         ⑤align属性            图片两边文字的相对位置  top 文字居上   centenr文字居中    bottom 文字居下（默认）

            

5.超链接标签  a

        ①href属性 超链接即将要跳转的页面，可以是网络地址也可以是本地的HTML文件

        ②target属性 设置新页面打开的位置_self 当前页面打开（默认）_blank在新页面打开

        ③title 当鼠标指上后显示的文字

代码示例为  <a href="http://www.bilibili.com"target="_blank">这是一个超链接</a>

   [功能性链接] 

<a href="mailto://jianghao@jerei.com">youjian </a>        mailto 给指定邮箱发邮件

<a href="tencent://message/?uin=qq号">tenxunqq </a>       Tencent 与指定QQ聊天

                               

6.锚链接 点击超链接，跳转到指定位置（锚点）

            ①在页面指定位置定义一个锚点<a name="ww"></a>

            ② 将超链接的href属性，设置为#锚点名称 <a href="#ww">点击我回顶部</a>

            ③跳到其他其他页面位置的方式       <a href="其他页面地址.html#锚点名称">跳到其他其他页面位置</a>

其他行级标签 （了解）

 

dfn标签 用于定义专业术语

 

abbr标签 用于定义缩写词，常配合dfn使用

 

code标签 声明当前为一段代码，配合pre标签使用。

 

var 标签 定义变量

代码示例为：    <var>x</var>+<var>y</var>=<var>z</var>  显示为 x+y=z

 

 

bdo标签 定义文字的显示方向使用dir属性控制文字显示：ltr从左往右显示   rtl从右往左显示

代码示例为： <bdo dir="rtl">12345678</bdo>      显示为87654321

 

 

kbd标签 用于表示键盘输入的文字

 

 

sup标签 上标文本  

sub 标签  下标文本

 

 

mark标签  显示为高亮文本

 

 

time标签 表示时间

 

表格标签

 

表格标签用 table表示，表格中的每一行用tr表示，一行中的每个单元格用td表示。表头中的单元格用th表示，会默认加粗居中！层次关系：table>tr>td/th

 

[表格的各种属性]---作用于table标签

 

1. border： 给表格的每个td和整个table添加边框。 如果border>1,则只有最外层边框会加粗，td上的边框不会变化。

2. width/height: 表格的宽度、高度。

3. cellspacing: 设置单元格与单元格之间的间距。如果cellspacing="0"，则单元格之间的间距为0，但是相邻的边框不会合并。而是显示两条边框的宽度。

4. cellpadding： 设置单元格内边距，单元格中的文字与边框之间的距离。

5. align: 设置表格在父容器中居左、居中、居右。 align属性相当于使表格浮动，会影响表格后面内容的布局。

6. bgcolor: 表格背景色background: 表格背景图。 背景色和背景图同时存在时，背景图生效。 bordercolor: 边框颜色。

 

设置表格边框合并

可以CSS设置：设置边框合并后，cellspacing属性将会失效，因为两条边框已经合并到一起，不能再产生间距。

 

【行列的各种属性】---作用于tr和td

1. width/height: 宽度、高度

2. bgcolor: 背景色 如果行列属性与table属性冲突，以行列属性为准。

3. align：设置单元格中的文字，水平对齐方式；

4. valign： 设置单元格中的文字，垂直对齐方式。

 

[表格的跨行与跨列]

1.表格跨列，colspan如果一个单元格跨n列，则其右方n-1个单元格删掉

2.表格跨行， rowspan如果一个单元格跨n行，则其下方n-1个单元格删掉

 

表格的结构化

 

完整的表格应包含以下几部分

• caption，表格的标题，用于表格最上方居中
• thead，表头部分，无论thead在什么地方显示时永远在表格最上方
• tbody，表格表格的的主体部分，在thead之下
• tfoot，表格的尾部，无论tfoot在什么地方显示时永远在表格最下方

表格的直列化

• 表格有几列，就可以在表格最上方写几个<col />标签，每个都对应着表格的每一列，这就是表格 的直列化
• 如果要同时修改多列，可以将多个<col />标签用<colgroup></colgroup>进行包裹，统  一修改

注意：直列化通常用于给每一列起统一的name或class名字，一般不直接修改样式。

 

 

 

表单标签

 

表单有两个重要属性

①action表示表单提交的后台服务器地址

②method表单提交数据的方法，可选值有get和post两种

 

 【get和post的区别】

      ①get使用URL地址栏进行传递数据，所有数据在地址栏可见，不安全post传递数据在地址栏不可见，比较安全

      ②get传递的数据量有限，而且只能传输纯文字数据post可以传输大量数据，而且可以传输图片视频文字等

      ③get传递数据的速度比post快

 

【get传递数据的URL格式】

http：//原来的地址.html?name1=valuel&name2=value2...   比如http://127.0.0.1:8020/H51801.html?username=123&password=123

所以，input使用时name属性必不可少，缺少name将导致该输入框的数据不向后台传递

 

input标签

input的常用属性

①type    表示当前输入框是什么类型

②name    给输入框取名字，向后台传输数据时必不可少

③value    给input赋默认值

④placeholder    输入框的提示内容，当输入框存在value时，提示内容消失

⑤disabled=disabled    禁用当前输入框 ，可以显示， 不能编辑，被disabled="disabled禁用的输入框，数据将不再向后传递

⑥hidden=hidden      隐藏输入框，隐藏的输入框中的数据，依然可以向后台传递

⑦readonly="readonly"    只读     与disabled=disabled 的区别，readonly可以向后台传递

 

input的type类型

①text 文本输入框

②password 密码输入框 输入的内容为小数点

③radio 单选框单选按钮的value不能省略 ，这个value需要向后台传递，radio凭借name是否相同区分是否同一组，同一组中name必须相同，而且只能选一个。checked="checked"设置单选按钮的默认选中项

④checkbox 多选框 其他与radio相同

⑤file 文件上传框，multiple=multiple设置可以多选文件上传，accept属性设置可以上传的类型，*表示所有文件，image/*表示所有图片

⑥submit 表单提交按钮

⑦reset 表单重置按钮   将表单恢复到最初状态

⑧image 图形提交按钮 src属性用于导入图片，功能与submit相同

⑨button 显示为按钮形状，但是没有任何功能

⑩hidden  隐藏输入框，隐藏的输入框中的数据，依然可以向后台传递

 

select下拉选择组件

 

①下拉框用<select ></select>表示列表中的每一项用<option></option>表示

②下拉框的name要统一写在<select >上

③如果<option></option>设置了value属性，则向后台传输的是value中的值

如果<option>没有设置value属性，则向后台传输的是<option></option>标签中的文字

④在<option>上使用selected="selected"属性，可以设置默认选中项

⑤在select上使用multiple=multiple属性，可以设置为多选

⑥使用<optgroup></optgroup>可以对所有的option进行分组，使用label属性可以作为分组名

 

textarea文字区块  

 

• • 使用cols= rows=属性，可以设置文本域的大小        注意cols表示多少列是每列多少的字符，一个
  • 汉字两个字符  一般使用css调整宽高而不是使用这两个属性

②使用style="resize: none;",可以设置文本域大小不允许拖放

③使用readonly属性，设置文本域为只读

④使用style=overflow:  样式可以设置，可以设置超出区域的文字如何显示

• auto 默认效果，文字少不显示滚动条文字多时显示垂直滚动条
• hidden 无论文字多少都不显示滚动条，文字超出时将隐藏不显示
• scroll 无论文字多少都显示垂直水平两根滚动条

可以使用style="overflow-y （-x）: scroll;单独设置 两个方向的固定滚动条

 

 

fieldset   表单的边框  

<legend></legend> 表单的标题

tabindex    设置跳转顺序

 

 

verflow:  样式可以设置，可以设置超出区域的文字如何显示

• auto 默认效果，文字少不显示滚动条文字多时显示垂直滚动条
• hidden 无论文字多少都不显示滚动条，文字超出时将隐藏不显示
• scroll 无论文字多少都显示垂直水平两根滚动条

可以使用style="overflow-y （-x）: scroll;单独设置 两个方向的固定滚动条

 

 

fieldset   表单的边框  

<legend></legend> 表单的标题

tabindex    设置跳转顺序