2020年2月12日
學習的前端的第二天，今天學了東西感覺還挺多的，最近還要忙畢業設計的開題，事情太多了，希望可以堅持下去吧！
一. 本節課學習目標。
- 掌握HTML常用的標籤。 重點
- 掌握HTML常用的標籤屬性。
- 掌握emmet快捷鍵寫法。
- 能夠通過HTML基礎標籤完成簡單網頁製作。
二. 標籤屬性。
<meta charset = “UTF-8” />
- meta標籤，只有一個標籤，單標籤。
- meta元信息，存放一些網頁的設置內容。
- charset = “UTF-8”，標籤屬性。
特點：
a. 寫在開始標籤中。
b. 格式：屬性名=屬性值
作用：爲標籤添加功能。
例子： 人（帥哥，油膩大叔，技術達人）。
Charset：編碼格式，字符集。
a. utf-8: 包含全世界所有的符號。
b. ansi: 不支持中文的，英文。
c. gb2312：中國的編碼，中文。
三. HTML常用標籤。
-
br，hr。
br：換行標籤，單標籤。<br>
hr: 水平橫線，單標籤。 <hr> -
標題標籤。
H1標籤：一號標題標籤。
H2標籤：二號標題標籤。
H3標籤：三號標題標籤。
H4標籤：四號標題標籤。
H5標籤：五號標題標籤。
H6標籤：六號標題標籤。
標題標籤自帶文字大小和加粗效果。
H1一號標題：一個網頁裏面只出現1個就可以了。
注意：當通過emmet快捷方式生成時，tab鍵和前面的內容之間不能出現空格。 -
超鏈接標籤。
A標籤：代表超鏈接。 格式<a href=””>顯示文字</a>
Href屬性：指定超鏈接要跳轉的地址。 比如：網址。
Target屬性：指定新的網頁的打開方式。 Target=”_blank”在新的窗口打開。
如何新建一個網頁？
a. 選中當前的項目 Day02。
b. 右擊，選擇新建，再次選擇html文件。
![在這裏插入圖片描述]()
c.
Html文件名字：駝峯命名法（小駝峯），多個英文單詞組成，除了第一個單詞的首字母以外，其他單詞的首字母都要大寫。 helloWorld, 項目名稱HelloWorld -
圖片標籤。
Img：用來顯示圖片。 單標籤，只用來顯示圖片。
加載圖片來源：
1.網絡圖片：必須要給網絡圖片的網址。 找到圖片，右鍵，複製圖片地址。
2.本地圖片：當前項目內的圖片。使用相對路徑的方式進行訪問。
Img的屬性：
Src: 存放圖片的地址。 格式：src = “圖片地址”
Alt: 當圖片未成功加載時顯示的提示內容。 注意：圖片顯示成功不會出現。
Title：圖片的標題。 當鼠標放到圖片上時會顯示。
Width：設置圖片的寬度。 數值，單位：px。
Height：設置圖片的高度。 數值，單位：px。注意：圖片修改大小，儘量只給一個值（寬度或者高度），另外一個值 會根據圖片的原始尺寸等比例縮放，不會失真。 -
段落標籤， em， strong。
P: 段落標籤，用來存放一段文字。 一段文字沒有內容多少之分。
Em：表示強調，用來對文本做斜體設置。
Strong: 標識強調，用來對文本做加粗設置。 -
無序列表。
ul 無序列表 li 每一個列表項。
注意：ul和li必須是組合出現的，他們之間是不能有其他標籤的。
屬性：
type：改變列表項目符號。 Circle（空心圓），disc（實心圓），square（實心矩形） -
有序列表。
Ol: 有序列表。
Li: 列表項。
屬性：
type：更改列表項目符號。1，A，a，I，i。 -
標籤語義化。
解釋：根據網頁中內容的特性，選擇適合的HTML標籤進行編寫。
標籤語義化的優點：
1.方便SEO優化，讓搜索引擎更好的理解網頁。
2.便於閱讀和修改。
3.在沒有CSS的情況下，頁面可以呈現出很好的內容結構。
四. 四. Emmet快捷方式
五. 學習鏈接。
學習鏈接：W3SCOOL https://www.w3school.com.cn/html/index.asp
學習鏈接：菜鳥教程 https://www.runoob.com/html/html-tutorial.html
今天所學代碼塊：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML常用標籤</title>
</head>
<body>
<!-- br:換行標籤 hr:水平橫線。 -->
哥是老司機，要開車嘍！<br>
<hr>
滴滴，學生卡！<br>
<hr>
滴滴，幼兒園卡！<br>
<hr>
滴滴，老年卡！<br>
<hr>
<!-- 標題標籤 h1~h6-->
<!-- 1號標題標籤 -->
<h1>我是1號標題</h1>
<!-- 2號標題 -->
<h2>我是2號標題</h2>
<!-- 3號標題 -->
<h3>我是3號標題</h3>
<!-- 4號標題 -->
<h4>我是4號標題</h4>
<!-- 5號標題 -->
<h5>我是5號標題</h5>
<!-- 6號標題 -->
<h6>我是6號標題</h6>
<!--
快速生成代碼的方式：
1.快速生成一個標籤。 標籤名稱+tab。
2.快速生成1個標籤並且標籤內帶內容。
標籤名稱{標籤的內容}+tab。
3.快速生成多個標籤。
標籤名稱*標籤個數。 比如：h1*6+tab, 生成6個h1標籤。
4.如何快速生成h1~h6標籤。
1, 2, 3, 4, 5, 6
shift+4
h$*6, $是佔位符，在生成6個標籤的過程中，逐步生成h1,h2,h3,h4,h5,h6.
h${我是$號標題}*6
-->
<h1>我是1號標題</h1>
<h2>我是2號標題</h2>
<h3>我是3號標題</h3>
<h4>我是4號標題</h4>
<h5>我是5號標題</h5>
<h6>我是6號標題</h6>
<!-- 超鏈接標籤： a -->
<a href="https://www.baidu.com/">百度一下，你就知道</a>
<!-- 練習：超鏈接鏈接到藍鷗官網 -->
<a href="http://www.lanou3g.com/" target="_blank">點我，跳轉到藍鷗官網</a>
<!-- 需求：如何在一個新的窗口打開網頁？ -->
<!--
需求：跳轉到自己的網頁？
訪問自己的網頁，需要找到自己網頁的路徑。
1.相對路徑。
2.絕對路徑。http://www.lanou3g.com/， https://www.baidu.com/
-->
<a href="two.html">第二個網頁</a>
<a href="three.html">第三個網頁</a>
<!--
相對路徑：
1.先找到同級的路徑。
2.再找對應的文件夾的下一級。 / 下一級 ../ 上一級
-->
<a href="other/four.html">第四個網頁</a>
<!-- 實現回到頂部效果 -->
<a href="#">回到頂部</a>
<!--
圖片標籤 img
顯示圖片：
1.網絡圖片： 圖片網址。
2.本地圖片：
-->
<img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1191630624,1109312732&fm=26&gp=0.jpg" alt="世宇的帥照" >
<!-- 本地圖片 -->
<img src="img/2.jpg" title="成都小甜甜">
<!-- 練習：網頁上顯示劉宇寧的圖片 -->
<img src="img/boy/1.jpg" width="200" height="400">
<!-- 段落標籤 p(paragraph)-->
<p>
這是一場針對武漢疫情防控工作中暴露出的突出問題開展的緊急約談。<em>9日</em>，武漢市對確診還未住院的新冠肺炎重症患者進行集中收治。有關中央媒體記者跟蹤採訪發現，當晚在將患者轉運至武漢同濟醫院中法新城院區的過程中，武昌區由於<strong>工作滯後、銜接無序、組織混亂</strong>，不僅轉運車輛條件差，街道和社區工作人員也沒有跟車服務，導致重症病人長時間等待繼而情緒失控，做法十分惡劣。
</p>
<!-- 無序列表 ul -->
HTML 是用來描述網頁的一種語言。
<ul type="square">
<!-- 列表項 li -->
<li>HTML 指的是超文本標記語言 (Hyper Text Markup Language)</li>
<li>HTML 不是一種編程語言，而是一種標記語言 (markup language)</li>
<li>標記語言是一套標記標籤 (markup tag)</li>
<li>HTML 使用標記標籤來描述網頁</li>
</ul>
<!-- 有序列表 ol -->
人的年齡：
<ol>
<li>三十而立</li>
<li>四十不惑</li>
<li>五十知天命</li>
</ol>
<!-- 練習 -->
按順序羅列一下您心中的女神：
<ol type="i">
<li>妲己</li>
<li>王昭君</li>
<li>楊玉環</li>
<li>貂蟬</li>
<li>西施</li>
</ol>
<!-- 練習 -->
<!-- 外層有序列表 -->
<ol>
<li>第一章
<!-- 內層有序列表 -->
<ol>
<li>第一節</li>
<li>第二節</li>
<li>第三節</li>
</ol>
</li>
<li>第二章</li>
<li>第三章</li>
</ol>
<!-- 標籤語義化 -->
<p>
疫情發生以後，全國各地堅持一方有難、八方支援，各地區前往湖北和武漢支援的廣大醫務工作者、人民解放軍指戰員以及各方面人員發揚越是艱險越向前的大無畏革命精神，聞令而動，堅忍不拔，不怕犧牲，攻堅克難。從除夕夜星夜馳援，到元宵節緊急集結，全國各地一批批醫務人員奔赴、奮戰武漢一線；數十家單位緊密配合、全國各地建設力量迅速匯聚，短時間內建好武漢火神山、雷神山醫院；建立對口支援機制，各省份全力支持湖北各地市加強病人救治、疫情防控工作；軍隊保證醫療物資和人員有效投送，抽組大量醫護人員奔赴疫情防控最前線。力量向湖北、向武漢集結，資源向湖北、向武漢傾斜，全國人民與湖北人民、武漢人民同舟共濟，凝聚起衆志成城抗擊疫情的強大力量。
</p>
</body>
</html>