1.性能元素

1.1.列表标签

列表标签的作用: 给一堆数据增加列表语义, 也就是通知搜索引擎通知浏览器这一堆数据是一个整体

- HTML中列表标签的分类

无序列表(最多)(unordered list)
有序列表(起码)(ordered list)
定义列表(其次)(definition list)

1.1.1.无序列表:

给一堆数据增加列表语义, 并且这一堆数据中所有的数据都没有先后之分

什么叫有先后之分?
例如: 排行榜
什么叫没有先后之分?
例如: 中国有哪些城市

- 无序列表格局:
<ul>  <li>须要显示的条目内容</li></ul>li其实是英文list item的缩写list是列表的意思item是条目标意思所以联合起来就是 列表条目标意思
- 无序列表款式
<ul type="value"></ul>disc    默认值 实心圆circle  空心圆square  实心方块尽管通过标签属性也能批改款式, 然而在企业开发中千万不要这么干
- 留神点:

1.肯定要记住ul标签是用来给一堆数据增加列表语义的, 而不是用来给他们增加小圆点的

2.ul标签和li标签是一个整体, 是一个组合. 所以个别状况下ul标签和li标签都是一起呈现, 不会单个呈现. 也就 是说不会独自应用一个ul标签或者独自应用一个li 标签, 都是联合在一起应用
3.因为ul标签和li标签是一个组合, 所以ul标签中不举荐蕴含其它标签, 也就是说当前你在ul标签中只会看到li 标签

- 无序列表利用场景:

1.新闻列表
2.商品列表
3.导航条

1.1.2.有序列表

有序列表的作用: 给一堆数据增加列表语义, 并且这一堆数据中所有的数据都有先后之分

- 有序列表格局:
<ol>    <li></li></ol>其它用法和ul都差不多, 也就是利用场景/留神点都和ul差不多
- 有序列表款式
<ol type="A"></ol>1   默认值。数字有序列表。（1、2、3、4）a   按字母顺序排列的有序列表，小写。（a、b、c、d）A   按字母顺序排列的有序列表，大写。（A、B、C、D）i   罗马字母，小写。（i, ii, iii, iv）I   罗马字母，大写。（I, II, III, IV）

1.1.3.定义列表

给一堆数据增加列表语义，先通过dt标签定义列表中的所有题目, 而后再通过dd标签给每个题目增加形容信息

- 定义列表的格局:
<dl>  <dt></dt>  <dd></dd>  <dt></dt>  <dd></dd></dl>其实dt和dd都是英文的缩写dt是英文definition title的缩写, 所以dt的含意就是用来定义列表中的题目dd是英文definition description的缩写, 所以dd的含意就是用来定义题目对应的形容的
- 定义列表的利用场景

做网站尾部的相干信息
做图文混排

- 定义列表的留神点

和ul/ol一样, dl和dt/dd是一个整体, 所以他们个别状况下不会独自呈现, 都是一起呈现
和ul/ol一样, 因为dl和dt/dd是一个组合标签, 所以dl中倡议只放dt和dd标签
一个dt能够没有对应的dd,也能够有多个对应的dd, 然而无论有或者没有dd都不举荐应用.
举荐应用一个dt对应一个dd
和li标签一样, 当须要丰盛界面时, 咱们能够在dt和dd标签中持续增加其它标签

1.2.表格标签

其实在过来表格标签用的十分十分的多, 绝大多数的网站都是应用表格标签来制作的, 也就是说表格标签是一个时代的代表。但在当初，多用于数据的展现

- 什么是表格标签?

表格标签作用: 用来给一堆数据增加表格语义
其实表格是一种数据的展示模式, 当数据量十分大的时候, 表格这种展示模式被认为是最为清晰的一种展示形 式

- 表格标签格局:
<table>  <tr>    <td>姓名</td>    <td>年龄</td>    <td>身高</td>  </tr>  <tr>    <td>张三</td>    <td>19</td>    <td>1.78</td>  </tr></table>

其实表格标签中的table代表整个表格, 也就是一对table标签就是一个表格
其实表格标签中的

, 也就是说一对tr标签就是表格中的一行
其实表格标签中的td标签代表表格中一行中的一个单元格, 也就是说一对td标签就是一行中的一个单元格

补充:除td外，有时也会用到th，th外部的文本通常会出现为居中的粗体文本，而td元素内的文本通常是左对齐的一般文本。

- 留神点
  • 表格标签有一个border边框属性, 这个属性决定了边框的宽度. 默认状况下这个属性的值是0, 所以看不到边框
  • 表格标签和列表标签一样, 它是一个组合标签, 所以table/tr/td要么一起呈现, 要么一起不呈现, 不会单个呈现
- 宽度和高度的属性

能够给table标签和td标签应用

  • 表格的宽度和高度默认是依照内容的尺寸来调整的, 也能够通过给table标签设置width/height属性的方 式来手动指定表格的宽度和高度.
  • 如果给td标签设置widht/height属性, 会批改以后单元格的宽度和高度, 不会影响整个表格的宽度和高度
- 程度对齐和垂直对齐的属性

其中程度对齐能够给table标签和tr标签和td标签应用.

垂直对齐只能给tr标签和td标签应用.

  • 给table标签设置align属性, 能够管制表格在程度方向的对齐形式.
  • 给tr标签设置align属性, 能够管制以后行中所有单元格内容的程度方向的对齐形式.
  • 给td标签设置align属性, 能够管制以后单元格中内容在程度方向的对齐形式.
    留神点: 如果td中设置了align属性, tr中也设置了align属性, 那么单元格中的内容会依照td中设置的来对齐.
  • 给tr标签设置valign属性, 能够管制以后行中所有单元格中的内容, 在垂直方向的对齐形式.
  • 给td标签设置valign属性, 能够管制以后单元格中的内容在垂直方向的对齐形式.
    留神点: 如果td中设置了valign属性, tr中也设置了valign属性, 那么单元格中的内容会依照td中设置的来对齐.

align: left center right

valign: top mid bottom

- 外边距和内边距的属性

只能给table标签应用

  • cellspacing外边距就是单元格和单元格之间的间隔, 咱们称之为外边距

    默认状况下单元格和单元格之间的外边距的间隔是2px

  • cellpadding内边距就是单元格的边框和文字之间的间隙, 咱们称之为内边距

    默认状况下内边距是1

    留神: 当前在企业开发中所有管制款式的都是通过CSS或间接应用组件库中的属性管制，应用表格自带属性管制很少，然而要理解根本的应用。

- 细线表格

在表格标签中想通过指定外边距为0来实现细线表格是不靠谱的, 其实它是将2条线合并为了一条线, 所以看上去很不难受

细线表格的制作形式:

1.给table标签设置bgcolor="black"，cellspacing = "1px"2.给tr标签设置bgcolor="white"

留神点:

table标签和tr标签以及td标签都反对bgcolor属性
- 表格的残缺构造

因为表格中存储的数据比较复杂, 为了方便管理和浏览以及晋升语义, 咱们能够对表格中存储的数据进行分类
表格中存储的数据能够分为4类

  • 表格的题目
  • 表格的表头信息
  • 表格的主体信息
  • 表格的页尾信息
表格的残缺构造
<table>  <caption>表格的题目</caption>  <thead>      <tr>          <th>每一列的题目</th>      </tr>  </thead>  <tbody>      <tr>          <td>数据</td>      </tr>  </tbody>  <tfoot>      <tr>          <td>数据</td>      </tr>  </tfoot></table>caption作用: 指定表格的题目thead作用: 指定表格的表头信息tbody作用: 指定表格的主体信息tfoot作用: 指定表格的附加信息
留神点:
- 如果咱们没有编写tbody, 零碎会零碎给咱们增加tbody

- 如果指定了thead和tfoot, 那么在批改整个表格的高度时, thead和tfoot有本人默认的高度, 不会随着表格的高度变动而变动(chrome下能够，Firefox下不能够)

- 单元格合并

1.程度方向上的单元格合并
能够给td标签增加一个colspan属性, 来指定把某一个单元格当做多个单元格来对待(程度方向)
例如:

<td colspan="2"></td>

含意: 把以后单元格当做两个单元格来对待

留神点:

因为把某一个单元格当做了多个单元格来对待, 所以就会多出一些单元格, 所以须要删掉一些单元格能力失常显示.肯定要记住单元格合并永远都是向后或者向下合并, 而不能向前或者向上合并.

2.垂直方向上的单元格合并
能够给td标签设置一个rowspan属性, 来指定把某一个单元格当做多个单元格来对待(垂直方向)
例如:

<td rowspan="2"></td>

含意: 把以后单元格当做两个单元格来对待

1.3.form表单

表单就是专门用来收集用户信息的

- 什么是表单元素?

表单元素其实还是HTML中的一些标签, 只不过这些标签比拟非凡, 在浏览器中所有的表单标签都有非凡的外观和默认的性能

- 表单的格局:
<form action="提交的服务器接口地址">    <表单元素></form>

留神:表单元素肯定要写在表单中

- 常见的表单元素
-input标签    input标签有一个type属性, 这个属性有很多类型的取值,取值的不同就决定了input标签的性能和外观的不同    -明文输入框         <input type="text" name="account" placeholder="请输出用户名">            name:表单提交时，会作为参数的名称，联合输出的值进行匹配，组成 参数名=参数值的构造            placeholder:提醒    -暗文输入框         <input type="password" name="password" placeholder="请输出明码">    -输入框设置默认值         <input type="xxx" value="xxx">    -单选框         <input type="radio" name="xx" value="xxx">      留神点:      1.默认状况下单选框不会互斥, 要想单选框互斥那么必须给每一个单选框标签都设置一个name属性, 而后                name属性还必须设置雷同的值。      2.要想让单选框默认选中某一个, 那么能够给input标签增加一个checked属性。            3.单选框的value值，才是咱们最终须要的值，并不是单选框显示的值。    -多选框         <input type="checkbox" name="xxx" value="xxx">       多选框默认选中 checked    -提交按钮         <input type="submit">      作用: 将表单中曾经填写好的数据, 提交到近程服务器      留神点:      要想把表单中填写好的数据提交到近程服务器, 必须具备两个条件      1.须要给form表单增加一个action的属性, 通过这个action属性指定须要提交到的服务器地址      2.须要给须要提交到服务器的表单元素增加一个name属性        -enctype            application/x-www-form-urlencoded                   查问字符串，在发送前编码所有字符（默认），转换为?a=a&b=b&c=c            multipart/form-data               不对字符编码。在应用蕴含文件上传控件的表单时，必须应用该值。              -附件上传 <input type="file">                  method="POST"                  enctype="multipart/form-data"            text/plain                  用于发送纯文本内容，空格转换为 "+" 加号，不对特殊字符进行编码，个别用于email之类的；            -一般按钮         <input type="button" value="xxx">      能够通过value属性来给按钮指定题目      作用: 配合JS实现一些操作    -图片按钮         <input type="image" src="">       作用: 配合JS实现一些操作        -重置按钮         <input type="reset" value="xx">      作用: 用于清空表单中曾经填写好的数据      留神点:      如果想想改重置按钮默认的按钮题目能够通过value属性来批改    -暗藏域         <input type="hidden" name="xx" value="xxx">        暗藏域        作用 : 配合提交按钮将一些数据默默的悄悄的提交到服务器-label标签  1.默认状况下文字和输入框是没有关联关系的, 也就是说点击文字输入框不会聚焦, 如果想点击文字时让                    对应的输入框聚焦, 那么就须要让文字和输入框进行绑定  2.要想让输入框和文字绑定在一起, 那么咱们能够应用label标签  3.绑定的格局:      3.1将文字利用label标签包裹起来      3.2给输入框增加一个id属性      3.3在label标签中通过for属性和输入框中的id进行绑定即可        <label for="account">          账号:        </label>        <input type="text" id="account">-select标签  作用: 用于定义下拉列表  格局:  <select>      <optgroup label="分组名称">          <option>列表数据</option>      </optgroup>  </select>  留神点:  1.下拉列表不能输出内容, 然而能够间接在列表中抉择内容  2.能够通过给option标签增加一个selected属性来指定列表的默认值  3.能够通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类-textarea标签  作用: 定义一个多行输入框  格局:  <textarea>  </textarea>  留神点:  1.默认状况下输入框能够有限换行  2.默认状况下输入框有本人的宽度和高度  3.能够通过cols和rows来指定输入框的宽度和高度, 然而尽管指定了列数和行数, 然而还是能够有限往下                    输出  4.默认状况下输入框是能够手动拉伸的-fieldset组件  fieldset组件用于在一个web表单中对多个控件和标签进行分组  格局:  <form action="">      <fieldset>        <legend>请登录</legend>        账号:<input type="text"><br>        明码:<input type="password">        <input type="submit">      </fieldset>  </form>
HTML5新增表单元素
-datalist标签    <input type="text" list="xxx">    <datalist id="xxx">        <option>xxx</option>    </datalist>    1.作用: 给输入框绑定待选项    2.datalist格局:    <datalist>        <option>待选项内容</option>    </datalist>    3.如何给输入框绑定待选列表        1.搞一个输入框        2.搞一个datalist列表        3.给datalist列表标签增加一个id        4.给输入框增加一个list属性,将datalist的id对应的值赋值给list属性即可-progress <progress value="70" max="100">70%</progress>    progress示意工作的实现状况，罕用于进度条        max 定义进度元素所要求的工作的工作量，默认值为1          value 定义曾经实现的工作量，如果max值为1，该值必须是介于0~1之间的小数。-邮箱 <input type="email">    能够主动校验输出的内容是否合乎邮箱的格局-域名 <input type="url">    能够主动校验输出的内容是否是URL地址-数字 <input type="number">    输入框中只能输出数字-工夫 <input type="date">    能够通过日历来抉择工夫-色彩 <input type="color">    能够通过取色板来抉择色彩

2.Http协定

HTTP是一种可能获取如 HTML 这样的网络资源的 protocol(通信协定)。它是在 Web 上进行数据交换的根底，是一种 client-server 协定，也就是说，申请通常是由像浏览器这样的接受方发动的。

HTTP被设计于20世纪90年代初期，是一种可扩大的协定。它是应用层的协定，通过TCP，或者是TLS－加密的TCP连贯来发送，实践上任何牢靠的传输协定都能够应用。因为其良好的扩展性，时至今日，它不仅被用来传输超文本文档，还用来传输图片、视频或者向服务器发送如HTML表单这样的信息。HTTP还能够依据网页需要，仅获取局部Web文档内容更新网页。

表单：提交数据

交互：HTTP协定

客户端大前端 申请------>

<------响应 服务端 后端

HTTP报文的分类有两种：申请报文和响应报文。顾名思义，申请报文就是客户端向服务端发送申请的信号，响应报文就是服务端响应解决后回传给客户端的信号。

2.1.申请报文

HTTP 申请报文由四局部组成，别离是申请行、申请头、空行和申请体，其中空行也是组成部分之一，作用是进行分隔，必不可少。

2.1.1.申请行

第一行为申请行，由申请办法、URI和HTTP协定版本3个字段组成，它们之间用空格分隔，最初以回车和换行符结尾进行内容宰割，示意接下来的内容（下一行开始的）不是申请行的内容。举例，GET /index.php HTTP/1.1，GET是申请办法，/index.php是URL，HTTP/1.1示意应用的HTTP版本为1.1。

这一行比拟好了解，只有申请办法的类型比拟多，有GET、POST、HEAD、PUT、DELETE、OPTIONS、TRACE、CONNECT，其中GET、POST最为罕用，这里具体介绍下。

- GET

GET最为常见的申请形式，通常用于当客户端要从服务器中读取文档时，比方点击网页上的链接或者通过在浏览器的地址栏输出网址的形式来浏览网页，应用的都是GET形式。须要留神的是应用GET办法申请时，申请参数和对应的值是跟在URL前面，通过问号（“?”）和and连接符（“&”）以及“=”号连贯。GET办法要求服务器将URL定位的资源放在响应报文的数据局部，回送给客户端。例如，/index.php?id=100&slec=yes，这样通过GET形式传递的数据间接示意在地址中。正式因为要传递的参数和值曾经存在于URL中，所以采纳GET办法申请的HTTP报文是没有申请体的。

很显著，GET办法把参数以及参数值都裸露在URL中了，益处不言而喻，弊病就是不利于数据的窃密和平安。另外浏览器对地址的字符长度是有限度的，尽管各自的规范不同，但个别不超过1024个字符，所以如果要传输的数据量比拟大，不宜采纳GET办法。

- POST

GET也是十分常见的申请形式，并且完满补救了GET办法的有余。因为POST办法将要传输的数据封装在报文的申请体中，并且对传输的数据大小没有限度，所以能够传输大量的数据，并且因为数据封装在申请体中，没有间接裸露在URL中，所以比拟私密和平安。

- 其余申请形式

其余申请形式用得比拟少，其中HEAD办法偶然用到，服务端承受到HEAD申请后只返回响应头，而不会发送响应内容，这样就进步了传输效率。所以当咱们只须要查看某个页面的状态的时候，应用HEAD是十分高效的。

2.1.2.申请头

申请头部由键/值对组成，每行一对，键和值用冒号“:”（英文）分隔。申请头部告知服务器所有有对于客户端申请的信息，典型的申请头有：

User-Agent：产生申请的用户代理信息（浏览器信息）： Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36等；

Accept：客户端可辨认的内容类型列 ：text/html,application/xhtml+xml,application/xml；

Accept-Language：客户端可承受的自然语言 - zh-CN,zh;q=0.8,en;q=0.6,id;q=0.4；

Accept-Encoding：客户端可承受的编码压缩格局 - gzip, deflate, sdch, br

Host：申请的主机名，容许多个域名同处一个IP地址，即虚拟主机

connection：连贯形式，有close和keep-alive两种。

close：通知WEB服务器或代理服务器，在实现本次申请的响应后，断开连接

keep-alive：通知WEB服务器或代理服务器。在实现本次申请的响应后，放弃连贯，以期待后续申请

Cookie：存储于客户端扩大字段，向同一域名的服务端发送属于该域的cookie - PSTM=1490844191; BIDUPSID=2145FF54639208435F60E1E165379255;

2.1.3.空行

用户进行内容宰割，示意申请头到此为止，下一行的内容不再是申请头。

2.1.4.申请体

申请体蕴含的就是申请数据，正如上文提到的，当应用的是GET办法的时候，没有申请体。

2.2.响应报文

客户端向服务端发送申请之后，服务器接管并解决客户端发过来的申请后失常状况下会返回一个HTTP的响应音讯，这个就是响应报文。

HTTP响应也由四个局部组成，别离是：状态行、消息报头、空行和响应注释。模式上除了状态行之外，其余三个局部与申请报文相似。

2.2.1.状态行

格局为：HTTP-Version Status-Code Reason-Phrase CRLF。其中，HTTP-Version示意服务器HTTP协定的版本；Status-Code示意服务器发回的响应状态代码；Reason-Phrase示意状态代码的文本形容。状态代码由三位数字组成，第一个数字定义了响应的类别，且有五种可能取值。

1xx：批示信息--示意申请已接管，持续解决。

2xx：胜利--示意申请已被胜利接管、了解、承受。

3xx：重定向--要实现申请必须进行更进一步的操作。

4xx：客户端谬误--申请有语法错误或申请无奈实现。

5xx：服务器端谬误--服务器未能实现非法的申请。

各类型常见状态代码、状态形容的阐明如下：

200 OK：客户端申请胜利。

400 Bad Request：客户端申请有语法错误，不能被服务器所了解。

401 Unauthorized：申请未经受权，这个状态代码必须和WWW-Authenticate报头域一起应用。

403 Forbidden：服务器收到申请，然而回绝提供服务。

404 Not Found：申请资源不存在，举个例子：输出了谬误的URL。

500 Internal Server Error：服务器产生不可预期的谬误。

503 Server Unavailable：服务器以后不能解决客户端的申请，一段时间后可能恢复正常，举个例子：HTTP/1.1 200 OK（CRLF）。

2.2.2.响应头

和申请报文的申请头相似，响应头也由键值对组成，每行一对，键和值用英文冒号 : 分隔。响应头域容许服务器传递不能放在状态行的附加信息，这些域次要形容服务器的信息和Request-URI进一步的信息，典型的响应头有：

Server：蕴含解决申请的原始服务器的软件信息；

Date：服务器日期；

Content-Type：返回的资源类型 (MIME)；

Connection：连贯形式；

close：连贯曾经敞开；

keep-alive：连贯已放弃，在期待本次连贯的后续申请；

Cache-Control：缓存管制；

Expires：设置过期工夫；

Set-Cookie：设置 Cookie 信息。

2.2.3.空行

作为内容宰割，示意以下不再是响应头的内容。

2.2.4.响应体

这个是服务器返回给浏览器的响应信息。