HTML 對齊文字

PHPz
發布: 2024-09-04 16:45:04
原創
399 人瀏覽過

我們將在本文中討論 HTML Justify Text。在HTML中,我們有一組不同的標籤來更有吸引力地執行網頁中的前端操作;本質上,HTML 有一個段落標籤

。要在網頁螢幕中的每個部分中編寫任何段落句子,如果我們需要任何符合用戶要求的對齊標籤,我們將對其進行定制,並且如果我們使用 ,我們將利用該文檔是段落文字或任何資料或文字值應與對齊格式對齊,它可能與對齊文字的左側或右側不同,每個文字值將在網頁中佔據相同數量的水平空間。

文法

在 HTML 中,我們有 CSS 樣式來突出顯示網頁,使其更加可自訂、用戶友好、在瀏覽器和用戶視圖中更有吸引力。 HTML Justify 文字值與文字或值正確對齊;預設情況下,對齊文字應位於網頁的左側。讓我們看看網頁中 HTML 對齊的一般語法。

HTML 語法:

<p align="justify/left/right/center">
----some  codes----
</p>
登入後複製

CSS 語法:

div
{
text-align:justify/left/right/center;
text-justify:values;
}
登入後複製

以上程式碼是用來對齊文件中文字值的 HTML 程式碼的基本語法。指定text-justify屬性,屬性值是在justify中設定text-align時文字的對齊方式。 text-justify有一組不同的屬性值,如auto、inter-word、inter-character、無、初始和繼承;每個值都有一組不同的描述邏輯,如果我們使用自動,則瀏覽器本身確定對齊演算法,字間:增加/減少單字之間的間距,字元間:增加/減少字元之間的間距,如果我們使用none,它會自動停用對齊方法,在屬性標籤中初始設定預設值,繼承值它將屬性的父元素繼承到其子元素。

如何在 HTML 中建立對齊文字?

通常,從使用者的角度來看,理由文本意味著一組不同的事物。它認為 HTML 文字應該兩邊對齊​​;文字行左右兩側對齊,這可以解釋雙重確認。它可以對齊文字的所有行,除了通常我們使用一些對齊詞;最終的單字具有相等的寬度和高度,因此實現這一目標的方法通常是根據需要在單字之間留出額外的空格。

這種對齊方法在 HTML 文件中很普遍,當我們需要硬拷貝格式的內容時,我們使用並透過列印獲得高品質網頁的基本屬性也很好。 Html4 開始,我們可以使用文字屬性來對齊對於一大組元素,儘管具有不同的語法和語義。在 HTML 中使用 justify 將允許他們在文件中添加一些 HTML 元素/標籤。

...

、、、 、、 、, 這些是一些用於調整文字和對齊段落的元素。如果我們使用一些來解釋網頁中文件的一些重要部分是以對齊方式對齊文字值的程式碼。如果有時不建議使用嚴格版本的 html

元素和標籤屬性。標籤是我們在網頁的 HTML 文件中使用的第一組組和標題元素。

如果你使用XHTML而不是HTML,XHTML只不過是過渡性的dtd;它不允許「justify」作為諸如

...

之類的標籤中的值,嚴格的dtd 不允許在所有情況下進行HTML 對齊。在嚴格的 dtd 文件中使用 justify 標籤會因疏忽而顯示錯誤,這意味著驗證器將對齊值,就像align=” justify”代碼是一個錯誤一樣。如果我們用它來對齊,則意味著兩邊的邊距都要對齊。

如果我們在HTML程式碼中使用align=” justify”,所有瀏覽器都廣泛支持,但在某些版本如Opera、IE4和其他一些瀏覽器中,Netscape會顯示“unjustified”錯誤(左對齊)之類的錯誤。段落標籤,不套用任何關於對齊的樣式表規則。

We will use some CSS options properties like float,inline-block, font styles, positions of the images, breadth, width, and height of the images; similarly, navigation options will do some alignments for the menus in the document; the above all options will use the HTML with CSS options same like justifying options in the document. Suppose we use IE Explorer for running an HTML web page. In that case, it has some nonstandard CSS properties that may affect some methods of justification, like example, “just-textify,” if we use IE version earlier, like 5.5 or later, it also recognizes the properties like text-align-last, it will show the horizontal alignment of the web page.

Examples of HTML Justify Text

We will see some examples of understanding the basics in the HTML justify part.

Example #1

Code:




<p align="justify">Welcome To My Domain.</p>
<p><b>Welcome</b>Users</p>

登入後複製

Output:

HTML 對齊文字

Example #2

Code:


<style>
div {
color: green;
border: 3px blue;
}
h1  {
color: initial;
}
</style>


<div>
<p align="justify">Welcome To My Domain.</p>
<p><b>Welcome</b>Users</p>
</div>

登入後複製

Output:

HTML 對齊文字

Example #3

Code:


<style>
div {
color: green;
border: 3px blue;
}
h1  {
color: initial;
}
</style>


<div>
<img align="right" src="HTML%20%E5%B0%8D%E9%BD%8A%E6%96%87%E5%AD%97.jpg" alt="HTML 對齊文字"   style="max-width:90%">
<p>Welcome To My Domain.</p>
<p><b>Welcome</b>Users</p>
</div>

登入後複製

Output:

HTML 對齊文字

The above three examples will show the justify options in HTML in different ways. The first example will point out the basic notification for using justify option in the document; the second example will use the CSS style for the document will be more attractive from the user’s perspective. The final example will use the jpg image on the right side of the web page; if we declare justify, it will show the image in the default view.

Conclusion

Applying the options in a document, like a web page, will show good quality based on the user requirement, including justification, page breaks, etc. Justification might take some small pieces of text or values presented creatively or primarily for the web page. We should check several validations and conditions to apply and display browser compatibility mode.

以上是HTML 對齊文字的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php
上一篇:HTML 格式的註冊表 下一篇:HTML 中的日期
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
相關專題
更多>
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!