Html和Css學習筆記-html基礎知識

此篇博客是個人複習筆記，html和css學的時間過久了，忘得差很少了，最近要使用一下，因此從新打開html的書略讀，後記錄了標籤，元素，屬性的具體意義。css

這裏所介紹的html和css的版本爲html5與css3html

Html是超文本標記語言（英語全稱：HyperText Markup Language，簡稱：HTML）是一種用於建立網頁的標準標記語言html5

Css是層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來html和xml等文件樣式的計算機語言，CSS不只能夠靜態地修飾網頁，還能夠配合各類腳本語言動態地對網頁各元素進行格式化。css3

Html和Css驗證工具的地址：http://validator.w3.org/瀏覽器

一.基礎內容：

標記=開始標記+內容+結束標記框架

標記能夠嵌套使用，例如：頁面主體標記中含有標題標記，段落標記。工具

有些標記有屬性，具體格式，以a標記爲例，<a make="xxxx">xxxx</a>其中make爲標記的屬性。字體

設計爲沒有任何內容的元素稱爲void元素，須要使用void元素時，只須要使用一個開始標記，這是一種方便的簡寫，能夠減小html中的標記數量編碼

二.經常使用標記的使用與意義：

<!doctype html>html5的文檔類型定義，這一行要寫到html文件開頭url

<html></html>標記html頁面的開始和結束

<head></head>標記頁面的有關信息

<title></title>爲頁面指定一個標題，標記中的內容出如今瀏覽器的頂部

<body></body>標記頁面的主體內容

中間xxx的內容爲註釋的內容

編寫html時要把首部和頁面主體分開

<h1></h1>爲主標題，從<h2>到<h6>依次爲副標題，字體由大到小

<p></p>開始一個段落

<blockquote> </blockquote> 標籤訂義塊引用，之間的全部文本都會從常規文本中分離出來，常常會在左、右兩邊進行縮進（增長外邊距），並且有時會使用斜體。也就是說，塊引用擁有它們本身的空間

<br>插入一個換行符

<q> 標籤訂義一個短的引用，瀏覽器常常會在這種引用的周圍插入引號

須要瞭解的內容（一些老版本棄置的元素與不建議使用的元素，作到看見了要明白其含義）

<ol></ol>定義一個有序列表

<ul> 標籤訂義無序列表

<li> 標籤訂義列表項目，<li> 標籤可用在有序列表 (<ol>) 和無序列表 (<ul>) 中

<dl> 標籤訂義一個描述列表，<dl> 標籤與 <dt>（定義項目/名字）和 <dd>（描述每個項目/名字）一塊兒使用

<em></em>標籤告訴瀏覽器把其中的文本表示爲強調的內容，對於全部瀏覽器來講，這意味着要把這段文字用斜體來顯示

<body bgcolor="xxx" text="xxxx">,bgcolor屬性設置頁面顏色，text屬性設置文本顏色

<font face="arial">xxxx</font>利用font元素改變字體

<center></center>對其包圍的文本進行水平居中處理

一些字符實體

&lt顯示爲<

&gt顯示爲>

&copyright顯示爲©

三.一個簡單的html框架

<!--這是仁人用於博客中的演示文本，寫於2019年03月04日-->
<!doctype html>
<html>
    <head>
         <meta charset="utf-8">  
        <title>Hello Wrld!</title>
    </head>
    <body>
        <h1>演示文件，頁面顯示hello world！</h1>
        <p> Hello Wrld ! </p>
    </body>
</html>

四.在頁面中插入一個連接

<a></a>用於建立指向其它頁面的連接，元素中的內容就是連接文本，在瀏覽器中連接文本會顯示有下劃線，指示這是可單擊的，例如：

<a href="(連接目標文件的路徑或url)" 　　title="文本描述">（連接文本）</a>

href屬性指向連接文件的路徑

rirle屬性所需連接頁面的文本描述

加入id屬性用於具體指向某個連接的某個標題，例如：

<a href="index.html#標識符">xxxxx</a> 並同步頁面中的標題,連接所使用的標識符要與標題的標識符設置一致 <h2 id="標識符">xxxxx</h2>

加入target屬性，使瀏覽器打開連接時爲單獨的窗口，而不是同一窗口，例如：

<a target="_blank" href="xxxxxxxx" title="xxxxxxxxx">xxxxxxxxx</a>

若是不加入target屬性，點擊連接時瀏覽器會在同一窗口打開連接，加入此屬性，瀏覽器會在單獨窗口打開連接

五.在頁面中插入圖像

<img src="xxxxx">標記爲在頁面中顯示圖像，xxx爲圖片的路徑或url

alt=「xxx」屬性爲描述這個圖像內容的文本，若是圖像未能顯示，就會使用這個文原本取代它。

width-"xxx"屬性告訴瀏覽器在頁面中顯示圖像的寬度

height="xxx"屬性告訴瀏覽器在頁面中顯示圖像的高度