HTML 是用來描述網頁的一種語言。HTML 是一種在 Web 上使用的通用標記語言。HTML 允許你格式化文本,添加圖片,創建鏈接、輸入表單、框架和表格等等,并可將之存為文本文件,瀏覽器即可讀取和顯示。
新建一個test.html文件,內容如下
<!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <h1>我的第一個標題</h1><p>我的第一個段落。</p> </body></html>
其中:
保存后運行,即可在瀏覽器中打開如下界面
3.1 標題
HTML 標題(Heading)是通過<h1> - <h6> 標簽來定義的.
<!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <h1>這是標題 1</h1><h2>這是標題 2</h2><h3>這是標題 3</h3><h4>這是標題 4</h4><h5>這是標題 5</h5><h6>這是標題 6</h6> </body></html>
3.2 段落
HTML 段落是通過標簽 <p> 來定義的
<!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <p>這是一個段落。</p><p>這是一個段落。</p><p>這是一個段落。</p> </body></html>
3.3 鏈接
HTML 鏈接是通過標簽 <a> 來定義的
<!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <a href="https://blog.csdn.net/zong596568821xp">這是一個鏈接使用了 href 屬性</a> </body></html>
3.4 圖像
HTML 圖像是通過標簽 <img> 來定義的。注意: 圖像的名稱和尺寸是以屬性的形式提供的。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <img src="zongxp.jpg" width="640" height="640" /> </body></html>
3.5 表格
表格由 <table> 標簽來定義。每個表格均有若干行(由 <tr> 標簽定義),每行被分割為若干單元格(由 <td> 標簽定義)。字母 td 指表格數據(table data),即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。表格的表頭使用 <th> 標簽進行定義。如果不定義邊框屬性,表格將不顯示邊框。有時這很有用,但是大多數時候,我們希望顯示邊框。使用邊框屬性來顯示一個帶有邊框的表格:
<table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr></table>
4.1 基本文檔
<!DOCTYPE html><html><head><title>文檔標題</title></head><body>可見文本...</body></html>
4.2 基本標簽
<h1>最大的標題</h1><h2> . . . </h2><h3> . . . </h3><h4> . . . </h4><h5> . . . </h5><h6>最小的標題</h6> <p>這是一個段落。</p><br> (換行)<hr> (水平線)<!-- 這是注釋 -->
4.3 文本格式化
<b>粗體文本</b><code>計算機代碼</code><em>強調文本</em><i>斜體文本</i><kbd>鍵盤輸入</kbd> <pre>預格式化文本</pre><small>更小的文本</small><strong>重要的文本</strong> <abbr> (縮寫)<address> (聯系信息)<bdo> (文字方向)<blockquote> (從另一個源引用的部分)<cite> (工作的名稱)<del> (刪除的文本)<ins> (插入的文本)<sub> (下標文本)<sup> (上標文本)
4.4 鏈接
普通的鏈接:<a href="http://www.example.com/">鏈接文本</a>圖像鏈接: <a href="http://www.example.com/"><img src="URL" alt="替換文本"></a>郵件鏈接: <a href="mailto:webmaster@example.com">發送e-mail</a>書簽:<a id="tips">提示部分</a><a href="#tips">跳到提示部分</a>
4.5 圖片
<img src="URL" alt="替換文本" height="42" width="42">
4.6 樣式/區塊
<style type="text/css">h1 {color:red;}p {color:blue;}</style><div>文檔中的塊級元素</div><span>文檔中的內聯元素</span>
4.7 無序列表
<ul> <li>項目</li> <li>項目</li></ul>
4.8 有序列表
.什么是HTML?
HTML(Hyper Text Mark-up Language )即超文本標記語言,是萬維網的核心語言,標準通用標記語言下的一個應用,由 Tim Berners-lee提出。
HTML文本是由 HTML命令組成的描述性文本,HTML 命令可以說明文字、 圖形、動畫、聲音、表格、鏈接等。
HTML的結構包括頭部 (Head)、主體 (Body) 兩大部分。頭部描述瀏覽器所需的信息,主體包含所要說明的具體內容。
2.HTML的由來
HTML是為“網頁創建和其它可在網頁瀏覽器中看到的信息”設計的一種標記語言。
萬維網上的一個超媒體文檔稱之為一個頁面(page)。作為一個組織或者個人在萬維網上放置開始點的頁面稱為主頁(Homepage)或首頁,主頁中通常包括有指向其他相關頁面或其他節點的指針(超級鏈接)。超級鏈接,就是一種統一資源定位器(Uniform Resource Locator,縮寫:URL)指針,通過激活(點擊)它,可使瀏覽器方便地獲取新的網頁。
這是HTML獲得廣泛應用的最重要的原因之一。在邏輯上將視為一個整體的一系列頁面的有機集合稱為網站(Website或Site)。
3.HTML的功能和作用
設計 HTML 語言的目的是為了能把存放在一臺電腦中的文本或圖形與另一臺電腦中的文本或圖形方便地聯系在一起,形成有機的整體,人們不用考慮具體信息是在當前電腦上還是在網絡的其它電腦上。這樣,你只要使用鼠標在某一文檔中點取一個圖標,Internet就會馬上轉到與此圖標相關的內容上去,而這些信息可能存放在網絡的另一臺電腦中。
4.HTML的特點
4.1 HTML是用來制作網頁的標記語言,不需要編譯,直接由瀏覽器執行。
1)HTML其實是一個文本文件,包含了一些HTML元素、標簽等,它需要瀏覽器的解釋。
2)HTML文件必須使用html或htm為文件名后綴。出現2個后綴的原因是過去的老軟件只支持3個字母的后綴,所以.html的文件只能寫成寫成.htm,這是長久以來形成的習慣。現在不存在軟件不支持的情況,使用哪種后綴看你的喜好。
3)HTML對大小寫不敏感,HTML與html是一樣的。
4.2 HTML文檔制作不是很復雜,且功能強大,支持不同數據格式的文件鑲入。
1)HTML的簡易性,HTML版本升級采用超集方式,從而更加靈活方便。
2)HTML的可擴展性,HTML語言的廣泛應用帶來了加強功能,增加標識符等要求,HTML采取子類元素的方式,為系統擴展帶來保證。
3)HTML的平臺無關性。HTML可以使用在廣泛的平臺上,包括PC機和MAC等機不同類型的機器。
4.3 HTML是網絡的通用語言,一種簡單、通用的全置標記語言,具有通用性。
HTML允許網頁制作人建立文本與圖片相結合的復雜頁面,這些頁面可以被網上任何其他人瀏覽到,無論使用的是什么類型的電腦或瀏覽器。
5.HTML的發展歷史
超文本標記語言(第一版)——在1993年6月作為互聯網工程工作小組(IETF)工作草案發布(并非標準)。
HTML 2.0——1995年11月作為RFC 1866發布,在RFC 2854于2000年6月發布之后被宣布已經過時
HTML 3.2——1997年1月14日,W3C推薦標準
HTML 4.0——1997年12月18日,W3C推薦標準
HTML 4.01(微小改進)——1999年12月24日,W3C推薦標準
HTML 5——2014年10月28日,W3C推薦標準
享興趣,傳播快樂,增長見聞,留下美好!
親愛的您,這里是LearningYard學苑。
Share interest, spread happiness, increase knowledge, and leave behind beauty!
Dear you, this is LearningYard Academy.
今天小編為大家帶來話說前端(十一)----css的文字屬性,歡迎您的訪問。
今天來講一講文字的屬性
Today, Xiaobian brings you the front end (11)-the character attribute of CSS. Welcome to visit.
Let's talk about the attributes of words today.
首先關于顏色:有背景顏色和字體顏色,背景顏色屬性為background-color:,我們可以直接給他blue,也可以寫成rgb的形式,也可以寫成三原色的形式,如:rgb(16,16,16),#cffff。再者就是字體顏色,屬性為color,添加的顏色跟背景顏色的格式一樣。
First of all, about color: there are background color and font color, and the background color attribute is background-color:. We can give it to him directly, or it can blue written in the form of rgb or three primary colors, such as: rgb(16, 16, 16), #cffff. Furthermore, it is the font color, the attribute is color, and the added color has the same format as the background color.
第二就是字體的樣式,在word里頭可以有楷體,草書,黑體,同樣的在網頁上也可以這樣顯示。用的就是font-family:,但是要記住,這個字體你一定是要下載過的,如果沒有下載,那么就會默認顯示和黑體。再者就是font-style:,這個樣式可以把他設置為斜體。
The second is the font style. In word, there can be regular script, cursive script and bold font, and the same can be displayed on the webpage. Use font-family:, but remember, you must have downloaded this font. If you haven't downloaded it, it will be displayed in bold by default. Furthermore, it is font-style:, which can set it in italics.
第三字體的粗細,用font-weight,正常是400,注意沒有單位,400以上就會變大,400一下就會變小,font-size為字體大小,正常寫成14px,,上曾下減。
The thickness of the third font, using font-weight, is normally 400. Note that if there is no unit, it will get bigger if it is above 400, and it will get smaller once it is 400. font-size is the font size, which is normally written as 14px, and it has been decreased from top to bottom.
第四就是line-hight,行高,如果行高等于容器的高度,在上下居中,同樣的和text-align:center連用可以保證中心居中。
The fourth is line-high, line height. If the line height is higher than the height of the container, it is centered on the top and bottom. The same can be used with text-align: center to ensure the center is centered.
第五text-decoration,可以有下劃線:underline,貫穿線line-througn,還有在頂部的線(不常用)
The fifth text-decoration can be underlined: underline, through line-throughput, and the line at the top (not commonly used).
今天的分享就到這里,如果你有什么獨特的想法,歡迎給我們留言,讓我們相約明天,祝你今天過得開心快樂。
翻譯:Google翻譯
本文由LearningYard新學苑原創,部分圖片文字來自網絡,如有侵權請聯系。
That's all for today's sharing. If you have any unique ideas, please leave us a message and let's make an appointment tomorrow. I wish you a happy day.
Translation: Google translation
This article is original by LearningYard New Academy, and some pictures and texts are from the Internet. If there is any infringement, please contact.
文案:李仕陽
排版:李仕陽
審核:閆慶紅
*請認真填寫需求信息,我們會在24小時內與您取得聯系。