HTML5学习笔记

最近开发后端时，公司要求学完全部前端课程，并做好笔记。

1、p标签是一个段落标签，独占一行，平时可以用到；

2、超链接使用a标签，href属性拿来绑定链接，可以使用target="_blank"属性让其在新窗口打开页面；

3、img作为图片标签，src填入其路径，alt属性用来表示图片无法显示时用来代替的文字；

4、表格由 <table> 标签来定义， <th>表头，<tr>行，<td>行中的表格，所以格式如下：

<table border="1">
  <tr>
​    <th>Header 1</th>
​    <th>Header 2</th>
  </tr>
  <tr>
​    <td>row 1, cell 1</td>
​    <td>row 1, cell 2</td>
  </tr>
  <tr>
​    <td>row 2, cell 1</td>
​    <td>row 2, cell 2</td>
  </tr>
</table>

5、无序列表和有序列表的表示方式如下

<ul>
	<li>无序列表</li>
</ul>

<ol>
	<li>有序列表</li>
</ol>

6、 <div> 定义了文档的区域，块级元素； <span> 用来组合文档中的行内元素， 内联元素(inline)
7、表单

<form>
	name: <input type="text" name="name"><br>
	password: <input type="password" name="password">
	<input type="submit" value="提交">
</form>

8、使用<iframe src="路径"></iframe>将新的页面嵌入到当前页面下，设置属性值为 “0” 移除iframe的边框:

<iframe src="https://www.bilibili.com" name="iframe_a"></iframe>
<p><a href="https://www.springcloud.cc/spring-boot.html" target="iframe_a">SpringBoot中文官网</a></p>
注意：因为a标签的target属性是名为iframe_a的iframe框架，所以在点击链接时页面会显示在 iframe框架中。
出于有些网页不希望被嵌套, 响应头中有一选项 X-Frame-Options

9、HTML颜色

div {
    background:rgba(255,0,0,.5);
}
RGBA 的意思是（Red-Green-Blue-Alpha）它是在 RGB 上扩展包括了 “alpha” 通道，运行对颜色值设置透明度。

10、video标签，video标签配合着source来使用，src是路径，type表示视频类型

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
	您的浏览器不支持Video标签。
</video>

11、音频，音频与视频类似，只是外层标签不同

<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

12、对于input来首，input标签拥有强大的输入方式，具体可以见input详解
13、HTML5 表单元素，以前一直在找一个能满足下拉框和输入操作，还能自动匹配输入的标签，现在才发现有这么好用的原生态标签,支持模糊匹配

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

• 对于input的各个属性值，着重拿几个重要的来记录：

autocomplete 属性，值为on后off，适用于 <form> 标签，以及以下类型的 <input> 标签
效果如下图

autofocus 属性是一个布尔属性。
autofocus 属性规定在页面加载时，域自动地获得焦点。

• 一个新的input标签内通过form属性指定另一个表单的id，可以与其绑定一起提交

<form action="" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
</form>

<p> "Last name" 字段没有在 form 表单之内，但它也是 form 表单的一部分。</p>
Last name: <input type="text" name="lname" form="form1">

• formaction属性用于描述表单提交的URL地址，如下，第一个提交会提交到表单的action地址中，第二个提交则会覆盖表单的action，提交到指定的formaction中：

<form action="demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交"><br>
  <input type="submit" formaction="demo-admin.php"
  value="提交">
</form>

• height 和 width 属性规定用于 image 类型的 标签的图像高度和宽度。type="image"也可以用来提交表单
• min 和 max 属性可以用来限制表单中某些类型的范围
• placeholder ="",属性内可以放入提示输入的值
• required 属性是一个 boolean 属性.，required 属性规定必须在提交之前填写输入域（不能为空）。如下：
• Username: <input type="text" name="usrname" required>

14、localStorage 和 sessionStorage

客户端存储数据的两个对象为：
localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);

15、HTML事件的驱动可以参考菜鸟教程来查阅