HTML和HTTP
HTML: 超文本标记语言，HTML是一种通用的编写超文本标记语言HTTP: 超文本传输协议
超文本：
使用HTML超文本标记语言编写的文档，以 ".html" 为扩展名
传输协议：
HTTP是一套客户端和服务器端都必须遵守的请求和规范或标准
客户端：也叫用户代理，可发起服务器指定端口的HTTP请求，最常见的就是浏览器
服务器端：存储着大量的html文档或图像饰品等资源供客户端访问
HTML的标签和语义标签
<!doctype 文档类型> !doctype是html文档第一行代码，声明该文件类型<html lang="en"> html标签是文档元素根标签，lang属性是声明该html文件的文本语言
<html> <head> <title>文档标题</title> </head> <body> <!--语义标签，代表HTML页面主体--> <header></header> <!--语义标签，用来展示页面头部--> <nav></nav> <!--语义标签，用来展示页面导航--> <article></article> <!--语义标签，用来展示文章模块--> <aside></aside> <!--语义标签，用来展示边栏--> <section></section> <!--语义标签，用来展示多个片段或重复的栏目--> <footer></footer> <!--语义标签，用来展示HTML页面脚部信息等--> </body> </html
图片标签img
img自闭合标签
<img src=''图片路径' alt=''图片不能显示时显示的文本解释' />
img标签的width和height可以设置成百分比，宽或者高如果只设置一个属性，另一个属性会自适应按比例缩放
列表ul，ol，dl
HTML的列表分为“有序列表 ol > li ”、“无序列表 ul > li ”、“定义列表 dd > dt + dd ”
需要注意的是 dl > dt + dd 标签
<!--dl标签dt和dd通常成组出现，dt通常用作定义标题，dd跟随其后作为解释--> <dl> <dt>计算机</dt> <dd>用来计算的电子设备... ...</dd> <dt>显示器</dt> <dd>以视觉方式显示信息的装置... ...</dd> </dl>
表格table
先了解一下完整的table结构
<table> <!-- 表格主体开始 --> <caption> <!-- 表格标题 --> <h3>表格的标题</h3> </caption> <thead> <!-- 表头，表的第一行 --> <tr> <th>表头</th> <th>表头</th> <th>表头</th> </tr> </thead> <tbody> <!-- 表主体 --> <tr> <!-- 表行 --> <td>表数据</td> <!-- 单元格 --> <td>表数据</td> <td>表数据</td> </tr> </tbody> <tfoot> <!-- 表尾，表的最后一行 --> <tr> <td>表尾</td> </tr> </tfoot> </table>
表格是由行<tr>与列<td>组成，一行中多个称为列的单元格，表格中的数据仅允许保存在单元格标签中: <td>...</td> <tbody>可以不只一个， 而其它三个仅允许出现一次
表格单元格的合并操作:
列方向: <td colspan="n">
行方向: <td rowspan="n">
细说HTML表单<form>
6.1 <form>元素属性
<form>元素，也叫表单元素， 它是组织表单控件的载体(可选，但推荐总是写上它)
action: 后台处理脚本地址method: 请求提交方式，GET / POSTname: 表单名称，用在js中较多
6.2 <input>元素属性
<input>: 表单控件元素， 控件类型由type属性决定， 常用属性:
type: 默认为text，输入文本框name: 后台接收用户数据的变量名称， 这里称为表单字段value: 默认值，可选required: 是否是必填项?placeholder: 输入提示文本信息size: 控件显示长度， 推荐使用css控制maxlength: 允许用户输入的最多字符数量disabled: 字段禁用， 此时数据不会被提交到服务器readonly: 只读字段， 允许提交，但不允许用户修改
6.3 <input type="">type类型
text: 输入文本框， 默认值
password: 输入文本用星号*或实心圆点代替email: 输入文本必须为邮箱格式url: 输入内容为URL地址格式tel: 电话号码，移动端会自动调出数字键盘search: 搜索框number: 只允许输入数字，允许设置取值区间，有自增/减小按钮有`min`和`max`属性
hidden: 隐藏域，数据会发送，但是页面上用户看不到radio: 单选按钮，与name，checked配合多个radio选项name属性必须相同，才能提交一个选项的值
checkbox: 复选框，与name，checked配合checkbox的name属性最好是数组形式，这样在传输多个值的时候方便调用 name = "habbits[]"
file: 文件上传控件date / week / month: 日期控件，不同浏览器可能表现不同
6.4 <input type="">type类型
下拉列表, 可以预置一些选项供用户选择, 用户体验好,并且很安全
下拉列表中的字段名name和值value属性分别在二个标签中
<select name="..."><option value="...">
允许多选, 使用selected设置默认选项
如果要option有多个组可以使用opgroup标签
<select name = "course"> <optgroup label = "前端"> <option value>HTML5</option> <option value>CSS3</option> <option value>JavaScript</option> </optgroup> <optgroup label = "后端"> <option value>PHP</option> <option value>.net</option> <option value>Java</option> </optgroup> </select>
6.5 按钮
<input type="button">: 普通按钮, 点击不会提交表单<input type="submit">: 提交按钮, 点击后会提交表单<input type="reset">: 重置按钮,点击后会重置控件为默认值<button>: 提交按钮,等价<button type="submit"><button type="button">: 普通按钮, 点击不会提交表单
6.6 iframe标签
name属性可以让a标签target属性指定在iframe中打开网页，srcdoc属性可以编写html代码，来取代iframe默认显示的页面。
HTML语义化内容结构标签
7.1 标签的应用场景
<header>: 页眉/头, 通常放导航, LOGO,搜索框,注册入口等信息, 可出现多次<footer>: 页脚/底, 通常放网站版权,备案, 联系方式, 友情链接,快速访问等<nav>: 导航, 可以用在页面中任何需要导航的地方<main>: 主体, 展示页面主要内容, 一个页面中, 该元素应该只出现一次<artical>: 独立的内容容器, 不仅仅是文档,内部通常是<h2><p><img><a>...<section>: 一组内容类似的容器/区块,内部可是任何内容,如文本图片视频等<aside>: 与主体无关的内容, 如广告,侧边栏推荐信息等<div>: 通胀容器, 也是使用最多的, 可以容纳任何内容
