8.3前端之Html區塊和佈局
阿新 • • 發佈:2021-08-05
塊級元素
特點:
-
大多數 HTML 元素被定義為塊級元素或內聯元素。
-
塊級元素在瀏覽器顯示時,通常會以新行來開始(和結束)。
<h1>, <p>, <ul>, <table>...
內聯元素
特點:
-
內聯元素在顯示時通常不會以新行開始
<b>, <td>, <a>, <img>...
Html之<div>
元素
特點:
-
塊級元素,它可用於組合其他 HTML 元素的容器。
-
沒有特定的含義。屬於塊級元素,瀏覽器會在其前後顯示折行。
-
與 CSS 一同使用,
<div>
-
文件佈局。使用表格定義佈局的老式方法。使用
<table>
元素進行文件佈局不是表格的正確用法。<table>
元素的作用是顯示錶格化的資料。 -
<div>
標籤定義Html文件種的一個分隔區塊或者一個區域部分 -
常用於組合塊級元素,以便通過CSS來對這些元素進行格式化
-
不支援 align 屬性。
<div style="color: brown;">
<h4>這是該區域的標題</h4>
<p>這是該區域的內容</p>
</div>
Html之<span>
標籤
特點:
-
是內聯元素,可用作文字的容器
-
沒有特定的含義
-
與 CSS 一同使用時,<span> 元素可用於為部分文字設定樣式屬性。
-
提供了一種將文字的一部分或者文件的一部分獨立出來的方式。用於對文件中的行內元素進行組合。
-
可以使用 CSS 對它定義樣式,或者使用 JavaScript 對它進行操作。
<p>
我有一條
<span style="color: blue; font-weight: bold;">藍色</span>
的狗,和一條
<span style="color: darkolivegreen; font-weight: bold;">碧綠色</span>
的貓
</p>
佈局
大多數網站會把內容安排到多個列中(就像雜誌或報紙那樣)。
大多數網站可以使用 <div>
或者 <table>
元素來建立多列。CSS 用於對元素進行定位,或者為頁面建立背景以及色彩豐富的外觀。
使用五個 div 元素來建立多列布局例項:
<div id="container" style="width: 500px;">
<div id="header" style="">
<h1 style="margin-bottom: 0; text-align: center;" contenteditable="true" contenteditable="true">請輸入頁面標題</h1>
</div>
<div id="menu" style=" height: 200px; width: 100px; float: left;">
<b>選單</b><br />
<p contenteditable="true">Html</p>
<p contenteditable="true">Css</p>
<p contenteditable="true">JavaScript</p>
</div>
<div id="content" style=" height: 200px; width: 400px; float: left;">
<p>請輸入內容:<input accept="application/msword" /></p>
</div>
<div id="footer" style=" clear: both; text-align: center;">版權@Lucifer.com</div>
</div>
使用table元素進行網頁佈局例項:
<table width="500">
<thead contenteditable="true" align="center">
<tr>
<td colspan="2" style="">
<h1>請輸入頁面標題</h1>
</td>
</tr>
</thead>
<tbody align="left">
<tr>
<td style=" width: 100px; vertical-align: top;">
<b>選單</b><br />
<p contenteditable="true">Html</p><br />
<p contenteditable="true">Css</p><br />
<p contenteditable="true">JavaScript</p>
</td>
<td style=" height: 200px; width: 400px; vertical-align: top;">
<p>內容部分:<input accept="application/msword" /></p>
</td>
</tr>
</tbody>
<tfoot align="center">
<tr