整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
最后这些关于html的内容有点查漏补缺的意思了，这一次是关于文本内链接的使用方法，简单来说就是我们的页面中有一个章节名称目录，如何点击目录中的名称，就能正好在页面中显示相应内容。
如图所示：
点击目录的"总体评价"跳转到相应内容，如图：
就是这样的一个效果。在很多网页中经常看到。
这个案例我们会分三部分来讲解。
今天主要学习如何使用<a>标签进行页面内链接，已及从其他网页链接该页面内的指定内容。
这里会有一个问题，就是点击链接后，文字内容会置顶显示，这个默认形式会给我们带来不便，解决方案较复杂，会在最后一次讲解中给出。
下一次我们来学习如何对图片添加映射超链接，映射超链接的意思是，假如我的图片中有两个人物或物象，考虑读者会感兴趣，想了解更多内容，如何框选出物象边缘来添加链接，这就是图像映射超链接。如图：使用一个平时不可见的边框来制作图片映射链接，确保感兴趣的读者能点击到画面中的目标物体。
最后一部分我们将回答今天结尾的问题，也就是如何解决置顶问题。这一部分也会作为HTML部分结束的综合练习，和css部分启蒙的预热练习。，
首先看一下今天的基础代码
<!DOCTYPE HTML>
<html>
<head>
<title>文内链接</title>
</head>
<body >
<a>试飞进程</a>
<a>研制情况</a>
<a>服役动态</a>
<a>总体评价</a>
<p>
<h2><a>试飞进程</a></h2>
歼-20隐形战斗机首架技术验证机于2011年1月11日中午12时50分左右进行首次升空飞行测试，13时08分成功着陆，历时18分钟。<br>整个首飞过程在歼-10S战斗教练机陪伴下完成 。2016年10月28日，首次发布"空军试飞员将驾歼-20飞机亮相中国航展"后，还陆续发布了"歼-20战机列装空军作战部队""空军歼-20战机首次开展海上方向实战化训练"等。
<h2><a>研制情况</a></h2>
在2016年11月1日，第十一届珠海航展，歼-20首次进行空中飞行展示。两架歼-20做了公开飞行，不仅在现场引起轰动，也立刻被西方媒体大量报道。歼-20是中国现代空中力量的代表作，也进入了世界最先进的第五代战斗机行列，它是中国国防能力高速发展的一个象征。<br>2018年11月11日，第十二届中国航展在珠海迎来"高光时刻"：歼-20战机在公开飞行展示中挂弹开仓，震撼献礼人民空军成立69周年纪念日。 <br>2019年10月13日，庆祝人民空军成立70周年航空开放活动新闻发布上，空军新闻发言人申进科大校介绍歼-20战机列阵人民空军"王牌部队"
<h2><a>服役动态</a></h2>
2017年3月9日，中央电视台报道歼-20战斗机正式进入空军序列。<br>2017年3月13日，《中国日报》发布消息称，中国自主研制的歼-20近期将装配国产发动机。<br>2017年7月30日，歼-20三机编队参加在朱日和举行的庆祝中国人民解放军成立90周年阅兵。歼击机梯队飞来，3架歼-20隐形战斗机以楔形编队的形式在天空中飞过。<br>2017年9月28日，在中国国防部行记者会上，国防部新闻发言人吴谦大校介绍歼-20飞机已经列装部队。<br>2017年11月10日上午，中国空军发言人申进科大校表示，歼-20 列装部队后，已经开展编队训练。<br>2018年2月9日，中国空军新闻发言人申进科大校发布消息，歼-20开始列装空军作战部队。<br>2018年10月30日，中国空军4架歼-20隐形战斗机现身珠海金湾机场上空。<br>2019年10月1日，歼-20现身庆祝中华人民共和国成立70周年阅兵式；阅兵中，歼-20与歼-16、歼-10C三型飞机分别以5机楔队组成战斗队形接受检阅；该三款歼击机被誉为中国空军歼击机家族的"三剑客"，是未来联合作战的骨干力量
<h2><a>总体评价</a></h2>
歼-20是眼下亚洲区域最先进的战机，这让中国空军在面对日本、韩国与印度等国家的空军时占有显著优势。外媒将歼-20与其他国家战机进行了对比。俄罗斯苏霍伊苏-57战斗机由于研制进度几度推迟，尚未正式交付入役；美国F-35战斗机也多次出现飞机供氧不足的问题，大面积停飞，出口受阻；韩国KF-X隐形战机先是被爆出因掌握不了关键技术而被迫降成四代半战机的情况，后又传出了合作方印尼打算撤资并已告知韩国的消息。因此，中国歼-20战机成为亚太区域领跑的优势战机。<br>中国空军正向全疆域作战的现代化战略性军种迈进，成为有效塑造态势、管控危机、遏制战争、打赢战争的重要力量。歼-20战机列装空军作战部队，将进一步提升空军综合作战能力，有助于空军更好的肩负起维护国家主权、安全和领土完整的神圣使命。<br>歼20是我国自主研制的第五代战斗机，它的研制实现了既定的四大目标——打造跨代新机、引领技术发展、创新研发体系、建设卓越团队。打造跨代新机，是按照性能、技术和进度要求，研制开发我国自己的新一代隐身战斗机。引领技术发展，指通过自主创新实现强军兴军的目标。歼20在态势感知、信息对抗、协同作战等多方面取得了突破，这是中国航空工业从跟跑到并跑，再到领跑的必由之路。创新研发体系，是指建设最先进的飞机研制条件和研制流程。通过一大批大国重器的研制，我们建立了具有我国特色的数字化研发体系。建设卓越团队，是指通过型号研制，锤炼一支爱党爱国的研制队伍，这些拥有报国情怀、创新精神的优秀青年是航空事业未来发展的生力军。未来，我们将在战斗机的机械化、信息化、智能化发展征程上不断前行。
</p>
</body>
</html>看着复杂，实际上主要都是些内容文字，简化后的代码如下：
<!DOCTYPE HTML>
<html>
<head>
<title>文内链接</title>
</head>
<body >
<a>试飞进程</a>
<a>研制情况</a>
<a>服役动态</a>
<a>总体评价</a>
<p>
<h2><a>试飞进程</a></h2>
歼-20隐形........首次开展海上方向实战化训练"等。
<h2><a>研制情况</a></h2>
在2016年......"王牌部队"
<h2><a>服役动态</a></h2>
2骨干力量
<h2><a>总体评价</a></h2>
歼-20是眼下亚洲区域最先进的战机......不断前行。
</p>
</body>
</html>就是在<body></body>中添加四个<a></a>标签来写入标题，并列写入一个<p></p>标签，并在<p></p>标签中添加文字内容和<h2></h2>标签。这时需要注意的是，<h2></h2>中还要用<a></a>标签夹住标题。
页面效果如下：
下面我们来添加文章内部链接
添加文章内部链接需要一前一后两个<a></a>标签。一个是目录中的<a></a>,如图：
一个是正文中的标题上的<a></a>,如图：
添加内部链接的办法非常简单，首先我们把目录中的标题<a></a>标签称为"召唤者"。把正文中的标题中的<a></a>标签称为"被召唤者"。如果您学过《》这篇教程就会知道，一个标签召唤或调用另一个标签需要能叫出被调用标签的名字！
所以先要给"被召唤者"起名字，起名字的方法有两种，一种是name=""，还有一种是id=""，建议大家都写上，因为有的浏览器不支持name属性。具体写法如下：
<h2><a name="chapter1" id="chapter1">试飞进程</a></h2>在"召唤者"<a>标签中使用href属性来叫出"被召唤者"的名字！示例代码如下：需要在引号中添加#后再写名字。
<!DOCTYPE HTML>
<html>
<head>
<title>文内链接</title>
</head>
<body >
<a href="#chapter1">试飞进程</a><!--看这里-->
<a>研制情况</a>
<a>服役动态</a>
<a>总体评价</a>
</body>
</html><a>标签有点懒，只叫名字的话它会假装听不见，所以还要具体描述它的特征，让它不好意思偷懒，也就是前后两个<a></a>标签中间夹的文字内容要一致，比如上文中的两个<a>中间的内容都是"试飞进程"。如果字不一样，休想叫得动"被召唤者"。
效果如下：
点击后，试飞进程标签跳到了视窗的最顶端，如图：这种顶在视窗顶端的显示的方式我们称之为"置顶"。
下面我们使用这个方法，为剩下的标题添加页面内链接。
打开外部页面中指定信息位置的方法
首先，我们复制一下这个页面文件命名为"打开外部页面文件指定位置.html"，然后删掉<p></p>和其中内容。示例代码如下：
<!DOCTYPE HTML>
<html>
<head>
<title>打开外部页面文件指定位置</title>
</head>
<body >
<a href="#chapter1">试飞进程</a>
<a href="#chapter2">研制情况</a>
<a href="#chapter3">服役动态</a>
<a href="#chapter4">总体评价</a>
</body>
</html>方法非常简单，在href中添加外部页面路径即可！示例代码如下：
<a href="文内链接ceshi.html#chapter1">试飞进程</a>依次添加后，页面效果如下：
点击其中一个标题"研制情况"，页面跳转，如图：
这里，置顶的问题就出现了，如果我们的文章目录一直在视图的顶部，每次点击页面内链接时，顶部的目录就会和标题重叠，非常不美观，解决这个问题就要涉及到<div>布局的应用，我们以后再说。
OK！今天我们的内容结束了，下一次学习图片映射链接功能。
喜欢的朋友请关注我，点赞也会让我动力满满。
HTML序章（学习目的、对象、基本概念）——零基础自学网页制作
HTML是什么？——零基础自学网页制作
第一个HTML页面如何写？——零基础自学网页制作
HTML页面中head标签有啥用？——零基础自学网页制作
初识meta标签与SEO——零基础自学网页制作
HTML中的元素使用方法1——零基础自学网页制作
HTML中的元素使用方法2——零基础自学网页制作
HTML元素中的属性1——零基础自学网页制作
HTML元素中的属性2（路径详解）——零基础自学网页制作
使用HTML添加表格1（基本元素）——零基础自学网页制作
使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作
使用HTML添加表格3（间距与颜色）——零基础自学网页制作
使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作
16进制颜色表示与RGB色彩模型——零基础自学网页制作
HTML中的块级元素与内联元素——零基础自学网页制作
初识HTML中的<div>块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作
HTML表单4（form的action、method属性）——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用<a>标签实现文本内链接——零基础自学网页制作
Html是Hyper Text Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容文件渲染成网页，显示的网页可以从一个网页链接跳转到另一个网页。
Html中标签分为 ：成对标签和自闭合标签【空标签】
成对出现，有开始标签必须有结束标签，内容包裹在两个标签中，而且开始标签名和结束标签名一致,并且结束标签必须以斜杠/开头
语法：
<font>内容</font>
只有一个标签，用斜杠结束，斜杠也可以省略
语法：
<br/>
注意事项：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
</body>
</html>
!DOCTYPE html是文档声明，定义文档类型为html，并且告诉不同的浏览器用标准方式进行解析html语言，如果不写的话，会产生怪异模式，所谓怪异模式，就是浏览器会用自己的方式进行解析，不同的浏览器有各自的解析方式，从而会出现无效果、不兼容等问题。
注意，html中有两种声明类型，一种叫做xhtml，即html，另一种叫做html5，html5是xhtml的升级版，所以我们建议使用html5的声明方式
xhtml声明方式：
<htmlxmlns="http://www.w3.org/1999/xhtml">
html5声明方式：
<!DOCTYPE html>
html是html文档的整体，也就是表示一个网页。
html中的lang="en"是定义该文件语言是英文
head是html的第一层子元素【子标签】，负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和JavaScript文件等。设置的内容不会显示在网页上，标题的内容会显示在标题栏中。即title标签。
meta是html语言head标签中的一个辅助性标签，该标签不包含任何内容，但是该标签的属性定义了与文档相关联的名称，比如：编码
<meta charset="utf-8"></meta>
body也是html的第一层子元素，我们页面中显示的所有内容全部都是编写在该标签体中。
html制定了文档的编写规范，必须遵守。
所有的标签必须小写
所有的属性必须用双引号括起来
html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上。
注释的语法：
<!-- 注释的内容 -->
注：属性是标签的辅助作用。
属性 描述 bgcolor 设置网页的背景颜色 background 设置网页的背景图片
设置网页的背景颜色
<!DOCTYPE html>
<html lang="en">
<head>
<title>html的属性</title>
</head>
<body bacolor="pink">
</body>
</html>
我们在开发网页时，需要经常的插入图片、视频、文件等一些操作，但是我们需要指定文件所在的位置，这个位置就是所谓的路径
路径分为：
设置网页的背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<title>html的属性</title>
</head>
<body background="../images/10.jpg">
</body>
</html>
注意事项：
bgcolor和background不能同时使用
background不能指定绝对路径
网页的组成：文字、图片、视频、超链接、列表、表格、表单等组成。
标签 描述 hn 设置文字标题【n：取值范围 1~6】 center 居中对齐 hr 水平线 属性（width：宽度 color：颜色 size：粗细） br 换行 p 段落
标签 描述 font 设置字体，需要借助属性设置
属性 描述 color 设置字体颜色 size 设置字体大小，不需要带单位，取值范围：1~7【浏览器默认值：3】 face 设置字体风格
<font size="2" color="red" face="黑体"></font>
标签 描述 b 定义粗体文本 em 定义着重文字 i 定义斜体文字 small 定义小号字 strong 定义加重语气 sub 定义下标字 sup 定义上标字 ins 定义插入字 del 定义删除字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html文本格式化标签</title>
</head>
<body>
<b>粗体文本</b>
<i>倾斜文本</i>
<em>着重文本</em>
<small>小号字</small>
<strong>加重语气</strong>
<sub>上标</sub>
<sup>下标</sup>
<ins>插入字</ins>
<del>删除字</del>
</body>
</html>
在Html中，图像由
标签定义。
是空标签，意思是说，它只包含属性。
要在页面上显示图像，你需要使用源属性（src）。src指"source"。源属性的值是图像的URL地址。
标签 描述 img 图片标签
属性 描述 src 指定图片的地址 width 设置图片的宽度 height 设置图片的高度 alt 设置图片的预备文本
注意事项：不建议设置图片大小，容易失真
在Html中，声音由标签定义。
标签 描述 audio 声音标签
属性 描述 src 指定声音地址
<audio src="nice.mp3">对不起，您的浏览器不支持</audio>
在Html中，视频由video标签定义
标签 描述 video 视频标签
属性 描述 src 指定视频地址
<video src="美女.mp4">对不起，您的浏览器不支持</video>
a标签定义超链接，用于从一个页面链接到另一个页面。
a标签最重要的属性是href，它指定链接的目标。
在所有浏览器中，链接的默认外观如下：
未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的
语法：
<a href="链接目标">点击内容</a>
属性 描述 href 指定链接目标 name 指定锚的名称 download 指定下载链接 target 指定跳转方式 属性值 描述 _blank 新窗口打开【常用】 _parent 在父窗口中打开链接【了解】 _self 默认，在当前窗口打开【了解】 _top 在当前窗体打开链接，并替换当前的整个窗体【了解】 framename 到 iframe 在讲【常用】
超链接分类：
列表的使用与word等软件的列表概念相似，只不过是应用在网页展示中。
有序列表是指有数字编号或字母的列表项，可以使用css定义更多样式。
<!-- 有序列表 -->
<ol type="a">
<li>新闻一</li>
<li>新闻二</li>
<li>新闻三</li>
</ol>
属性 描述 type 设置符号类型 值：1 a A I i 默认数字 start 从第几个开始【用于ol标签中】 value 从第几个开始【用于li标签中】
<!-- 有序列表 -->
<ol type="a" start="4">
<li>新闻一</li>
<li type="1" value="1">新闻二</li>
<li>新闻三</li>
</ol>
无序列表是指没有数字编号或字母的列表项，可以使用css定义更多样式。
<!-- 无序列表 -->
<ul>
<li>童装</li>
<li>男装</li>
<li>女装</li>
</ul>
属性 描述 type 用于设置符号类型，默认：实心圆 值：空心圆、正方形 【用于ul、li】
<!-- 无序列表 -->
<ul type="square">
<li>童装</li>
<li type="circle">男装</li>
<li>女装</li>
</ul>
描述列表指每个列表项有单独的标题。
<!-- 描述列表 -->
<dl>
<dt>开源产品</dt>
<dd>Java封装库</dd>
<dd>Web组件库</dd>
<dt>网站导航</dt>
<dd>mrliujava.com</dd>
<dd>mrliuweb.com</dd>
</dl>
表格在网页开发中使用频率非常高，尤其是数据展示的时候。
标签 描述 table 代表表格标签 caption 表格标题 thead 表头部分 tbody 表格主体部分 tfoot 表格尾部
属性 描述 border 表格边框 cellspacing 单元格与单元格间距 width 宽度 height 高度 bgcolor 设置背景颜色 background 设置背景图片 align 对齐方式
<!-- 表格 -->
<table border="1" cellspacing="0" width="600px" height="200px">
<caption>员工薪资统计表</caption>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>职位</th>
<th>薪资</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>狗蛋</td>
<td>男</td>
<td>JavaEe工程师</td>
<td>8780</td>
</tr>
<tr>
<td>2</td>
<td>黑妞</td>
<td>女</td>
<td>Web前端工程师</td>
<td>9750</td>
</tr>
<tr>
<td>3</td>
<td>傻蛋</td>
<td>妖</td>
<td>测试工程师</td>
<td>996</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>当前页：1 页</td>
<td>上一页</td>
<td>下一页</td>
<td>尾页</td>
<td>共 3 页</td>
</tr>
</tfoot>
</table>
属性 说明 rowspan 行合并 colspan 列合并
下面是行合并：
<!-- 表格 -->
<table border="1" cellspacing="0" width="600px" height="200px">
<caption>员工薪资统计表</caption>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>职位</th>
<th>薪资</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>狗蛋</td>
<td>男</td>
<td rowspan="2">JavaEe工程师</td>
<td>8780</td>
</tr>
<tr>
<td>2</td>
<td>黑妞</td>
<td>女</td>
<td>9750</td>
</tr>
<tr>
<td>3</td>
<td>傻蛋</td>
<td>妖</td>
<td>测试工程师</td>
<td>996</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>当前页：1 页</td>
<td>上一页</td>
<td>下一页</td>
<td>尾页</td>
<td>共 3 页</td>
</tr>
</tfoot>
</table>
下面是列合并：
<!-- 表格 -->
<table border="1" cellspacing="0" width="600px" height="200px">
<caption>员工薪资统计表</caption>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>职位</th>
<th>薪资</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>狗蛋</td>
<td>男</td>
<td>JavaEe工程师</td>
<td>8780</td>
</tr>
<tr>
<td>2</td>
<td>黑妞</td>
<td>女</td>
<td>Web前端工程师</td>
<td>9750</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">傻蛋</td>
<td>测试工程师</td>
<td>996</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>当前页：1 页</td>
<td>上一页</td>
<td>下一页</td>
<td>尾页</td>
<td>共 3 页</td>
</tr>
</tfoot>
</table>
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、下拉列表(select)、单选框(radio)、复选框(checkbox)等等。
表单需要使用表单标签来设置：
<!-- 表单 -->
<form>
input元素
</form>
属性 说明 action 后台地址 method 提交方式GET或POST
GET和POST区别：
1.GET
2.POST
<form action="后端接口" method="POST">
<input type="text">
<input type="password">
</form>
使用label用于描述表单标题，当点击标题后文本框会获得焦点，需要保证使用的ID在页面中是唯一的。
<form action="后端接口" method="POST">
<label for="username">用户名</label>
<input type="text" id="username">
<label for="password">密码</label>
<input type="password" id="password">
</form>
也可以将文本框放在label标签内部，这样就不需要设置id与for属性了。
文本框用于输入单行文本使用，下面是常用属性与示例。
属性 说明 type 表单类型,默认为text name 后端接收字段名 required 必须输入 placeholder 提示文本内容 value 默认指 maxlength 允许最大输入字符数 size 表单长度,一般用css来控制 disabled 禁用,不可提交后端 readonly 只读,可提交后端 accept 设置选中类型 比如:.jpg capture 使用麦克风\视频或摄像头哪种方式获取手机上传文件,支持的值有microphone , video , camera
<form action="后端接口" method="POST">
<label for="username">用户名</label>
<input type="text" name="username" id="username" placeholder="请输入用户名" maxlength="5" size="50" required>
</form>
当input类型为file时手机会让用户选择图片或者拍照,如果想直接调取摄像头使用以下代码.
<form action="后端接口" method="POST">
<label for="file">上传文件</label>
<input type="file" name="file" id="file" accept="*.jpg" capture="camera">
</form>
通过设置表单的type字段可以指定不同的输入内容.
类型 说明 email 输入内容为邮箱 url 输入内容为URL地址 password 输入内容为密码项 tel 电话号,移动端会调出数字键盘 search 搜索框 hidden 隐藏表单 submit 提交表单 reset 重置表单 button 自定义按钮
隐藏表单用于提交后台数据,但在前台内容不显示所以在其上做用样式定义也没有意义.
<input type="hidden" name="id" value="1">
创建提交按钮可以将表单数据提交到后台,有多种方式可以提交数据,比如:AJAX,或者Html的表单按钮.
a.使用input构建提交按钮,如果设置了name值,那么按钮数据也会提交到后台,如果有多个表单项可以通过这些进行判断是哪个表单提交的.
<input type="submit" name="submit" value="提交表单">
b.使用button也可以提交,设置type属性为submit或不设置都可以提交表单.
<button type="submit">提交表单</button>
通过为表单设置disabled或readonly都可以禁止表单,单readonly表单的数据可以提交到后端
<input type="text" value="数据" readonly>
表单可以通过设置pattern属性指定正则验证.
属性 说明 pattern 正则表达式验证规则 oninvalid 输入错误时触发的事件
<form action="">
<label for="username">用户名</label>
<input type="text" name="username" id="username" pattern="[a-z]{5,20}" oninvalid="validate('请输入5~20位字母的用户名')">
<button>提交表单</button>
</form>
<script>
function validate(message){
alert(message);
}
</script>
文本域指可以输入多行文本的表单,当然更复杂的情况可以使用编辑器如ueditor , ckeditor等.
属性 说明 cols 列字符数(一般使用css控制更好) rows 行数(一般使用css控制更好)
<textarea cols="30" rows="3">请踩踩我......</textarea>
下拉列表项可用于多个值中的选择.
属性 说明 multiple 支持多选 size 列表框高度 optgroup 选项组 selected 选中状态 option 选项值
<form action="">
<select multiple size="10">
<option value="">选择课程</option>
<optgroup label="后端">
<option value="">JAVA</option>
<option value="">PHP</option>
<option value="">LINUX</option>
</optgroup>
<optgroup label="前端">
<option value="">HTML</option>
<option value="">CSS</option>
<option value="">JAVASCRIPT</option>
</optgroup>
</select>
</form>
单选框指只能选择一个选项的表单,如性别的选择:男 , 女 , 保密 只能选择一个.
属性 说明 checked 选中状态
<form action="">
<input type="radio" name="" id="boy" checked>
<label for="boy">男</label>
<input type="radio" name="" id="girl">
<label for="girl">女</label>
</form>
复选框指允许选择多个值的表单
属性 说明 checked 选中状态
<form action="">
<input type="checkbox" name="JAVA" id="java">
<label for="java">JAVA</label>
<input type="checkbox" name="WEB" id="web">
<label for="web">WEB</label>
</form>
文件上传有很多方式,可以使用插件或者JS拖放上传处理.Html本身也提供了默认的上传功能,只是上传效果并不是很美观.
属性 说明 multiple 支持多选 accept 允许上传类型.png , .psd 或者 image/png , image/gif
<form action="" enctype="multipart/form-data">
<input type="file">
<input type="submit" value="上传">
</form>
属性 说明 min 最小时间 max 最大时间 step 间隔: date缺省是1天 week缺省是1周 month缺省是1月
a.日期选择
<h1>日期选择</h1>
<form action="">
<input type="date" step="5" min="2020-09-22" max="2025-01-15" name="datetime">
</form>
b.周选择
<h1>周选择</h1>
<input type="week" name="" id="">
c.月份选择
<h1>月选择</h1>
<input type="month" name="" id="">
d.日期与时间
<h1>日期与时间</h1>
<input type="datetime-local" name="" id="">
input表单的输入值选项列表
<form action="">
<label for="username">用户名</label>
<input type="text" name="" id="usernmae" list="less">
<datalist id="less">
<option value="JAVA">后台管理语言</option>
<option value="CSS">美化网站页面</option>
<option value="MYSQL">掌握数据库使用</option>
</datalist>
</form>
frameset元素可定义一个框架集。它被用来组织多个窗口（框架），每个框架存有独立的文档，在其最简单的应用中，frameset元素仅仅会规定在框架集中存在多少列或多少行，您必须使用cols或rows属性。
注意事项：由于是分割原网页，所以我们不能在body中进行编写，在head中进行分割。
标签 说明 frameset 框架集 frame 框架
属性 说明 cols 定义框架集中列的数目和尺寸 rows 定义框架集中行的数目和尺寸 frame border 去除框架边框 scrolling 去除滚动条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html垂直框架</title>
<frameset cols="50%,*" >
<frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
<frame src="http://www.taobao.com" frameborder="0" scrolling="no"></frame>
</frameset>
</head>
<body>
</body>
</html>
12.2 水平框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html水平框架</title>
<frameset rows="50%,*" >
<frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
<frame src="http://www.taobao.com" frameborder="0" scrolling="no"></frame>
</frameset>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html混合框架</title>
<frameset rows="20%,*" >
<frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
<frameset cols="20%,*">
<frame src="http://www.taobao.com" frameborder="0" scrolling="no"></frame>
<frame src="https://www.huya.com/" frameborder="0" scrolling="no"></frame>
</frameset>
</frameset>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html美女</title>
</head>
<body>
<img src="../images/10.jpg" alt="">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html野兽</title>
</head>
<body>
<img src="../images/timg.gif" alt="">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html动物</title>
</head>
<body>
<img src="../images/4.jpg" alt="">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html链接</title>
</head>
<body>
<a href="Html美女.html" target="view">美女图片</a>
<a href="Html野兽.html" target="view">野兽图片</a>
<a href="Html动物.html" target="view">动物图片</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html垂直框架</title>
<frameset rows="20%,*" >
<frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
<frameset cols="20%,*">
<frame src="Html链接.html" frameborder="0" scrolling="no"></frame>
<frame src="https://www.huya.com/" frameborder="0" scrolling="no" name="view"></frame>
</frameset>
</frameset>
</head>
<body>
</body>
</html>
iframe元素会创建包含另外一个文档的内联框架。
属性 说明 align 对齐方式，后期采用css的方式进行设置 width 设置宽度 height 设置高度 src 设置iframe中显示的文档的URL name iframe的名称 scrolling 是否显示滚动条 frameborder 设置iframe的边框
务院提醒每周知，便民TIPS望周知！
省钱了！这些车型享受车船税减免优惠！
近日，工业和信息化部、国家税务总局发布第十六批《享受车船税减免优惠的节约能源 使用新能源汽车车型目录》。本批次《目录》包括305款车型，其中节能型汽车76款(可享受车船税减半优惠)，新能源汽车229款(可享受车船税减免优惠)。
>>详细阅读
享受车船税减免优惠的节约能源 使用新能源汽车车型目录（第十六批）
http://www.gov.cn/zhengce/zhengceku/2020-06/10/content_5518396.htm
学无止境！新职业在线学习平台将上线16个新职业培训
在人力资源和社会保障部的统一部署下，中国就业培训技术指导中心推出了新职业在线学习平台（xzy.mohrss.gov.cn）。近日，该平台将上线供应链管理师、网约配送员、人工智能训练师、全媒体运营师、健康照护师等16个新职业培训。此前，平台已完成首批数字化管理师、人工智能工程技术人员、物联网工程技术人员等13个新职业在线培训资源上线工作。
>>详细阅读
新职业在线学习平台将上线供应链管理师等16个新职业培训
http://www.gov.cn/xinwen/2020-06/08/content_5518081.htm
这两项资格考试时间确定了！
近日，全国护士执业资格考试委员会办公室印发《关于延期举行2020年护士执业资格考试的通知》。《通知》确定，2020年护士执业资格考试延期至9月12—15 日举行。卫生专业技术资格考试办公室印发《关于做好2020年度卫生专业技术资格延期考试有关问题的通知》，2020年度卫生专业技术资格考试延期至9月12、13、19、20、26、27日举行。
>>详细阅读
别下！这44款APP违法违规！
近日，国家网信办等8部门通报，首批依法依规对44款传播涉淫秽色情、严重低俗庸俗内容的违法违规网络直播平台，分别采取约谈、下架、关停服务等阶梯处罚；部署查办了一批利用色情低俗直播内容诱导打赏案例，对多个平台传播网络低俗直播内容作出行政处罚。
>>详细阅读
内容低俗辣眼睛！44款APP被处罚！
谨慎选择赴澳或返澳学习
近期，教育部发布2020年第1号留学预警。澳大利亚主要高校计划于7月前后陆续开学。全球新冠肺炎疫情扩散蔓延势头没有得到有效控制，国际旅行和开放校园存在风险。疫情期间，澳大利亚发生多起针对亚裔的歧视性事件。教育部提醒广大留学人员做好风险评估，当前谨慎选择赴澳或返澳学习。
>>详细阅读
教育部发布留学预警：当前谨慎选择赴澳或返澳学习
http://www.gov.cn/fuwu/2020-06/09/content_5518229.htm
注意！经韩国转机须知
近期，不少身在美欧地区的中国公民选择经韩国仁川机场转机回国，部分乘客因无法提供前往地要求的核酸检测证明（韩仁川机场中转区无检测服务），或因前往地尚未允许中国公民中转，导致滞留仁川机场中转区，或被遣返至出发地。中国驻韩国大使馆特别提醒您：全球疫情仍在持续，建议尽量减少移动，避免长途旅行。如确需赴韩转机，请务必详细研读相关政策信息，以免行程受阻。无韩国签证者、持2020年4月5日前韩国签发的C1或C3类签证者，目前只能以过境方式在韩转机，不能入境韩国。请您务必事先详细了解行程所涉中转地过境政策，同各段承运航空公司了解联程机票、行李直挂、登机等方面要求，切勿贸然启程来韩转机。
如需咨询，请拨打下列电话寻求帮助：
仁川国际机场客服中心：1577-2600
仁川国际机场转机咨询（中文）：032-741-0061
韩国法务部出入境政策咨询电话：1345
语言翻译服务电话：1588-5644或02-120转9
外交部全球领事保护与服务应急热线（24小时）：+86-10-12308/+86-10-59913991
驻韩国使馆领事保护与协助电话：02-755-0572
>>详细阅读
经韩国转机须知
提醒！近期计划经西班牙转机回国的中国公民请注意
近来，自第三国乘机抵达西班牙转机回国的中国公民较多。中国驻西班牙使馆特别提醒您：全球疫情仍在持续，建议尽量减少移动，避免长途旅行。如确需在西转机，请务必详细研读相关政策信息，以免行程受阻。为应对新冠肺炎疫情，欧盟实施入境限制，在西班牙转机的中国公民即使持有有效申根签证也不能进入申根区境内转机通道，只能在机场国际转机区域停留，无法出关解决住宿问题，且机场人群密集，存在较大交叉感染风险。
如遇特殊困难和紧急情况，请拨打以下电话：
西班牙急救电话：112
外交部全球领事保护与服务应急热线：+86-10-12308或+86-10-59913991
驻西班牙使馆领事保护协助电话：0034-699089086
驻巴塞罗那总领馆领事保护协助电话：0034-932125622
>>详细阅读
提醒！近期计划经西班牙转机回国的中国公民请注意
提醒！近期计划经日本转机回国的中国公民请注意
近期，一些从欧美出发的中国公民在经日本或从日本再次转机第三国（地区）回国时，因事先未仔细确认机票信息或第三国（地区）入境限制等原因转机失败导致滞留，或被遣返至出发地。中国驻日本大使馆特别提醒中国公民近期谨慎选择经日本转机，以免行程受阻。
中国驻日本大使馆领事业务电话及邮箱：03-3403-3065/3064/5633，邮箱japan12308@163.com。
外交部全球领事保护与服务应急呼叫中心24小时电话：+86-10-12308或+86-10-59913991。
>>详细阅读
提醒！近期计划经日本转机回国的中国公民请注意
李克强同德国总理默克尔举行视频会晤
*请认真填写需求信息，我们会在24小时内与您取得联系。
