大家好，欢迎来到IT知识分享网。
HTML常用标签详解
一、head内常用标签
1.基本标签（非meta标签）
<!--title: 定义网页标题--> <title>Title</title> <!--style: 定义内部样式表. 内部用来书写css代码--> <style> h1 {
color: greenyellow; } </style> <!--script: 内部用来书写js代码--> <script> alert(123) </script> <!--script: 还可以引入外部js文件--> <script src="myjs.js"></script> <!--link: 引入外部css文件 或 网站图标--> <link rel="stylesheet" href="mycss.css"> 2.meta相关
2.1 Meta标签介绍
<meta>元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。<meta>标签位于文档的头部，不包含任何内容。<meta>提供的信息是用户不可见的。
2.2 Meta标签的组成
meta标签共有两个属性，他们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能
http-equiv 属性:
相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
补充:
equiv全称equivalent /ɪˈkwɪvələnt/相等的 等值 相当于
<!--指定文档的编码类型(需要知道)--> <meta http-equiv="content-Type" charset=UTF8"> <!--2秒后跳转到对应的网址，注意引号(了解)--> <meta http-equiv="refresh" content="2;URL=https://www.baidu.com"> <!--3秒后刷新(了解)--> <meta http-equiv="refresh" content="3"> <!--告诉IE以最高级模式渲染文档(了解)--> <meta http-equiv="x-ua-compatible" content="IE=edge"> name 属性
主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<!--关键字：有助于搜索引擎SEO优化，再怎么优化也抵不过竞价排名--> <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <!--页面描述--> <meta name="description" content="给你骨质唱疏通"> meta标签必须写在头部head标签之内，而description的meta标签务必要写在keywords的meta标签之后，像下面这样的顺序写：
- 关键字：description要用简短的文字描述网站或网页的主要内容，有利于各大搜索引擎的抓取收录你的网站或网页。
- 页面描述：当你设置了description网站描述文字，才会显示在搜索引擎的结果页中，而每个网页的description也是同样的道理，简短又准确的网页描述文字，可以帮助用户在搜索引擎中更方便的找到你的网站和网页！
3. 总结
<title>网页标题</title> <style></style> <!--rel Reload 加载--> <!--href hypertext reference 超文本引用--> <link rel="stylesheet" href="url"> <script></script> <!--src Source 源文件链接--> <script scr="源文件链接"></script> <meta name="keywords" content="关键字1, 关键字2, 关键字3"> <meta name="description" content="网页描述信息"> <meta http-equiv="content-type" charset="字符编码"> 二、body内常用标签
1. HTML语义化
1.1 body标签介绍
- body中的标签是会显示到浏览器窗口中的
- body内的标签只有一个作用就是用来标记语义的，语义指的是从字面意思就可以理解被标记的内容是用来做什么的
虽然不同的标签会有不同的显示样式，但我们一定要强制自己忘记所有标签的显示样式，只记它的语义。因为每个标签的样式各不相同，记忆不同标签的样式来控制显示样式，对前端开发来说将会是一种灾难，更何况添加样式并不是HTML擅长的事情，而且在布局的时候多使用语义化的标签，会方便搜索引擎在爬取网页文件时更好地解析文档结构，从而进行收录。
1.2 基本标签（块级标签和内联标签）
对于那些只用来修改样式的标签将会被淘汰掉，比如以下标签都是没有语义的，都是用来修改样式的
<!--b Bold 粗体（文本）--> <b>加粗</b> <!--i Italic /ɪˈtælɪk/ 斜体（文本）--> <i>斜体</i> <!--u Underlined 下划线（文本）--> <u>下划线</u> <!--s Strikethrough /straɪk/ 删除线--> <s>删除</s> <p>段落标签</p> <!--h1~h6 Header 1 to Header 6 标题1到标题6--> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <!--br Break 换行--> <br> <!--hr Horizontal Rule /ˌhɒrɪˈzɒntl/ 水平线，分割线--> <hr> <!--br Break 修改文字大小，颜色--> <font color="red" size="10px">我是菜鸟</font> HTML5中推出了一些新的标签
strong == b ins == u em == i del == s 新的标签是有语义的，而老的只是单纯的添加样式（这是CSS干的事） strong的语义：定义重要性强调的文字 ins的语义（inserted）：定义插入的文字 em的语义（emphasized）：定义强调的文字 del的语义（deleted）：定义被删除的文字 2. div标签和span标签
- div标签（块级标签）用来定义一个块级元素，并无实际意义。主要通过CSS样式为其赋予不同的表现。
div用来标记一块内容，没有具体的语义
- span标签用来定义内联（行内）元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
span用来标记一行中的一小段内容，也没有具体的语义。
补充：全称及缩写说明
div Division分隔span Span范围
3. 标签的分类：块级/行内
块级元素与行内元素的区别
- 块级标签：独占一行（h1~h6 p div）
- 块儿级标签可以修改长宽. 行内标签不可以, 就算修改了也不会变化.
- 块级标签内部可以嵌套任意的块级标签和行内标签.
特例: 但是p标签虽然是块级标签 但是它只能嵌套行内标签 不能嵌套块级标签. 如果你套了 问题也不大 因为浏览器会自动帮你解除嵌套关系(浏览器是直接面向用户的 不会轻易的报错 哪怕有报错用户也基本感觉不出来)
- 行内标签: 自身文本多大就占多大.·
i u s b span - 行内标签不能嵌套块级标签, 只能嵌套行内标签.
- 补充：上述的规定只是HTML书写规范 如果你不遵循 不会报错
总结：
- 只要是块儿级标签都可以嵌套任意的块儿级标签和行内标签
- 但是p标签只能嵌套行内标签，不能包含块级标签，p标签也不能包含p标签（HTML书写规范）
- 内联元素不能包含块级元素，它只能包含其它内联元素
4. 实体字符（特殊符号）
注意：在HTML中对空格／回车／tab不敏感，会把多个空格／回车／tab当作一个空格来处理
4.1 什么是实体字符？
在HTML中，有的字符是被保留的比如大于号小于号。
注释：实体名称对大小写敏感！！
| 内容 | 代码 |
|---|---|
| 空格 | |
| > | > |
| < | < |
| & | & |
| ¥ | ¥ |
| 版权 | © |
| 注册 | ® |
HTML特殊符号对照表
5.h系列标签
语义：标记内容为一个标题，全称headline
h系列标签从h1-h6共6个，没有h7标签，标记内容为1~6级标题，h1用作主标题（代表最重要的），其次是h2，依次往下排序，直到H6。
虽然h1-h6标签的显示样式是从大到小，但再次强调：记忆HTML标签的显示样式是没有意义的
<!DOCTYPE HTML> <html> <head lang='en'> <meta charset="utf-8"> <title>Egon才华无敌</title> </head> <body> <h1>一级标题</h1><h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> <h7>没有七级标题</h7> 没有七级标题 </body> </html> 注意：
在企业开发中一定要慎用h系列标签，特别是h1标签，在企业开发中一般一个界面中只能出现一个h1标签（出于SEO考虑，搜索引擎会使用标题将网页的结构和内容编制索引）,比如www.163.com。
6.p标签
语义：标记内容为一个段落，全称paragraph
<!DOCTYPE HTML> <html> <head lang='en'> <meta charset="utf-8"> <title>Egon无敌</title> </head> <body> <h1>Egon</h1> <p>论颜值，鹤立鸡群</p> <p>论才华，天下无敌</p> </body> </html> 7. img标签
语义：标记一个图片，全称image
1. 用法
<img src="图片地址" alt="图片加载失败时显示的内容" title = "鼠标悬停到图片上时显示的内容" /> 2. 注意
- src指定的图片地址可以是网络地址，也可以是一个本地地址，本地地址可以用绝对或相对路径，但通常用相对路径，相对路径是以html文件当前所在路径为基准进行的
- 图片的格式可以是
png、jpg和gif alt="图片加载失败时显示的内容"：为img标签加上该属性可用于支持搜索引擎和盲人读屏软件。title = "鼠标悬停到图片上时显示的内容"height="800px"width=""
全称及缩写说明：
alt alter替用(一般是图片显示不出的提示）src Source源文件链接
8.a标签
8.1 a标签介绍
语义：标记一个内容为超链接，全称anchor，锚
所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序
超链接标签是超文本文件的精髓，可以控制页面与页面之间的跳转，语法如下:
<a href="跳转到的目标页面地址" target="是否在新页面中打开" title="鼠标悬浮显示的内容">需要展现给用户查看的内容/也可以是图片</a> href属性指定目标网页地址。该地址可以有几种类型：
- 绝对URL – 指向另一个站点
（比如 href=”[http://www.jd.com）](http://www.jd.com)/) - 相对URL – 指当前站点中确切的路径
（href=”index.htm”） - 锚URL – 指向页面中的锚
（href=”#top”）
target：
_blank表示在新标签页中打开目标网页_self表示在当前标签页中打开目标网页
8.2 a标签注意点
- a标签不仅可以标记文字，也可以标记图片
<a href="https://www.baidu.com"><img src="mv.png" />百度一下，你就知道</a> - a标签必须有href属性，href的值必须是
http://或https://开头 - a标签还可以跳转到自己的页面
<a href="template/aaa.html">锤你胸口</a> - target=”_blank”代表在新页面中打开，其余的值均无需记忆。
如果页面中大量的a标签都需要设置target="_blank",那么我们可以在head标签内新增一个base标签进行统一设置 <base target="_blank"> 如果a标签自己设置了target，那么就以自己的为准，否则就会参照base的设置 - title=”鼠标悬浮显示的
补充：
- 当a标签指定的网址从来没有被点击过 那么a标签的字体颜色是蓝色
- 如果点击过了就会是紫色（浏览器给你记忆了）
8.3 假链接
什么假链接？
- 就是点击之后不会跳转的链接，我们称之为假链接
假链接存在的意义
- 在企业开发前期，其他界面都还没有写出来。
- 那么我们就不知道应该跳转到什么地方，所以只能使用假链接来代替。
假链接的定义格式
1、href="#" :会自动回到网页的顶部 2、href="javascript:" ：不会返回顶部 8.4 页面内锚点
- 要想通过a标签跳转到指定的位置，那么必须告诉a标签一个独一无二的身份证号码，这样a标签才能在当前界面中找到需要跳转到的目标位置
- 如何为html中的标签绑定一个独一无二的身份证号码呢？
在html中，每一个标签都有一个名称叫做id的属性,这个属性就是用来给标签指定一个独一无二的身份证号码的
- 所以要想实现通过a标签跳转到指定的位置，分为两步
- 给目标位置的标签添加一个id属性，然后指定一个独一无二的值
- 告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少
- a标签除了可以跳转当前页面，还可以跳转到其他页面的指定位置
a标签的锚点功能
<!--1.点击一个文本标题 页面自动跳转到标题对应的内容区域--> <a href="" id="d1">顶部</a> <h1 id="d4">hello world</h1> <div style="height: 1800px; background: aliceblue"></div> <a href="" id="d2">中间</a> <div style="height: 1800px; background: aqua"></div> <a href="" id="d3">底部</a> <div style="height: 1800px; background: cadetblue"></div> <a href="#d1">回到顶部</a> <a href="#d2">回到中间</a> <a href="#d4">回到hello world</a> <!--2.跳到首页--> <a href="">刷新页面，回到顶部，人类感觉不出来区别</a> <a href="#">回到顶部</a> <!--3.注意点--> 通过我们的a标签跳转到指定的位置，是没有过度动画的 是直接一下子就跳转到了指定位置,比如京东主页 如果跳到首页需要过渡动画，则不用a标签做，比如天猫主页 8.5 全称缩写说明
Anchor /ˈæŋkə(r)/ Division /dɪˈvɪʒn/ a Anchor 锚(定义超链接，用于从一张页面链接到另一张页面) href hypertext reference 超文本引用 div Division 分隔 8.6 页面锚点调回首页练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签锚点练习</title> </head> <body> <!-- <a href="">刷新页面，回到顶部</a> 刷新页面，人类感觉不出来区别 <a href="#">回到顶部</a> --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p id="cn1">我是个大菜鸟</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p id="xd">小弟乐意为您效劳</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <p>我上山是虎，我下海是龙</p> <a href="#cn1">找第一个菜鸟</a> <br> <a href="#xd">找第一个小弟</a> <br> <a href="#">不刷新，跳回首页</a> <br> <a href="">刷新，跳回首页</a> </body> </html> 9.列表标签
语义：标记一堆数据是一个整体/列表
html中列表标签分为三种：
9.1 无序列表
无序列表（列表标签中使用最多的一种，非常重要）：unordered list
- 作用：制作导航条，商品列表，新闻列表等
- 语法如下，组合使用
ul>li
<!--基本语法--> <ul type="disc"> <li>第一项</li> <li>第二项</li> </ul> <!--示例：京东商城导航条--> <ul> <li>秒杀</li> <li>优惠券</li> <li>PLUS会员</li> <li>闪购</li> <li>拍卖</li> <li>京东服饰</li> <li>京东超市</li> <li>生鲜</li> <li>全球购</li> <li>京东金融</li> </ul> <!--全称及缩写说明 ul Unordered List 不排序列表 li List Item 列表项目 --> ul标签的type属性（这属于列表的样式，所以了解即可）：
type：列表识别的类型
- disc（实心圆点，默认值）
- circle（空心圆圈）
- square（实心方块）
- none（无样式，不显示标识，可以通过css去掉小圆点，如下：）
<style type="text/css"> ul { list-style: none; } </style>
注意
- ul与li是组合标签应该一起出现，并且ul的子标签只应该是li，而li的子标签则可以是任意其他标签
无序列表示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无序列表示例</title> </head> <body> <h1>物品清单</h1> <ul> <li> <h2>蔬菜</h2> <ul> <li>西红柿</li> <li>花瓜</li> <li>芹菜</li> </ul> </li> <li> <h2>水果</h2> <ul> <li>香蕉</li> <li>菠萝</li> <li>火龙果</li> </ul> </li> </ul> </body> </html> 9.2 有序列表（极少使用）
基本语法如下:
<ol type="1" start="2"> <li>第一项</li> <li>第二项</li> </ol> type属性：
1 数字列表，默认值 A 大写字母 a 小写字母 Ⅰ 大写罗马 ⅰ 小写罗马 #全称及缩写说明 ''' ol Ordered List 排序列表 li List Item 列表项目 ''' 有序列表示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智商排名</title> </head> <body> <h1>智商排名</h1> <ol> <li>刘思远</li> <li>刘清政</li> <li>刘sir</li> <li>刘铭洋</li> </ol> <!--有序列表能干的事，完全可以用无序列表取代--> <h1>智商排名</h1> <ul style="list-style: none"> <li>1.刘思远</li> <li>2.刘清政</li> <li>3.刘sir</li> <li>4.刘铭洋</li> </ul> </body> </html> 9.3 自定义列表（也会经常使用）
作用分析：
选择用什么标签的唯一标准，是看文本的实际语义，而不是看长什么样子
- 无序列表：内容是并列的,没有先后顺序
- 有序列表：内容是有先后顺序的
- 自定义列表：对一个题目进行解释说明的时候，用自定义列表,可以做网站尾部相关信息，网易注册界面的输入框
基本语法如下：
自定义列表也是一个组合标签：dl>dt+dd dl:defination list， dt：defination title，自定义标题 dd：defination description，自定义描述 <dl> <dt>自定义标题1</dt> <dd>内容1</dd> <dt>自定义标题2</dt> <dd>内容1</dd> <dd>内容2</dd> </dl> # 全称及缩写说明 """ Definition /ˌdefɪˈnɪʃn/ dl Definition List 自定义列表 dt Definition title 自定义标题 dd Definition Description 自定义描述 """ 注意：
1.dl>dt+dd应该组合出现，dl中只应该存放dt和dd，而可以在dt和dd中添加任意其他标签 2.一个dt可以可以没有对应的dd，也可以有多个，但建议一个dt对应一个dd 示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义列表标签</title> </head> <body> <dl> <dt><h5>购物流程</h5></dt> <dd>购物流程</dd> <dd>会员介绍</dd> <dd>生活旅行</dd> <dt><h5>配送方式</h5></dt> <dd>上门自提</dd> <dd>211限时达</dd> <dd>配送服务查询</dd> <dt><h5>支付方式</h5></dt> <dd>货到付款</dd> <dd>在线支付</dd> <dd>分期付款</dd> </dl> </body> </html> 10. 表格标签
语义：标记一段数据为表格
作用
- 表格标签是一种数据的展现形式，当数据量非常大的时候，使用表格的形式来展示被认为是最清晰的
基本结构格式：
<table> <tr> <td></td> </tr> </table> tr代表表格的一行数据 td表一行中的一个普通单元格 th表示表头单元格 注意点： 表格标签有一个边框属性，这个属性决定了边框的宽度。默认情况下这个属性的值为0，所以看不到边框 属性：
- 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制作(广告邮件) 示例：
| username | password | hobby | others |
| jsaon | read | ||
| egon | DBJ | 吃生蚝 | |
| tank | 摸鱼 | 弹棉花 |
<!--<table border="10" cellpadding="5" cellspacing="10">--> <table border="10"> <!-- 加外边宽--> <!--表头: 存放字段信息--> <thead> <tr> <!--一个tr就表示一行--> <th>username</th> <!--加粗文本--> <td>password</td> <!--正常文本--> <th>hobby</th> <th>others</th> </tr> </thead> <!--表单: 存放数据信息--> <tbody> <tr> <td>jason</td> <!--rowspan 合并行属性--> <td rowspan="3">123</td> <!--colspan 合并列属性(合并当前行的列)--> <td colspan="2">read</td> </tr> <tr> <td>egon</td> <!--<td>123</td>--> <td>DBJ</td> <td>吃生蚝</td> </tr> <tr> <td>tank</td> <!--<td>123</td>--> <td>摸鱼</td> <td>弹棉花</td> </tr> </tbody> </table> - 创建流程
""" colspan 当前行中的列合并(水平方向占多行) rowspan 合并多行属性(垂直方向占多行) """ table[border=1]>(thead>th)+(tbody>tr>td+td)
练习：
<!DOCTYPE HTML> <html> <head lang='en'> <meta charset="utf-8"> <title>超级美味无敌菜谱</title> <base target="_blank"> <style> </style> </head> <body> <table border="0" cellspacing="1" bgcolor="#D7A7EE" width="500px" height="200px"> <tr bgcolor="white"> <td colspan="3" align="center">星期一菜谱</td> </tr> <tr bgcolor="white"> <td rowspan="2">素菜</td> <td>情操茄子</td> <td>花椒扁豆</td> </tr> <tr bgcolor="white"> <td>小葱豆腐</td> <td>炒白菜</td> </tr> <tr bgcolor="white"> <td rowspan="2">荤菜</td> <td>油焖大虾</td> <td>海参鱼翅</td> </tr> <tr bgcolor="white"> <td> 红烧肉<img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=,&fm=26&gp=0.jpg" alt="" height="220"> </td> <td>烤全羊</td> </tr> </table> </body> </html> 
<!DOCTYPE HTML> <html> <head lang='en'> <meta charset="utf-8"> <title>Egon无敌</title> <base target="_blank"> </head> <body> <table border="0" cellspacing="1" bgcolor="blue" width="500px" height="200px"> <caption>课程表</caption> <tr bgcolor="white" align="center"> <td>项目</td> <td colspan="6">上课</td> <td align="center">休息</td> </tr> <tr bgcolor="white" align="center"> <td>星期</td> <td>星期一</td> <td>星期二</td> <td>星期三</td> <td>星期四</td> <td>星期五</td> <td>星期六</td> <td>星期日</td> </tr> <tr bgcolor="white" align="center"> <td rowspan="4">上午</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>英语</td> <td>物理</td> <td>计算机</td> <td rowspan="4">休息</td> </tr> <tr bgcolor="white" align="center"> <td>数学</td> <td>数学</td> <td>地理</td> <td>历史</td> <td>化学</td> <td>计算机</td> </tr> <tr bgcolor="white" align="center"> <td>化学</td> <td>语文</td> <td>体育</td> <td>计算机</td> <td>英语</td> <td>计算机</td> </tr> <tr bgcolor="white" align="center"> <td>语文</td> <td>数学</td> <td>英语</td> <td>英语</td> <td>物理</td> <td>计算机</td> </tr> <tr bgcolor="white" align="center"> <td rowspan="2">下午</td> <td>数学</td> <td>数学</td> <td>地理</td> <td>历史</td> <td>化学</td> <td>计算机</td> <td rowspan="2">休息</td> </tr> <tr bgcolor="white" align="center"> <td>数学</td> <td>数学</td> <td>地理</td> <td>历史</td> <td>化学</td> <td>计算机</td> </tr> </table> </body> </html> 11. form表单标签
语义：标记表单
什么是表单？
- 表单就是专门用来接收输入或采集用户信息的
表单格式：
<form> <表单元素> </form> 补充： 在form内还可以添加一种标签 <fieldset>添加边框 <legend>注册页面</legend> 表单控件...... </fieldset> 表单作用：
- 表单用于向服务器传输数据，从而实现用户与Web服务器的交互
- 表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
- 表单还可以包含textarea、select、fieldset和 label标签。
表单属性：
| 属性 | 描述 |
|---|---|
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集）。 |
| action | 规定向何处提交表单的地址（URL）（提交页面）。 |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启）。 |
| enctype | 规定被提交数据的编码（默认：url-encoded）。 |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET）。 |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |
| novalidate | 规定浏览器不验证表单。 |
| target | 规定 action 属性中地址的目标（默认：_self）。 |
表单标签图解
链接：https://www.processon.com/view/link/5aeea789e4b084d6e4bf6911
表单元素
基本概念：
- HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。
- 表单一般用来收集用户的输入信息
表单的工作原理：
- 访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。
- 服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data"> <p> <!--label第一种写法: 直接将input框写在label内--> <label for="d1"> <!--username: <input type="text" id="d1" disabled>--> <!--username: <input type="text" id="d1" value="默认值">--> <!--username: <input type="text" id="d1" value="默认值" readonly>--> username: <input type="text" id="d1" placeholder="请输入用户名" name="username" value="root"> username: <input type="text" id="d1" placeholder="请输入用户名" name="username" value="root" disabled> </label> </p> <p> <!--label第二种写法: 通过id链接即可 无序嵌套(补充: input不和label关联也可以)--> <label for="d2">password:</label> <!--<input type="text" id="d2">--> <input type="password" id="d2" name="password" placeholder="请输入用户密码" value="123"> </p> <p> <!--你看不见我: <input type="hidden">--> <input type="hidden" name="usernamename" value="骗子账户"> </p> <p> <label for="d3"> birthday: <input type="date" id="d3" name="birthday"> </label> </p> <p> gender: <label for="d4"> <input id="d4" type="radio" name="gender" value="male" checked> 男 </label> <input type="radio" name="gender" value="female"> 女 <input type="radio" name="gender" value="other"> 其他 </p> <p> hobby: <input type="checkbox" name="hobby" value="read"> read <input type="checkbox" name="hobby" value="DBJ" checked> DBJ <input type="checkbox" name="hobby" value="JBD" checked> JBD <input type="checkbox" name="hobby" value="HeCha"> HeCha </p> <p> province: <select name="province" id=""> <option value="Shanghai">上海</option> <option value="Beijing" selected>北京</option> <option value="Shenzhen">深圳</option> </select> </p> <p> 前女友: <!--<select name="ex-girlfriend" id="">--> <select name="ex-girlfriend" id="" multiple> <option value="xxx">xxx</option> <option value="yyy" selected>yyy</option> <option value="uuu" selected>uuu</option> </select> </p> <p> province1: <select name="province1" id=""> <optgroup label="上海"> <option value="Pudong">浦东</option> <option value="Puxi" selected>浦西</option> <option value="PuNa" selected>浦南</option> </optgroup> <optgroup label="北京"> <option value="Tian An Men">天安门</option> <option value="The gates">地安门</option> <option value="When the door">中安门</option> </optgroup> <optgroup label="深圳"> <option value="Foxconn">富士康</option> <option value="Fuji bad">富士坏</option> <option value="Fuji in">富士中</option> </optgroup> </select> </p> <p> 文件: <input type="file" multiple name="myfile"> <!--文件: <input type="file" name="myfile">--> </p> <p> <!----> <!--自我介绍: <textarea name="self-introduction" id="" cols="30" rows="10"></textarea>--> 自我介绍: <textarea name="info" id="" cols="30" rows="10" maxlength="20" placeholder="请简单的介绍自己不多余20个字!"></textarea> </p> <p> <!--当你没有指定按钮的value属性的值, 不同的浏览器打开之后可能宣染的按钮展示的文本内容不一致--> <input type="submit" value="注 册"> <input type="button" value="按 钮"> <input type="reset" value="重 置"> <button>按 钮</button> </p> </form> 使用Flask验证表单提交数据
安装Flask：
# 添加了环境变量以后在命令行中下载(这里使用清华源下载) pip3 install https://pypi.tuna.tsinghua.edu.cn/simple Flask from flask import Flask from flask import request app = Flask(__name__) # 当前url既可以支持get请求也可以支持post请求 如果不写默认只能支持get请求 @app.route('/index/', methods=['GET', 'POST']) def index(): print(request.form) # 获取form表单提交过来的非文件数据 ''' ImmutableMultiDict([('username', 'root'), ('password', '123'), ...]) ''' print(request.files) # 获取文件数据 ''' ImmutableMultiDict([('myfile', <FileStorage: '图片1.png' ('image/png')>),]) ''' file_obj = request.files.get("myfile") # 通过get表单标签中的file标签中定义的name属性的值myfile获取到文件对象 # print('file_obj.name:', file_obj.name) # 获取`文件名` print('file_obj.filename:', file_obj.filename) # 获取`文件名.后缀` if file_obj: file_obj.save(file_obj.filename) # 保存文件对象到当前目录下(.filename以当前`文件名.后缀`保存) return 'OK' app.run() 总结：
# 标签分类: 块级标签: form 行内标签: label, input, textarea, select, option, optgroup # form种所有标签共用属性: name 提交到后端的key. value 提交到后端的value. 文本框标签可以不指定, 通过获取用户输入的内容就是value. 选选框类型等都需要自己指定value值.(特例: 如果是按钮类型就仅仅是显示按钮的展示文本) disabled 禁用. # 文本框类型共用属性: (文本框类型包括: 普通文本,密文文本, 文本域) readonly 只读 placeholder 提示占位符 maxlength 最大输入长度 # 选框类型共用属性: (选框类型包括: 单选框, 多选框, 文件选框, 下拉选框单选框, 下拉多选框, 下拉选项组选框) 文件选框多选, 下拉多选框: multiple 单/多选框默认选中: checked 下拉系列默认选中: selected(需先为select标签指定multiple属性) # 提示: 除了按钮没有必要指定label其他标签都可以被label包裹. label第一种写法: 直接将input框写在label内 label第二种写法: 通过id链接即可 无序嵌套(补充: input不和label关联也可以) # input标签: text 普通文本 input[type=text][name] password 密文文本 input[type=password][name] date 提供时间日期选择 input[type=date][name][value] 提示: 当你没有指定按钮的value属性的值, 不同的浏览器打开之后可能宣染的按钮展示的文本内容不一致 submit 提交按钮. 用来触发form表单提交数据的动作 input[type=submit][value] button 普通按钮. 本身没有任何的功能, 但是它是最有用的, 学完js之后就可以给它自定义各种功能 input[type=button][value] reset 重置按钮. 重置 input[type=reset][value] radio 单选框 默认选中要加checked='checked', 当标签的属性名和属性值一样的时候可以简写成checked(注意: 每个单选框都需要为指定相同的name属性的值, 才能达到单选的目的) input[type=radio][name][value] checkbox 多选框 input[type=checkbox][name][value] file 获取文件. input[type=file][name][value] hidden 隐藏当前input框. 只是不显示在页面中, 后台还存在着.(钓鱼网站) input[hidden][name][value] # textarea文本域标签 textarea[name] # button 按钮标签 button[name][value] # select标签: 下拉单选 select[name]>option[value] 下拉多选: select[name][multiple]>option[value] 下拉选项组单选 select[name]>(optgroup[label]>option[value])+(optgroup[label]>option[value]) 下拉选项组多选 select[name][multiple]>(optgroup[label]>option[value])+(optgroup[label]>option[value]) !!!注意!!!: 触发form表单提交功能的按钮有2种: button input[type=submit] input
属性说明:
- name：表单提交时的“键”，注意和id的区别
- value：表单提交时对应项的值
- type=”button”, “reset”, “submit”时，为按钮上显示的文本年内容
- type=”text”,”password”,”hidden”时，为输入框的初始值
- type=”checkbox”, “radio”, “file”，为输入相关联的值
- checked：radio和checkbox默认被选中的项
- readonly：text和password设置只读
- disabled：所有input均适用
12. select 标签
<form action="" method="post"> <select name="city" id="city"> <option value="1">北京</option> <option selected="selected" value="2">上海</option> <option value="3">广州</option> <option value="4">深圳</option> </select> </form> 属性说明：
- multiple：布尔属性，设置后为多选，否则默认单选
- disabled：禁用
- selected：默认选中该项
- value：定义提交时的选项值
13. label标签
- label 元素不会向用户呈现任何特殊效果。
- 标签的 for 属性值应当与相关元素的 id 属性值相同。
<form action=""> <label for="username">用户名</label> <input type="text" id="username" name="username"> </form> 14 textarea多行文本
<textarea name="memo" id="memo" cols="30" rows="10"> 默认内容 </textarea> 属性说明：
- name：名称
- rows：行数
- cols：列数
- disabled：禁用
三、其他了解
1. 格式排版标签
<br/>换行标签，完成文字的紧凑显示。可以使用连续多个<br/>标签来换行<hr/>水平分割线标签，用于段落与段落之间的分割<p></p>段落标签,里面可以加入文字,列表,表格等.<pre></pre>按原文显示标签，可以把原文件中的空格,回车,换行,tab键表现出来<hn></hn>标题字标签，n为1-6，定义六级标题，而且会自动换行插入一个空行<div></div>没有任何语义的标签
2. 文本标签
<em></em>表示强调，通常为斜体字<strong></strong>表示强调(语气更强)，通常为粗体字<del></del>标签定义文档中已删除的文本。<ins></ins>标签定义已经被插入文档中的文本<sub></sub>文字下标字体标签<sup></sup>文字上标字体标签<mark></mark>H5新增 标签定义带有记号的文本 请在需要突出显示文本时使用,如搜索引擎搜索页面<ruby></ruby>H5新增 标签定义 ruby 注释（中文注音或字符） 在东亚使用，显示的是东亚字符的发音。<rt></rt>H5新增 标签定义字符（中文注音或字符）的解释或发音
<!--一下文本标签 作为了解--> <cite> 用于引证、举例、(标签定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题)通常为斜体字 <dfn> 定义一个定义项目 <code> 定义计算机代码文本 <samp> 定义样式文本 标签并不经常使用。只有在要从正常的上下文中将某些短字符序列提取出来，对它们加以强调的极少情况下，才使用这个标签。 <kbd> 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。 <abbr> 定义缩写 配合title属性 (IE6以上) <bdo> 来覆盖默认的文本方向 dir属性 值: lrt rtl <var> 定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。 <small> 标签定义小型文本（和旁注） <b> 粗体字标签 根据 HTML 5 的规范，<b> 标签应该做为最后的选择，只有在没有其他标记比较合适时才使用它。 <i> 斜体字标签 标签被用来表示科技术语、其他语种的成语俗语、想法、宇宙飞船的名字等等。 <u> 下划线字体标签 标签定义与常规文本风格不同的文本，像拼写错误的单词或者汉语中的专有名词。 请尽量避免使用 <u> 为文本加下划线，用户会把它混淆为一个超链接。 <q> 签定义一个短的引用。浏览器经常会在这种引用的周围插入引号。(小段文字) <blockquote> 标签定义摘自另一个源的块引用。浏览器通常会对 <blockquote> 元素进行缩进。(大段文字) (块状元素) <address> 定义地址 通常为斜体 (注意非通讯地址) 块状元素 <font> H5已删除 字体标签，可以通过标签的属性指定文字的大小、颜色及字体等信息 <tt> H5已删除 打字机文字 <big> H5已删除 大型字体标签 <strike> H5已删除 添加删除线 <acronym> H5已删除 首字母缩写 请使用<abbr>代替 <bdi> H5新增 标签允许您设置一段文本，使其脱离其父元素的文本方向设置。(经测试,各大浏览器都不起作用) <mark> H5新增 标签定义带有记号的文本 请在需要突出显示文本时使用,如搜索引擎搜索页面 <meter> H5新增 定义预定义范围的度量 <progress> H5新增 标签标示任务的进度（进程） <time> H5新增 定义时间和日期 <wbr> H5新增 规定在文本中的何处适合添加换行符。Word Break Opportunity 参考资料
- 百度百科：HTML标签语义化
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/113573.html
