HTML
- 在HTML5中 其新特性有canvas元素、video、audio、等元素
- HTML5 支持内联的SVG
- SVGA是指可伸缩矢量图形，用语定义网络基于适量的图形
- SVG使用XML 描述2D图形，是万维联盟的标准
- SVG优势在于
- SVG图像可以文本编辑，可被搜索创建，脚本化
- 可在质量不变的情况下被放大等。
- 而且SVG中每个绘制图像都是对象，属性变化浏览器可以自动重现图形，但是区别于canvas，是逐像素进行渲染。当canvas绘制完成后，如果其位置发生变化，场景需要重新绘制。
-
HTML结构认识
- 描述网页的一种语言，是超文本标记语言
- 规范 ： 小写标签和属性、属性值双引号、代码嵌套缩进。
-
<html> # 文档声明
<head>
<title> </title> # 文档标题
<meta charset="utf-8"> # 文档解码格式
<meta name="keywords" content="..">和 <meta name="description" content="..."> 提供给搜索引擎使用
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 移动端浏览器的宽高与缩放
<link> </link> # 标签可以引入 favicon 和样式表 CSS 文件
</head> # 文档头部
<nav></nav> # 导航
<section>
<header></header> # 头部
<footer></footer> # 尾部
</section> # 独立的块
<body></body> # 文档主体
</html>
```
-
HTML语法和标签
# 1.0 全局属性
id, <div id='unique-element'></div>，页面中唯一
class，<button class='btn'>Click Me</button>，页面中可重复出现
style，尽量避免出现
1.0 默认超链接
<a href="http://baidu.com"> </a>
2.0 当前窗口显示(target=“_self”)
<a href="http://baidu.com" target=“_self”> </a>
3.0 新窗口显示（target=“_blank”）
<a href="http://baidu.com" target=“_blank”> </a>
4.0 页面中的锚点（#achor）
<a href="achor"> </a>
<section id="achor"></section>
5.0 邮箱及电话需系统支持
<a href="mailto:sample-address@me.com" title="Email">Contact Us</a>
6.0 多个邮箱地址
<a href="mailto:sample-address@me.com, sample-address0@me.com" title="Email">Contact Us</a>
7.0 添加抄送，主题和内容
<a href="mailto:sample-address@me.com?cc=admin@me.com&subject=Help&body=sample-body-text" title="Email">Contact Us</a>
8.0 电话示例
<a href="tel:99999999" title="Phone">Ring Us</a>
<div> # 布局 此元素是用于分组HTML元素的块级元素，创建多列布局
<h1 ~ h6> # 标题
<p>
<br></br> # 换行
</p> # 段落
<hr></hr> # 创建水平线用于分割内容
<ol></ol> # 有序列表
<ul></ul> # 无序列表
<dl>
<dt> # dl对应多个dt
<dd></dd> # 一个dt 对应对个dd
</dt>
</dl> # 自定义列表
<pre></pre> # 定义预格式文本
<blockquote></blockquote> # 引用大块文字,拥有cite属性，包含引用文本的出处
<img src="" alt=""> # src是img的图像的URL地址， alt属性为图像提供一串可替换的预备文本
</div>
# 表格
<table> # 定义表格
<caption></caption> # 定义表格标题
<th colspan="2" rowspan="2">Header 1</th> # 定义表格表头， 加Header会显示边框， rowspan="2" 跨行属性，colspan="2"跨列属性
<tr>
<td>Row 1， cell 1</td> # 定义列，形成单元格.row 和cell表示边框的显示属性
</tr> # 定义行
</table>
# 表单：表单元素允许用户在表单中输入内容，比如文本域，下拉列表，单选框，复选框。
<form action=“”>
<---! input 拥有较多的输入类型--->
<input type="text"> # text 表示文本
<input type="password"> # password 密码域
<input type="radio"> # radio 定义了单选框选项
<input type="checkbox"> # CheckBox 定义了复选框
<input type="submit"> # submit 定义了提交按钮
<select name=""> # 选择名称
<option value="下拉选项名"></option>
<option value="" selected></option> # selected 默认的预选选项
</select>
</form>
# 框架
<iframe></iframe> # 页面操作不影响到非让么的内容
# h5的新元素
<canvas id="myCanvas" width="200" height="100"></canvas> # 该标签只是图像容器，必须用js完成图形的绘制 canvas拥有多种图形创建的属性，比如创建文本（filltext）等
<script>
var c=document.getElementById("myCanvas"); # 找到canvas元素
var ctx=c.getContext("2d"); # 创建context的二维对象
ctx.fillStyle="#FF0000"; # 设置颜色
ctx.fillRect(0,0,150,75); # 定义坐标以及width 和height
</script> # 是HTML脚本标签
# 媒体标签
# 1.0 video
<video>
<source src=""> # <video>支持多个<source>元素，可以连接不同格式的视频文件,支持常见的MP4
</video> # 该标签提供了播放暂停和音量控件来控制视频，也有尺寸属性。但同样使用DOM进行控制
# 2.0 audio（音频）
<audio controls> # controls属性提供添加播放暂停的音量控件
<source src=""> # 支持常见的MP3格式
</audio>
# 3.0 嵌入元素
<object></object>
- 客户端存储数据的两个对象为：
- localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除
- sessionStorage -用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
573
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
