目錄
文法
如何在 HTML 中建立對齊文字?
Examples of HTML Justify Text
Example #3
Conclusion
首頁 web前端 html教學 HTML 對齊文字

HTML 對齊文字

Sep 04, 2024 pm 04:45 PM
html html5 HTML Tutorial HTML Properties HTML tags

我們將在本文中討論 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 src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543951033739.png" class="lazy" align="right" 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中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1677
14
CakePHP 教程
1431
52
Laravel 教程
1334
25
PHP教程
1280
29
C# 教程
1257
24
HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

HTML 表格邊框指南。在這裡,我們以 HTML 中的表格邊框為例,討論定義表格邊框的多種方法。

HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

這是 HTML 中巢狀表的指南。這裡我們討論如何在表中建立表格以及對應的範例。

HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

HTML 左邊距指南。在這裡,我們討論 HTML margin-left 的簡要概述及其範例及其程式碼實作。

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局指南。在這裡,我們詳細討論 HTML 表格佈局的值以及範例和輸出。

HTML 輸入佔位符 HTML 輸入佔位符 Sep 04, 2024 pm 04:54 PM

HTML 輸入佔位符指南。在這裡,我們討論 HTML 輸入佔位符的範例以及程式碼和輸出。

您如何在PHP中解析和處理HTML/XML? 您如何在PHP中解析和處理HTML/XML? Feb 07, 2025 am 11:57 AM

本教程演示瞭如何使用PHP有效地處理XML文檔。 XML(可擴展的標記語言)是一種用於人類可讀性和機器解析的多功能文本標記語言。它通常用於數據存儲

HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

HTML onclick 按鈕指南。這裡我們分別討論它們的介紹、工作原理、範例以及各個事件中的onclick事件。

在 HTML 中移動文字 在 HTML 中移動文字 Sep 04, 2024 pm 04:45 PM

HTML 中的文字移動指南。在這裡我們討論一下marquee標籤如何使用語法和實作範例。

See all articles