伊莉討論區

標題: 求助HTML 語法2 [打印本頁]

作者: dinofree0618 時間: 2017-6-1 02:51 PM 標題: 求助HTML 語法2

想請教一下
(1)項目符號<ul>執行時會空ㄧ行嗎?
(2)我如果不希望材料和做法與下面的項目間沒有空行，我要怎麼處理
(3)還有用<div>和<section>感覺沒有甚麼差別
(4)在這邊我有加article好像多此一舉?有加跟沒有加我試了一下好像只是標題的字變大而已，那這個的用途在哪裡?

程式如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>實作題 CH3-2</title>
<style>
.note{color:red}
</style>
</head>

<body>
<article>
<hgroup>
<span class="note"><h1><u>苦瓜的健康料理 — 苦瓜鑲肉</u></h1></span>
</hgroup>
<section>
<p>苦瓜又稱為錦荔枝，因為「實大如鴿子，有皺紋，似荔枝」而得名。</p>
<blockquote>
<dt><ul type="disc"><li>材料</li></ul></dt>
<dd>
<ol type="a" start="1">
<li>苦瓜</li>
<li>大白菜</li>
<li>豬肉絞肉</li>
<li>太白粉</li>
<li>鹽</li>
<li>苦瓜</li>
</ol>
</dd>
</blockquote>
<blockquote>
<dt><ul type="disc"><li>作法</li></ul></dt>
<dd>
<ol type="1" start="1">
<li>苦瓜橫切成數塊，然後將內膜和子去除乾淨，使其成中空圈狀。</li>
<li>鹽漬數分鐘去除苦味。</li>
<li>將豬肉鑲進中空圈狀的苦瓜，然後沾少許太白粉水，使其黏固。</li>
<li>用油煎熟，然後加入大白菜及少許水悶煮數分鐘即可。</li>
</ol>
</dd>
</blockquote>
</section>
</article>
</body>
</html>

作者: theloserbm 時間: 2017-6-1 04:52 PM

在網頁大部分的樣式我們都用css來控制, 也就是<style>裡面的部分

各種tag如果你沒有自定義css, 瀏覽器本身會給他一些默認的

你可以打開瀏覽器的開發者模式(F12)去觀察他的默認樣式, 不過每個瀏覽器的樣式可能會不同.

作者: dinofree0618 時間: 2017-6-1 05:18 PM

theloserbm 發表於 2017-6-1 04:52 PM
在網頁大部分的樣式我們都用css來控制, 也就是裡面的部分

各種tag如果你沒有自定義css, 瀏覽器本身會給他 ...

意思是
不是因為我程式用法出問題
而是我缺少其他程式的輔助
造成多空一行的結果?

因為我是自己練習範例
所以應該沒太大問題?

謝謝指導了

作者: theloserbm 時間: 2017-6-2 12:00 PM

dinofree0618 發表於 2017-6-1 05:18 PM
意思是
不是因為我程式用法出問題
而是我缺少其他程式的輔助

也...不算是其他程式吧
HTML+CSS+JS本來就是息息相關的

兩個ul之間和ol/ul之間默認空行我是可以接受的, 畢竟屬於兩個不同的list, 空一行比較正常吧
你需要的效果不是這種默認效果的話, 與其去改HTML, 不如改CSS來達成目標

例如你的標題h1不要bold, 不一定要把h1改成div, 去改h1的CSS也是可以的

h1 {
font-weight: normal;
}

複製代碼

作者: dinofree0618 時間: 2017-6-2 02:25 PM

theloserbm 發表於 2017-6-2 12:00 PM
也...不算是其他程式吧
HTML+CSS+JS本來就是息息相關的

了解
謝謝指導
那等我學完HTML之後
往CSS邁進時會更能體會吧!

作者: cswordli 時間: 2017-6-11 08:41 AM

以下小弟拙見，希望對您有幫助：
1.您目前學習是前台網站最基本架構HTML，也就是讓瀏覽器可以順利顯示出內容(CONTENT)，所以您使用到的各個TAG(例:HTML, HEAD, META, BODY, DIV..等)都會依HTML有定義的方式進一步呈現至瀏覽器中。舉些例子來說，DIV TAG將呈現無線條、無底色的方塊型式以讓文字可顯示、UL+LI TAG則是呈現條列式方塊(含縮排)來呈現…等(詳細的各HTML TAG功能及樣式可參考各書本或請教GOOGLE..)。

2.theloserbm大大所提醒您的「CSS」語法是為了強化HTML語法欠缺的多種類樣式呈現所需要的語法(如:我想把某一段文字的底色用成浮色印、指定某個文字變粗或加上方框/虛線...等)。

綜合上面所述基本精神，您的問題可做以下解答：
(1)項目符號<ul>執行時會空ㄧ行嗎?
ANS : 其實它不是空一行，是基本HTML語法讓它們之間的距離比較大，因為原始的UL就是要呈現條列式重點的原意。
(2)我如果不希望材料和做法與下面的項目間沒有空行，我要怎麼處理
ANS : 此問題需要「theloserbm大大」告訴您的答案 - 請使用CSS語法來修飾或強制變小UL、LI之間的間距，可試著用padding, margin的CSS語法進一步改善頁面顯示。
(3)還有用<div>和<section>感覺沒有甚麼差別
ANS : 瀏覽器的HTML基本語法是把<section>當成一般文章的內文進行顯示。
(4)在這邊我有加article好像多此一舉?有加跟沒有加我試了一下好像只是標題的字變大而已，那這個的用途在哪裡?
ANS : 瀏覽器的HTML基本語法是把<article>當成一般文章的標題進行顯示，所以它預設顯示較大的文字。

以上觀念跟您分享，希望對您有幫助。

作者: 影溪 時間: 2017-6-23 02:02 AM

(1)跟(2)不空一行很簡單
請設定CSS

<style>
dd ul li {float: left; /*靠左就不會斷行了*/
padding-left:10px /* 避免靠左黏太擠左邊設一下填充*/
}

</style>

作者: dinofree0618 時間: 2017-6-23 05:38 PM

影溪發表於 2017-6-23 02:02 AM
(1)跟(2)不空一行很簡單
請設定CSS

了解
我會去慢慢研究CSS
謝謝說明與指導

歡迎光臨伊莉討論區 (http://a17.eyny.com/)