html入门笔记

参考：

1、基本概念

元素：开始标签、内容、结束标签。例如：<p>你好</p>
属性：例如：<p class="c1">你好</p>。属性值最好加上引号。属性值可以有多个，用空格分隔，例如class="c1 c2 c3"
布尔属性：属性值和属性名一致（通常会省略属性值），例如：<input type="text" disabled="disabled">
块级元素：自己占一行
内联元素：内联元素不会导致换行
空元素：只有开始标签，例如：<img src="xxx">

html文档示例

<!-- 开头这么写就行，别的写法已经过时了 -->
<!DOCTYPE html>

<html> 
  <head>
    <meta charset="utf-8">
    <title>我的测试站点</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  </head>

  <body>
    <p>这是我的页面</p>
  </body>
</html>

如何打印html中的特殊字符

字符	转义
<	`<`
>	`>`
"	`"`
'	`'`
&	`&`

2、`<head>`标签

<title>元素：文档标题

title元素会被显示在浏览器标签页上、作为默认的书签名、显示在搜索引擎的搜索结果中等。

<meta>元素（元数据）：

许多<meta>元素包含了name和content属性，例如<meta name="description" content="xxx">
如果页面使用了Facebook提供的元数据协议Open Graph Data，当在Facebook上链接了此页面时，这个链接就会显示成一个图像、标题和描述的组合，例如：

html <meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png"> <meta property="og:description" content="xxxxx"> <meta property="og:title" content="Mozilla Developer Network">

网页的自定义图标

<html> 
  <head>
    ...
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  </head>
</html>

<!-- 一些其他类型的图标 -->
<!-- third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="xxx">
<!-- iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="xxx">
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="xxx">
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="xxx">
<!-- basic favicon -->
<link rel="shortcut icon" href="xxx">

为文档设置主语言

<!-- 可以给文档设置主语言 -->
<html lang="zh-CN">

<!-- 当然也可以为文档其他部分单独设置语言 -->
<p>日语实例: <span lang="jp">ご飯が熱い。</span>.</p>

3、文档结构

文本结构

标题和段落
标题：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>
段落：<p>
列表
无序列表和有序列表：<ul>、<ol>
列表项：<li>
强调
<em>：默认是斜体风格
<strong>：默认是粗体风格
表象元素（presentational elements）：不具备语义，仅用于改变文本样式。斜体<i>、粗体<b>、下划线<u>。不推荐使用这些元素，应该使用css代替。

超链接

超链接

html <a href="https://www.mozilla.org/zh-CN/" >Mozilla 主页</a>

将图片作为链接

html <a href="https://www.mozilla.org/zh-CN/"> <img src="mozilla-image.png" alt="链接至 Mozilla 主页的 Mozilla 标志"> </a>

跳转到页内的某个位置

```html

地址

跳转到某页的指定位置

页内跳转 ```

其他属性
title：鼠标悬停在链接上时，title会作为提示信息出现
download：当链接到一个可下载的资源时，download属性提供一个文件名。

文字排版

描述列表

```html

内心独白: 戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。
...: ...

```

引用
块引用：<blockquote cite="urlxxx">...</blockquote>
行内引用：<q cite="urlxxx">...</q>。浏览器默认会将行内引用的文本放入引号中。
引文：<cite>...</cite>。浏览器默认不显示cite元素中的内容，如果为其附上链接（即将其放在<a></a>内部），就会被显示出来，默认斜体。
缩略语：<abbr title="xxx">HTML</abbr>
联系方式：<address>...</address>，仅仅为了标记联系方式
上下标：下标<sub></sub>、上标<sup></sup>
代码
<code>：用于标记代码
<pre>：用于保留空白符
<var>：用于标记变量
<kbd>：用于标记键盘输入
<samp>：用于标记输出
时间和日期：<time datetime="2016-01-20">2016年1月20日</time>。datetime支持各种各样的日期格式

文档布局元素

<header>：页眉。
<nav>：导航栏。
<main>：主内容，只能有一个。
<aside>：侧边栏。
<footer>：页脚。
<article>、section：文章和节
div和span：无语义元素，div是块级的，span是内联的
br、hr：换行和水平分割线

4、多媒体

图片

（图片和css属性background-image不同，background-image只是装饰性的图片）

<img src="xxx.jpg">

属性：

alt属性：对图片的描述，当图片没有被加载出来时，显示这些文字
width和height：定义图片的宽高
title：鼠标悬停在图片上时显示title

两种图片搭配文字的方式：

<div class="figure">
  <img src="/images/dinosaur_small.jpg"
     alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
     width="400"
     height="341">
  <p>曼彻斯特大学博物馆展出的一只霸王龙的化石</p>
</div>

<!-- html5，figure中可以是几张图片、一段代码、音视频、方程、表格或别的 -->
<figure>
  <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
     alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
     width="400"
     height="341">
  <figcaption>曼彻斯特大学博物馆展出的一只霸王龙的化石</figcaption>
</figure>

音视频

<video>和<audio>参考https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content

其他嵌入类型

<iframe>：用于嵌入其他网页，参考https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies
<embed>和<object>：用于嵌入java applet、flash、pdf等奇怪的内容，一般不会用到

SVG图

略

响应式图片（自适应图片）

略

5、表格

基本

tr：行
th：表头单元格
td：普通单元格

<table>
  <tr>
    <th>Ella</th>
    <th>Juan</th>
  </tr>
  <tr>
    <td>Breed</td>
    <td>Jack Russell</td>
  </tr>
</table>

使用colspan和rowspan属性合并单元格。colspan表示单元格占几列，rowspan表示单元格占几行

<table>
  <tr>
    <th colspan="2">Animals</th>
  </tr>
  <tr>
    <th colspan="2">Hippopotamus</th>
  </tr>
  <tr>
    <th rowspan="2">Horse</th>
    <td>Mare</td>
  </tr>
  <tr>
    <td>Stallion</td>
  </tr>
</table>

使用<colgroup>和<col>指定某列的样式，每个col按顺序对应表格的一列

<table>
  <colgroup>
    <col>
    <col style="background-color: yellow">
  </colgroup>
  <tr>
    ...
</table>

其他

表格标题：<table> <caption> xxx </caption> </table>
表格结构：<thead>、<tfoot>、<tbody>，分别对应表格的第一行，最后一行和中间的部分。（用来代替<tr>）
嵌套表格：可以在<td>中嵌套另外一个表格
scope属性：区分不同类型的表头单元格
scope的替代方法：使用id和headers建立表头和单元格的联系

6、表单（form）

基础

<form></form>：所有html表单都定义在form标签内部

<!-- action定义了发送数据的uri -->
<form action="/my-handling-form-page" method="post">
    ...
</form>

<label>：文本标签
<input>：单行文本输入框
<textarea>：多行文本输入框
<button>

<!-- label、input、textarea、button -->

  <div>
    <!-- for属性：将标签链接到表单小部件，for的值对应小部件的id -->
    <label for="name">Name:</label>
    <!--  type属性：定义输入类型 -->
    <!-- name属性：定义字段名，用于向服务器发送数据 -->
    <input type="text" id="name" name="user_name">
  </div>
  <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_email">
  </div>
  <div>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </div>
  <div class="button">
    <!-- type属性：submit、reset、button -->
    <button type="submit">Send your message</button>
  </div>

<!-- input和textarea的默认值 -->
<input type="text" value="by default this element is filled with this text" />
<textarea>by default this element is filled with this text</textarea>

<fieldset>：可以在里面放一组元素
<legend>：给fieldset打标签
<radio>：单选按钮

<form>
  <fieldset>
    <legend>Fruit juice size</legend>
    <p>
      <input type="radio" name="size" id="size_1" value="small">
      <label for="size_1">Small</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_2" value="medium">
      <label for="size_2">Medium</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_3" value="large">
      <label for="size_3">Large</label>
    </p>
  </fieldset>
</form>

表单部件

通用属性：

autofocus：默认值（false），元素自动具有输入焦点，文档中只能有一个表单元素可以指定这个属性。
disabled：默认值（false）
form
name：提交数据时的字段名
value：初始值

单行文本输入框<input>：

<input>是个空元素
约束：如果输入多行文本，发送数据前浏览器会删掉换行符
可以被标记为readonly、disabled
可以有placeholder
size指定框的尺寸，maxlength指定可输入的最大字符数
type属性默认值为text，可以指定为其他type，浏览器会帮助做输入校验
email（可配合mutiple属性）、password、search、tel、url

多行文本输入框<textarea>：

<textarea cols="30" rows="10"></textarea>
属性
cols和rows：行数和列数
resize：允许通过拖放调整文本框大小，值为none时关闭该功能。
wrap：soft/hard，是否自动换行显示

选择框<select>

一个<option>子元素定义一个选项。
selected属性，指定选择框默认值
value属性，指定该option对应的数据，如果没有value属性，将option的内容作为数据
<optgroup>子元素定义一个选项组，<option>元素作为其子元素
label属性：选项组的名称
<select>
mutiple属性，允许用户利用操作系统提供的默认机制选择多个值，例如按下ctrl/cmd后点击多个值

自动补全输入框，需要<input>和<datalist>配合实现

<input type="text" list="mySuggestion">
<datalist id="mySuggestion">
  <option>Apple</option>
  <option>Banana</option>
</datalist>

可选择项（前面或后面有个能点的小框框）

复选框
type属性值为checkbox的<input>元素
单选框
type属性值为radio的<input>元素
checked属性：指示该部件的默认状态，"选中"或"未选中"
value属性：默认为"on"值

按钮

有三种类型的按钮
submit：不带type属性的button默认为submit类型
reset：将所有表单部件重置为默认值，type值为reset
Anonymous：没有任何功能，type属性为button
使用<button>元素或者<input>元素来创建一个按钮，type属性的值指定显示什么类型的按钮。
区别：<input>是个空元素，只能用value属性指定纯文本标签，而<button>内部可以有子元素，可以相应地样式化

其他

数字
<input type="number" name="age" id="age" min="1" max="10" step="2">
将input的type属性设置为number
只允许浮点数
min、max和step属性设置最大值、最小值和增加或减小的步进值
滑块
<input type="range" name="beans" id="beans" min="0" max="500" step="10">
收集日期和时间
本地日期时间（年月日时分、没有时区）
- <input type="datetime-local" name="datetime" id="datetime">
日期：type为date
月：type为month
时间：type为time
星期：type为week
所有日期和时间控制都可以使用min和max属性来约束，例如<input type="date" name="myDate" min="2013-06-01" max="2013-08-31" id="myDate">
拾色器
<input type="color" name="color" id="color">
文件选择器
<input type="file" name="file" id="file" accept="image/*" multiple>
accept属性约束文件类型
mutiple属性允许用户选择多个文件
隐藏表单
type值为hidden
图像按钮
<input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />
支持所有<img>和按钮的属性
提交数据时提交的是点击位置的坐标（左上角坐标为0,0），数据为两个键值对，它们的key分别为name属性拼上.x和.y
仪表和进度条
进度条
- <progress max="100" value="75">75/100</progress>
仪表
- <meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>
- min和max指定了最大值和最小值，low和high是两个阈值，仪表的颜色根据optimum的值所在区间变化

html5中<input>元素类型：email、search、tel、url、number、range、datetime-local、date、month、time、week、color

发送表单数据

<form>元素定义如何发送数据

action属性
值可以是绝对url，相对url
值为“”、“#”或没有该属性时，数据被发送到当前页面
method属性
get：使用get方法时，数据会被作为参数拼到url后面
post：使用post方法时，数据会被放在请求体中
enctype属性，设置http头的Content-Type
发送文件时要将该值设置为multipart/form-data。数据将被分成多个部分，每个文件单独占用一个部分，表单正文中包含的文本数据占用一个部分（文件被视为二进制数据，其他数据都被视为文本数据）。

安全问题：

XSS和CSRF
XSS
- 跨站脚本攻击(Cross Site Scripting)。攻击者在服务端返回给用户的数据中混入恶意脚本，用户执行以后就会收到攻击。XSS根据混入恶意脚本的手段分为不同的攻击类型。
- XSS攻击的是用户，利用的是用户对web服务的信任。
- XSS一般是由于服务端对用户数据不做处理造成
CSRF：
- 跨站请求伪造（Cross Site Request Forgery）。攻击者上传数据时混入恶意脚本，用来获取服务端权限。
- CSRF攻击的是服务，利用的是服务对用户的信任。
- CSRF一般是由于服务器不对用户身份和数据做严格的校验造成
SQL注入
HTTP头注入和电子邮件注入（不太懂）

永远要严格检查用户的身份，对用户上传的数据做必要的限制和严格的校验。

校验表单数据

1、html5表单校验属性

required：必填项
pattern：正则表达式
textarea不支持pattern
有些input类型不需要pattern，例如email
minlength和maxlength：限制输入的长度
min和max：限制数字的大小（例如type=number时）

当一个元素校验通过时，该元素将可以通过CSS伪类:valid进行样式化；如果一个元素未校验通过，该元素将可以通过CSS伪类:invalid进行样式化。

2、可以对以下元素调用约束校验API（constraint validation API），使用js校验数据，

input、button、fieldset、output、select、textarea

3、js校验

有一些库可以做这件事：

独立的库（原生 Javascript 实现）：
Validate.js
jQuery 插件:
Validation
Valid8

表单校验不需要复杂的JavaScript，但它需要对用户的仔细考虑。一定要记住帮助用户更正他提供的数据。为此，请务必：

显示明确的错误消息。
放宽输入格式限制。
指出错误发生的位置（特别是在大型表单中）。

自定义表单控件

略

用js发送表单

使用form直接发送数据会去加载请求页面。Ajax可以在或重新加载页面的情况下完成和服务端的数据交换。

XMLHttpRequest+手动处理表单数据
XMLHttpRequest+FormData对象（推荐）
获取表单元素
接管submit事件，禁用默认处理操作
使用FormData获取表单数据
使用FileReader API手动处理数据

使用css定制表单样式

略