HTML 知识总结

HTML

1.html头部head中引入外部css文件：

<link rel="stylesheet" href="css/music.css">

2.常见的html标签

标题标签hn(h1——h6)  <h1>一级标题</h1>

段落标签<p>这是一个段落</p>

字体标签<font>hello world</font>

换行标签<br/>   这是一个单标签

<nav> 标签定义导航链接的部分

<hr> 标签在 HTML 页面中创建水平线

meta标签描述了一些基本的元数据

<div> 和 <span> 是没有语义的，它们就是一个盒子，用来装内容的。
具体实现：
     <div> 这是头部 </div>    
     <span> 今日价格 </span>
特点：
    1. <div> 标签用来布局，但是现在一行只能放一个<div>。 大盒子
    2. <span> 标签用来布局，一行上可以多个 <span>。小盒子

图片标签<img src ="图像URL"/>

链接标签 

链接的语法格式
    <a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
属性：
    1.href：用于指定链接目标的url地址
    2.target:用于指定链接页面的打开方式_self默认值 _blank新窗口打开
    3.#：空链接

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容

无序列表<ul>       有序列表<ol>

表单：表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox） 等等。我们使用<form> input元素</form>

输入标签 <inpu type="password"t>,   其中type可以为密码字段（password），文本域（text），单选按钮（radio），复选框（Checkboxes），提交按钮（Submit）

<script></script> 标签用于定义客户端脚本

<iframe></iframe> 框架标签

<aside> 标签定义页面主区域内容之外的内容（比如侧边栏）

3.内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。（就是在内部实现属性）

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

4.常用HTML5新元素

<canvas>  标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API。canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成

<audio>   定义音频内容

<video> 定义视频（video 或者 movie）

<source> 定义多媒体资源 <video> 和 <audio>

<embed> 定义嵌入的内容，比如插件

 draggable 属性设置为 true ，为了使元素可拖动，把：<img draggable="true">

5.HTML5 web 存储，一个比 cookie 更好的本地存储方式

使用HTML5可以在本地存储用户的浏览数据。

早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.

数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

客户端存储数据的两个对象为：

• localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
• sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

在使用 web 存储前,应检查浏览器是否支持 localStorage 和 sessionStorage: