#2019年宣傳部第六次培訓
**宣傳部第六次培訓主要給大家介紹了網頁前端和html一些基礎標籤。下面是對這次培訓的詳細介紹：
1. 什麼是網頁
1.1 網頁類型
網頁分爲靜態網頁和動態網頁兩種類型。
1.1.1 靜態網頁
不是說頁面是靜止的稱爲靜態網頁，而是頁面內容不涉及到後端數據庫，每個人進入這個頁面都是一樣的內容。
1.1.2 動態網頁
也不是說頁面是動態的稱爲動態網頁，而是和後端數據庫有交互，在網頁裏的操作需要後端數據庫的支持。
2. HTML
HTML是用來描述網頁的一種語言。
HTML 指的是超文本標記語言 (Hyper Text Markup Language)
HTML 不是一種編程語言，而是一種標記語言 (markup language)用一套標籤來作爲標記 (markup tag)
HTML 使用標籤來描述網頁
HTML 運行在瀏覽器上，由瀏覽器來解析。
HTML文件的後綴名可以是.html也可以是.htm。
超文本標記語言,是網頁製作所必備的。“超文本”就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。超文本標記語言(或超文本標籤語言)的結構包括“頭”部分、和“主體”部分，其中“頭”部提供關於網頁的信息，“主體”部分提供網頁的具體內容。
2.1 HTML文件
HTML文件由 HTML 元素組成 ，一個 HTML 元素包含了一個開始標籤與結束標籤以及之間包含的內容，如下實例:
HTML 元素:
<p>紅色的部分是一個元素</p>
2.2 Web瀏覽器
Web瀏覽器（如谷歌瀏覽器，Edge，Firefox，Safari）讀取HTML文件，並將其作爲網頁顯示，但是不會顯示 HTML 標籤，因爲標籤是用來決定如何展現頁面內容的。
2.3 在正式寫代碼之前的準備工作
sublime安裝和準備
安裝包鏈接: https://pan.baidu.com/s/1SJdApwOV7KjJT3TTR-365g.
2.4HTML標籤對
2.4.1基礎標籤
1.根標籤（一個文件只能有一個html標籤）
- 結構化標籤
2.4.3標籤對
標題
1.書寫：
<h1>標題</h1>
<h2>標題</h2>
<h3>標題</h3>
<h4>標題</h4>
<h5>標題</h5>
<h6>標題</h6>
標題
標題
標題
標題
標題
標題
2.標籤作用：獨成一段，更改字體大小，加粗字體加粗
1.書寫.<strong>加粗</strong>
加粗
2.加粗字體
斜體
1.書寫<em>斜體</em>
斜體
2.使字體變爲斜體
中劃線
1.書寫：<del>$50</del>
$50
2.在原有上加中劃線
圖片
1.書寫`<img src=“圖片的路徑” alt=“圖片說明文字（即圖片加載失敗後顯示文字） ” title=" ">
alt=“ ” 當圖片顯示錯誤，用文字來彌補 （圖片佔位符）
title=“ ” 圖片提示符（即將鼠標放在圖片上顯示的文字）
屬性：width（高度）
`
音樂
1.書寫
屬性：src 定義音樂文件路徑
autoplay 自動播放
controls 播放按鈕（controls=“controls”`）
視頻
1.書寫<video src=“視頻文件路徑” controls=“controls” </video> 屬性：src 定義視頻文件路徑 autoplay 自動播放 controls 播放按鈕（control=“controls”）
效果同音樂
超鏈接
1.書寫
<a href="https://www.baidu.com/" target="_blank"/*新頁面中打開*/></a>
打電話（在移動端應用廣泛）
<a href=“tel:[email protected]" >打電話</a>
發郵件
<a href="mailto:[email protected]" >發郵件</a>
協議限定符
<a href="javascript:while(1){alert('讓你手欠')}">你點我試試呀</a>
表格
1.書寫
<table 屬性=“屬性”>
<tr><td></td></tr>
<tr><td></td></tr>
</table>
<table> 定義表格
<th> 定義表格的表頭內容
<tr> 定義行
<td> 定義單元格
<thead>定義表格的表頭內容
<tbody>定義主體內容
屬性：border 定義表格邊框寬度 <table border=“1”>
align 對齊方式
bgcolor 背景顏色
顏色代碼表（可百度）：
表單
1.書寫
<form>
<p>
username:<input type="text">
</p>
<p>
password:<input type="password">(*****) </p>
<input type="submit" value="log in">
</form>
value="log in" 提交按鈕的名稱 默認“提交”
提交時需要數據名和數據值纔有效
username:
輸入框
1.書寫：
text 普通文本框
password 密碼框（掩碼）
submit 提交按鈕（sumbit中要寫value=“ ”）
屬性：placeholder 定義框的提升文字
maxlength 設置文本框最多可輸入多少字符
readonly 禁用（不可輸入）
checked 設置默認選中項
單選
1.書寫：
1.游泳<input type="radio" name="sport" value=“swim">
2.讀書<input type="radio" name="sport" value=“book’">
3.跑步<input type="radio" name="sport" value=“run">
name="sport" 數據名 value="youyong" 數據值
多選
1.書寫：
1.游泳<input type="checkbox" name="sport" value=" swim ">
2.讀書<input type="checkbox" name="sport" value=" book ">
3.跑步<input type="checkbox" name="sport" value=" run ">
下拉選擇
1.書寫
<select name="province">
<option>北京</option>
<option>上海</option>
<option>天津</option>
</select>
文本框
1.書寫
textarea多行文本框（輸入大量文字，如留言、備註等）
<textarea> </textarea>
``
[^1]: 前面所講的一些標籤都是我們寫網頁時最常用的標籤，其實我們寫網頁時並不需要記憶很多的標籤，需要用時可以去查閱html手冊