html語言標(biāo)記基礎(chǔ)
常用的幾種標(biāo)記
結(jié)構(gòu)組成
- 頭部+主體+腳注
<div>的作用——區(qū)分具體的內(nèi)容，特別要注意<div>和</div>的應(yīng)用，在套用樣式表的時候，因為在
<div class="header">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Site</a></li>
<li><a href="#">Other</a></li>
</ul>
</div>
- 缺失了/div或/ul；
- /div或/ul的斜線為英文輸入，/／前一個是英文輸入，后一個是中文輸入，中文輸入的斜線不能被識別；
缺失這些部分，電腦找不到結(jié)束的標(biāo)志，最后原本顯示為整齊排版的文稿變得七零八亂。
網(wǎng)頁的html舉例
<head>標(biāo)題內(nèi)容</head>
<div>
<body>
<div>
<p>純文字</p>
</div>
<div>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
</div>
<div>
<p>©；foot內(nèi)容</p>
</div>
</body>
純文字：
<p>純文字</p>
文字類型的列表
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
圖片類型的列表
<ul>
<li><img src=images/照片名稱001.jpg></li>
<li><img src=images/照片名稱002.jpg></li>
<li><img src=images/照片名稱003.jpg></li>
</ul>
角標(biāo)
<p>©；輸入你的角標(biāo)內(nèi)容</p>
分割線
<hr>
這里需要注意的是：
- img src=images/照片名稱001.jpg中是images，而不是image
- ©；后為“；”不是“：”
- 文字和圖片都是本地素材
- 網(wǎng)頁是本地的靜態(tài)網(wǎng)頁，或者說，更像是本地的以html格式保存的文檔
關(guān)于css樣式表
樣式表的類型
樣式表描述的是字體字號以及圖片和素材的位置與距離，以下是一段樣式表：
.nav { <!--樣式名稱叫nav-->
padding-left: 0; <!--左側(cè)的間距 -->
margin: 5px 0 20px 0; <!--字體大小 -->
text-align: center; <!--文字居中對齊 -->
}
- head內(nèi)的樣式表會對全文（即body部分生效），為全局效應(yīng)的樣式表。
<head>
<meta charset="UTF-8">
<title>the blash</title>
<link rel="stylesheet" type="text/css" href="homework.css">
</head>
這個樣式表說明，文本格式的格式，以及選取的樣式表來自：homework.css
- body內(nèi)的樣式表基本用的是class來定義
<div class="header">
<ul class="nav">
<ul class="photos">
其中，header、nav、photos的對齊方式在css中已經(jīng)寫的很清楚，在每一個大板塊的div里，子素材的位置已經(jīng)確定。
css并不是萬能的
有時候，對個別圖片的大小調(diào)整，或者添加背景圖，在html中實現(xiàn)比css中更加方便，所以，個別樣式的調(diào)整也會通過html來輸出，譬如：
 <!--背景圖的調(diào)整-->
<li><a href="#">Site</a></li>
<p>若換成鏈接，如：將“#”替換成“www.bing.com”，點擊Site會打開必應(yīng)搜索</p>
<li></li>
<!--圖片的長寬-->
多學(xué)一點：alt="Pic1"是什么意思？
答：如果0001.jpg圖片加載過慢，會在圖片的位置上出現(xiàn)一個Pic1的文字，同時占位。
示例圖片.png
本文的所有代碼及下載鏈接<a >點擊這里</a>
本文的代碼來自網(wǎng)易云課堂的《0基礎(chǔ)Python實戰(zhàn)》，@麻瓜教程。
