html標準中的標簽庫,HTML網頁的標準文檔流默認布局是?
塊元素(block element) ◎ address - 地址 ◎ blockquote - 塊引用 ◎ div - 常用塊級容易,也是css layout的主要標簽 ◎ dl - 定義列表 ◎ fieldset - form控制組 ◎ form - 交互表單 ◎ h1 - h6 大標題 ◎ hr - 水平分隔線 ◎ menu - 菜單列表 ◎ noscript - 可選腳本內容(對于不支持script的瀏覽器顯示此內容) ◎ ol - 排序表單 ◎ p - 段落 ◎ pre - 格式化文本 ◎ table - 表格 ◎ ul - 非排序列表(無序列表) 塊狀元素前后元素會換行 行內元素前后元素不會換行 文檔流 將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素,即為文檔流. 每個非浮動塊級元素都獨占一行, 浮動元素則按規定浮在行的一端. 若當前行容不下, 則另起新行再浮動. 內聯元素也不會獨占一行. 幾乎所有元素(包括塊級,內聯和列表元素)均可生成子行, 用于擺放子元素. 有三種情況將使得元素脫離文檔流而存在,分別是浮動,絕對定位, 固定定位. 但是在IE中浮動元素也存在于文檔流中(還讓我覺得這樣很合理><). 浮動元素不占任何正常文檔流空間,而浮動元素的定位還是基于正常的文檔流,然后從文檔流中抽出并盡可能遠的移動至左側或者右側。文字內容會圍繞在浮動元素周圍。
當一個元素從正常文檔流中抽出后,仍然在文檔流中的其他元素將忽略該元素并填補他原先的空間 基于文檔流, 我們可以很容易理解以下的定位模式: 相對定位, 即相對于元素在文檔流中位置進行偏移. 但保留原占位. 絕對定位, 即完全脫離文檔流, 相對于position屬性非static值的最近父級元素進行偏移 固定定位, 即完全脫離文檔流, 相對于視區進行偏移
Html中行內元素有哪些?
行內元素列表:
<a>標簽可定義錨
<abbr>表示一個縮寫形式
<acronym>定義只取首字母縮寫
<b>字體加粗
<bdo>可覆蓋默認的文本方向
<big>大號字體加粗
<br>換行
<cite>引用進行定義
<code>定義計算機代碼文本
<dfn>定義一個定義項目
<em>定義為強調的內容
<i>斜體文本效果
<img>向網頁中嵌入一幅圖像<input>輸入框
<kbd>定義鍵盤文本
<label>標簽為
<input> 元素定義標注(標記)
<q>定義短的引用
<samp>定義樣本文本
<select>創建單選或多選菜單<small>呈現小號字體效果
<span>組合文檔中的行內元素
<strong>語氣更強的強調的內容
<sub>定義下標文本
<sup>定義上標文本
<textarea>多行的文本輸入控件
<tt>打字機或者等寬的文本效果
<var>定義變量
塊級元素列表:
<address>定義地址
<caption>定義表格標題
<dd>定義列表中定義條目
<div>定義文檔中的分區或節
<dl>定義列表
<dt>定義列表中的項目
<fieldset>定義一個框架集
<form>創建 Html 表單
<h1>定義最大的標題
<h2>定義副標題
<h3>定義標題
<h4>定義標題
<h5>定義標題
<h6>定義最小的標題
<hr>創建一條水平線
<legend>元素為
<fieldset>元素定義標題
<li>標簽定義列表項目
<noframes>為那些不支持框架的瀏覽器顯示文本,于 frameset 元素內部
<noscript>定義在腳本未被執行時的替代內容
<ol>定義有序列表
<ul>定義無序列表
<p>標簽定義段落
<pre>定義預格式化的文本
<table>標簽定義 HTML 表格
<tbody>標簽表格主體(正文)
<td>表格中的標準單元格
<tfoot>定義表格的頁腳(腳注或表注)
<th>定義表頭單元格
<thead>標簽定義表格的表頭
<tr>定義表格中的行
擴展資料:
一,從概念的角度解釋塊級元素和行內元素
1. 塊級元素,一般都是從新行開始,它可以容納行內元素和其他塊元素,常見塊級元素比如div/p等。“form”這個快元素比較特殊,他只能來容納其他塊元素
2. 行內元素:也叫做內聯元素,一般都是語義級別的基本元素,內聯元素已辦只能容納文本或者其他內聯元素。
塊元素(block element)和內聯元素(inline element)都是html規范中的概念。塊元素和內聯元素的基本差異是塊元素一般都是從新行開始的。
而當加了css控制以后,塊元素可以變為內聯元素,內聯元素也可以變為塊元素。
二,塊級元素和內聯元素的區別
1. 塊級元素會獨占一行,其寬度自動填滿其父元素寬度
行內元素不會獨占一行,相鄰的行內元素會排列到同一行里,直到一行排不下,才會換行,其寬度隨元素的內容變化而變化,
2. 一般情況下,塊級元素可以設置width,height屬性,行內元素設置width,height無效
(注意,塊級元素設置了width寬度屬性后仍然是獨占一行的)
3. 塊級元素可以設置margin,padding屬性
行內元素的水平方向的padding-left和padding-right都會產生邊距效果,但是豎直方向上的padding-top和padding-bottom都不會產生邊距效果
template跟html的區別?
Vue template和html5的template用法比較1.html5中的template標簽
html中的template標簽中的內容在頁面中不會顯示。但是在后臺查看頁面DOM結構存在template標簽。這是因為template標簽天生不可見,它設置了display:none;屬性。
2.template標簽操作的屬性和方法
content屬性:在js中template標簽對應的dom對象存在content屬性,對應的屬性值是一個dom節點,節點的nodeName是#document-fragment。通過該屬性可以獲取template標簽中的內容,template對象.content可以調用getElementById、querySelector、querySelectorAll方法來獲取里面的子節點。
innerHTML:可以獲取template標簽中的html
3.vue中的template
(1)template標簽在vue實例綁定的元素內部
它是可以顯示template標簽中的內容,但是查看后臺的dom結構不存在template標簽。如果template標簽不放在vue實例綁定的元素內部默認里面的內容不能顯示在頁面上,但是查看后臺dom結構存在template標簽。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>template</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<template id="tem">
<div id="mdiv">
<h1 id="title">hello world! tem</h1>
</div>
</template>
<div id="app">
<template>
<div>
<h1 id="title">hello world! app</h1>
</div>
</template>
</div>
<script type="text/javascript">
var tem =document.getElementById("tem");//獲取template標簽
console.log(tem);
console.log(tem.innerHTML); //
var title = tem.content.getElementById("title"); //在template標簽內部內容,必須要用.content屬性才可以訪問到
console.log(title);`在這里插入代碼片`
</script>
<script>
new Vue({
el : '#app',
})
</script>
</body>
</html>
(2)vue實例中的template屬性
將實例中template屬性值進行編譯,并將編譯后的dom替換掉vue實例綁定的元素,如果該vue實例綁定的元素中存在內容,這些內容會直接被覆蓋。
特點:
1)如果vue實例中有template屬性,會將該屬性值進行編譯,將編譯后的虛擬dom直接替換掉vue實例綁定的元素(即el綁定的那個元素);
2)template屬性中的dom結構只能有一個根元素,如果有多個根元素需要使用v-if、v-else、v-else-if設置成只顯示其中一個根元素;
3)在該屬性對應的屬性值中可以使用vue實例data、methods中定義的數據。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>template</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<template id = "first">
<div v-if = "flag">第一個{{msg}}</div>
<div v-else>第二個</div>
</template>
<div id = "app"></div>
<abc id="second">
<div v-if="flag">{{msg}}</div>
<div v-else>111</div>
</abc>
</script>
<script>
new Vue({
el:"#app",
data:{
msg:"hello",
flag:true
},
template:"#first"//通過該屬性可以將自定義的template屬性中的內容全部替換app的內容,并且會覆蓋里面原有的內容,并且在查看dom結構時沒有template標簽
});
</script>
</body>
</html>
如果將上面的template:"#first"改為template:"#second",則標簽中的內容也會顯示在頁面上。所以此處利用template標簽來定義vue實例中需要設置的template屬性。(?)