前端笔记

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()

前端笔记HTML