整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
壓縮。
我是沒想到還是有人會說，沒有基礎的人才會問html空格的問題，這些細節沒有什么用，而我這里給大家簡單的匯報一下。
首先第一個問題，標簽和標簽之間空格的問題。先看一下這個家伙，這個例子，這兩種寫法有什么區別？直接看這里的例子。第一種寫法包含了一個奇怪的空格，但是第二種寫法是不包含空格的。
這個東西在html里面，它的解析，它的Dome節點中看是看不出來的，而我們看它們的表現完全一致的，要怎么去理解？畢竟寫的代碼不是所有的都會去掛工程畫，這個地方是animate和note的區別，它們的內存結構是不一樣的。
比如第一個節點，它下面包含了5個字節點，有3個是文本節點。再看第二個節點，這個節點下面只有兩個節點，只有兩個span的標簽。去看html的時候，它的表現是字符，標簽是字符的一種結構，但是最終使用的時候是document，它是節點，中間是有轉換的，這是理論。
這里聊的就是text文本節點，而對于文本節點，那里面的東西就非常惡心了，東西就特別多了。比如現在就要這三個字，無壓縮它的寬度，要怎么去計算？找一下無壓縮節點，找的是無壓縮里面文案的節點，它是沒有寬度的，上面可以看到它的寬度是144，這是它渲染出來的，它的寬度是沒有的，這個節點里面是不給提供它的寬高的，這是很惡心的一件事情。
必須得基于容器，基于它外側的容器，來去獲取到它最終的寬度，計算中文的寬度是多少，大家有見過這樣的需求吧。
再說一個，現在要節點信息的位置，比如這里做了個例子，現在要定義文案的偏移量，要怎么去計算？當用第一種方式里面寫的有SPA標簽以后，直接獲取標簽，用行內的標簽來去進行獲取，里面包含了左邊定位的信息，三百八十七。
·但現在要計算第二個節點，它的問題跟剛才的問題是一樣的，如何去獲取到text的節點？它的寬高獲取不到的，沒有偏移量的信息，得進行特殊的計算，這就是其中一個比較大的區別，這個東西就比較操蛋了。
·再來一個跨局跟行內元素的規則，規則包含哪些？標準的規則是所有的子元素，塊菊元素當中所有的子元素要么都是塊菊，要么都是內聯的?？匆幌滤鼈儍蓚€這種寫法上有沒有區別？這兩種寫法是沒有任何區別的，因為它是跨極，它是內聯的，而內聯和跨極是不允許進行交叉使用的。
它的寫法相當于它的外層又包含了一個隱匿的跨句元素，直接看頁面中表現的效果，它倆的表現效果是一致的，雖然標簽不一樣，但是最終展示的結果是一樣的，它倆的表現形式是一樣的。
如果這個邏輯知道，再解釋一下下面這種寫法，這兩種寫法是一樣的，解釋一下為什么？已知div是跨距元素，跨距元素當中里面所有的節點全部都是跨距元素或者是行內元素，而又知道空格會轉換成text的節點，而Tech的節點是行內元素，所以它的外層又會包成一行隱匿的節點，它是div，所以這里包含div，這里又包含div，有3個空格。
塊級：所有的子元素都是塊，中間兩偏差的兩個一，這兩個元素它倆的表現是一樣的，可以看到它最終表現的效果。
這里引出的額外的概念就是塌陷，沒有內容，沒有div它的content是0，它的高度必須得是0，否則這種實現就會跟理解是有差異的，而這種實現又會產生一些額外的其他的問題。
舉一個例子，往from表單里面，往table里面插入元素，恰巧那一行的數據它就是為空，后端返回這個空詞無串，這個時候要不要進行特殊處理？比如圖中這個table，這個table它就是沒有數據，這兩行就是沒有數據，最終展示的時候可能就是第一行它是正常的，它的高度可能是40，第二行第三行它就是癟了，發現了因為沒有內容產生的原因。
要怎么去解決這個問題？phone表格也是一樣的，它也會有類似的問題。當然還會有一些其他的比較惡心的要求，現在是復文本，現在是編輯代碼，而要求內容跟寫的結構一樣，現在要再怎么去處理第三類？使用PRE標簽，刷新一下，空殼這個問題又得到了一個處理。
這里就涉及到了具體的解析結構、規則，而這些問題聊完以后又可以回到上一個問題，HM中有哪些標簽？關于如何分類的？標簽的分類其實按功能分、按和模型去區分，沒問題都沒問題，但至少所有的類型得加上。
比如hider meter，它們是行類的還是塊兒級？包括直播的時候彈幕上已經提到過行內塊級，有些內容是說錯的，講道理當時就是聽個響，因為答案太普通了。可以按照另外的一種結構來去區分，可以基于轉換后的元素進行區分，而它包含很多。
·第一種：空元素，沒有內容的元素，它的核心是什么？現在寫一個image標簽，里面的標簽內容不要那樣寫，非要這樣去寫，里面加一個奇怪的標簽內容，肯定是標加不進去的，是沒有辦法放到image里面的。包括heart，包括這些里面的其他的標簽全部都是這樣的，最終會做一些特殊的操作來去處理里面的span或者里面文案的內容。
·第二個元素，模板元素。它是用來定義下面模板用的，是比較特殊的，里面的內容不會進行額外的解析。比如現在寫了一個奇怪的標簽，里面加了一個script，這個時候刷起甲會怎樣？刷新一下標簽會進行執行。當然是如果用time play就不會進行執行，它是一個元素的，是一個模板類的標簽，刷新一下不會進行執行。
·第三類，原始文本元素。這類元素其實往下看，主要是看這兩個元素包含可轉移和不可轉移，一般是兩個，提示器寫的也行，一般是兩個。這兩個會進行解析，需要其他的解析器來對里面的代碼去進行解析。但是textl里邊放的這些元素是不會進行解析的。
比如現在把tablet改成taxl，大家注意里面的節點會怎么處理？會去執行嗎？不會執行，并且會把里面的內容放到里面的內容，這個東西也是以前代替template的核心原因。去看一些比較老的實現的時候，比如百度中里面會用一些taxl代替template，因為以前沒這個元素。
·第五個，這兩原始文本算兩個，第五個就是外來元素，這里寫的又比較清楚，非HTML規范的一些元素。特殊的一些元素，外來的不是html里面規范的。
最后就是普通元素，打鼓本身就是筆試題的平替，但是它的內容跟筆試是不一樣的，筆試是有標準答案的，是要打分的，60分以后繼續聊，沒有超過60分就可以走了。
但打鼓不是，拋出一個問題，永遠是論述題，大家來相互的溝通，有可能面試官的這個點不會沒關系，完全可以主動地去提。面試官我覺得這個點不重要，我更了解瀏覽器中編語原理的部分，了解瀏覽器中關于渲染引擎的這一部分，可以基于這個問題來探討一下關于節點，關于剛才這些問題到底是有一個什么樣的答案，這是沒有問題的。
反正一句話，我是不認可沒有技術的人才會問hmr空格問題的，更不認可這些細節問題沒有任何用的言論。
. autoescape
控制當前自動轉義的行為，有on和off兩個選項
{% autoescape on %}
{{ body }}
{% endautoescape %}
2. block
定義一個子模板可以覆蓋的塊
3. comment
注釋，{% comment %} 和 {% endcomment %}之間的內容被解釋為注釋
4. crsf_token
一個防止CSRF攻擊（跨站點請求偽造）的標簽
5. cycle
循環給出的字符串或者變量，可以混用
{% for o in some_list %} <tr class="{% cycle 'row1' rowvalue2 'row3' %}">
... </tr>{% endfor %}值得注意的是，這里的變量的值默認不是自動轉義的，要么你相信你的變量，要么你就是用強制轉義的方法，
{% for o in some_list %} <tr class="{% filter force_escape %}{% cycle rowvalue1 rowvalue2 %}{% endfilter %}">
... </tr>{% endfor %}在某些情況下，你可能想循環外部引用循環的下一個值，這時你需要用as給cycle標簽一個名字，這個名字代表的是當前循環的值，但你可以在cycle標簽里面是用這個變量來獲得循環的下一個值
<tr>
<td class="{% cycle 'row1' 'row2' as rowcolors %}">...</td>
<td class="{{ rowcolors }}">...</td></tr><tr>
<td class="{% cycle rowcolors %}">...</td>
<td class="{{ rowcolors }}">...</td></tr>渲染的結果是
<tr> <td class="row1">...</td> <td class="row1">...</td></tr><tr> <td class="row2">...</td> <td class="row2">...</td></tr>
但是cycle標簽一旦定義，默認就會用循環的第一個值，當你僅僅是想定義一個循環，而不想打印循環的值的時候（比如你在父模板定義變量以方便繼承），你可以是用cycle的silent參數（必須保證silent是cycle的最后一個參數，并且silent也具有繼承的特點，盡管第二行的cycle沒有silent參數，但由于rowcoclors是前面定義的且包含silent參數的，第二個cycle也具有silent 循環的特點
{% cycle 'row1' 'row2' as rowcolors silent %}
{% cycle rowcolors %}6. debug
輸出所有的調試信息，包括當前上下文和導入的模塊
7. extends
表示說當前模板繼承了一個父模板
接受一個包含父模板名字的變量或者字符串常量
8. filter
通過可用的過濾器過濾內容，過濾器之間還可以相互（調用）
{% filter force_escape|lower %}
This text will be HTML-escaped, and will appear in all lowercase.
{% endfilter %}9. firstof
返回列表中第一個可用（非False）的變量或者字符串，注意的是firstof中的變量非自動轉義
{% firstof var1 var2 var3 "fallback value" %}10. for
for循環，可以在后面加入reversed參數遍歷逆序的列表
{% for obj in list reversed %你還可以根據列表的數據來寫for語句，例如對于字典類型的數據
{% for key, value in data.items %}
{{ key }}: {{ value }}
{% endfor %}for循環還有一系列有用的變量
| 變量 | 描述 |
|---|---|
| forloop.counter | 當前循環的索引，從1開始 |
| forloop.counter0 | 當前循環的索引，從0開始 |
| forloop.revcounter | 當前循環的索引（從后面算起），從1開始 |
| forloop.revcounter0 | 當前循環的索引（從后面算起），從0開始 |
| forloop.first | 如果這是第一次循環返回真 |
| forloop.last | 如果這是最后一次循環返回真 |
| forloop.parentloop | 如果是嵌套循環，指的是外一層循環 |
11. for...empty
如果for循環的參數-列表為空，將執行empty里面的內容
<ul>{% for athlete in athlete_list %} <li>{{ athlete.name }}</li>{% empty %} <li>Sorry, no athlete in this list!</li>{% endfor %}<ul>12. if
條件語句
{% if athlete_list %}
Number of athletes: {{ athlete_list|length }}
{% elif athlete_in_locker_room_list %}
Athletes should be out of the locker room soon!
{% else %}
No athletes.
{% endif %}布爾操作符
在if標簽里面可以使用and，or和not三個布爾操作符
==,!=,<,>,<=,>=,in,not in等操作符
這些操作符就不一一詳細說了，一目了然
在if標簽里面，這些操作符可以做成復雜的表達式
13. ifchange
檢測一個值在循環的最后有沒有改變
所以這個標簽實在循環里面是用的，有兩個用法：
沒有接受參數時，比較的是ifchange標簽里面的內容相比以前是否有變化，有變化時生效
接受一個或以上各參數的時候，如果有一個或者以上的參數發生變化時，有變化時生效
ifchange可以有else標簽
{% for match in matches %} <div style="background-color:
{% ifchanged match.ballot_id %}
{% cycle "red" "blue" %}
{% else %}
grey
{% endifchanged %}
">{{ match }}</div>{% endfor %}13. ifequal
僅當兩個參數相等的時候輸出塊的內容，可以配合else輸出
{% ifequal user.username "adrian" %}
...
{% endifequal %}14. ifnotequal
跟ifequal類似
15. include
加載一個模板并用當前上下文（include該模板的模板的上下文）渲染它，接受一個變量或者字符串參數
當然你也可以在include的時候傳遞一些參數進來
{% include "name_snippet.html" with person="Jane" greeting="Hello" %}如果你只想接受傳遞的參數，不接受當前模板的上下文時，你可以是用only參數
{% include "name_snippet.html" with greeting="Hi" only %}16. load
加載一個自定義的模板標簽集合，見單獨的一節講解
17. now
顯示當前的時間日期，接受格式化字符串的參數
It is {% now "jS F Y H:i" %}參數有已經定義好的一些參考參數： DATE_FORMAT（月日年）, DATETIME_FORMAT（月日年時）,SHORT_DATE_FORMAT（月/日/年） or SHORT_DATETIME_FORMAT（月/日/年/時）
18. regroup
通過共同的屬性對一個列表的相似對象重新分組，加入你有一個城市（city）的列表如下
cities=[
{'name': 'Mumbai', 'population': '19,000,000', 'country': 'India'},
{'name': 'Calcutta', 'population': '15,000,000', 'country': 'India'},
{'name': 'New York', 'population': '20,000,000', 'country': 'USA'},
{'name': 'Chicago', 'population': '7,000,000', 'country': 'USA'},
{'name': 'Tokyo', 'population': '33,000,000', 'country': 'Japan'},
]你想按照國家country這個屬性來重新分組已得到下面的結果，那么你可以這么做
Mumbai: 19,000,000
Calcutta: 15,000,000
India
New York: 20,000,000
Chicago: 7,000,000
USA
Tokyo: 33,000,000
Japan
{% regroup cities by country as country_list %}<ul>{% for country in country_list %} <li>{{ country.grouper }} <ul>
{% for item in country.list %} <li>{{ item.name }}: {{ item.population }}</li>
{% endfor %} </ul>
</li>{% endfor %}</ul>值得注意的是，regroup并不會重新排序，所以，請確保city在regroup之前已經按country排好序，否則將得不到你預期想要的結果，如果不確定可以用dictsort過濾器排序
{% regroup cities|dictsort:"country" by country as country_list %}19. spaceless
移除html標簽之間的空格，注意是標簽之間的空格，標簽與內容之間的空格不會被刪除
{% spaceless %} <p>
<a href="foo/">Foo</a>
</p>{% endspaceless %}結果是
<p><a href="foo/">Foo</a></p>
20. ssi
在頁面上輸出給定文件的內容
{% ssi /home/html/ljworld.com/includes/right_generic.html %}使用parsed參數可以使得輸入的內容可以作為一個模板從而可以使用當前模板的上下文
{% ssi /home/html/ljworld.com/includes/right_generic.html parsed %}21. url
返回一個絕對路徑的引用（沒有域名的url），接受的第一個參數是一個視圖函數的名字，然后從urls配置文件里面找到那個視圖函數對應的url，
22. widthratio
這個標簽計算給定值與最大值的比率，然后把這個比率與一個常數相乘，返回最終的結果
<img src="bar.gif" height="10" width="{% widthratio this_value max_value 100 %}" />23. with
用更簡單的變量名緩存復雜的變量名
{% with total=business.employees.count %}
{{ total }} employee{{ total|pluralize }}
{% endwith %}盡管初衷是這樣，但你不必都是如此，哈哈
擊右上方紅色按鈕關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！
由于HTML代碼的空格通常會被瀏覽器忽略，所以我們很有必要對瀏覽器處理空格的一些規則有個詳細的認識，這樣我們后面才能詳述它的解決辦法。
效果是這樣的：
由此可此可以知道瀏覽器的默認處理規則一：文字的前后空格都會忽略，內部連續空格只有自作一個。
原樣輸出可能是我們這樣寫代碼的本意，要讓這段代碼原樣輸出的方法有兩個（使用標簽/使用表示空格的實體代碼）：
方法一：<pre><span class="space"> 小鄭 搞碼 </span></pre>
方法二：<span class="space"> 小鄭 搞碼 </span>
關于規則部分還有一點，來看一段代碼：
效果是：
表示，瀏覽器對字符的處理不僅限于空格，還有制表符（\t），換行符（\r和\n）。
同樣讓這段代碼換行可能是我們寫的本意，讓這段代碼換行的方法有兩個：
方法一：套一個pre標簽
方法二：<span class="space">小鄭<br/>搞碼</span>
最后總結一下：
HTML語言的空格處理，基本上就是直接過濾。這樣的處理過于粗糙，完全忽視了原始文本內部的空格可能是有意義的。所以CSS提供了一個屬性white-space屬性來靈活控制空格。下篇詳述。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
