本文介紹中文字號、磅（pt）和像素（px）的對照關(guān)系，方便大家設(shè)計網(wǎng)頁時參考合適的字號，一般網(wǎng)頁正文字體為12px到16px，相當(dāng)于9-12磅字號大小，標題文字可以稍大一點，具體參見下文表格字體大小，本文內(nèi)容來源于網(wǎng)絡(luò)匯總，做了點補充，如有錯誤，歡迎指出。
一、基本單位概念
| 單位 | 中文名稱 | 轉(zhuǎn)換 |
| inch | 英寸 | 1英寸=2.54厘米 |
| cm | 厘米 | |
| pt | 磅或點數(shù)，是point簡稱 | 1pt=1/72(英寸) |
| px | 像素，是pix簡稱 | |
二、中文字號大小、磅和像素對照關(guān)系
下表參照顯示器96dbi（每英寸點數(shù)）顯示進行換算結(jié)果。比如：6.5pt = 6.5 * 1/72 * 96 = 8.6px，像素肯定不能出現(xiàn)小數(shù)點的，一般是取小顯示。下表字體已經(jīng)按照各行所代表的字號大小進行顯示。
| 字號 | 磅(pt) | 像素(px) |
| 小六 | 6.5 | 8px |
| 六號 | 7.5 | 10px |
| 小五 | 9 | 12px |
| 五號 | 10.5 | 14px |
| 小四 | 12 | 16px |
| 四號 | 14 | 18px |
| 小三 | 15 | 20px |
| 三號 | 16 | 21px |
| 小二 | 18 | 24px |
| 二號 | 22 | 29px |
| 小一 | 24 | 32px |
| 一號 | 26 | 34px |
| 小初 | 36 | 48px |
| 初號 | 42 | 56px |
]]>
CSRF token missing or incorrect
--
1 在 templete 中, 為每個 POST form 增加一個 {% csrf_token %} tag. 如下:
<form>
{% csrf_token %}
</form>
2 在 view 中, 使用 django.template.RequestContext 而不是 Context.
render_to_response, 默認使用 Context. 需要改成 RequestContext.
導(dǎo)入 class:
from django.template import RequestContext
給 render_to_response 增加一個參數(shù):
def your_view(request):
...
return render_to_response('template.html',
your_data,
context_instance=RequestContext(request)
)
]]>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style>
body {
color: white;
background-color: black;
}
p {
color: yellow;
font-family: "arial", sans-serif;
font-size: 1.2em;
}
.special {
font-style: italic;
}
h2.special {
text-transform: uppercase;
}
#purchases {
border: 1px solid white;
background-color: #333;
color: #ccc;
padding: 1em;
}
#purchases li {
font-weight: bold;
}
</style>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Shopping list</title>
</head>
<body>
<h1>What to buy</h1>
<p title="a gentle reminder">Don't forget to buy this stuff.</p>
<ul id="purchases">
<li>A tin of beans</li>
<li>Cheese</li>
<li>Milk</li>
</ul>
<p class="special">This paragraph has the special class</p>
<h2 class="special">So does this headline</h2>
<script>
var println = function(arg) {
if (arg)
document.write(arg);
document.write("<br />");
}
println("getElementById():");
println("id purchases: " + document.getElementById("purchases"));
println("innerText: " + document.getElementById("purchases").innerText);
println();
println("getElementsByTagName():")
li_items = document.getElementsByTagName("li");
println("tag li: " + li_items);
println("length: " + li_items.length);
for (var i = 0; i < li_items.length; i++) {
println(i + ": " + document.getElementsByTagName("li")[i].innerText);
}
println();
println("with \"*\" :");
println("all tags: " + document.getElementsByTagName("*").length);
println();
println("combine ById and ByTagName - get tags in a id: ")
var shopping = document.getElementById("purchases");
var items = shopping.getElementsByTagName("*");
println("tag \"*\" in id \"purchases\": " + items.length);
println();
println("object.getAttribute(attribute) - get title attribute of the objects which tags are p");
var tags_p = document.getElementsByTagName("p");
for (var i = 0; i < tags_p.length; i++) {
println(tags_p[i].getAttribute("title"));
}
println();
println("object.setAttribute(attribute, value) - set title attribute of the object which id is purchases");
var shopping = document.getElementById("purchases");
shopping.setAttribute("title", "a list of goods");
println(shopping.getAttribute("title"));
</script>
</body>
</html>
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style>
body {
color: white;
background-color: black;
}
p {
color: yellow;
font-family: "arial", sans-serif;
font-size: 1.2em;
}
.special {
font-style: italic;
}
h2.special {
text-transform: uppercase;
}
#purchases {
border: 1px solid white;
background-color: #333;
color: #ccc;
padding: 1em;
}
#purchases li {
font-weight: bold;
}
</style>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Shopping list</title>
</head>
<body>
<h1>What to buy</h1>
<p title="a gentle reminder">Don't forget to buy this stuff.</p>
<ul id="purchases">
<li>A tin of beans</li>
<li>Cheese</li>
<li>Milk</li>
</ul>
<p class="special">This paragraph has the special class</p>
<h2 class="special">So does this headline</h2>
<script>
var println = function(arg) {
if (arg)
document.write(arg);
document.write("<br />");
}
println("getElementById():");
println("id purchases: " + document.getElementById("purchases"));
println("innerText: " + document.getElementById("purchases").innerText);
println();
println("getElementsByTagName():")
li_items = document.getElementsByTagName("li");
println("tag li: " + li_items);
println("length: " + li_items.length);
for (var i = 0; i < li_items.length; i++) {
println(i + ": " + document.getElementsByTagName("li")[i].innerText);
}
println();
println("with \"*\" :");
println("all tags: " + document.getElementsByTagName("*").length);
println();
println("combine ById and ByTagName - get tags in a id: ")
var shopping = document.getElementById("purchases");
var items = shopping.getElementsByTagName("*");
println("tag \"*\" in id \"purchases\": " + items.length);
println();
println("object.getAttribute(attribute) - get title attribute of the objects which tags are p");
var tags_p = document.getElementsByTagName("p");
for (var i = 0; i < tags_p.length; i++) {
println(tags_p[i].getAttribute("title"));
}
println();
println("object.setAttribute(attribute, value) - set title attribute of the object which id is purchases");
var shopping = document.getElementById("purchases");
shopping.setAttribute("title", "a list of goods");
println(shopping.getAttribute("title"));
</script>
</body>
</html>
]]>
HTML xmlns 屬性
xmlns 屬性可以在文檔中定義一個或多個可供選擇的命名空間. 該屬性可以放置在文檔內(nèi)任何元素的開始標簽中. 該屬性的值類似于 URL, 它定義了一個命名空間, 瀏覽器會將此命名空間用于該屬性所在元素內(nèi)的所有內(nèi)容.
例如, 如果需要使用符合 XML 規(guī)范的 XHTML 文檔, 則應(yīng)該在文檔中的 <html> 標簽中至少使用一個 xmlns 屬性, 以指定整個文檔所使用的主要命名空間.
<html xmlns="http://www.w3.org/1999/xhtml">
--
http://www.w3school.com.cn/tags/tag_prop_xmlns.asp
--
TODO XML
~
]]>
HTML <!DOCTYPE> Declaration
--
Definition and Usage
The doctype declaration should be the very first thing in an HTML document, before the <html> tag.
The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.
The doctype declaration refers to a Document Type Defination(DTD). The DTD specifies the rules for the markup language, so that the browsers render the content correctly.
--
Doctype Avalable in the W3C Recommendations
XHTML 1.1
This DTD is equal to XHTML 1.0 Strict, but allows you to add modules (for examp.e to provide ruby support for East-Asian languages).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
--
http://www.w3schools.com/tags/tag_doctype.asp
]]>