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