Idle Works, Idle Thoughts

HTML 学习笔记

为了利用多核CPU,HTML5提出Web Worker标准,运行JavaScript创建多个线程,但子线程不能操作DOM。

HTML5 File API由这几个对象组成:File, FileReader, FileList, Blob。File对象是基于Blob的。

HTML元素

常见的HTML特殊符号:

符号 数值 名字 说明
$ $   美元
£ £   英镑
¥ ¥ ¥ 人民币
§ § § 章节符号(Section Sign)
© © © 版权符号(Copyright Sign)
° ° ° 温度符号(Degree Sign)
¶ ¶ 段落符号(Pilcrow/Paragraph Sign)
» » » 向右双角引号(Right double Angle Quotes)
ƒ ƒ   函数符号
–   短破折号(en dash)
—   长破折号(em dash)
“   左双引号
†   剑标(Dagger)
•   着重号、项目符号(Bullet)
…   省略号(Ellipsis)
€ € 欧元
← ← 左箭头
↑ ↑ 上箭头
→ → 右箭头
↓ ↓ 下箭头

HTML Table

colspan表示跨越多列,rowspan表示跨越多行。示例如下:

<table>
    <tr>
        <td colspan="2">colspan</td>
    </tr>
    <tr>
        <td rowspan="2">rowspan</td>
        <td>abc</td>
    </tr>
    <tr>
        <td>xyz</td>
    </tr>
</table>

效果如:

colspan
rowspan abc
xyz

HTML技巧

在iPhone输入时,显示大数字键盘。可以以下方法:

<input type="tel" />
<input type="text" pattern="\d*" />
<input type="number" pattern="[0-9]*" inputmode="numeric" />

URL以//打头,合法!

淘宝的图片链接写作:

<img src="//gd3.alicdn.com/bao/uploaded/file.jpg">

网站的JavaScript标签写作:

<script scr="//cdn.example.com/main.js"></script>

不带scheme(如http/https)的URL是合法的。如果你用http访问,就会被浏览器解析为:

http://gd3.alicdn.com/bao/uploaded/file.jpg
http://cnd.example.com/main.js

如果用https访问,就会被浏览器解析为:

https://gd3.alicdn.com/bao/uploaded/file.jpg
https://cnd.example.com/main.js

Textarea打印问题

编辑textarea后,打印时会自动扩展,让页面走型。

解决方案:无法用纯CSS解决,只能配合JavaScript。

JavaScript,把textarea的内容复制一份,放在一个新的<p class=“print-content”>中。用CSS控制,在屏幕上时,隐藏.print-content元素;在打印时,隐藏textarea元素,显示print-content元素。

JavaScript代码:

$('textarea').change(function() {
    var text = $(this).val();
    $(this).after('<p class="print-content">' + text + '</p>');
});

CSS代码:

.print-content {
    display: none !important;
}

@media print {
    .print-content {
        display: block !important;
    }
    textarea {display: none !important;}
}