好程序員HTML5培訓教程-html和css基礎知識

時間 2019-12-14

原文原文鏈接

好程序員HTML5培訓教程-html和css基礎知識，Html是超文本標記語言（英語全稱：HyperText Markup Language，簡稱：HTML）是一種用於建立網頁的標準標記語言。
Css是層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來html和xml等文件樣式的計算機語言，CSS不只能夠靜態地修飾網頁，還能夠配合各類腳本語言動態地對網頁各元素進行格式化。
一.基礎內容：
標記=開始標記+內容+結束標記
標記能夠嵌套使用，例如：頁面主體標記中含有標題標記，段落標記。
有些標記有屬性，具體格式，以a標記爲例，xxxx其中make爲標記的屬性。
設計爲沒有任何內容的元素稱爲void元素，須要使用void元素時，只須要使用一個開始標記，這是一種方便的簡寫，能夠減小html中的標記數量
二.經常使用標記的使用與意義：
<!doctype html>html5的文檔類型定義，這一行要寫到html文件開頭
<html></html>標記html頁面的開始和結束
<head></head>標記頁面的有關信息
<meta charset="utf-8">標記指定字符編碼，這一行要寫到<head>元素中全部其餘元素上面
<title></title>爲頁面指定一個標題，標記中的內容出如今瀏覽器的頂部
<body></body>標記頁面的主體內容
中間xxx的內容爲註釋的內容
編寫html時要把首部和頁面主體分開
<h1></h1>爲主標題，從<h2>到<h6>依次爲副標題，字體由大到小
<p></p>開始一個段落
<blockquote> </blockquote> 標籤訂義塊引用，之間的全部文本都會從常規文本中分離出來，常常會在左、右兩邊進行縮進（增長外邊距），並且有時會使用斜體。也就是說，塊引用擁有它們本身的空間css

插入一個換行符
<q> 標籤訂義一個短的引用，瀏覽器常常會在這種引用的周圍插入引號
須要瞭解的內容（一些老版本棄置的元素與不建議使用的元素，作到看見了要明白其含義）
<ol></ol>定義一個有序列表
<ul> 標籤訂義無序列表
<li> 標籤訂義列表項目，<li> 標籤可用在有序列表 (<ol>) 和無序列表 (<ul>) 中
<dl> 標籤訂義一個描述列表，<dl> 標籤與 <dt>（定義項目/名字）和 <dd>（描述每個項目/名字）一塊兒使用
標籤告訴瀏覽器把其中的文本表示爲強調的內容，對於全部瀏覽器來講，這意味着要把這段文字用斜體來顯示
<body bgcolor="xxx" text="xxxx">,bgcolor屬性設置頁面顏色，text屬性設置文本顏色
<font face="arial">xxxx</font>利用font元素改變字體
<center></center>對其包圍的文本進行水平居中處理
一些字符實體
<顯示爲<html

顯示爲>
©right顯示爲©
三.一個簡單的html框架
<!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 href="(連接目標文件的路徑或url)"
title="文本描述">（連接文本）
href屬性指向連接文件的路徑
rirle屬性所需連接頁面的文本描述
加入id屬性用於具體指向某個連接的某個標題，例如：
xxxxx
並同步頁面中的標題,連接所使用的標識符要與標題的標識符設置一致
<h2 id="標識符">xxxxx</h2>
加入target屬性，使瀏覽器打開連接時爲單獨的窗口，而不是同一窗口，例如：
<a target="_blank" href="xxxxxxxx"
title="xxxxxxxxx">xxxxxxxxx
若是不加入target屬性，點擊連接時瀏覽器會在同一窗口打開連接，加入此屬性，瀏覽器會在單獨窗口打開連接
五.在頁面中插入圖像
<img src="xxxxx">標記爲在頁面中顯示圖像，xxx爲圖片的路徑或url
alt=「xxx」屬性爲描述這個圖像內容的文本，若是圖像未能顯示，就會使用這個文原本取代它。
width-"xxx"屬性告訴瀏覽器在頁面中顯示圖像的寬度
height="xxx"屬性告訴瀏覽器在頁面中顯示圖像的高度前端