HTML概念
HTML，全称HyperTextMarkupLanguage，超文本标记语言，是一种描述网页的语言，而非编程语言，HTML使用标记标签来描述网页。
HTML常用标签
html文档：<html></html>
文档头部：<head></head>
文档主体: <body></body>
标题：<h1></h1><h2></h2>...<h6></h6>
段落：<p></p>
水平线：<hr>
换行：<br>或</br> ！最好使用后者，html标签追求闭合
超链接：<a href = "url" #target = "_blank"~~>链接指示语</a> ** !target属性定义链接打开的位置**
图像： url 为图片添加路径，分绝对路径与相对路径
文档分区：<div></div>块级元素
span标签：<span></span>
表格： <table border="num"></table>定义表格,border属性为表格边框
<caption>表格题目</caption> <th>表格表头</th><tr>表格行</tr><th>表格单元</th>
<col>列属性</col>
代码如下实例：
<table border="2">
<caption>横跨两列的单元格</caption>
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<br/>
<table border="1">
<caption>横跨两行的单元格</caption>
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
有序列表：
<ol>有序列表定义
<li>列表项目1</li>
<li>项目列表2</li>
</ol>
无序列表：
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
</ul>
自定义列表：
<dl>
<dd>
<dt>定义列表1</dt>
<dt>定义列表2</dt>
</dd>
</dl>
<form>表单：用于搜集用户输入</form>表单元素
表单包含<input>输入框、<select>下拉选项框、<textarea>多行文本输入框、<button>、<datalist>-input元素预定义选项列表-HTML5新增
input输入框：text类型(文本输入)、radio类型（多选一按钮）、submit类型、password、number、email等类型
text类型
<input type = "text" placeholder = "文本输入"/>
radio类型
<span>男</span><input type ="radio" name="sex" value="男" checked>  
<span>女</span><input type = "radio" name = "sex" value = "女">
submit类型
<input type = "submit" value="提交">
password类型
<input type = "password" placeholder = "输入密码"/>
下拉选项框：
<select name="fruits"><option value="apple">apple</option><option value="pear">pear</option><option value="bnana">bnana</option></select>
多行文本输入：
<textarea name="message" rows="3" cols="5">
The cat was playing in the garden.
</textarea>
button按钮：
<button type="button" onclick="alert('❤️')">点我有惊喜</button>
块级元素与内联元素
块元素是指从新的一行开始的元素，而内联元素不会另起一行。
常见的块级元素有：<div>、<p>、<h1>-<h6>、<hr>、<form>、<ul>、<ol>、<table>等标签元素
常见的内联元素有：<span>、<a>、<img>、<br/>、<input>、<select>、<em>、<strong>等标签
内联元素可通过添加style属性：display:block变为块级元素
特殊符号
空格：  、小于号 :</< 、等号：=、大于号：>/ $gt等
其余特殊符号可参考：特殊符号转义
HTML5新增标签
新增语义元素
HTML5定义了很多新的语义元素，分别有：<article>、<header>、<aside>、<footer>、<section>、<nav>、<figure>、<figcation>等元素，接下来分别介绍新增的语义元素。
<article>
<article>一般用于博客、论坛、新闻等。具体事例：
<article>
<h1>粉色天气</h1>
<p>
从粉色的茶水开始，粉红色的玫瑰，花瓣凋零过半，将一片片花瓣夹入淡绿色的笔记本中。
便是粉色的天气粉色的一天了。
</p>
</article>
<header>
<header>一般用于定义文档或section的页眉
代码实例：
<article>
<header>
<h1>金牛座季节</h1>
<p>4月末，金牛座的季节</p>
</header>
<p>周边的金牛座陆续的过了生日</p>
</article>
<footer>
<footer>一般用于定义文档或section的页脚
代码实例：
<article>
<header>
<h1>开心明天</h1>
<p>明天又是美好的一天</p>
</header>
<p>
最近情绪上天入地，时时安慰自己：
又是充满希望的一周，明天又是美好的一天，明天应该是美好的，因为还没开始，
还可以有激情有勇气去过好。
</p>
<footer>
<p>北京二吊子程序媛所码</p>
</footer>
</article>
<section>
<section>定义一个节
代码示例：
<section>
<p>章节一</p>
</section>
<section>
<p>章节二</p>
</section>
<nav>
<nav>定义导航链接集合
代码示例：
<nav>
<a href="http://baidu.com">百度一下 |</a>
<a href="http://byr.bbs.cn">北邮人论坛 |</a>
<a href="http://iqiyi.com">爱奇艺 |</a>
</nav>
HTML5图像
canvas
HTML5 的 canvas 元素是使用 JavaScript 在网页上绘制图像，canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
实现方法步骤
1.在页面中创建canvas元素，
<canvas id="myCanvas" width = "200" height = "150" ></canvas>
2.通过JavaScript来绘制：
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
3.通过javascript绘制图像
SVG
SVG指可伸缩矢量图形，SVG图像具有可通过文本编辑器来创建修改，也可被搜索、索引、压缩等优点。
代码示例：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/>
</svg>
HTML5媒体
媒体元素主要为音频元素和视频元素，HTML5通过<object>来加载，进而播放音频或视频。
代码示意：直接在页面body部分通过<object>标签来添加音频或视频文件
<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="/i/bird.wav" />
<param name="controller" value="true" />
</object>
HTML5API
HTML5新增了诸多API 接口，包括地理定位、拖放、WEB存储、应用存储等接口。
HTML5 定位
HTML5 Geolocation API 可用于获得用户的地理位置，Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。
1： navigator.geolocation，可用于检测设备是否支持HTML5定位
2：getCurrentPosition() 方法可用户获取当前设备的经纬度位置
利用HTML5定位获取定位示例：HTML5获取定位
HTML5 拖放
HTML5增加了新的属性draggable,当某元素的draggable属性设置为true时，表示该属性可以被拖动。
HTML5同时还新增了鼠标事件ondrag、ondrop、ondragstart、ondragover等事件来运行和拖放有关的脚本；每个事件的具体意义可参考w3cHTML事件。
HTML5拖放代码示例
- 在页面中添加可拖放的元素
- 确定拖放元素与拖放目标元素的事件与对应的脚本
- 拖放元素与拖放目标元素的事件
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)"
width="336" height="69">
- 事件所触发的脚本
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
- 在页面中进行拖放元素
WEB存储
web存储也称为本地存储，通过本地存储，web 应用程序能够在用户浏览器中对数据进行本地的存储。
与cookie相比，本地存储更安全，且不影响浏览器性能，并且信息不会被传到服务器
HTML本地存储提供了两个在客户端存储数据的对象
window.localStorage - 存储没有截止日期的数据
window.sessionStorage - 当关闭浏览器标签页时数据会丢失
使用本地缓存时，应先检测是否支持本地缓存
if (typeof(Storage) !== "undefined") {
// 针对 localStorage/sessionStorage 的代码
} else {
// 抱歉！不支持 Web Storage ..
}
代码示例
// 存储
localStorage.setItem("lastname", "Gates");
// 取回
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
应用程序缓存
应用程序缓存即可对web应用进行本地缓存，保证用户在离线时也可以使用应用，加载速度更快，且能够减少服务器负载，浏览器只从服务器下载更新或更改过的资源。
代码示例
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
文档内容 ......
</body>
</html>
网友评论