前端笔记
1993年超文本标记语言元年
浏览器
- chrome
- safari
- fire fox
- IE
兼容性
web标准：结构(html)，表现（css），行为(js)
HTML 超文本标记语言
基础
HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的
<h1>我是h1</h1>
HTML 段落是通过标签 <p> 来定义的，
<p>我是段落</p>
HTML 链接是通过标签 <a> 来定义的.a标签 描点元素
<a href="http://www.w3cschool.cn">这是一个链接</a>
HTML 图像是通过标签 <img> 来定义的。使用img元素来为你的网站添加图片
<img src="w3cschool.png" width="104" height="142">
元素
起始标签和结束标签，元素内容是开始标签和结束标签之间的内容，某些元素是空内容，空元素在开始标签中关闭，大多元素拥有属性。
html跟标签
head 页面头部
title 标题
body 页面
<!DOCTYPE html>
<html>
<head>
<title>tittle</title>
</head>
<body>
<p>这是第一个段落。</p>
</body>
</html>
注释
<!-- 这是一个注释 -->
属性
属性存在于开始标签,属性总是以键值对形式出现，比如：name="value".属性可以在元素中添加附加信息。
<a href="http://www.baidu.com">这是一个网站</a>
属性常用引用属性值
属性和属性值对于大小写不敏感。推荐使用小写（w3c）
文本格式化
标题 h1-h6
<hr> 标签在 HTML 页面中创建水平线。
<!-- 这是一个注释 -->
<p></p> 段落
<br/> 折行
格式化标签
b 定义粗体
em 定义着重文字
i 定义斜体
small 定义小号字
strong 定义加重语气
sub 定义下表字
sup 定义上标字
ins 定义插入字
del 定义删除字
预格式化
<pre></pre>
计算机输出标签
code （计算机代码）
kbd（定义键盘码）、
samp（定义计算机代码样本） 、
var（定义变量）、
pre （预格式化处理）
地址
<address></address>
缩写和首字母缩写
<abbr> 定义缩写
方向文字
<bdo> 定义文字方向
块引用
<q> 定义短的引用语
删除字块效果和插入字效果
<del> <ins>
超链接
<a href="url">显示文本</a>
target属性定义是否打开新页面 target="_blank"
tips: 请始终将正斜杠添加到子文件夹。
mailto
head
base 元素 描述基本链接地址、链接目标
link 引用外部资源
style 元素定义HTML文档样式引用地址 ，也可以直接添加样式
meta 元数据，不显示在页面，但会被解析，用于描述、关键字、作者等
script 客户端脚本文件
title 文档标题
CSS
内部样式用style
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
外联样式用link
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
图像
<img src="" alt="some_text" width=300 height=300/>
alt用来给图像定义预备可替换的文本的
map 创建可供点击区域的图像地图
表格
table
th 表头
tr 表格行
td 表格单元
caption 标题
colgroup 表格列组
col 表格列属性
thead 表格页眉
tbody 表格主体
tfoot 表格页脚//<thead>, <tbody> 和 <tfoot>很少被用到，这是由于浏览器对它们的支持不太好。
列表
ol 有序列表
ul 无序列表
li 列表项
dl 列表
dt 自定义列表项
dd 自定义列表描述
区块和布局
区块元素:块级元素在浏览器显示时，通常会以新行来开始。实例: <h1>, <p>, <ul>, <table>
内联元素：内联元素在显示时通常不会以新行开始。实例: <b>, <td>, <a>, <img>
div 定义文档区域
span 组合文档的行内元素
表单
form 表单
input 输入区域
textarea 文本区域
label 元素标签
fieldset 表单元素
legend fileset元素标题
select 定义下拉列表
optgroup 选项组
option 下拉选项
button 按钮
datalist 预定义输入选项列表
keygen 秘钥生成器字段
output 计算结果
URL
scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 runoob.com
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称
HTML5
HTML5 是 W3C 与 WHATWG 合作的结果
新特性
- canvas元素
- video元素和audio元素
- 本地离线存储支持
- 特殊内容元素，例如article、footer、header、nav、section
- 表单控件，calendar、date、time、email、url、search
标签和标签默认样式相同，不代表标签相同。
HTML5标准兼容4中的不同语法。
兼容性：IE9+, Firefox, Chrome, Safari 和 Opera 支持
HTML5定了8个新的HTML语义，所有这些元素都是 块级 元素，通过css定义这些元素display属性为block
header, section, footer, aside, nav, main, article, figure {
display: block;
}
还可以通过js让浏览器学会新的元素，例子如下：
<script>
document.createElement("myHero")
</script>
<style>
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>
可以通过Google的Html5shiv方案解决。
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></ script>
<![endif]-->
以上代码是一个注释，作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件，并解析它。
<!--[if lt IE 9]>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
html5shiv.js 引用代码必须放在 <head> 元素中，因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。
Canvas(Chrome4.0+,IE9+,Fire fox 2.0+,safari 3.1+ ,opera 9.0+)
canvas 是画布，通过js代码实现绘制图像功能，其是一个二维网格，左上角是原点（0，0），左右长为x,上下长为y。
路径：
moveTo(x,y)定义线条开始坐标
lineTo(x,y)定义线条结束坐标
文本：
font 定义字体
fillText(text,x,y) 绘制实心文本
strokeText（text,x,y）绘制空心文本
渐变：
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
当我们使用渐变对象，必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。
图像：
drawImage(image,x,y)
SVG 可伸缩矢量图形（xml描述2D图形语言）
可搜索、索引、脚本化压缩
文本编辑器创建修改
可伸缩，任何分辨率均可高质量打印
sample：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg>
标记数学 MathML(不重要)
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<msup><mi>a</mi><mn>2</mn></msup>
<mo>+</mo>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>=</mo>
<msup><mi>c</mi><mn>2</mn></msup>
</mrow>
</math>
拖放（Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖动。）
draggable属性设置为true使元素可拖动。
ondragstart 和setData()
网友评论