个人笔记
HTML备忘
你好！
超链接
<a href="http://www.baidu.com/" target="_blank">全球首例眼角膜</a>
<img src="xxx.jpg" alt="图片">
标签
<i>斜体 </i>
<p>独立一段 </p>
<b>粗体 </b>
<del>删除线</del>
<sup>二次方</sup>
<u>下划线 </u> //取消下划线text-decoration：none；
空格
& &
< <
> >
" "
' '
© ©
外链css、js
<link rel="stylesheet" href="../css/color.css"/>
<script src="../JavaScript/kawasaki.js"></script>
还不会：绝对路径、相对路径
<img src="http://www.baidu.com/html5/logo.png">
<img src="../JavaScript/kawasaki.png">
子绝父相
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>子绝父相的小演示</title>
<style type="text/css">
.father {
position: relative;
width: 300px;
height: 300px;
background-color: blue;
}
.child {
position: absolute;
top:100px;
left: 100px;
width: 100px;
height: 100px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="father">
father
<div class="child">
child
</div>
</div>
</body>
</html>
对齐
两端对齐：text-align:center;
内部元素居中：margin：0 auto；
选择器（整合到jQuery选择器了）
<div style=" "></div> //行内样式（尽量内联元素也叫行内元素<p>什么的）
#top-banner{} //ID选择器，在外链css中写
.fl{float:left;} //类选择器
div{ } //标签选择器
*{ } //通用选择器 权重最低
- css3选择器
<div style=" "></div> //行内样式
#top-banner{} //ID选择器，在外链css中写
.fl{float:left;} //类选择器
div{ } //标签选择器
*{ } //通用选择器
- flex布局
display:flex;
flex-direction:row;/column; 设置主轴为x，y；
justify-content:flex-start; 主轴子元素左对齐
justify-content:flex-end; 主轴子元素右对齐
justify-content:center; 主轴子元素居中对齐
justify-content:space-around; 所有子元素加margin；
justify-content:space-betweenl 除左右两侧所有子元素加margin；
flex:flex-grow,flex-shrink,flex-basis;
flex-grow:设置检索弹性盒子的比率
flex-shrink:收缩因子
全局通用样式
img｛
display:block;
width:100%;
height:auto;
｝
align-content: 子元素排列方式（多行）
align-items: 子元素排列方式（单行）
flex-flow:flex-direction+flex-wrap;
flex-wrap:no-warp;/warp; 盒子换行，不换
align-items:center;
align-items:flex-start;
align-items:stretch;
子项侧轴排列
span:nth-child(2){
align-self:flex-end;
}
子项排序 order
div span:nth-child(2){
order:-1;
}
边框、字体样式
- 边框
border：1px solid #fff； //颜色可省 - 字体样式
font：italic(斜体） bold 20px arial ;
函数调用
<input type="button" value="点击" onclick="sum( )">
<script>
function sum(){
var num=5+5;
alart(num);
}
sum() //再写一遍调用函数
</script>
prompt对话框
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var person=prompt("请输入你的名字","Harry Potter");
if (person!=null && person!=""){
x="你好 " + person + "! 今天感觉如何?";
document.getElementById("demo").innerHTML=x;
}
}
</script>
生成一个适合你的列表
- 项目
- 项目
- 项目
- 项目
- 项目1
- 项目2
- 项目3
- 计划任务
- 完成任务
创建一个表格
一个简单的表格是这么创建的：
| 项目 | Value |
|---|---|
| 电脑 | $1600 |
| 手机 | $12 |
| 导管 | $1 |
设定内容居中、居左、居右
使用:---------:居中
使用:----------居左
使用----------:居右
| 第一列 | 第二列 | 第三列 |
|---|---|---|
| 第一列文本居中 | 第二列文本居右 | 第三列文本居左 |
SmartyPants
SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：
| TYPE | ASCII | HTML |
|---|---|---|
| Single backticks | 'Isn't this fun?' | ‘Isn’t this fun?’ |
| Quotes | "Isn't this fun?" | “Isn’t this fun?” |
| Dashes | -- is en-dash, --- is em-dash | – is en-dash, — is em-dash |
创建一个自定义列表
-
Markdown
- Text-to-HTML conversion tool Authors
- John
- Luke
新的甘特图功能，丰富你的文章
- 关于 甘特图 语法，参考 [这儿][2],
UML 图表
可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：
这将产生一个流程图。:
- 关于 Mermaid 语法，参考 [这儿][3],
FLowchart流程图
我们依旧会支持flowchart的流程图：
- 关于 Flowchart流程图 语法，参考 [这儿][4].
标记文本
删除文本
引用文本
H2O is是液体。
210 运算结果是 1024.
739
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
