【2020Python修炼记】前端开发之 HTML常用标签汇总

本文转载自查看原文 2020-05-12 10:11 648 web前端-三剑客

【目录】标签&标签属性

1、HTML 注释

2、HTML 文档基础结构

3、head 内常用标签

link 链接标签

meta 信息标签

4、body 内常用标签

常用文本标签

特殊符号

div / span 分块标签

a 标签

img 标签

list 列表标签

table 表格标签

form 表单标签

0、前端预备知识

HTTP协议：https://www.cnblogs.com/linhaifeng/p/8243379.html

https://www.cnblogs.com/linhaifeng/category/1263978.html

1、HTML 注释（选中内容或者光标置于注释行，快捷键 ctrl+/ ）

# 注释:注释是代码之母 <!--单行注释--> <!-- 多行注释1 多行注释2 多行注释3 --> # 由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的查找： <!--导航条开始--> 导航条所有的html代码 <!--导航条结束-->
 <!--左侧菜单栏开始--> 左侧菜单栏的HTMl代码 <!--左侧菜单栏结束-->

2、HTML 文档基础结构（编辑器里搭建HTML格式文件 !(英文感叹号)+tab ）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>

3、head 内常用标签

# 1 网页标题 <title>Title</title> 
 # 2 css 样式 <style> h1 { color: greenyellow;
        }
</style> 内部用来书写css代码 <link rel="stylesheet" type="text/css" href="mycss.css"> 可引入外部css文件 # 3 网站的图标 <link rel="icon" type="images/x-icon" href="https://www.baidu.com/favicon.ico"> # 4 js 代码 <script> 　　alert(123) </script> 内部用来书写js代码 <script type="text/javascript" src="myjs.js"></script> 可引入外部js文件 # 5 网站描述关键字/文本 <meta name="keywords" content="教育,Python培训,Linux培训,网络安全培训,Go语言培训, 人工智能培训,云计算培训, Linux运维培训,Python自动化运维,Python全栈开发,IT培训">

<!-- 当你在用浏览器搜索的时候 只要输入了keywords后面指定的关键字那么该网页都有可能被百度搜索出来展示给用户; 网页的描述性信息 -->

link 标签

# 属性 href = " 链接地址 "

# 引入外部css文件
<link rel="stylesheet" type="text/css" href="style.css"></link>
#网站网址小图标 <link rel="shortcut icon" type="images/x-icon" href="http://www.baidu.com/favicon.ico">

meta标签

Meta标签介绍：

<meta>元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。

<meta>标签位于文档的头部，不包含任何内容。

<meta>提供的信息是用户不可见的。

meta标签的组成：

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

1.http-equiv属性：

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

<!--指定文档的编码类型(需要知道)--> <meta http-equiv="content-Type" charset=UTF8"> <!--2秒后跳转到对应的网址，注意引号(了解)--> <meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"> <!--告诉IE以最高级模式渲染文档(了解)--> <meta http-equiv="x-ua-compatible" content="IE=edge">

2.name属性:

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

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <meta name="description" content="老男孩教育Python学院">

#1、指定字符集 <meta charset="gbk"> #2、页面描述 <meta name="Description" content="具体描述。。。"> #3、关键字：有助于搜索引擎SEC优化，再怎么优化也抵不过竞价排名 <meta name="Keywords" content="网易，邮箱，游戏，新闻"> #4、3秒后跳转 <meta http-equiv="refresh" content="3,http://www.baidu.com">
 #5、三秒刷新 <meta http-equiv="refresh" content="3">

4、body内常用标签

【补充】

标签默认具有的两个重要属性

1.id值
类似于标签的身份证号，在同一个html页面上id值不能重复
2.class值
该值有点类似于面向对象里面的继承，一个标签可以继承多个class值

标签既可以有默认的属性，也可以有自定义的属性

<p id="d1" class="c1" username="jason" password="123"></p>

编辑器里快速编辑标签的技巧——开始标签的后半部分+tab 键（部分编辑器支持）

例如：span 标签

span>（然后按tab键）
最后效果如下：
<span></span>

（1）格式排版/文本标签

格式排版标签

文本标签

<!--一下文本标签 作为了解-->
<cite> 用于引证、举例、(标签定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题)通常为斜体字 <dfn> 定义一个定义项目 <code> 定义计算机代码文本 <samp> 定义样式文本 标签并不经常使用。只有在要从正常的上下文中将某些短字符序列提取出来，对它们加以强调的极少情况下，才使用这个标签。 <kbd> 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。 <abbr> 定义缩写 配合title属性 (IE6以上) <bdo> 来覆盖默认的文本方向 dir属性 值: lrt rtl <var> 定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。 <small> 标签定义小型文本（和旁注） <b>    粗体字标签 根据 HTML 5 的规范，<b> 标签应该做为最后的选择，只有在没有其他标记比较合适时才使用它。 <i> 斜体字标签 标签被用来表示科技术语、其他语种的成语俗语、想法、宇宙飞船的名字等等。 <u>    下划线字体标签 标签定义与常规文本风格不同的文本，像拼写错误的单词或者汉语中的专有名词。 请尽量避免使用 <u> 为文本加下划线，用户会把它混淆为一个超链接。 <s> 删除线 <q> 签定义一个短的引用。浏览器经常会在这种引用的周围插入引号。(小段文字) <blockquote> 标签定义摘自另一个源的块引用。浏览器通常会对 <blockquote> 元素进行缩进。(大段文字) (块状元素) <address> 定义地址 通常为斜体 (注意非通讯地址) 块状元素 <font> H5已删除 字体标签，可以通过标签的属性指定文字的大小、颜色及字体等信息 <tt> H5已删除 打字机文字 <big> H5已删除 大型字体标签 <acronym>  H5已删除 首字母缩写 请使用<abbr>代替 <bdi> H5新增 标签允许您设置一段文本，使其脱离其父元素的文本方向设置。(经测试,各大浏览器都不起作用) <mark> H5新增 标签定义带有记号的文本 请在需要突出显示文本时使用,如搜索引擎搜索页面 <meter> H5新增 定义预定义范围的度量 <progress> H5新增 标签标示任务的进度（进程） <time> H5新增 定义时间和日期 <wbr>        H5新增    规定在文本中的何处适合添加换行符。Word Break Opportunity

其他文本标签

html5中推出了一些新的标签：

strong == b ins == u em == i del == s 新的标签是有语义的，而老的只是单纯的添加样式（这是CSS干的事） strong的语义：定义重要性强调的文字 ins的语义（inserted）：定义插入的文字 em的语义（emphasized）：定义强调的文字 del的语义（deleted）：定义被删除的文字

（2）特殊符号

HTML 特殊符号编码对照表

&nbsp; 空格 &gt; 大于号 &lt; 小于号 &amp; & &yen; ¥ 人民币符号 &copy; © 版权 &reg; ® 商标

（3）分块标签

div 块儿级标签
span 行内标签

上述的两个标签是在构造页面初期最常使用的, 主要通过 CSS样式为其赋予不同的表现。

# 页面的布局一般先用div和span占位之后再去调整样式

尤其是div使用非常的频繁
div你可以把它看成是一块区域也就意味着用div来提前规定所有的区域，之后往该区域内部填写内容即可
而普通的文本先用span标签

关于标签嵌套：

通常,块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。

p标签不能包含块级标签，p标签也不能包含 p标签。

（4）img 标签

# 图片标签
<img src="" alt="">

#【属性】

src=" 图片路径"
1.图片的路径可以是本地的也可以是网上的
2.url:自动朝该url发送get请求获取数据

(什么是URL？URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。)

alt="图片描述信息"
当图片加载不出来的时候给图片的描述性信息

title="鼠标悬浮停留时，自动提示信息"
当鼠标悬浮到图片上之后自动展示的提示信息

height="800px"

width=""

高度和宽度当你只修改一个的时候另外一个参数会自动等比例缩放；
如果你修改了两个参数并且没有考虑比例的问题那么图片就会失真

#1、用法 <img src="图片地址" alt="图片加载失败时显示的内容" title = "鼠标悬停到图片上时显示的内容" /> #2、注意 2.1 src指定的图片地址可以是网络地址，也可以是一个本地地址，本地地址可以用绝对或相对路径，但通常用相对路径，相对路径是以html文件当前所在路径为基准进行的 2.2 图片的格式可以是png、jpg和gif 2.3 alt="图片加载失败时显示的内容" 为img标签加上该属性可用于支持搜索引擎和盲人读屏软件。 2.4 title = "鼠标悬停到图片上时显示的内容" 2.5 如果没有指定图片的width和height则按照图片默认的宽高显示，如果指定图片的width和height则可能让图片变形 那如果又想指定宽度和高度，又不想让图片变形，我们可以只指定宽度和高度的一个值即可 只要指定了一个值，系统会根据该值计算另外一个值，并且都是等比拉伸的，图片将不会变形

详细讲解

（5）a 标签——标记一个内容为超链接，全称anchor，锚

# 链接标签
<a href=" " target=" " title=" " ></a>

"""
当a标签指定的网址从来没有被点击过那么a标签的字体颜色是蓝色
如果点击过了就会是紫色（浏览器给你记忆了）
"""

# 属性

href=" "
1.放url，用户点击就会跳转到该url页面
2.放其他标签的id值点击即可跳转到对应的标签位置

target=" "
默认a标签是在当前页面完成跳转 target="_self"

新建页面跳转 target="_blank"

title="鼠标悬浮停留时，自动提示信息"
当鼠标悬浮到图片上之后自动展示的提示信息

去除a标签内的文本下划线

style="text-decoration:none;"

# a标签的锚点功能
eg:点击一个文本标题页面自动跳转到标题对应的内容区域

# 方法一：使用a标签的 href 和 id 属性

<a href="" id="d1">顶部</a> # href 后面不写内容，则有刷新效果--》也是回到顶部的效果 <h1 id="d111">hello world</h1> <div style="height: 1000px;background-color: red"></div> <a href="" id="d2">中间</a> <div style="height: 1000px;background-color: greenyellow"></div>
…… <a href="#d1">底部</a> <a href="#d2">回到中间</a> <a href="#d111">回到中间</a>

# 方法二：使用 a 标签的 href 和 name 属性 
<p>
    <a href="#p1" style="color: darkseagreen;text-decoration:none;font-size:18px">八个八</a>
</p> # 点击’八个八‘，会跳转到下方指定位置 

<p>
    <a href="#p2" style="color: darkseagreen;text-decoration:none;font-size:18px">八 用户与程序交互</a>
</p> # 点击’用户与程序交互‘，会跳转到下方指定位置 …… <p>1111111111</p>
<p>1111111111</p>
<a href="" name="p1"></a>
<p style="color: red">八个八-来这里</p> …… <p>1111111111</p>
<a href="" name="p2"></a>
<p style="color: green">八 用户与程序交互-来这里</p>
<p>1111111111</p>
<p>1111111111</p>
<p>1111111111</p> …… <a href="">跳到首页</a> #有刷新效果

 <a href="#">跳到首页</a> # 没有刷新效果

# 注意点：
    通过我们的a标签跳转到指定的位置，是没有过渡动画的，
    是直接一下子就跳转到了指定位置；
    如果跳到首页需要过渡动画，则不用a标签做。

# 假链接(占位作用)

#1、什么是假链接？
就是点击之后不会跳转的链接，我们称之为假链接 #2、假链接存在的意义：
在企业开发前期，其他界面都还没有写出来， 那么我们就不知道应该跳转到什么地方，所以就只能使用假链接来代替 #3、假链接的定义格式

# 效果也是回到顶部，但是没有刷新效果
<a href="#">假链接</a>

# 点击以下链接，页面没有任何反应。 因为还没有指定点击事件的动作。因此 可以使用这个假链接，（使用js代码）定制指定事件动作
<a href="javascript:">假链接</a>

#1、超链接标签是超文本文件的精髓，可以控制页面与页面之间的跳转，语法如下 <a href="跳转到的目标页面地址" target="是否在新页面中打开" title="鼠标悬浮显示的内容">需要展现给用户查看的内容/也可以是图片</a> #2、注意： 2.1 a标签不仅可以标记文字，也可以标记图片 <a href="https://www.baidu.com"><img src="mv.png" />百度一下，你就知道</a> 2.2 a标签必须有href属性，href的值必须是http://或https://开头 2.3 a标签还可以跳转到自己的页面 <a href="template/aaa.html">锤你胸口</a> 2.4 target="_blank"代表在新页面中打开，其余的值均无需记忆， 如果页面中大量的a标签都需要设置target="_blank",那么我们可以在head标签内新增一个base标签进行统一设置 <base target="_blank"> 如果a标签自己设置了target，那么就以自己的为准，否则就会参照base的设置 2.5 title="鼠标悬浮显示的内容"

详解版

（6）列表标签

**无序列表(使用较多) —— 快捷语法 ul>li*4**

<ul> <li>第一项</li> <li>第二项</li> <li>第二项</li> <li>第二项</li> </ul> 虽然ul标签很丑 但是在页面布局的时候 只要是排版一致的几行数据基本上用的都是ul标签

**有序列表(了解) —— 快捷语法 ol>li*3**

<ol type="1" start="5"> <li>111</li> <li>222</li> <li>333</li> </ol>

type属性：

1 数字列表，默认值

A 大写字母

a 小写字母

Ⅰ大写罗马

ⅰ小写罗马

标题列表(了解) （可嵌套在无序/有序列表里）

<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容2</dd> <dt>标题3</dt> <dd>内容3</dd> </dl>

<ol>
    <li>
        <dl>
            <dt>标题1</dt> 
            <dd>内容1</dd>

            <dt>标题2</dt>
            <dd>内容2</dd>
            
            <dt>标题3</dt>
            <dd>内容3</dd>
        </dl>        
    </li>        
</ol>

1、无序列表（列表标签中使用最多的一种，非常重要）：unordered list #1、作用： 制作导航条、商品列表、新闻列表等 #2、组合使用ul>li <ul>
        <li>秒杀</li>
        <li>优惠券</li>
        <li>PLUS会员</li>
        <li>闪购</li>
        <li>拍卖</li>
        <li>京东服饰</li>
        <li>京东超市</li>
        <li>生鲜</li>
        <li>全球购</li>
        <li>京东金融</li>
    </ul> #3、ul标签的属性type（这属于列表的样式，所以了解即可） type：列表标识的类型 disc：实心圆(默认值) circle：空心圆 square：实心矩形 none：不显示标识 可以通过css直接去掉小圆点 <style type="text/css"> ul { list-style: none;
            }
</style> #4、注意 ul与li是组合标签应该一起出现，并且ul的子标签只应该是li，而li的子标签则可以是任意其他标签 2、有序列表（极少使用） <h1>智商排名</h1>
    <ol>
        <li>Egon</li>
        <li>刘清正</li>
        <li>武佩奇</li>
        <li>alex</li>
        <li>元昊</li>
    </ol>

    <!--有序列表能干的事，完全可以用无序列表取代-->
    <h1>智商排名</h1>
    <ul style="list-style: none">
        <li>1. Egon</li>
        <li>2. 刘清正</li>
        <li>3. 武佩奇</li>
        <li>4. alex</li>
        <li>5. 元昊</li>
    </ul> 自定义列表（也会经常使用） 复制代码 #1、作用分析 选择用什么标签的唯一标准，是看文本的实际语义，而不是看长什么样子 无序列表：内容是并列的,没有先后顺序 有序列表：内容是有先后顺序的 自定义列表：对一个题目进行解释说明的时候，用自定义列表,可以做网站尾部相关信息，网易注册界面的输入框 #2、自定义列表也是一个组合标签：dl>dt+dd dl:defination list，自定义列表 dt：defination title，自定义标题 dd：defination description，自定义描述 <dl>
    <dt>自定义标题1<dt>
    <dd>描述1<dd>
    <dd>描述2<dd>
    <dd>描述3<dd>

    <dt>自定义标题2<dt>
    <dd>描述1<dd>
    <dd>描述2<dd>
    <dd>描述3<dd>

    <dt>自定义标题3<dt>
    <dd>描述1<dd>
    <dd>描述2<dd>
    <dd>描述3<dd>
</dl> #3、注意: 3.1 dl>dt+dd应该组合出现，dl中只应该存放dt和dd，而可以在dt和dd中添加任意其他标签 3.2 一个dt可以没有对应的dd，也可以有多个，但建议一个dt对应一个dd

详解版

（7）table 表格标签

<!-- 表格标签 <thead> 表头 <tbody> 表单数据 <tr> 一个<tr> 就是一行 <th> 加粗文本，一般用于表头标题 <td> 正常文本，一般用于其他表格内容 属性（一般加在 开始标签里） <table border="1"> 加外边框 <td colspan="2"></td> 水平方向占2个单元格（合并同一行中的单元格） <td rowspan="2"></td> 垂直方向占2个单元格（合并同一列中的单元格） --> <table> /* 表格标签里，由<thead></thead>和<tbody></tbody> 组成*/ <thead> <tr> <th>uername</th> <th>password</th> </tr> </thead> <tbody> <tr> <td>mili</td> <td>1314</td> </tr> <tr> <td>cc</td> <td>520</td> </tr> </tbody> </table>

属性:

border: 表格边框.

cellpadding: 内边距

cellspacing: 外边距.

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

rowspan: 单元格竖跨多少行

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

#1、宽度和高度
 可以给table和td设置width和height属性 1.1 默认情况下表格的宽高是按照内容的尺寸来调整的，也可以通过给table标签设置widht和height来手动指定表格的宽高 1.2 如果给td标签设置width和height属性，会修改当前单元格的宽度和高度，只要不超过table的宽高，则不会影响整个表格的宽度和高度 #2、水平对齐和垂直对齐
 水平对齐align可以给table、tr、td标签设置 垂直对齐valign只能给tr、td标签设置 ========水平对齐=========== 取值 align=“left” align=“center” align=“right” 2.1 给table标签设置水平对齐，可以让表格在水平方向上对齐 强调：table只能设置水平方向 2.2 给tr设置水平对齐，可以控制当前行所有单元格内容都水平对齐 2.3 给td设置水平对齐，可以控制当前单元格内容水平对齐，tr与td冲突的情况下，以td为准 ========垂直对齐=========== 取值 valign=“top” valign=“center” valign=“bottom” 2.4 给tr设置垂直对齐可以让当前行所有单元格内容都垂直对齐 2.5 给td设置垂直对齐可以让当前单元格内容垂直对齐 #3、外边距和内边距
 只能给table设置 3.1 外边距：单元格与单元格之间的间隔，cellspacing="3px"，默认值为2px 3.2 内边距：单元格边框与文字之间的距离:cellpadding="200px" 表格属性（了解知识点）

表格属性

#1、方式一
 在标签中，想通过指定外边距为0来实现细线表格是不靠谱的，其实他是将2条线合成了一条线.所以看上去很不舒服,如下实现 <table width="200px" height="200px" bgcolor="black" border="1" cellspacing="0px">
    <tr bgcolor="white">
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
    </tr>

    <tr bgcolor="white" >
        <td>Egon</td>
        <td>male</td>
        <td>18</td>
    </tr>

    <tr bgcolor="white">
        <td>ALex</td>
        <td>male</td>
        <td>73</td>
    </tr>

    <tr bgcolor="white">
        <td>Wxx</td>
        <td>female</td>
        <td>84</td>
    </tr>
</table>
#2、方式二
 细线表格的制作方式： 1、给table标签设置bgcolor 2、给tr标签设置bgcolor 3、给table标签设置cellspacing="1px" 注意： table、tr、td标签都支持bgcolor属性 <table width="200px" height="200px" bgcolor="black" cellspacing="1px">
    <tr bgcolor="white">
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
    </tr>

    <tr bgcolor="white" >
        <td>Egon</td>
        <td>male</td>
        <td>18</td>
    </tr>

    <tr bgcolor="white">
        <td>ALex</td>
        <td>male</td>
        <td>73</td>
    </tr>

    <tr bgcolor="white">
        <td>Wxx</td>
        <td>female</td>
        <td>84</td>
    </tr>
</table>

#3、方式三（style="border-collapse: collapse;border: 1px solid red"）
<table border="1px" style="border-collapse: collapse;border: 1px solid red">
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>egon</td>
        <td>male</td>
        <td>18</td>
    </tr>
    <tr>
        <td>alex</td>
        <td>female</td>
        <td>19</td>
    </tr>
</table>

三种方式制作细线表格

为了方便管理维护以及提升语义，我们将表格中存储的数据分为四类： #1、表格的标题:caption 特点:相对于表格宽度自动居中对齐 注意: 1.1 该标签一定要写在table标签里，否则无效 1.2 caption一定要紧跟在table标签内的第一个 #2、表格的表头信息:thead 特点：专门用来存储每一列的标题，只要将当前列的标题存储在这个标签中就会自动居中+加粗文字 #3、表格的主体信息:tbody 注意： 3.1 如果没有添加tbody，浏览器会自动添加 3.2 如果指定了thread和tfoot，那么在修改整个表格的高度时，thead和tfoot有自己默认的高度，不会随着 表格的高度变化而变化 #4、表尾信息:tfoot <html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
    <table bgcolor="black" border="1" width="300px" height="300px" cellspacing="1px">

        <caption>学员信息统计</caption>
        <thead>
            <tr bgcolor="white">
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>

        <tbody>
            <tr bgcolor="white">
                <td>egon</td>
                <td>male</td>
                <td>18</td>
            </tr>

            <tr bgcolor="white">
                <td>egon</td>
                <td>male</td>
                <td>18</td>
            </tr>

            <tr bgcolor="white">
                <td>egon</td>
                <td>male</td>
                <td>18</td>
            </tr>
        </tbody>

        <tfoot>
            <tr bgcolor="white">
                <td>3</td>
                <td>3</td>
                <td>3</td>
            </tr>
        </tfoot>
    </table>

</body>
</html> 表格结构详解

表格完整结构

#1、水平向上的单元格 colspan --合并列 可以给td标签添加一个colspan属性，来把水平方向的单元格当做多个单元格来看待 <td colspan="2"></td> #2、垂直向上的单元格 rowspan --合并行 可以给td标签设置一个rowspan属性，来把垂直方向的的单元格当成多个去看待 #注意注意注意: 1、由于把某一个单元格当作了多个单元格来看待，所以就会多出一些单元格，所以需要删掉一些单元格 2、一定要记住，单元格合并永远是向后或者向下合并，而不能向前或向上合并

表格合并

传统的布局方式就是使用table来做整体页面的布局，布局的技巧归纳为如下几点： #1、定义表格宽高，将border、cellpadding、cellspacing全部设置为0 #2、单元格里面嵌套表格 #3、单元格中的元素和嵌套的表格用align和valign设置对齐方式 #4、通过属性或者css样式设置单元格中元素的样式 传统布局目前应用： #1、快速制作用于演示的html页面 #2、商业推广EDM制作(广告邮件) 传统布局

传统布局的技巧

（8）form 表单标签　

https://www.processon.com/view/link/5aeea789e4b084d6e4bf6911#map

form 标签的属性:

属性描述

accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。

action 规定向何处提交表单的地址（URL）（提交页面）。

autocomplete 规定浏览器应该自动完成表单（默认：开启）。

enctype 规定被提交数据的编码（默认：url-encoded）。

method 规定在提交表单时所用的 HTTP 方法（默认：GET）。

name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。

novalidate 规定浏览器不验证表单。

target 规定 action 属性中地址的目标（默认：_self）。

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。
action	规定向何处提交表单的地址（URL）（提交页面）。
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
enctype	规定被提交数据的编码（默认：url-encoded）。
method	规定在提交表单时所用的 HTTP 方法（默认：GET）。
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate	规定浏览器不验证表单。
target	规定 action 属性中地址的目标（默认：_self）。

input 标签的属性:

name：表单提交时的“键” key ，注意和id的区别。----> key

value：表单提交时对应项的值checked：radio和checkbox默认被选中的项 ----> value

type="button", "reset", "submit"时，为按钮上显示的文本年内容

type="text","password","hidden"时，为输入框的初始值

type="checkbox", "radio", "file"，为输入相关联的值

readonly：text和password设置只读

disabled：所有input均适用

placeholder：后面加上提示信息-placeholder='请输入密码：'

input 标签的 type属性值:

type属性值 表现形式 对应代码

text 单行输入文本 <input type=text" />

password 密码输入框 <input type="password" />

date 日期输入框 <input type="date" />

checkbox 复选框 <input type="checkbox" checked="checked" />

radio 单选框 <input type="radio" />

submit 提交按钮 <input type="submit" value="提交" />

reset 重置按钮 <input type="reset" value="重置" />

button 普通按钮 <input type="button" value="普通按钮" />

hidden 隐藏输入框 <input type="hidden" />

file 文本选择框 <input type="file" />

type属性值	表现形式	对应代码
text	单行输入文本	<input type=text" />
password	密码输入框	<input type="password" />
date	日期输入框	<input type="date" />
checkbox	复选框	<input type="checkbox" checked="checked" />
radio	单选框	<input type="radio" />
submit	提交按钮	<input type="submit" value="提交" />
reset	重置按钮	<input type="reset" value="重置" />
button	普通按钮	<input type="button" value="普通按钮" />
hidden	隐藏输入框	<input type="hidden" />
file	文本选择框	<input type="file" />

select 标签的属性：

multiple：布尔属性，设置后为多选，否则默认单选

disabled：禁用

selected：默认选中该项

value：定义提交时的选项值

textarea 标签的属性说明：

name：名称

rows：行数

cols：列数

disabled：禁用

<!-- 表单标签 #能够获取前端用户数据(用户输入的、用户选择、用户上传...)基于网络发送给后端服务器 1\ form 标签的默认属性 action: =控制数据提交的后端路径(给哪个服务端提交数据)： 1.什么都不写 默认就是朝当前页面所在的url提交数据 2.写全路径:https://www.baidu.com 朝百度服务端提交 3.只写路径后缀action='/index/' 自动识别出当前服务端的ip和port拼接到前面 host:port/index/ =form表单提交 文件 需要注意： 1.method必须指定为 post （form表单默认提交数据的方式是get请求，数据是直接放在url后面的， 　　　　　　无法保证数据安全 http://127.0.0.1:5000/index/?username=sdadasdsda&gender=on） 2.enctype="multipart/form-data" enctype类似于数据提交的编码格式 默认是urlencoded，只能够提交普通的文本数据 formdata 就可以支持提交文件数据

　　　　　　　　　　 application/x-www-form-urlencoded：在发送前编码所有字符，不允许提交文件数据（默认）

　　　　　　　　multipart/form-data：不对字符进行编码，在使用包含文件上传控件的表单时，必须使用该值

　　　　　　　　text/plain：只对普通字符进行编码，如空格转换为 "+" 加号，但不对特殊字符以及文件编码

 <form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data"> 2\ # label 和 input都是行内标签。ps:input不跟label关联也没有问题 label 标签的默认属性 for： for的值要与相关联的 input标签的 id值一致 /* 第一种:直接将input框写在label内 */ <label for="d1"> username:<input type="text" id="d1"> </label> /* 第二种 通过id链接即可 无需嵌套 */ <label for="d2">password:</label> <input type="text" id="d2"> input标签 就类似于前端的变形金刚 ，通过type属性变形 text:普通文本 password:密文 date:日期 submit:用来触发form表单提交数据的动作 button:就是一个普普通通的按钮 本身没有任何的功能 但是它是最有用的，学完js之后可以给它自定义各种功能 reset:重置内容 radio:单选 默认选中要加checked='checked' <input type="radio" name="gender" checked='checked'>男 当标签的属性名和属性值一样的时候可以简写 <input type="radio" name="gender" checked>女 checkbox:多选 <input type="checkbox" checked>DBJ file:获取文件 也可以一次性获取多个 <input type="file" multiple> hidden:隐藏当前input框 钓鱼网站伎俩 3\ select 标签 默认是单选 可以加mutiple参数变多选 默认选中selected 4\ textarea 标签 获取大段文本，多行文本 ps: # 能够触发form表单提交数据的按钮有哪些(一定要记住) 1、<input type="submit" value="注册"> 2、<button>点我</button> # 所有获取用户输入的标签 都应该有name属性 name就类似于字典的key 用户的数据就类似于字典的value # 针对用户选择的标签 用户不需要输入内容，但是你需要提前给这些标签添加内容value值 # 针对用户输入的标签。如果你加了value 那就是默认值 <label for="d1"> username:<input type="text" id="d1" name="username" value="默认值" placeholder="请输入密码："> </label> 其他input标签属性 disable 禁用 readonly 只读 -->

【补充】

在form内还可以添加一种标签：

<fieldset>添加边框
    <legend>注册页面</legend>
    表单控件......
</fieldset>

示例代码

<form action=""> <!-- 用户输入框 --> <p> <label for="d1">username:<input type="text" id="d1" placeholder="请输入用户名："></label> </p > <p> <label for="d2">password:<input type="password" id="d2" placeholder="请输入密码："></label> </p > <!-- 日期选择功能 --> <p>birthday: <input type="date"> </p > <!-- input标签-单选 (将 name 的值设为一样的，就可实现 单选) --> <p>gender: <input type="radio" name="gender">男 <input type="radio" name="gender" checked>女 <input type="radio" name="gender">其他 </p > <!--input标签-多选 --> <p>hobby: <input type="checkbox">read <input type="checkbox" checked>DBJ <input type="checkbox" checked>JBD <input type="checkbox">hecha </p > <!-- select标签-单选 --> <p>province： <select name="" id=""> <option value="">上海</option> <option value="" selected>北京</option> <option value="">深圳</option> </select> </p > <!-- select标签-多选 使用 multiple 属性 --> <p>前女友: <select name="" id="" multiple> <option value="" selected>新垣结衣</option> <option value="" selected>斯佳丽</option> <option value="">明老师</option> </select> </p > <!-- select标签-多级单选列表 嵌套 <optgroup>标签 --> <p>province1: <select name="" id=""> <optgroup label="上海"> <option value="">浦东</option> <option value="">黄埔</option> <option value="">青浦</option> </optgroup> <optgroup label="北京"> <option value="">朝阳</option> <option value="">昌平</option> <option value="">沙河</option> </optgroup> <optgroup label="深圳"> <option value="">111</option> <option value="">222</option> <option value="">333</option> </optgroup> </select> </p > <!-- 上传文件 multiple属性可支持用户能上传多种文件 --> <p>文件: <input type="file" multiple> </p > <!-- 文本输入框 --> <p>自我介绍: <br> <textarea name="" id="" cols="30" rows="10"></textarea> </p > <input type="submit" value="注册"> <!-- 当你没有使用 value属性 指定按钮的文本内容 不同的浏览器打开之后可能渲染的文本内容不一致--> <input type="button" value="按钮"> <input type="reset" value="重置"> <button>点我</button> </form>

使用python 本地后端接收表单信息（了解即可）

from flask import Flask, request app = Flask(__name__) # 当前url既可以支持get请求也可以支持post请求 如果不写默认只能支持get请求  @app.route('/index/',methods=['GET','POST']) def index(): print(request.form) # 获取form表单提交过来的非文件数据 # ImmutableMultiDict([('username', 'jason'), ('password', '123132131231233'), ('gender', 'on')]) print(request.files) # 获取文件数据 file_obj = request.files.get('myfile.png') file_obj.save(file_obj.name) return 'OK' app.run()

表单HTML 的form 需要加上相应属性：

<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">

参考阅读：

https://www.cnblogs.com/xiaoyuanqujing/articles/11669926.html

https://www.cnblogs.com/Dominic-Ji/p/10136928.html

https://www.cnblogs.com/linhaifeng/category/1263978.html

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 【2020Python修炼记】web框架之 Django框架基础 Python开发【前端】:汇总前端开发常用网站汇总前端之HTML标签、HTTP协议、常用的标签、 Python开发【前端】：HTML Web前端——Html常用标签及属性 Web前端——Html常用标签及属性 [原]《Web前端开发修炼之道》-读书笔记HTML部分 H5移动前端开发常用高能css3汇总前端常用网站汇总

【2020Python修炼记】前端开发之 HTML常用标签汇总

【目录】 标签&标签属性

1、HTML 注释

2、HTML 文档基础结构

3、head 内常用标签

link 链接标签

meta 信息标签

4、body 内常用标签

常用文本标签

特殊符号

div / span 分块标签

a 标签

img 标签

list 列表标签

table 表格标签

form 表单标签

0、前端预备知识

HTTP协议：https://www.cnblogs.com/linhaifeng/p/8243379.html

https://www.cnblogs.com/linhaifeng/category/1263978.html

1、HTML 注释 （选中内容或者光标置于注释行，快捷键 ctrl+/ ）

2、HTML 文档基础结构 （编辑器里 搭建HTML格式文件 !(英文感叹号)+tab ）

3、head 内常用标签

link 标签

# 属性 href = " 链接地址 "

meta标签

Meta标签介绍：

<meta>元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。

<meta>标签位于文档的头部，不包含任何内容。

<meta>提供的信息是用户不可见的。

meta标签的组成：

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

1.http-equiv属性：

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

2.name属性:

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

4、body内常用标签

【补充】

标签默认具有的两个重要属性

1.id值类似于标签的身份证号，在同一个html页面上id值不能重复2.class值该值有点类似于面向对象里面的继承，一个标签可以继承多个class值

标签既可以有默认的属性，也可以有自定义的属性

编辑器里快速编辑标签的技巧——开始标签的后半部分+tab 键（部分编辑器支持）

例如：span 标签

（1）格式排版/文本标签

格式排版标签

文本标签

html5中推出了一些新的标签：

（2）特殊符号

HTML 特殊符号编码对照表

（3）分块标签

div 块儿级标签span 行内标签

上述的两个标签是在构造页面初期最常使用的, 主要通过 CSS样式为其赋予不同的表现。

# 页面的布局一般先用div和span占位之后再去调整样式

尤其是div使用非常的频繁div你可以把它看成是一块区域 也就意味着用div来提前规定所有的区域，之后往该区域内部填写内容即可而普通的文本先用span标签

关于标签嵌套：

通常,块级元素 可以包含 内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。

p标签不能包含 块级标签，p标签也不能包含 p标签。

（4）img 标签

# 图片标签<img src="" alt="">

#【属性】

src=" 图片路径" 1.图片的路径 可以是本地的也可以是网上的2.url:自动朝该url发送get请求获取数据

(什么是URL？URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。)

alt="图片描述信息"当图片加载不出来的时候 给图片的描述性信息

title="鼠标悬浮停留时，自动提示信息"当鼠标悬浮到图片上之后 自动展示的提示信息

height="800px" width=""

高度和宽度当你只修改一个的时候 另外一个参数会自动等比例缩放；如果你修改了两个参数 并且没有考虑比例的问题 那么图片就会失真

（5）a 标签——标记一个内容为超链接，全称anchor，锚

# 链接标签<a href=" " target=" " title=" " ></a>

"""当a标签指定的网址从来没有被点击过 那么a标签的字体颜色是蓝色如果点击过了就会是紫色（浏览器给你记忆了）"""

# 属性

href=" "1.放url，用户点击就会跳转到该url页面2.放其他标签的id值 点击即可跳转到对应的标签位置

target=" "默认a标签是在当前页面完成跳转 target="_self"

新建页面跳转 target="_blank"

title="鼠标悬浮停留时，自动提示信息"当鼠标悬浮到图片上之后 自动展示的提示信息

# a标签的锚点功能eg:点击一个文本标题 页面自动跳转到标题对应的内容区域

# 假链接(占位作用)

（6）列表标签

无序列表(使用较多) —— 快捷语法 ul>li*4

有序列表(了解) —— 快捷语法 ol>li*3

type属性：

1 数字列表，默认值

【目录】标签&标签属性

1、HTML 注释（选中内容或者光标置于注释行，快捷键 ctrl+/ ）

2、HTML 文档基础结构（编辑器里搭建HTML格式文件 !(英文感叹号)+tab ）

1.id值
类似于标签的身份证号，在同一个html页面上id值不能重复
2.class值
该值有点类似于面向对象里面的继承，一个标签可以继承多个class值

div 块儿级标签
span 行内标签

尤其是div使用非常的频繁
div你可以把它看成是一块区域也就意味着用div来提前规定所有的区域，之后往该区域内部填写内容即可
而普通的文本先用span标签

通常,块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。

p标签不能包含块级标签，p标签也不能包含 p标签。

# 图片标签
<img src="" alt="">

src=" 图片路径"
1.图片的路径可以是本地的也可以是网上的
2.url:自动朝该url发送get请求获取数据

alt="图片描述信息"
当图片加载不出来的时候给图片的描述性信息

title="鼠标悬浮停留时，自动提示信息"
当鼠标悬浮到图片上之后自动展示的提示信息

height="800px"

width=""

高度和宽度当你只修改一个的时候另外一个参数会自动等比例缩放；
如果你修改了两个参数并且没有考虑比例的问题那么图片就会失真

# 链接标签
<a href=" " target=" " title=" " ></a>

"""
当a标签指定的网址从来没有被点击过那么a标签的字体颜色是蓝色
如果点击过了就会是紫色（浏览器给你记忆了）
"""

href=" "
1.放url，用户点击就会跳转到该url页面
2.放其他标签的id值点击即可跳转到对应的标签位置

target=" "
默认a标签是在当前页面完成跳转 target="_self"

title="鼠标悬浮停留时，自动提示信息"
当鼠标悬浮到图片上之后自动展示的提示信息

# a标签的锚点功能
eg:点击一个文本标题页面自动跳转到标题对应的内容区域

**无序列表(使用较多) —— 快捷语法 ul>li*4**

**有序列表(了解) —— 快捷语法 ol>li*3**

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

（8）form 表单标签　