HTML

（超文本标记语言–HyperText Markup Language）
<!DOCTYPE html> -文档类型（doctypes）
<html></html> -这个元素包含整个页面的内容，也被称作根元素
<head></head> -包含页面描述，css样式表，字符编码声明和想被搜索引擎搜索到的关键字等内容，不会被用户看到
<body></body> -包含文本，图像，视频等想被用户看到的内容
<meta charset="utf-8"> -指定文档使用的字符编码
<title></title> -设置页面的标题，标题显示在浏览器标签页上
<link rel="#" href="#" type="#">
<link rel="stylesheet" href="cssFile.css"> -css样式表，href中填样式表的路径
<script src="jsFile.js"></script> -src填js文件的路径，该元素更适合放在文档尾部

基本元素

标题

<h1>主标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
......
<h6>六级标题</h6>

段落
```
<p>这是一个段落</p>
```

列表

–无序列表(unordered lists)

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

–有序列表(ordered lists)

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>

跳转页面（HTTP GET请求）(anchor-锚)
```
<a herf="#" target="_blank" download>这是一个链接</a>
```
herf(hypertext reference)：输入链接地址，相对路径，锚点（#xxx），发起请求（?name=juzi），伪协议（javascript:;）

target：打开链接的地方

target=”_black”：新建空白页面打开

target=”_self”：在本页面打开

target=”_parent”：在父页面打开

target=”_top”：在顶层窗口打开

后两个一般结合iframe使用

download：指示浏览器下载URL而不是导航到URL

跳转页面（HTTP POST请求）–form

<form action="#" method="post">
  <input type="text" value="username">
  <input type="password" value="password">
  <input type="submit" value="提交">
</form>

没有提交按钮就无法提交form，如果没有，没有指定type的button会自动升级为submit按钮

input

文本：<input type="text" name="">

密码：<input type="password" name="">

复选框：<input type="checkbox" name="" value="">

单选框：<input type="radio" name="" value=""> name属性相同的为一组

更多：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input

用<label> 标签关联文本和输入框，点击文本选中输入框，for对应id
```
1.<label>用户名<input type="text" name="xxx"></label>
```
```
2.<label for="xxx">用户名</label><input type="text" name="xxx" id="xxx">
```
提交时不会提交没有name属性的值

描述列表(description list)

<dl>
  <dt>description term</dt>
  <dd>description description</dd>
  <dt>描述术语</dt>
  <dd>描述列表的描述部分</dd>
  <dt>姓名：</dt>
  <dd>橘子</dd>
</dl>

<img> –图像
```
<img src="#" alt="描述内容">
```
<vidio></vidio> –视频
<b></b> –粗体
<strong></strong> –粗体，强调语气
<abbr> –缩写
```
<abbr title="Laugh Out Loud">LOL</abbr>
```
<i></i> –用于表现因某些原因需要区分普通文本的一系列文本,通常显示斜体
<blockquote></blockquote> –引用内容
<hr> –分割线
<u></u> –下划线
<br> –换行
<kdb></kdb> –用于表示键盘输入

<code> –代码

<p>Regular text. <code>This is code.</code> Regular text.</p>

<nav> –导航栏

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<time> –用来表示时间和日期
<div> –通用型流内容容器
<span> –通用行内容器
<button> –按钮
```
<button name="button">Click me</button>
```
iframe 在一个页面中嵌入一个页面
```
<iframe name=xxx src="#" frameborder="0"></iframe>
<a target=xxx href="http://qq.com">QQ</a>
<a target=xxx href="http://baidu.com">百度</a>
```
src中输入默认网址

target表示点击链接显示窗口的位置，此处在iframe中显示

frameborder边框 0为无边框

<select> –下拉框

<select name="group" multiple> <!-- multiple 支持多选 -->
  <option value="">-</option> 
  <option value="1">第一组</option>
  <option value="2" disabled>第二组</option> <!-- 不可选 -->
  <option value="3" selected>第三组</option> <!-- 默认选择 -->
</select>

<textarea> – 多行纯文本编辑控件

<textarea name="textarea" rows="10" cols="50">
  Write something here
</textarea>

<table> – 表格

<table border=1>
  <colgroup>
  	<col width=100>
    <col bgcolor=red width=100>
  </colgroup>
  <thead>
    <tr>
      <th>表头</th><th>表头</th><th>表头</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>表头</th><td>数据</td><td>数据</td>
    </tr>
  </tbody>
  <tfoot>
  	<tr>
      <th>表头</th><td>数据</td><td>数据</td>
    </tr>
  </tfoot>
</table>

<main></main> 呈现了文档<body> 或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。
<article> 表示在文档，页面，应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构
<aside> 表示一个和其他页面内容完全无关的部分
<footer> 表示最近一个章节内容或根节点元素的页脚
<header> 表示一组引导性的帮助，可能包含标题元素，也可以包含其他元素，像logo、分节头部、搜索表单等。
<section> 表示文档中的一个区域（或节）
查看所有元素 –https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element

其他

特殊符号需要转义
```
&amp;
```
http-server 超轻量级web服务器

http://blog.csdn.net/qq_26562641/article/details/51396760