HTML文档 html,html5,css,css3
HTML 各种标签及简单应用：
http://www.w3school.com.cn
1 <p><p>
2 <br/>
3 <hr/>横线
4 <pre><pre> 保留了标签内的空格和换行
5 <code>Computer code</code>
6 <br />
7 <kbd>Keyboard input</kbd>
8 <br />
9 <tt>Teletype text</tt>
10 <br />
11 <samp>Sample text</samp>
12 <br />
13 <var>Computer variable</var>
14 <br />
15 地址<address></address>
16 显示缩略词<abbr title="etcetera">etc.</abbr>
17 <acronym title="World Wide Web">WWW</acronym>
18
19 <del></del>删除
20 <ins></ins>插入
21 <b></b> 加粗
22 <strong></strong >加重语气
23 <i></i>斜体
24 <small></small>小字体
25 <q></q>加引号
26 <blockquote></blockquote>长引用
27 <a href="" targer="_blank"></a> 链接在新的窗口打开
28 <a href="mailto:someone@microsoft.com?subject=hh%20again></a>%20 代替空格号
1 空格
2 <h></h>标题
3 <tr><td></td><td></td></tr>
4 <table cellpadding="10"></table> 内边距
5 <table cellspacing="10"></table> 外边距
6 bgcolor="red" background=""
7 <table frame="box“></table> above below hsides(上和下) vsides (左和右)
8 <ul><li></li></ul>无序列表 左边有黑原点
9 <ol start="50"><li><li></ol>左边有序号从50开始
10 <dl><dt></dt><dd></dd><dd><dd></dl>
11 <form>
12 <input type="text" name="dd"/>
13 <input type="checkbox" name="cc" value="male"/>
14 <input type="checkbox" name="cc" value="female"/>
15 <select name="bb">
16 <option value="volvo">volvo</option>
17 <option value="f">f</option>
18 </select>
19 <textarea rows="10" cols="30">
20 ddddd
21 </textarea >
22 <fieldset>
23 <legend>ddd</legend>
24 </fieldset> 使表单周围有框
25 <input type="reset" value="重置"/>重置
26 </form>
27 <frameset cols="25%,50%,25%">
28 <frame src="dd.html">
29 <frame src="dd.html">
30 <frame src="dd.html">
31 </frameset>实现在一个页面内垂直展示三个页面内容—------网页
32 <frameset rows="25%,50%,25%">
33 <frame src="dd.html">
34 <frame src="dd.html">
35 <frame src="dd.html"> html5不支持了
36 </frameset>实现在一个页面内水平展示三个页面内容
37 <iframe src=""></iframe>内嵌的
38 <noscript></noscript>里面的显示不支持Js的文本
39 <video controls="controls">
40 <source src="movie.ogg" type="video/ogg">
41 <source src="movie.mp4" type="video/mp4">
42 </video>
43
44
45
1 <style type="text/css">
2 #div1, #div2
3 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
4 </style>
5 <script type="text/javascript">
6 function allowDrop(ev)
7 {
8 ev.preventDefault();
9 }
10
11 function drag(ev)
12 {
13 ev.dataTransfer.setData("Text",ev.target.id);
14 }
15
16 function drop(ev)
17 {
18
19 var data=ev.dataTransfer.getData("Text");
20 ev.target.appendChild(document.getElementById(data));
21 }
22 </script>
23 </head>
24 <body>
25
26 <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
27 <img src="/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />
28 </div>
29 <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
30 移动图片到另一个盒子里 ---拖放 （event 是固定的变量）
31
32 <script type=”text/javascript”>
33 Function d(e)
34 {
35 X=e.clientX;
36 Y=e.clientY;
37 Document.getElementById(“cc”).innerHTML=”ddd:(“+x+”,”+y+”)”;
38 }
39 Function c()
40 {
41 Document.getElementById(“cc”).innerHTML=””;
42 }
43 </script>
44 <div id=”dd” onmousemove=”d(event)” onmousemove=”c”></div>
45 <div id=”cc” ></div>
46 显示坐标
47
48 画画
49 <canvas id=”cc”>
50
51 </canvas>
52 <script type=”text/javascript”>
53 Var cl=document.getElementId(“cc”);
54 Var dddd=cl.getContent(“2d”);
55 dddd.moveTo(10,10);
56 dddd.lineTo(150,50);
57 dddd.lineTo(10,50);
58 dddd.stroke();
59
60 </script>
61
62 绘制圆、渐变、把一幅图像放置到画布上
63 内联 SVG
新元素HTML5<input>等标签及事件
1 • email
2 • url
3 • number
4 • range
5 • Date pickers (date, month, week, time, datetime, datetime-local)
6 • search
7 • color
8 <input type="number" name="points" min="0" max="10" step="3" value="6" />
9 <input type="range" name="points" min="1" max="10" />
10 • date - 选取日、月、年
11 • month - 选取月、年
12 • week - 选取周和年
13 • time - 选取时间（小时和分钟）
14 • datetime - 选取时间、日、月、年（UTC 时间）
15 • datetime-local - 选取时间、日、月、年（本地时间）
16 Date: <input type="date" name="user_date" />
17
18
19 <form action="/example/html5/demo_form.asp" method="get">
20 Webpage: <input type="url" list="url_list" name="link" />
21 <datalist id="url_list">
22 <option label="W3School" value="http://www.w3school.com.cn" />
23 <option label="Google" value="http://www.google.com" />
24 <option label="Microsoft" value="http://www.microsoft.com" />
25 </datalist>
26 <input type="submit" />
27 </form>
28
29
30 keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。
31 <keygen name="security" />
32
33 <script type="text/javascript">
34 function resCalc()
35 {
36 numA=document.getElementById("num_a").value;
37 numB=document.getElementById("num_b").value;
38 document.getElementById("result").value=Number(numA)+Number(numB);
39 }
40 </script>
41 </head>
42 <body>
43 <p>使用 output 元素的简易计算器：</p>
44 <form onsubmit="return false">
45 <input id="num_a" /> +
46 <input id="num_b" /> =
47 <output id="result" onforminput="resCalc()"></output>
48 </form>
49 User name: <input type="text" name="user_name" autofocus="autofocus" />
50 自动获得焦点
51 <form action="demo_form.asp" method="get" id="user_form">
52 First name:<input type="text" name="fname" />
53 <input type="submit" />
54 </form>
55 Last name: <input type="text" name="lname" form="user_form" />
56 form 属性规定输入域所属的一个或多个表单。
57
58
59 <form action="demo_form.asp" method="get" id="user_form">
60 E-mail: <input type="email" name="userid" /><br />
61 <input type="submit" value="Submit" />
62 <br />
63 <input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
64 <br />
65 <input type="submit" formnovalidate="true" value="Submit without validation" />
66 <br />
67 </form>
68 创建不同的提交按钮
69
70 height 和 width 属性只适用于 image 类型的 <input> 标签
71
72 <input type="file" name="img" multiple="multiple" />----选择文件
73
74 <form action="demo_form.asp" method="get" novalidate="true">让不验证
75
76 Country code: <input type="text" name="country_code"
77 pattern="[A-z]{3}" title="Three letter country code" /> 插入正则表达式
78 placeholder 提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失：
79
80 required="required" （不能为空）
81
84 <canvas id="myCanvas">your browser does not support the canvas tag </canvas>
85
86 <script type="text/javascript">
87
88 var canvas=document.getElementById('myCanvas');
89 var ctx=canvas.getContext('2d');
90 ctx.fillStyle='#FF0000';
91 ctx.fillRect(0,0,80,100);
92
93 </script>
94
95 标签
96 <embed src="/i/helloworld.swf" /> flash
97 <article></article>标记文章
98 <header><section></section></header>头
99 <nav><a></a></nav>中间放连接
100 <footer><address></address></footer>
101 <audio src="someaudio.wav">
102 您的浏览器不支持 audio 标签。
103 </audio>声音
104 <video></video>视频
105
106 事件
107 <input type=”email url number range color “/>
108 <body onload="load()">
109 onblur
110 onfocus 当元素失去焦点
111 onchange
112 onselect
113 onsubmit 提交表单时
114 onclick
115 onbclick 双击
116
117 http://www.w3school.com.cn/tags/html_ref_canvas.asp 画布
CSS各种属性及应用；
1 body {
2
3 }
4
5 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：
6 body
7 {
8 background-image:url(/i/eg_bg_02.gif);
9 background-repeat:no-repeat;
10 background-attachment:fixed
11 }
12 p {text-indent: -5em; padding-left: 5em;}首行缩进
13 justify 水平对齐 text-align
14 a {text-decoration: none;}格式下划线取消啥的
15
16 a:link {color:#FF0000;} /* 未被访问的链接 */
17 a:visited {color:#00FF00;} /* 已被访问的链接 */
18 a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
19 a:active {color:#0000FF;} /* 正在被点击的链接 */
20
21 • Serif 字体
22 • Sans-serif 字体
23 • Monospace 字体
24 • Cursive 字体
25 • Fantasy 字体
26 border-style:dotted solid double dashed;
27 上边框是点状
28 右边框是实线
29 下边框是双线
30 左边框是虚线
31 body {font-family: sans-serif;}---字体
32
33 white-space 设置为 pre-wrap，那么该元素中的文本会保留空白符序列，但是文本行会正常地换行。如果设置为这个值，源文本中的行分隔符以及生成的行分隔符也会保留。pre-line 与 pre-wrap 相反，会像正常文本中一样合并空白符序列，但保留换行符。
34
35 ul {list-style-type : square}
36 ul li {list-style-image : url(xxx.gif)}
37 li {list-style : url(example.gif) square inside}列表样式
38 img[alt] {border: 5px solid red;} 带有 alt 属性的图像应用样式
39
40 *[lang|="en"] {color: red;}
41 上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素
42
43 ul
44 {
45 list-style-type:none;
46 margin:0;
47 padding:0;
48 }
49 li
50 {
51 display:inline;
52 } ---块
CSS3
1 border-radius:25px;
2 -moz-border-radius:25px; /* 老的 Firefox */
3 加圆角
4
5 box-shadow: 10px 10px 5px #888888; 加阴影 11 div
12 {
13 border:15px solid transparent;
14 width:300px;
15 padding:10px 20px;
16 }
17
18 #round
19 {
20 -moz-border-image:url(/i/border.png) 30 30 round; /* Old Firefox */
21 -webkit-border-image:url(/i/border.png) 30 30 round; /* Safari and Chrome */
22 -o-border-image:url(/i/border.png) 30 30 round; /* Opera */
23 border-image:url(/i/border.png) 30 30 round;
24 }
25
26 #stretch
27 {
28 -moz-border-image:url(/i/border.png) 30 30 stretch; /* Old Firefox */
29 -webkit-border-image:url(/i/border.png) 30 30 stretch; /* Safari and Chrome */
30 -o-border-image:url(/i/border.png) 30 30 stretch; /* Opera */
31 border-image:url(/i/border.png) 30 30 stretch;
32 }
33 </style>
34 </head>
35 <body>
36
37 <div id="round">在这里，图片铺满整个边框。</div>
38 <br>
39 <div id="stretch">在这里，图片被拉伸以填充该区域。</div>
42
43 background-size:63px 100px; 背景图片缩小
44
45 background-position:left;
46 background-origin:border-box;
47 background-origin:content-box; 背景定位
48 background-clip:content-box; 颜色背景定位
49 div.boxx
50 {
51 box-sizing:border-box;
52
53 width:50%;
54 border:1em solid red;
55 float:left;
56 }
59 text-shadow: 5px 5px 5px #FF0000; 文本阴影
60
61 允许对长单词进行拆分，并换行到下一行：
62 p {word-wrap:break-word;}
63
64 font-family:myFirstFont; 定义字体
65 font-weight:bold;
66
67 transform:rotate(9deg); 旋转
68 transform:translate(50px,100px); 移动
69 transform:scale(2,4); 横着放大2倍 竖着放大4倍
70 transform: skew(30deg,20deg); 水平旋转 垂直旋转
71
72 transform-origin:20% 80%; 定位
73
74 transition:width 10s;
75 div:hover
76 {
77 width:1000px;
78 } 渐变效果
79
80
81 .newspaper
82 {
83 -moz-column-count:3; /* Firefox */
84 -webkit-column-count:3; /* Safari and Chrome */
85 column-count:3;
86 } 三列
87 规定列之间 40 像素的间隔：
88 div
89 {
90 -moz-column-gap:40px; /* Firefox */
91 -webkit-column-gap:40px; /* Safari 和 Chrome */
92 column-gap:40px;
93 }
94 规定列之间的宽度、样式和颜色规则：
95 div
96 {
97 -moz-column-rule:3px outset #ff0000; /* Firefox */
98 -webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
99 column-rule:3px outset #ff0000;
100 }
101 column-span:all; 横跨所有列
102
103
104 规定 div 元素可由用户调整大小：
105 div
106 {
107 resize:both;
108 overflow:auto;
109 }
110
111 text-shadow: 5px 5px 5px #FF0000; 水平阴影、垂直阴影、模糊距离，以及阴影的颜色：
112 允许对长单词进行拆分，并换行到下一行：
113 p {word-wrap:break-word;}
学习心得，可供参考；
HTML文档 html,html5,css,css3的更多相关文章
- HTML文档中应用css样式的方法总结
在HTML文档中应用css样式大致有三种方法:1.link标签链接外部样式表:2.使用style元素包含样式表:3.使用style属性,即内联样式 一.link标签链接外部样式表 先看一条较为标准的l ...
- IT兄弟连 HTML5教程 CSS3揭秘 在HTML文档中放置CSS的几种方式
有很多方法将样式表加入到HTML中,每种方法都有自己的优点和缺点.新的HTML元素和属性已被加入,以允许样式表与HTML文档更简易地组合起来.将样式表加入到HTML中的常用方法有内联样式表.嵌入一张样 ...
- JavaScript权威设计--JavaScript脚本化文档Document与CSS(简要学习笔记十五)
1.Document与Element和TEXT是Node的子类. Document:树形的根部节点 Element:HTML元素的节点 TEXT:文本节点 >>HtmlElement与 ...
- 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍
01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline ...
- 文档流&文字&CSS常用命令
文档流 文档流就是文档内元素流动方向 流动方向 内联元素从左往右流,宽度不够,之字形,且元素会被截断 块元素从上往下流动,一排一排 注意事项 内联元素中有英文单词,流动时宽度不够,英文单词会整体迁移, ...
- 使用requests爬取梨视频、bilibili视频、汽车之家，bs4遍历文档树、搜索文档树，css选择器
今日内容概要 使用requests爬取梨视频 requests+bs4爬取汽车之家 bs4遍历文档树 bs4搜索文档树 css选择器 内容详细 1.使用requests爬取梨视频 # 模拟发送http ...
- HTML/HTML5/CSS/CSS3教程速查手册地址以及如何快速直到webkit的用法
http://www.w3school.com.cn/ http://www.runoob.com/ 不过上面这两个都是标准的CSS和CSS3教程,针对一些类似-webkit-内核的样式没有公布. 下 ...
- cross-document message 跨文档通信 HTML5
跨域通信HTML5提供了XDM(cross-document message)安全简单接口: 核心是 postMessage()方法,用来向另一个地址传送信息: var iframeWindow ...
- 通过<meta>标签指定IE的文档模式实现CSS3兼容
今天发现之前做好的一个页面在IE中打开显示的效果不正常,本地和服务器上显示的是两种不同的样式. 经过确认文档内容和CSS都是一样的. 通过IE F12(开发人员工具)发现不正常的样式 浏览器文档模式自 ...
随机推荐
- 【技术累积】【点】【java】【9】Optional
基础概念 java8引入的,java9有加强 Google公司出品 旨在更好的处理NullPointException 创建Optional实例和基础使用 Optional op1 = Optiona ...
- Kafka学习笔记（5）----Kafka的Consumer
1. Pull vs Push Producer主动的通过push将消息发布到Broker上,Consumer通过Pull的的方式从Broker消息消息. 通过Push的方式由于是一有消息就推到Bro ...
- mvvm模式和mvc模式 概述总结对比
1.mvc模式简介: MVC的全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,是一种软件设计典范.例如: angular ...
- Laravel 查询某天数据 whereDate
- 企业级任务调度框架Quartz(3) 一个简单的Quartz 例子
1. 一个简单的Quartz 工程 本示例应用比起众所周知的 System.out.println("Hello world from Quartz") 来还是要有趣些.当 ...
- Django使用中常见的错误
Django Mysql SET SESSION TRANSACTION ISOLATION LEVEL READ COMMITTED Django 执行makemigrations 的时候报错 ...
- 51nod-独木舟问题
n个人,已知每个人体重,独木舟承重固定,每只独木舟最多坐两个人,可以坐一个人或者两个人.显然要求总重量不超过独木舟承重,假设每个人体重也不超过独木舟承重,问最少需要几只独木舟?分析: 一个显然的策略 ...
- android onConfigurationChanged的那点事
Android学习笔记——关于onConfigurationChanged 从事Android开发,免不了会在应用里嵌入一些广告SDK,在嵌入了众多SDK后,发现几乎每个要求在AndroidMan ...
- BA-Johnson楼控简介
- 机房-动环-江森ODS系统
优势: 标准的BACnet系统平台 开放的集成特性 支持Desktop and Server平台 支持多达100个NxE 支持无线应用,可以手机访问 DCIM---数据中心基础架构管理平台介绍 不同于 ...