榆林市城鄉(xiāng)建設(shè)規(guī)劃局網(wǎng)站旅游營銷推廣方案
文章目錄
- 注釋標(biāo)簽
- 標(biāo)題標(biāo)簽：h1 h6
- 段落標(biāo)簽：p
- 換行標(biāo)簽：br
- 格式化標(biāo)簽
- 圖片標(biāo)簽：img
- 1. img 的 alt 屬性
- 2. img 的 title 屬性
- 3. width 與 heigth 屬性用來描述圖的尺寸
- 超鏈接標(biāo)簽：a
- 表格標(biāo)簽
- 列表標(biāo)簽
- 表單標(biāo)簽
- 1. from 標(biāo)簽
- 2. input 標(biāo)簽
- 3. select 標(biāo)簽
- 4. textarea 標(biāo)簽
- 5. 無語義標(biāo)簽：div span
注釋標(biāo)簽
html 的注釋和一般語言的注釋差別很大。
如果要使用 注釋 ，將想要注釋的內(nèi)容使用 < !-- --> 選中即可，注釋的內(nèi)容就不會出現(xiàn)在網(wǎng)頁上了。
如果想要查看當(dāng)前的注釋代碼，可以在顯示的網(wǎng)頁上右擊選擇 查看網(wǎng)頁源代碼
就可以發(fā)現(xiàn)在源代碼中注釋過的代碼了。
可以使用 Ctrl + / 來快速注釋代碼，按一下就是注釋，再按一下就是取消注釋。
標(biāo)題標(biāo)簽：h1 h6
標(biāo)題標(biāo)簽一共有 h1 ~ h6 6 個級別的標(biāo)簽，從 h1 到 h6 標(biāo)題逐漸變小變細(xì)，所以最大的標(biāo)題標(biāo)簽是 h1，最小的就是 h6。
可以清楚地看到標(biāo)簽的大小是逐漸變小變細(xì)的。
這里需要注意的是每個標(biāo)題都是獨(dú)占一行的，不會因為代碼的編寫而改變。
盡管現(xiàn)在的代碼格式變了，但是每一個標(biāo)題還是獨(dú)占一行。
段落標(biāo)簽：p
段落標(biāo)簽使用的 < p>< /p> 標(biāo)簽。
每個段落之間不光是有一個換行，同時還有一個段落間距。
也可以使用 lorem 來自動生成一個文檔。
換行標(biāo)簽：br
換行標(biāo)簽是 br。
可以發(fā)現(xiàn)有此標(biāo)簽處就換行了，而且是有幾個 < br> 標(biāo)簽就換幾個行。
格式化標(biāo)簽
格式化標(biāo)簽有 變粗、傾斜、刪除線、下劃線 這幾種。
<html>
<head></head><body><strong>變粗</strong><b>變粗</b><em>傾斜</em><i>傾斜</i><del>刪除線</del><s>刪除線</s><ins>下劃線</ins><u>下劃線</u></body>
</html>
這些標(biāo)簽都不是獨(dú)占一行的。
圖片標(biāo)簽：img
網(wǎng)頁上是可以顯示圖片的，這里用到的是 img。img 有一個核心的屬性— src 這是必須填的。
想在網(wǎng)頁上顯示一個圖片，可以采取 絕對路徑 或者 相對路徑。
絕對路徑的方式：
可以發(fā)現(xiàn) d 盤中有一個小姐姐圖片。
<html>
<head></head><body><img src="d:/xiaojiejie.jpg"></body>
</html>
直接將圖片的絕對路徑寫在 img 標(biāo)簽里面即可，src 就是它的屬性。
可以看到網(wǎng)頁中正確的顯示出來了。
相對路徑的方式：
使用相對路徑的時候一定要明確 工作目錄是哪個！！！（有個基準(zhǔn)）
html 的工作目錄就是該 html 文件所在的目錄。
首先將這個圖片保存到與這個 html 文件于同一個目錄。
這個時候的路徑就是 ./xiaojiejie.jpg
<html>
<head></head><body><img src="./xiaojiejie.jpg"></body>
</html>
也可以將上述的 ./ 去掉，變成以下：
<html>
<head></head><body><img src="xiaojiejie.jpg"></body>
</html>
將這個圖片放到一個新的文件 image 中，此時的路徑應(yīng)該如下書寫：
<html>
<head></head><body><img src="image/xiaojiejie.jpg"></body>
</html>
此時的網(wǎng)頁依然可以顯示出這個小姐姐的圖片。
也可以將這個圖片的地址填寫到瀏覽器中就可以直接打開圖片了。
在網(wǎng)頁上右擊這個圖片就可以獲取這個圖片的地址。還可以將這個圖片地址放到 img 里，也可以顯示出圖片。
1. img 的 alt 屬性
alt 屬性：在圖片掛了的時候，就會顯示出 alt 對應(yīng)的文本。
<html>
<head></head><body><img src="image/xiaojiejie.jpg" alt="這一個小姐姐"></body>
</html>
當(dāng)圖片掛了之后就會出現(xiàn)上述 alt 中的文本。
2. img 的 title 屬性
有了這個屬性，鼠標(biāo)懸停在這個上面的時候就會給出一個提示。
<html>
<head></head><body><img src="image/xiaojiejie.jpg" alt="這一個小姐姐" title="小姐姐"></body>
</html>
3. width 與 heigth 屬性用來描述圖的尺寸
寬度和高度可以是同時設(shè)置，也可以是只設(shè)置一個。如果只設(shè)置一個，另一個就會等比例的進(jìn)行縮放或者放大。
<html>
<head></head><body><img src="image/xiaojiejie.jpg" alt="這一個小姐姐" title="小姐姐" width="100px"></body>
</html>
可以看到圖片等比例的縮放了。
<html>
<head></head><body><img src="image/xiaojiejie.jpg" alt="這一個小姐姐" title="小姐姐" width="100px" height="100px"></body>
</html>
寬度和高度如果是同時設(shè)置的，圖片就可能會變形，以上的圖片就有些許的變形。
超鏈接標(biāo)簽：a
“鏈接” 是快捷方式的意思，而 “超” 鏈接則是指可以跳轉(zhuǎn)到當(dāng)前網(wǎng)頁之外的頁面。
這個標(biāo)簽是利用 href 屬性來實(shí)現(xiàn)快捷跳轉(zhuǎn)的。
<html>
<head></head><body><a href="https://www.baidu.com">百度</a><a href="https://www.sogou.com">搜狗</a></body>
</html>
點(diǎn)擊百度和搜狗就會跳轉(zhuǎn)到對應(yīng)的網(wǎng)頁了，但是新的網(wǎng)頁會把舊的網(wǎng)頁給替換掉。
可以看到點(diǎn)擊 “搜狗” 后就把之前的頁面給替換了。
超鏈接標(biāo)簽還有一個屬性：target，
這個屬性一般都是寫作 target=“_blank”，此時就可以打開一個新的標(biāo)簽頁而不會替換掉之前的標(biāo)簽頁。
<html>
<head></head><body><a href="https://www.baidu.com" target="_blank">百度</a><a href="https://www.sogou.com" target="_blank">搜狗</a></body>
</html>
可以看到點(diǎn)擊 “百度” 后，并沒有將原來的頁面替換掉。
表格標(biāo)簽
table：表示整個表格。
tr：表示一行。
td 表示一個單元格。
th 表示表頭的中一個單元格
<html>
<head></head><body>
<table><tr><th>姓名</th><th>電話</th></tr><tr><td>張三</td><td>111</td></tr><tr><td>李四</td><td>222</td></tr><tr><td>王五</td><td>333</td></tr></table></body>
</html>
雖然對應(yīng)的信息已經(jīng)顯示出來了，但是它還沒有單元格，此時這還不是一個表格。而且信息的間隙還比較密集。
下面首先將信息的間隙擴(kuò)大，給表格設(shè)置寬度和高度。
<html>
<head></head><body>
<table width="500px" height="300"><tr><th>姓名</th><th>電話</th></tr><tr><td>張三</td><td>111</td></tr><tr><td>李四</td><td>222</td></tr><tr><td>王五</td><td>333</td></tr></table></body>
</html>
可以看到間隙已經(jīng)擴(kuò)大了，但是信息還沒有對齊而且信息未對齊。
此時要解決的是表格該沒有線條的問題，使用 border 這個屬性即可解決，將這個屬性設(shè)置為1。
<html>
<head></head><body>
<table width="500px" height="300" border="1"><tr><th>姓名</th><th>電話</th></tr><tr><td>張三</td><td>111</td></tr><tr><td>李四</td><td>222</td></tr><tr><td>王五</td><td>333</td></tr></table></body>
</html>
仔細(xì)看的話這里的表格邊線是有兩條的，這里給它設(shè)置為一條邊線。
這里用到的屬性是 cellspacing，將這個屬性的值設(shè)為0即可。
<html>
<head></head><body>
<table width="500px" height="300" border="1" cellspacing="0"><tr><th>姓名</th><th>電話</th></tr><tr><td>張三</td><td>111</td></tr><tr><td>李四</td><td>222</td></tr><tr><td>王五</td><td>333</td></tr></table></body>
</html>
接下來要解決的就是對齊的問題。
如果要讓信息對齊，就需要使用 CSS
<html>
<head>
<style>td {text-align: center;}
</style>
</head><body>
<table width="500px" height="300" border="1" cellspacing="0"><tr><th>姓名</th><th>電話</th></tr><tr><td>張三</td><td>111</td></tr><tr><td>李四</td><td>222</td></tr><tr><td>王五</td><td>333</td></tr></table></body>
</html>
這里的 head 標(biāo)簽里的代碼意思就是讓頁面中所有的 td 標(biāo)簽中的文字到水平居中。
這里的 CSS 只是簡單的提一下，后面會細(xì)講。
列表標(biāo)簽
列表標(biāo)簽分為 有序列表、無序列表、列表項，
有序列表是 ol，這是 ordered list 的簡寫，無序列表是 ul，這是 unordered list 的簡寫。
列表項是 li，這是 list item 的簡寫。
<html>
<head></head><body><h3>我的老婆們</h3><ol><li>咬人貓</li><li>兔總裁</li><li>張奶糖</li><li>阿葉君</li></ol><ul><li>咬人貓</li><li>兔總裁</li><li>張奶糖</li><li>阿葉君</li></ul></body>
</html>
有序列表排名是分先后的，無序列表是不分先后的。
在瀏覽器中按下 F12 或者 右鍵選擇檢查，就可以打開瀏覽器的 “開發(fā)者工具”，借助這個工具就可以看到這個頁面是怎么實(shí)現(xiàn)的。
表單標(biāo)簽
表單是讓用戶輸入信息的重要途徑。
分成兩個部分：
表單域： 包含表單元素的區(qū)域，重點(diǎn)是 from 標(biāo)簽。
表單控件： 輸入框，提交按鈕等，重點(diǎn)是 input 標(biāo)簽。
1. from 標(biāo)簽
使用 from 標(biāo)簽來進(jìn)行前后端的交互，把頁面上，用戶的操作或者是輸入提交到服務(wù)器上。
這里后面再進(jìn)行講解，這里暫時只是提一嘴。
2. input 標(biāo)簽
input 有很多的形態(tài)，能夠表現(xiàn)成各種用戶用來輸入的組件。
1、單行文本框
<body><input type="text">
</body>
2、下面的也是一個文本框，只不過是用來輸入密碼的。
<body><input type="password">
</body>
3、單選框
<body>請選擇性別：<input type="radio"> 男<input type="radio"> 女
</body>
此時會發(fā)現(xiàn)兩個選擇都可以選，這是不符合邏輯的。
因此對于單選框，我們可以使用 name 屬性來進(jìn)行設(shè)置，name 屬性相同的，單選框的值之間是互斥的。
<body>請選擇性別：<input type="radio" name="gender"> 男<input type="radio" name="gender"> 女
</body>
checked 可以設(shè)置單選框默認(rèn)選中的。
<body>請選擇性別：<input type="radio" name="gender" checked="checked"> 男<input type="radio" name="gender"> 女
</body>
4、復(fù)選框
<body>你每天都干什么：<input type="checkbox"> 吃飯<input type="checkbox"> 睡覺<input type="checkbox"> 學(xué)習(xí)
</body>
復(fù)選框也是可以，使用checked 設(shè)置默認(rèn)選中的。
<body>你每天都干什么：<input type="checkbox"> 吃飯<input type="checkbox"> 睡覺<input type="checkbox" checked="checked"> 學(xué)習(xí)
</body>
5、按鈕
<body><input type="button" value="這是一個按鈕">
</body>
對于按鈕點(diǎn)擊后會有什么作用，需要通過 js 來配合，以后會講解。
6、提交按鈕（搭配 from 使用）
type=“submit”，外表和 button 是差不多的，會觸發(fā) from 和服務(wù)器的交互。
具體以后再講。
7、文件選擇框
<body><input type="file">
</body>
點(diǎn)擊按鈕，會讓我們選擇一個文件。
input 的功能很豐富，是和用戶交互最主要的一個標(biāo)簽之一。
3. select 標(biāo)簽
select 是下拉菜單
<body><select><option>吃飯</option><option>睡覺</option><option>學(xué)習(xí)</option><option>運(yùn)動</option></select>
</body>
可以任意選擇上面的選項。
4. textarea 標(biāo)簽
textarea 標(biāo)簽 是多行編輯框
<body><textarea cols="30" rows="10"></textarea>
</body>
5. 無語義標(biāo)簽：div span
無語義標(biāo)簽指的是沒有特殊含義的標(biāo)簽，意思就是可以在任何場景中使用。
div 默認(rèn)是獨(dú)占一行的（塊級元素），span 默認(rèn)是不獨(dú)占一行的（行內(nèi)元素）。
