感謝這么基礎的東西還能有小伙伴前來賞光，
你好，我是阿Ken
之后阿Ken會在本專欄持續更新HTML、CSS的入門基礎，
主要以課本教材為主，自學網站資源為輔
有想自學或者是回過頭看一看、復習的小伙伴可以過來扎個堆兒了哈哈哈
最近疏于調整狀態，仔細說來也是十分慚愧
總是想著與年紀不符的事情，總尋思把能考慮到的都能夠考慮周全，不斷的給自己施壓和一些說不上麻煩但零散的小事兒整的心態一直不是很樂觀
再加上我也只是一個學習效率低下的普通人
可能是有點喪了_
但當一個人嘗盡孤獨的滋味
他會笑著與這個世界和解
當你對自己產生疑問的時候，
就是你該改變的時候了
1.1_html基礎
1.1.1_html5檔案基本格式及HTML標記
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題檔案</title>
</head>
<body>
</body>
</html>
- <!doctype>標記
位于檔案最前面，使用html5的DOCTYPE宣告，會觸發瀏覽器以標準兼容模式來顯示頁面，瀏覽器才能將該網頁作為有效的html檔案，
<!doctype html>
- < html >標記
該標記位于<!doctype>標記 之后，該標記意味著html檔案的開始和結束，在它之間的是檔案的頭部和主體內容， - < head >標記
在< html >標記 之后，定義html檔案的頭部資訊，也稱頭部標記， - < body >標記
主體標記 - html中的單雙標記
- 雙標記
<標記名>內容</標記名>
- 單標記
<標記名/>
- 注釋標記
<!--注釋陳述句-->
<!--這就是注釋標記-->
1.1.2_HTML5的語法
- 標簽不區分大小寫
<p>這里的p標簽大小寫不一致</P>
雖然p標記的開始標記與結束標記大小寫并不匹配，但是在html5中語法是完全合法的，
- 允許屬性值不使用引號
<input checked=a type=checkbox/>
<input readonly=readonly type=text/>
以上代碼等價于
<input checked="a" type="checkbox"/>
<input readonly="readonly" type="text"/>
- 允許部分屬性值的屬性省略
<input checked=“checked” type="checkbox"/>
<input readonly="readonly" type="text"/>
可以省略為：
<input checked type="checkbox"/>
<input readonly type="text"/>
1.1.3_標記的屬性
<標記名 屬性1="屬性值1" 屬性2="屬性2"...>內容</標記名>
標記可以有多個屬性且不分先后順序
例如：
<h1 align="center">內容</h1>
1.1.4_HTML5檔案頭部相關標記
這些標記通常都寫在head標記內
- 設定頁面標題標記< title>
<title>網頁標題名稱</title>
- 定義頁面元資訊標記< meta/>
- 參考外部檔案標記< link>
- 內嵌樣式標記
1.2_文本控制標記
1.2.1標題和段落標記
- 標題標記
包括< h1>~< h6>
< hn align="對齊方式">內容< /hn>
left：設定標題文字左對齊（默認值）
center：設定標題文字居中對齊
right：設定標題文字右對齊
- 段落標記
< p align="對齊方式">內容< /p>
- 水平線標記< hr/>
< hr 屬性=“屬性值” />
| 屬性名 | 含義 | 屬性值 |
|---|---|---|
| align | 設定水平線的對齊方式 | 可選擇left、right、 center 三種值，默認為left |
| size | 設定水平線的粗細 | 以像素為單位，默認為2像素 |
| color | 設定水平線的顏色 | 可用顏色名稱、十六進制#RGB、rgb(r, g. b) |
| width | 設定水平線的寬度 | 可以是確定的像素值，也可以是瀏覽器視窗的百分比，默認為100% |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>水平線標記的用法和屬性</title>
</head>
<body>
<p>傳智播客專業于Java、.NET、 PHP、 C/C++、網頁設計、平面設計、UI設計，從菜鳥到職場達人的轉變就在這里，你還等什么? </p>
<hr />
<P align="left">Java學院</p>
<hr color="red" align="left" size="5" width="600"/>
<P align="center">網頁平面設計學院</p>
<hr color="#066F" align-"right" sizem"2" width="508"/>14 <P align="right">PHP學院</p>
</body>
</html>
運行結果如下:
4. 換行標記< br/>
1.2.2_文本格式化標記
1.2.3_特殊字符標記
1.3_影像標記
常用的影像格式主要是GIF、JPG和PNG三種
在網頁中小圖片如圖示，按鈕等建議使用GIF或PNG格式，透明圖片建議使用PNG格式，類似照片的圖片則建議使用JPG格式，動態圖片建議使用GIF格式，
1.3.1_影像標記< img />
<img src="影像URL"/>
實體：
代碼如下：
運行結果：
1.3.2_絕對路徑和相對路徑
-
絕對路徑
_
絕對路徑就是網頁上的檔案或目錄在硬碟上的真正路徑，如“D:\HTML5+CSS3\images\logo.gif",或完整的網路地址，如http://www.itcast.cn/images/logo,gif"，
_
網頁中不推薦使用絕對路徑，因為網頁制作完成之后我們需要將所有的檔案上傳到服務器，就是說很有可能不存在“D:\HTML5+CSS3\images\logo.gif" 這樣一個路徑， -
相對路徑
_
相對路經就是相對于當前檔案的路徑，相對路徑不帶有盤符，通常是以HTML網頁檔案為起點，通過層級關系描述目標影像的位置，
_
總結起來，相對路徑的設定分為以下3種，
_
(1)影像檔案和HTML檔案位于同一檔案夾:只需輸入影像檔案的名稱即可，如< img src=“logo. gif” />，
_
(2)影像檔案位于HTML檔案的下一級檔案夾：輸入檔案夾名和檔案名，之間用”/“隔開，如< img src=“images/logo.gif”/>
_
(3)影像檔案位于html檔案的上一級檔案夾:在檔案名之前加入"…/", 如果是上兩級，則需要使用"…/…/"以此類推，如<img src="logo.gif/>
1.4_超鏈接標記
1.4.1_創建超鏈接
<a href="跳轉目標" target="目標視窗的彈出方式">文本或影像</a>
- < a>標記用于定義超鏈接，href 和target 為其常用屬性
- href：用于指定鏈接目標的url地址
- target：用于指定鏈接頁面的打開方式 ，其取值有_self、_blank兩種，
_self意為在原視窗打開，_blank意為在新視窗打開
實體：
代碼：
運行后：
點擊超鏈接彈出新視窗：
1.4.2_錨點鏈接
直接實體：
代碼：
運行后如下兩張圖，在第一張圖點擊”點我“就會跳轉到第二張圖上的”這里“：
我一定會慢慢努力
不辜負自己
也不辜負親人和朋友
我是阿Ken
我們后會有期
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/158978.html
標籤：其他
上一篇：Vue_1.0