HTML語言的學(xué)習(xí)
學(xué)習(xí)技術(shù)的第一層面： what
學(xué)習(xí)技術(shù)的第二層面： how
學(xué)習(xí)技術(shù)的第三層面： why
1： 第一層理解
本質(zhì)上一種文本標(biāo)記語言.
甚至可以說和我們熟悉的Markdown的標(biāo)記語言有點(diǎn)類似.
Markdown標(biāo)記語言轉(zhuǎn)換成HTML就是和HTML標(biāo)記語言一樣的語法.
-
目前接觸的標(biāo)記語言
- Markdown: 書寫文字排版的標(biāo)記語言
- HTML/CSS/JavaScript: HTMl 顯示網(wǎng)頁信息，CSS 對網(wǎng)頁信息進(jìn)行修飾惫周，JavaSript 對于網(wǎng)頁顯示動態(tài)信息
- LaTex: 主要使用在科學(xué)和數(shù)學(xué)領(lǐng)域?qū)ξ淖趾蛿?shù)學(xué)公式等排版
本質(zhì)都是標(biāo)記語言：約定一定的語法抒线，實現(xiàn)某種表現(xiàn)形式
2：第二層理解
主要的內(nèi)容包括：
|序號|內(nèi)容|說明|
|---|
|01|HTML,CSS的關(guān)系|分工明確|
|02|初始HTML標(biāo)簽|了解大框架概念|
|03|標(biāo)簽的語法|--|
|04|代碼注釋|每種語言都有特定的注釋約束|
|05|語義化|有些是網(wǎng)頁不顯示胰挑，但利于跳轉(zhuǎn)和搜索|
|06|body|主體內(nèi)容的存放|
|07|各種標(biāo)簽的含義和使用|--|
-
HTML：網(wǎng)頁內(nèi)容的載體
- HTML 指的是超文本標(biāo)記語言(Hyper Text Market Language)
- HTML 不是一種編程語言警儒，而是一種標(biāo)記語言
- 標(biāo)記語言是一套標(biāo)記標(biāo)簽
- HTML使用標(biāo)記標(biāo)簽來描述網(wǎng)頁
- 經(jīng)過瀏覽器的渲染而顯示出個各種內(nèi)容
-
CSS：是表現(xiàn)
- CSS指的是層疊樣式表(Cascading Style Sheets)
- 樣式定義了如何顯示HTML元素
- 樣式通常儲存在樣式表中
- 外部樣式表可以極大的提高工作效率
-
JavaScript：用來實現(xiàn)網(wǎng)頁上的特效效果
- JavaScript 是屬于網(wǎng)絡(luò)的腳本語言
HTML 標(biāo)記語言學(xué)習(xí)：
<html>
<head> </head>
<body> </body>
</html>
1: 整體布局
<html></html>:
稱為根標(biāo)簽训裆，所有的內(nèi)容都在里面，同時可以看到成對出現(xiàn)的標(biāo)簽形式.
<head> </head>:
用于定義文檔的頭部边琉，是所有頭部信息的容器记劝，一般的頭部信息有：title(網(wǎng)頁標(biāo)題)变姨、script、style(css樣式)厌丑、link定欧、meata
<body></body>:
是存放網(wǎng)頁的主要內(nèi)容怒竿，主要的標(biāo)簽有：h1(一級標(biāo)題)、p(段落)耕驰、a(鏈接)、img(圖片信息)
``
2: 標(biāo)簽的學(xué)習(xí)
``
標(biāo)簽的用途以及標(biāo)簽在瀏覽器中的默認(rèn)樣式
-
<body>網(wǎng)頁上顯示的內(nèi)容的主題部分</body>網(wǎng)頁上顯示的內(nèi)容的主題部分 -
<p>段落標(biāo)簽</p><p>段落標(biāo)簽</p> -
<hx>x(1-6)級標(biāo)題</hx><h6>6級標(biāo)題</h6> -
<em>強(qiáng)調(diào)的文本顯示斜體</em><em>強(qiáng)調(diào)的文本顯示斜體</em> -
<strong>強(qiáng)調(diào)的文本顯示粗體</strong><strong>強(qiáng)調(diào)的文本顯示粗體</strong> -
<span>設(shè)置單獨(dú)的樣式托嚣，配合css</span><span>設(shè)置單獨(dú)的樣式,配合css</span> -
<q>短文本引用厚骗，自動添加引號</q><q>短文本引用</q> -
<blockquote>長文本引用</blockquote><blockquote>長文本引用</blockquote> -
<br />添加回車<br /> -
前面有兩個空格前面有兩個空格 -
<hr / >添加橫線<hr />添加橫線 -
<address>上海市靜安區(qū):默認(rèn)顯示斜體</address><address>上海市靜安區(qū):默認(rèn)顯示斜體</address> -
<code>def f():pass</code><code>def f():pass</code> -
<pre>def f():pass</pre><pre>def f():pass</pre>
1: 無序和有序列表
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
2: 分塊
-
<div>將一些獨(dú)立的邏輯部分劃分出來兢哭，分塊，相當(dāng)于一個容器</div><div>容器一</div><div>容器二</div><div>容器三</div>
3: 表格：默認(rèn)不存在表框，需要配合CSS使用
<table>表格的標(biāo)簽</table><tbody>網(wǎng)頁表格全部下載完成才會顯示</tbody><tr>表示行</tr><th>表格表頭</th><td>表格的一個單元</td><table summary="表格簡介文本"></table>-
<caption>標(biāo)題文本</caption><caption>標(biāo)題文本</caption>
<table>
<tbody>
<caption>學(xué)生成績</caption>
<tr>
<th>班級</th>
<th>學(xué)生數(shù)</th>
<th>平均成績</th>
</tr>
<tr>
<td>一班</td>
<td>30</td>
<td>89</td>
</tr>
<tr>
<td>二班</td>
<td>35</td>
<td>85</td>
</tr>
<tr>
<td>三班</td>
<td>32</td>
<td>80</td>
</tr>
</tbody>
</table>
Markdown語法自動渲染出了表格邊框舍咖，網(wǎng)頁顯示默認(rèn)沒有,需要配合CSS.
<caption>學(xué)生成績</caption>
|班級|學(xué)生數(shù)|平均成績|
|--|
|一班|30|89|
|二班|35|85|
|三班|32|80|
4：標(biāo)簽屬性值
添加網(wǎng)址：
<a title="點(diǎn)擊進(jìn)入HTML教程">點(diǎn)擊進(jìn)入HTML教程</a>
<a title="點(diǎn)擊進(jìn)入HTML教程" >點(diǎn)擊進(jìn)入HTML教程</a><a title="點(diǎn)擊進(jìn)入HTML教程" target="_blank">點(diǎn)擊進(jìn)入HTML教程</a><a title="點(diǎn)擊進(jìn)入HTML教程">點(diǎn)擊進(jìn)入HTML教程</a>
兩者在網(wǎng)頁中的差別是前者在原網(wǎng)頁中加載目標(biāo)網(wǎng)址，后者新建一個標(biāo)簽頁打開目前網(wǎng)址
郵件：
-
<a href="mailto:1156143589@qq.com?subjec=研究匯報&body=空間模糊神經(jīng)網(wǎng)絡(luò)研究匯報進(jìn)展">郵件</a><a href="mailto:1156143589@qq.com?subjec=研究匯報&body=空間模糊神經(jīng)網(wǎng)絡(luò)研究匯報進(jìn)展">郵件</a>
mailto后為收件人地址民轴，cc后為抄送地址，bcc后為密件抄送地址瑰钮，subject后為郵件的主題，body后為郵件的內(nèi)容浪谴，如果Mailto后面同時有多個參數(shù)的話因苹，第一個參數(shù)必須以“?”開頭，后面的每一個都以“&”開頭扶檐。下面是一個完整的實例:mailto:aaa@xxx.com?cc=bbb@yyy.com&bcc=ccc@zzz.com&subject=主題&body=郵件內(nèi)容
插入圖片標(biāo)簽：
# 下圖顯示的是插入src地址圖片的顯示
Markdown和HTML標(biāo)記語言相通，但存在些許差別官卡，大多數(shù)的常用的HTML標(biāo)簽標(biāo)記直接寫在Markdown里都會實現(xiàn).
上述筆記存在不明白還是查看更官方的教程.
所以：為熟悉HTML語言醋虏，以后的Markdown筆記都直接使用HTML語言寫
