标签：NPU 表单 tags art 排名 html标签 组元 自身 preview
什么叫做互联网？
互联网:通过网络(有线、无线，4G)将世界各地的计算机(手机、平板、PC、服务器)连接起来的结构。
随着互联网及其相关技术的不断发展，目前基于互联网的程序有B/S(Broswer/Server)架构和C/S(Client/Server)架构两种组成。
B/S也就是浏览器/服务器，用户只需要在浏览器中进行相关操作(通常是输入访问地址，或者提交表单数据)，便可访问对应的互联网服务。
C/S也就是客户端/服务器，用户需要在操作系统上安装特定的客户端(例如QQ、微信、钉钉)后才能访问互联网服务。
B/S和C/S两者的不同在于如果程序有新功能发布,C/S架构的程序需要相对频繁的升级客户端，而B/S通常只需要记住请求地址(例如www.taobao.com,www.baidu.com)即可。
Web就是基于互联网的一种B/S应用程序，通常都是保存在服务器端(CentOS/Ubuntu)具体的页面,通常是以.html或者.htm结尾的文本文件，Web应用是使用HTML5+CSS3+JavaScript开发的，而服务端应用主要是使用Java/Python/PHP语言做开发。
当使用浏览器输入https://www.taobao.com访问淘宝时，网页中包含了文字、图片、超链接以及各种动画效果描述的商品信息，如下图所示
而在浏览器中输入https://v.qq.com/访问腾讯视频时，网页中包含了各式各样的在线大片(视频),如下图所示
而当在浏览器的输入框中输入https://y.qq.com/访问QQ音乐时，网页中包含了大量的在线音乐，如下图所示
通过淘宝、腾讯视频和QQ音乐这三个典型的网站得出结论，网页中包含了文字、图片、超链接、Flash、音频、视频等元素组成，而它们的背后都是使用HTML,CSS,JavaScript来构建的，我们可以使用Chrome浏览器的查看源代码(Windows快捷键control+shift+i,macOS快捷键option+command+u)来查看那些代码,淘宝首页的代码片段如下所示。
而前端工程师正是编写这些内容，然后交由浏览器的渲染引擎渲染成我们看到的效果,以及执行JavaScript完成动画效果和服务端数据交互。
当用户在浏览器的地址栏中输入www.taobao.com这个URL时，将会发生很多操作。
首先浏览器会请求DNS服务器将域名(taobao.com)解析成对应的IP地址，然后根据这个地址在互联网中寻找对应的服务器，并向这个服务器发起一个get请求，由这个服务器返回默认的资源。
在服务器端实际上还有很复杂的业务逻辑，服务器通常是集群部署，到底由哪台服务器处理请求，这需要一个负载均衡设备(LVS)来平均分配所有用户的请求，还有请求的数据时存储在分布式缓存(Memcache,Redis)里还是在一个静态文件中，或者是数据库(MySQL,Oracle)里；当数据返回浏览器时，浏览器解析数据发现还有一些静态资源(如CSS,JS,图片)时又会发起另外的HTTP请求，而这些请求可能会在CDN上，那么CDN服务器又会处理这个用户的请求，大体上一个用户的请求会涉及到这么多操作，每一个细节都会影响到这个请求最终是否会成功，如下图所示，通过Chrome提供的开发者工具的Network选项，可以观察到请求的资源。
由于不同的浏览器引擎在渲染同样的HTML代码和js引擎执行JavaScript代码时可能会存在不同的执行效果。
因此W3C万维网联盟组织制定了Web标准，主要包含结构(Structure)、表现(Persentation)和行为(Behavior)三个方面组成。
结构标准:用于对网网页元素进行整理和分类，主要包括XML和HTML。
样式标准:用于设置网页的版式、颜色、大小等外观样式，主要指的是CSS
行为标准:用于网页模型的定义以及与服务端进行数据交互的实现，主要包含DOM和ECMAScript两部分
HTML(Hyper Text Markup Language)是超文本标签语言，通过一套文本标签来表示网页中的常见元素，例如文本、图片、表格、列表、音频、视频等等，常见的Web站点(例如百度、淘宝、京东)都是使用HTML来开发的。
这里通过一段代码(syntax.html)来体会下html标签的作用，代码如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>理解HTML标签的作用</title>
</head>
<body>
我是一段普通文本
<H2>我是H2标题文本</H2>
</body>
</html>
先说明下项目的目录结构，在之前的D:/workspace/web文件夹中创建了四个文件夹，分别是module,css,js,images,分别用于存放html页面，css样式代码和javascript代码以及图片资源。
因此syntax.html存放在module目录下。
在启动Apache服务器后，默认Apache服务是随系统启动的，如果没有自动启动，可以在Windows搜索栏中输入services.msc打开系统服务，然后找到Apache24服务，设置为自动启动，如下图所示
使用浏览器访问地址http://127.0.0.1/module/syntax.html，可以看到如下效果
通过对比发现使用了html标签<h2>包围的的文本字体被加粗，并且独占一行显示
，因此不同的html标签有不同的语义。
在学习具体的页HTML标签之前，先讨论HTML标签的作用、分类、HTML标签的属性。
在HTML网页中用于描述页面元素的符号称为标签，例如<p></p>,<hr/>等等，标记在使用时必须使用<>也就是尖括号括起来。
html标签分类主要分为封闭性标记和非封闭性标记。
<p>文本内容</p>，在一对标签之间编写文本内容，如下代码片段所示<p>这是段落</p>
<div>这是容器</div>
<header></header>
<br/>
<hr/>
<img src="" alt=""/>
<input type="text"/>
单标记通常使用/结束标记
HTML标签存在着嵌套和并列的关系
标记嵌套：在一对标记中允许包含另外一对标记，如下代码片段所示。
<div>
<img src="" alt=""/>
</div>
在编写嵌套标记时，为了便于程序的维护，需要使用换行+TAB来表示层级关系，如下代码片段所示。
<body>
<div>
<a href="">
<strong>超链接</strong>
</a>
</div>
</body>
标记并列关系
html中最典型的嵌套关系的标签就是head和body，它们是平级的。
生活中常见的手机的颜色、品牌、重量、等等都是手机的属性描述信息。
定义:通过设置HTML标签的属性来改变元素的显示效果
语法:
<>中在HTML中，所有的标记都有四大属性
如下应用案例(attribute.html)所示，展示了属性在html标签中的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML标签的使用场景</title>
</head>
<body>
<!--
id title style class是所有html标签的四大通用属性
一个标签可以有多个属性，属性之间使用空格隔开
-->
<div id="container" title="我是一个布局标签" align="center" class="" style="">
html属性的应用
</div>
</body>
</html>
注释是程序的附加描述信息，主要用于描述程序的功能,html中的注释是以下形式
<!-- 这是注释的内容-->
需要注意的是注释不能嵌套使用，如下代码所示，会发生语法错误，如下代码片段所示
<!-- <!-- --> -->
同时注意注释不能出现在标记中，如下代码片段所示
<p <!-- -->></p>
而且在HTML中，考虑网络传输的问题，能少些注释就少写注释，能不写就不写注释。
W3C(Word Wide Web Consortium)万维网联盟组织定义了HTML5文档结构的标准
HTML文档结构的组成如下代码所示
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 能正常显示中文-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 网页的标题-->
<title>HTML5文档结构</title>
</head>
<body>
<!-- 网页中的主体内容-->
</body>
</html>
其中DOCTYPE是位于HTML文档的第一行，用于指定HTML的版本，<!DOCTYPE html>表示当前的HTML版本为HTML5。
html标签是作为网页的根标签，主要包含head和body两对标签。
其中head标签中常见的是title和meta标签,title是描述网页的标题信息，Windows下的网页标题通常在网页的右上方,macOS下的网页标题在左上方。 meta用于描述网页的属性信息，例如这里指定了网页的字符集，为了正常显示中文，设置成了utf-8。
body标签用于描述网页的主体元素，例如文本、列表、超链接、表格、表单、图片元素都是在body标签中。body标签还有两个属性，bgcolor用于指定网页的背景颜色，text用于指定网页文本的颜色（这俩属性都不太常用）
当然如果你想要这个页面部署到服务器后使用浏览器访问时只能看到网页的标题信息，因为body标签中不包含任何内容，而后期在编写页面上的元素(例如文本、图片、超链接、表单等等)都是包含在body标签内。
通过学习一系列的文本标签改变文本在浏览器中的默认效果
页面的空格以及一些特殊的字符需要通过转义字符的方式实现，常用的特殊字符包含表示空格,小于，大于和版本，它们的标记名称和表格如下所示
| 标记名称 | 功能描述 |
|---|---|
|
表示空格，如果想要表示多个空格，使用多个 即可 |
< |
表示小于 |
> |
表示大于 |
© |
表示版本 |
如下应用案例(char.html)展示了特殊文本在html中的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>特殊字符的使用</title>
</head>
<body>
<div id="desc">
在HTML中，如果想要表示空格，就需要使用 来表示</br>
在HTML中，表示段落使用<p></p>表示</br>
© by Tony 2018/06/11
</div>
</body>
</html>
有一些文本标签，它们不影响网页结构，但是为所在页面的文本添加了额外的样式效果，如下表展示了常用的文本样式标签
| 标签名称 | 说明 |
|---|---|
<strong></strong> |
加粗 |
<em></em> |
倾斜 |
<ins></ins> |
下划线 |
<del></del> |
删除线 |
<sup></sup> |
上标 |
<sub></sub> |
下标 |
如下应用案例(textstyle.html)所示，展示了常用文本格式化标签的使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>文本格式化标签的使用</title>
</head>
<body>
<strong>我是加粗的文本</strong></br>
<em>我是倾斜的文本</em></br>
<del>我是删除线的文本</del></br>
应用场景:<del>原价9999</del>,现价9.9</br>
<ins>我是下划线</ins></br>
H<sub>2</sub>O </br>
5<sup>3</sup>=125</br>
</body>
在HTML页面中以醒目的方式(加粗，文字较大)表现文本。
通过h1-h6之间的6对标签实现，其中h1称为一级标题，依次递增到六级标题，标题的字体依次递减，独占一行，加粗显示。
同时标题还有align属性，可以设置标题的对齐方式，可以为left,center,right。
如下应用案例(hseries.html)所示,展示了标题标签的用法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>标题标签的使用</title>
</head>
<body>
<h1 align="center" >我是一级标题</h1>
<h2 align="left">我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>
</body>
</html>
通常在新闻网站的某一篇新闻文章时回使用到标题标签，如下图所示。
新闻地址为:http://news.163.com/18/0608/10/DJP8H18M000189FH.html
在成段的文字两边分别添加开始标签<p>和结束标签</p>就构成了HTML中的段落。默认情况下，浏览器在显示段落时会另起一行并与后续段落保持一定的距离。
文字大小采用默认大小，文本会在一个段落中根据浏览器窗口的大小自动换行。
如下应用案例(p.html)所示，同样的文本内容，在不加段落标签，默认是在一行显示(如果文本内容没有超过一行)，而加了段落标签的内容都是新增一行显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>段落标签的使用</title>
</head>
<body>
<!--普通文本-->
欢迎大家跟我一起学习前端
我们将会学习HTML5,CSS3,JavaScript,jQuery,AngularJS,Node.js,Vue.js,React核心技术
接下来学习遇到什么问题，可以发邮件给我，我的邮箱账号时18601767221@163.com
<!--使用段落标签包含的文本-->
<p align="left">欢迎大家跟我一起学习前端</p>
<p align="left" >我们将会学习HTML5,CSS3,JavaScript,jQuery,AngularJS,Node.js,Vue.js,React等核心技术</p>
<p> 接下来学习遇到什么问题，可以发邮件给我，我的邮箱账号时18601767221@163.com</p>
</body>
</html>
html中使用<br/>表示文本内容的换行，当你想在某段文本中实现换行的效果时，可以使用单标签<br/>来实现，如下案例(br.html)展示了<br/>标签的使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>换行标签的使用</title>
</head>
<body>
成功最有效的办法就是向有经验的人学习和请教。
失败是成功之母。
自信是成功之基。
成功最有效的办法就是向有经验的人学习和请教。<br/>
失败是成功之母。<br/>
自信是成功之基。<br/>
</body>
</html>
<hr/>标签在html页面上表现为一条水平分割线,可以通过size属性指定水平线自身的宽度，以px为单位的数值;width属性指定水平线在页面上的宽度，可以采用px或者百分比作为值。还可以通过align属性指定对其方式，color指定水平线的颜色，
如下案例(hr.html)展示了<hr/>标签的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水平线标签的使用</title>
</head>
<body>
<p>楚河</p>
<hr size="5px" width="80%" align="left"/>
<p>汉界</p>
</body>
</html>
如下应用案例(article.html)所示，结合标题、水平线和段落标签实现了计划书
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>使用文本标签写一篇计划书</title>
</head>
<body>
<h1>2019年度计划</h1>
<hr />
<p>时间:2018/06/08-2019/12/31</p>
<p>计划内容:</p>
<p>技术:涵盖大前端、大后端、移动端以及大数据方向的技术栈</p>
<p>英语:BEC高级</p>
<p>驾照:C照</p>
</body>
</html>
如果想在网页中实现文本的回车和空格效果，可以使用<pre></pre>标签来实现，
如下应用案例(pre.html)如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>使用pre保存空格和回车</title>
</head>
<body>
<pre>
使用pre标签保存 和
回车的效果
</pre>
</body>
</html>
块分区元素:<div></div>就是常用的块分区元素,后期会使用该元素来实现网页的布局
行分区元素:<span></span>,设置同一行文字的不同样式
行内元素和块级元素
按照元素的表现形式来划分可以分为行内元素和块级元素
行内元素:允许在一行内显示多个元素，例如<span></span>,<strong></strong>,<em></em>,<ins></ins>,<del></del>,<sup></sup>，<sub></sub>,其作用是包裹文本，并处理文本的表现形式。
块级元素:每个元素独占一行称为块级元素，例如<div></div>,<p></p>，<h1>，</h1>,其主要是用于页面布局。
如下应用案例所示(divspan.html)展示了块级元素和行内元素的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>理解html分区元素div和span的区别</title>
</head>
<body>
<!--
同样一首唐诗。使用div每行显示,使用span则显示在一行中
-->
<div>春晓</div>
<div>春眠不觉晓，</div>
<div>处处闻啼鸟。</div>
<div>夜来风雨声，</div>
<div>花落知多少。</div>
<span>春晓</span>
<span>春眠不觉晓，</span>
<span>处处闻啼鸟。</span>
<span>夜来风雨声，</span>
<span>花落知多少。</span>
</body>
</html>
HTML标记的注意事项
<p></p>标签中不能包含其他块级元素在使用图像和超链接标签之前，需要先了解URL(Uniform Resource Locator)也就是统一资源定位符，用于描述网页中引用资源的路径。因为在Web应用开发中，为了方便管理资源，通常将页面，图片，样式，脚本等资源分成不同的类别(文件夹)存放，如下图所示
而它们之间的关系就形成了目录结构，所谓的目录就是文件夹的路径，一般路径分为相对路径和绝对路径两种。
https://img.alicdn.com/tfs/TB1mGl9sH9YBuNjy0FgXXcxcXXa-190-140.gif
协议名称:这里是https
主机名称:img.alicdn.com
文件路径:tfs
文件名称：TB1mGl9sH9YBuNjy0FgXXcxcXXa-190-140.gif
同级别:images和css、js、module、index.html等就是同级别目录，如果index.html需要引入图片，只需要加上images/图片名称即可。
上级:图像文件位于html文件的上一级文件夹(例如这里的/images/Canyenne.jpg和/module/img.html),那么就先使用../返回上一级目录(即module)，然后再进入/images/Canyenne.jpg即可。
下级:图像文件位于html文件的下一级文件夹(例如/module/images/Canyenne.jpg和/module/img.html)，那么直接使用文件夹加文件名(即/images/Canyenne.jpg)
路径通常在HTML中的图片和超链接中使用。
使用图片来描述商品会比一大堆文字的效果更好，通常在电商网站中会大量使用图片(通常是.jpg格式)来描述商品信息。在日常开发中，图片素材通常由UI设计人员提供，web页面中支持的图片格式包括.jpg(有损压缩),.gif(动图)和.png(透明)三种格式。
html中使用<img />单标签来描述图片，其中src属性必须设置，用来告诉浏览器图片的地址路径，同时还可以用过width和height来设置宽度和高度，如果图片无法显示，可以通过alt属性增加文字描述信息，通过title属性来显示当鼠标悬停在图像上时显示的内容，
如果想给图片添加边框，只需要设置boder属性即可。
如下应用案例(img.html)展示了<img>标签及其属性的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图片标签的使用</title>
</head>
<body>
<h3>我最喜欢的车</h3>
<img src="/images/Canyenne.jpg" width="1024px" height="768px" title="这是保时捷卡宴" alt="这是保时捷卡宴" border="10" />
</body>
</html>
超链接可以实现页面之间的跳转，在常见的超链接中，可以实现
在html中,通过<a></a>标签实现页面的跳转，通过href属性来指定跳转的地址，、
还可以通过target属性指定网页的打开方式，默认值是"_self"，如果想在一个浏览器的新窗口中打开，则可以将target属性设置为"_blank"。
应用案例(a.html)如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>超链接标签的使用</title>
</head>
<body>
<!--超链接的使用场景-->
<!--网站内部的链接-->
<a href="img.html">我最喜欢的车</a><br />
<!--从一个网站跳转到另外一个网站-->
<a href="https://www.baidu.com">百度一下,你就知道</a> <br />
<a href="https://www.taobao.com" target="_blank">淘宝网，淘，我喜欢</a>
</body>
</html>
当我们在浏览内容很长的网页时(例如张学友的百度百科)，页面中通过增加一些锚点(通俗点可以理解为记号)，可以实现页面内从其他位置跳转到该锚点的位置。
如下图所示
点击锚点
跳转到锚点的内容
那么同样的功能如果通过<a></a>标签来实现呢？
这里我们以在线小说为例子
首先我们必须定义一个锚点，代码片段如下所示
<a href="#first">第一章</a>
然后定义一个跳转到该锚点链接的内容，代码片段如下所示
<div id="first">
<h1>第一章</h1>
<div id="chapter1">
<p>生命不息，编码不止</p>
</div>
</div>
为了明确看到锚点跳转的效果，我们需要使用一号标题填充一些内容，完整的锚点跳转实现如下应用案例(anchor.html)所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>超链接的锚点定位</title>
</head>
<body>
<div id="chatper" >
<h1><a href="#first">第一章</a></h1>
<h1><a href="#">第二章</a></h1>
<h1><a href="#">第三章</a></h1>
<h1><a href="#">第四章</a></h1>
<h1><a href="#">第五章</a></h1>
<h1><a href="#">第六章</a></h1>
<h1><a href="#">第七章</a></h1>
<h1><a href="#">第八章</a></h1>
<h1><a href="#">第九章</a></h1>
<h1><a href=#"">第十章</a></h1>
<h1><a href="#">第十一章</a></h1>
<h1><a href="#">第十二章</a></h1>
<h1><a href="#">第十三章</a></h1>
<h1><a href="#">第十四章</a></h1>
<h1><a href="#">第十五章</a></h1>
<h1><a href="#">第十六章</a></h1>
<h1><a href="#">第十七章</a></h1>
<h1><a href="#">第十八章</a></h1>
<h1><a href="#">第十九章</a></h1>
<h1><a href="#">第二十章</a></h1>
<h1><a href="#">第二十一章</a></h1>
<h1><a href=#"">第二十二章</a></h1>
<h1><a href="#">第二十三章</a></h1>
<h1><a href="#">第二十四章</a></h1>
</div>
<div id="content">
<div id="first">
<h1>第一章</h1>
<div id="chapter1">
<p>生命不息，编码不止</p>
</div>
</div>
</div>
</body>
</html>
通常在访问网页链接时都是在浏览器的新增窗口中打开的，那么这样必须在每个超链接标签中设置target="_blank"，这样会造成代码冗余。
可以通过使用base标签解决该问题。
如下应用案例(base.html)所示，通过在head标签中设置target="_blank",可以控制BAT标题下三个超链接都是在浏览器新增窗口下打开，而四大门户网站需要在当前窗口打开，则在标签中设置target=_self
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>base标签的使用</title>
<!-- 通过base标签设置页面中所有的超链接都在新窗口中打开-->
<base target="_blank"/>
</head>
<body>
<h3>BAT</h3>
<a href="https://www.baidu.com">百度一下，你就知道</a><br/>
<a href="https://www.qq.com">腾讯首页</a><br/>
<a href="https://www.toaobao.com">淘宝网，淘，我喜欢</a><br/>
<!-- 如果有部分网页还是需要在当前窗口打开，依然可以设置属性target="_self" 高于base的target属性优先级-->
<h3>四大门户</h3>
<a href="http://www.qq.com/" target="_self">腾讯</a>
<a href="http://www.163.com/" target="_self">网易</a>
<a href="http://www.sina.com.cn/" target="_self">新浪</a>
<a href="http://www.sohu.com/" target="_self">搜狐</a>
</body>
</html>
href属性值为#href属性值为javascirpt:javascript代码片段<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>超链接的其他应用场景</title>
</head>
<body>
<!--点击后会调用本地邮件客户端，并填充好联系人邮件-->
<a href="mailto:18601767221@163.com" >联系我们</a> <br/>
<!--返回页面顶部的空链接-->
<a href="#">返回顶部</a> <br/>
<!--跳转到a.html-->
<a href="javascript:window.location.href=‘a.html‘">执行javascript代码片段</a> <br/>
</body>
</html>
如果想让网页中的文字显得井然有序，那么就需要使用到列表了，实际上在淘宝、京东、天猫、腾讯的首页都使用到了列表。
在html中有三种列表，分别是无序列表(<ul><li></li></ul>)，有序列表(<ol><li></li></ol>)和自定义列表(<dl><dt><dd></dd></dt></dl>),其中最常用的是<ul><li></li></ul>无序列表。
当需要使用列表展示没有顺序的数据时使用无序列表，在html标签中使用ul li标签表示，需要注意的ul标签中只能包含一个或者多个li标签，li标签是一个容器，可以存放任何标签，应用案例(unordered.html)如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>无序列表标签的使用</title>
</head>
<body>
<h3>我喜欢的歌星</h3>
<ul>
<li>张学友</li>
<li>王力宏</li>
<li>周杰伦</li>
</ul>
</body>
</html>
结合无序列表、标题标签和图片标签实现图文并茂介绍中国四大名著。
<li></li>标签中插入图片和文本内容<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>无序列表的应用案例</title>
</head>
<body>
<h2>中国四大名著</h2>
<ul>
<li>
<img src="../../images/shuihuzhuan.png" />
<h4> 《水浒传》</h4>
<p>
《水浒传》是中国历史上第一部用古白话文写成的歌颂农民起义的长篇章回体版块结构小说，以宋江领导的起义军为主要题材，通过一系列梁山英雄反抗压迫、英勇斗争的生动故事，暴露了北宋末年统治阶级的腐朽和残暴，揭露了当时尖锐对立的社会矛盾和“官逼民反”的残酷现实。
</p>
</li>
<li>
<img src="../../images/sanguoyanyi.png" />
<h4>《三国演义》</h4>
<p>
《三国演义》是综合民间传说和戏曲、话本，结合陈寿的《三国志》、范晔《后汉书》、元代《三国志平话》、和裴松之注的史料，以及作者个人对社会人生的体悟写成。现所见刊本以明嘉靖本最早，分24卷，240则。清初毛宗岗父子又做了一些修改，并成为现在最常见的120回本
</p>
</li>
<li>
<img src="../../images/xiyouji.png" />
<h4>《西游记》</h4>
<p>西游记以民间传说的唐僧取经的故事和有关话本及杂剧（元末明初杨讷作）基础上创作而成。</p>
</li>
<li>
<img src="../../images/hongloumeng.png" />
<h4>《红楼梦》</h4>
<p>
《红楼梦》是一部章回体长篇小说。早期仅有前八十回抄本流传，八十回后部分未完成且原稿佚失。原名《脂砚斋重评石头记》。程伟元邀请高鹗协同整理出版百二十回全本，定名《红楼梦》。亦有版本作《金玉缘》。
</p>
</li>
</ul>
</body>
</html>
有序列表用于展示需要排序的数据，通常用于排序网站的运营数据，例如各种商品的销量数据排序等等，html中使用<ol><li></li></ol>来表示需要排序的数据，应用案例(ordered.html)如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>有序列表的应用场景</title>
</head>
<body>
<h3>湖北省荆州市高考成绩(姓名:分数)排行榜 Top5</h3>
<ol>
<li>张三:730</li>
<li>李四:680</li>
<li>王五:589</li>
<li>赵六:588</li>
<li>孙七:578</li>
</ol>
</body>
</html>
自定义列表用于术语或者名词进行解释和描述，如下图所示,在小米官网的底部就使用了自定义列表。
html中的自定义列表使用dl dt dd来表示，其中dt用于定义标题,dd用于定义描述、解释。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自定义列表的使用</title>
</head>
<body>
<dl>
<dt>前端技术栈</dt>
<dd>html</dd>
<dd>css</dd>
<dd>javascript</dd>
<dd>jquery</dd>
<dd>bootstarp</dd>
<dd>angularJS</dd>
<dd>node.js</dd>
<dd>vue.js</dd>
</dl>
</body>
</html>
表格通常是用来后台系统展示数据，如下图所示，使用表格展示了4行6列的数据。
在html中，使用table表示一个表格，表格可以是由标题和若干行组成的,每行又被分割成若干个单元格(列)，表格的行使用<tr></tr>表示，表格的单元格使用<td></td>表示。
表格的标题使用<caption></caption>标签，需要放在<table></table>标签的第一行,也就是所有<tr></tr>之上。
注意事项:
在使用<table></table>标签时需要注意的是和无序列表ul li标签一样，table标签只能包含tr标签，tr也只能包含td标签，在td内可以包含任意元素。
在使用<table></table>展示数据时，默认的外观样式通常不是我们想要的，如下图所示
应用案例如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>使用表格展示数据</title>
</head>
<body>
<table >
<!--表格的标题-->
<caption>语文成绩表</caption>
<tr>
<td>姓名</td>
<td>科目</td>
<td>分数</td>
</tr>
<tr>
<td>tony</td>
<td>语文</td>
<td>99</td>
</tr>
<tr>
<td>raorao</td>
<td>语文</td>
<td>99</td>
</tr>
</table>
</body>
</html>
这里我们可以通过修改表格的边框，单元格边框之间的距离以及单元格边框与单元格内容等属性，来达到我们想要的外观效果,如下应用案例(table.html)所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>使用表格展示数据</title>
</head>
<body>
<table border="1" align="center" width="300px" height="200px" cellspacing="0" cellpadding="25">
<!--表格的标题-->
<caption>语文成绩表</caption>
<tr>
<td>姓名</td>
<td>科目</td>
<td>分数</td>
</tr>
<tr>
<td>tony</td>
<td>语文</td>
<td>99</td>
</tr>
<tr>
<td>raorao</td>
<td>语文</td>
<td>99</td>
</tr>
</table>
</body>
</html>
表格常用的属性及其功能描述如下所示
| 属性名称 | 属性描述 |
|---|---|
| border | 设置表格的边框，默认为无边框，即boder=0 |
| align/valign | 控制表格在网页中的水平/垂直(top,middle,bottom)的对齐方式 |
| width | 表格的宽度 |
| height | 表格的高度 |
| cellspacing | 控制单元格与单元格之间的间距 |
| cellpadding | 控制单元格内容和单元格边框之间的距离 |
| rowspan | 跨行 |
| colspan | 跨列 |
在日常开发中，通常把表格分为表头<thead></thead>，表主体<tbody></tbody>和表尾<tfoot></tfoot>三部分组成，以便于实现统一的管理(样式控制)，其中表格的第一行数据表示表头，表格的最后一行数据表示表尾，中间部分表示表主体。
如下图所示，可以通过Chrome的开发人员工具来查看表格的结构
实现应用案例(table_structure.html)如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格结构的划分</title>
</head>
<body>
<h3 align="center">语文成绩表</h3>
<table border="1" align="center" width="300px" height="200px" cellspacing="0" cellpadding="25">
<thead>
<tr>
<td>姓名</td>
<td>科目</td>
<td>分数</td>
</tr>
</thead>
<tbody>
<tr>
<td>tony</td>
<td>语文</td>
<td>99</td>
</tr>
<tr>
<td>raorao</td>
<td>语文</td>
<td>99</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>jack</td>
<td>语文</td>
<td>99</td>
</tr>
</tfoot>
</table>
</body>
</html>
在展示某些数据时可能会用到跨行或者时跨列显示，如下图所示。
跨行:从指定的单元格位置处开始，纵向向下，合并掉几个单元格(包含自己)，被合并的单元格要删除,然后在指定的单元格设置rowspan属性值即可,例如<td rowspan="2">。
跨列:从指定的单元格位置处开始，横向向右，合并掉几个单元格(包含自己)，被合并的单元格要删除，然后在指定的单元格位置处设置colspan属性值即可，例如<td colspan="2">。
关于表格的行和列合并的应用案例如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格单元格的合并</title>
</head>
<body>
<table border="1" align="center" width="300px" height="200px" cellspacing="0" cellpadding="25">
<!--表格的标题-->
<caption>语文成绩表</caption>
<tr>
<td>姓名</td>
<td>科目</td>
<td>分数</td>
</tr>
<tr>
<td>tony</td>
<td>语文</td>
<td>99</td>
</tr>
<tr>
<td>raorao</td>
<td>语文</td>
<td>97</td>
</tr>
<tr>
<td>qq</td>
<!--跨两列显示内容-->
<td colspan="2">语文 88</td>
</tr>
<tr>
<td>weixin</td>
<td>语文</td>
<!--跨行合并单元格 这里的td占据两行-->
<td rowspan="2">99</td>
</tr>
<tr>
<td>dingding</td>
<td>语文</td>
</tr>
</table>
</body>
</html>
使用表格完成一个复杂的跨行跨列数据展示，实现效果如图所示。
分析:首先以D为标准(即1行一列)，那么整个表格就可以算成3行3列。
第一步，先绘制一个基础的表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>实现一个复杂的表格跨行跨列的应用</title>
</head>
<body>
<table border="1" width="500" height="500" cellpadding="25" cellspacing="0">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
第二步:分析各个元素占据的行列
A:一行两列
B:一列两行
C:一列两行
D:一行一列
F:一行两列
第三步:通过设置colspan和rowspan属性改变元素占据的行列，完整实现如下应用案例(table_app.html)所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>实现一个复杂的表格跨行跨列的应用</title>
</head>
<body>
<table border="1" width="500" height="500" cellpadding="25" cellspacing="0">
<tr>
<td colspan="2">A</td>
<td rowspan="2">B</td>
</tr>
<tr>
<td rowspan="2">C</td>
<td>D</td>
</tr>
<tr>
<td colspan="2">F</td>
</tr>
</table>
</body>
</html>
表单在网站中是非常常见的元素，以淘宝网为例子，当打开淘宝首页在搜索框中搜索商品时，如下图所示
当输入用户名，密码登录时，如下图所示。
都大量使用到了表单，表单实际上就是一个包含输入域的Web页面，允许用户输入信息，当用户提交表单后浏览器将表单的数据打包发送给Web服务器(例如Tomcat)，Web服务器接收到表单数据后再把表单数据交给后台服务程序处理(例如Java SpringMVC中的Controller的某个方法)。后台服务程序处理完成后返回给浏览器，浏览器再渲染服务器返回的数据。
表单是由表单域，提示文本，表单元素组成的，如下图所示
常见的表单元素包括用于文本添加的单行文本框，密码框以及多行文本域<textarea></textarea>和隐藏域，
用于选择的单选按钮，多选按钮，下拉框<select><option></option></select>，
以及用于提交表单的普通按钮，提交按钮以及图片按钮和用于实现图片上传的标签。
在淘宝登录注册或者搜索商品时经常会使用到单行文本框，通过使用input标签，设置type="text"即可，设置placeholder属性表示默认显示在文本框用于给用户提示的文字。
用户名: <input type="text" value="" placeholder="请输入用户名"/> <br/>
在淘宝登录时需要用户名、密码才能登录，密码框相对于单行文本框的不同之处在于内容不是明文显示的，同样使用input标签，只需要设置type="password"即可，如果想要设置输入的密码长度，只要设置maxlength属性即可，代码片段如下所示。
密码: <input type="password" maxlength="16"/> <br/>
通常在论坛网站回帖时，可能会想输入多行文本内容，如下图所示
这时就可以使用多行文本域来实现，如果想要控制内容的行数，可以通过设置rows属性来实现，代码片段如下所示。
<textarea rows="20">
今天遇到一个很严峻的问题
解决问题的方式就是不停的尝试，只要坚持，一定会成功。
</textarea> <br/>
隐藏域在页面上通常看不到效果，主要是用来传值使用，如下图所示，淘宝首页也使用了大量的隐藏域。
type=hidden即可,代码片段如下所示。
隐藏域: <input type="hidden" value="" name="item"/> </br>
在网站注册时，可能会让你选择性别信息，它通常是一个单选按钮，因为人只能有一个性别，这时就需要使用单选按钮，如下代码片段所示，如果是一组元素(例如这里的两个radio)，通过设置相同的name属性用于设置名称和用于分组，一组单选按钮的name必须相同，还可以通过设置checked="checked"属性实现当打开页面默认选中的性别，同时必须设置value属性值，推荐是数字，代码片段如下所示。
性别: <input type="radio" name="gender" checked="checked" value="1" />男 <input type="radio" name="gender" value="1" />女
在网站想要了解你的兴趣爱好时，可能会有多个兴趣爱好让你选择，此时会使用到多选按钮checkbox,只需要使用input标签并设置type="checkbox"即可，同时和单选按钮一样，必须设置name和value的属性值，代码片段如下所示。
爱好:<input type="checkbox" name="hobby" value="1" />programming <input type="checkbox" name="hobby" value="2" /> 音乐 <input type="checkbox" name="hobby" value="3" />美女 </br>>
在设置收货地址时，需要选择省市区，这时就需要使用到了select option，通过下拉选择一个值，代码片段如下所示，
如果想要设置默认选中，只需要在option中设置selected=selected即可,代码片段如下所示。
收货地址: <select>
<option>请选择省市自治区</option>
<!--
默认选中上海
-->
<option selected="selected" value="1">上海</option>
<option value="2">北京</option>
<option value="3">天津</option>
<option value="4">重庆</option>
</select>
<select>
<option>请选择区</option>
<option value="1">黄埔区</option>
<option value="2">浦东新区</option>
<option value="3">长宁区</option>
<option value="4">静安区</option>
</select>
</br>
文件上传也是网站上常用的功能，如下所示就是CSDN的文件上传
input标签，并设置type="file"即可,代码片段如下所示。
文件上传: <input type="file" name="fileupload" /><br/>
提交按钮用于将表单元素的数据发送到服务器，代码片段如下所示
提交按钮: <input type="submit" value="提交"/> <br/>
当你想使用单独的图片作为按钮时，此时可以借助图片按钮来实现，可以使用input标签，然后设置属性type="image",并设置src="图片路径"即可。
图片按钮: <input type="image" src="../../../images/163_register_button.png"/><br/>
如果想按钮有更好的显示方式,便可引入<button></button>标签，这样可以在标签中间使用其他元素(例如文本内容和图片)，如下应用片段所示
button按钮: <button> <img src="../../../images/163_register_button.png"> </button><br/>
完整的表单元素案例如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表单的常见元素使用</title>
</head>
<body>
<!--通过type属性指定input元素的类型，value表示该元素的默认值-->
<!--text是单行文本框-->
用户名: <input type="text" value="" placeholder="请输入用户名"/> <br/>
隐藏域: <input type="hidden" value="" name="item"/> </br>
<!-- 通过设置maxlength属性控制字符最大长度-->
<!--label标签用于绑定表单元素，当点击label标签的内容时，表单元素得到焦点-->
<label>密码: <input type="password" maxlength="16"/> <br/></label>
<!--如果label标签包含了多个表单元素，可以使用 for id的格式来绑定某个表单元素-->
<label for="email">
手机号: <input type="text" value=""/></br>
邮箱: <input type="text" id="email" value=""/></br>
</label>
性别: <input type="radio" name="gender" checked="checked" value="1" />男 <input type="radio" name="gender" value="0" />女 </br>
爱好:<input type="checkbox" name="hobby" value="1" />programming <input type="checkbox" name="hobby" value="2" /> 音乐 <input type="checkbox" name="hobby" value="3" />美女 </br>
收货地址: <select>
<option>请选择省市自治区</option>
<!--
默认选中上海
-->
<option selected="selected" value="1">上海</option>
<option value="2">北京</option>
<option value="3">天津</option>
<option value="4">重庆</option>
</select>
<select>
<option>请选择区</option>
<option value="1">黄埔区</option>
<option value="2">浦东新区</option>
<option value="3">长宁区</option>
<option value="4">静安区</option>
</select>
</br>
<textarea rows="20">
今天遇到一个很严峻的问题
解决问题的方式就是不停的尝试，只要坚持，一定会成功。
</textarea> <br/>
重置: <input type="reset"/><br/>
button按钮: <button> <img src="../../../images/163_register_button.png"> </button><br/>
文件上传: <input type="file" name="fileupload"/><br/>
图片按钮: <input type="image" src="../../../images/163_register_button.png"/><br/>
提交按钮: <input type="submit" value="提交"/> <br/>
</body>
</html>
表单域使用<form></form>标签表示，该标签可以包含之前提到的表单元素，也只有包含在<form></form>标签内的表单控件的值才能传递给服务器。
该标签有几个重要的属性:
action：提交给服务器后端(通常是使用java/python/php编写的服务端程序)处理的地址
method:提交的方式，主要有post和get两种方式提交，其中get请求是以明文的方式将数据传递给服务器，安全性低，同时提交的数据最大限制为2KB,通常在查询操作时使用,post是以隐式的方式将数据传递给服务器，其安全性高，不限制传递数据的大小，通常在增、删、改数据时使用。
enctype:用于指定表单进行数据编码的方式,主要取值有application/x-www-form-urlencoded允许将任意类型的文本提交给服务器,multipart/form-data:允许将文件提交给服务器,text/plain:不对任何数据进行编码和传输。
完整的表单域应用程序如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>form表单域</title>
</head>
<body>
<form action="/user/login" method="GET" name="login" enctype="application/x-www-form-urlencoded" >
<label>用户名:</label> <input type="text" name="username"/></br>
<label>密码:</label><input type="password" name="password"/> </br>
<label>提交: <input type="submit"/></label></br>
<label>重置: <input type="reset"/></label></br>
</form>
</body>
</html>
标签：NPU 表单 tags art 排名 html标签 组元 自身 preview
原文地址：https://www.cnblogs.com/ittimeline/p/9204296.html
