HTML入門筆記1

提示：文章寫完後，目錄可以自動生成，如何生成可參考右邊的幫助文檔

文章目錄

- HTML入門筆記1
前言
一、HTML是什麼？
- 1. HTML 檔案的基本标記
- - 1. 标簽+開始标簽+頭部标簽+标題标簽+元資訊标簽
- 2.文字基本标記
- - 1. 各個标簽及其用法
- 3.表格的使用
- - 1. 表格的基本元素
  - - 1. 表格的标簽
    - - 1.表格标簽
      - 2.表格的結構标簽
- 4.表格大小和行内屬性
- - 1. 表格寬度+高度
  - 2. 行内文字對齊方式：水準/垂直對齊
  - 3. 設定**表格**樣式
  - 4.設定**單元格**樣式
- 5. 豐富網頁圖像的插入
- - 1. 圖檔的格式
  - - - 1. 插入圖檔
      - 2.添加超連結
- 6. 表單的使用
- - 1. 表單的基本标簽
  - 2. 表單基本屬性
- 7、插入表單對象（參考6）
- 8、網頁連結
- - 1.**超連結**标簽屬性：
  - 2、錨點連結
- 9、視聽效果
- - 1、插入多媒體
二、HTML5入門知識
- 1.新增功能
- 2.HTML5優勢
- 新的改變
- 功能快捷鍵
- 合理的建立标題，有助于目錄的生成
- 如何改變文本的樣式
- 插傳入連結接與圖檔
- 如何插入一段漂亮的代碼片
- 生成一個适合你的清單
前言
一、pandas是什麼？
二、使用步驟
- 1.引入庫
- 2.讀入資料
總結

前言

提示：這裡可以添加本文要記錄的大概内容：

例如：随着人工智能的不斷發展，機器學習這門技術也越來越重要，很多人都開啟了學習機器學習，本文就介紹了機器學習的基礎内容。

提示：以下是本篇文章正文内容，下面案例可供參考

一、HTML是什麼？

HTML不是程式設計語言，是一款描述性的标記語言，用于描述超文本中内容的顯示方式,全稱“Hyper Text Markup Language（超文本标記語言）”。

基本文法：<标記符>内容</标記符>

1. HTML 檔案的基本标記

1. <!DOCTYPE>标簽+開始标簽+頭部标簽+标題标簽+元資訊标簽

*<!DOCTYPE>*标簽：訓示Web浏覽器關于頁面使用哪個HTML版本進行編寫的指令，聲明必須位于HTML文檔第一行，<html >标簽之前。不分大小寫，沒有結束标簽。

開始标簽：<html> < /html >

< >

頭部标簽：< head>頭部< /head>

主體标簽：< body>身體 < /body> 由于定義文檔頭部，是所有頭部元素的容器。< head> 中的元素可以引用腳本、訓示浏覽器在哪裡找到樣式表、提供元素資訊。文檔的頭部描述了文檔的各自屬性和資訊、包括文檔标題，在Web中的位置以及其他文檔的關系等。

标題标簽：<tltle >

标題</title > 定義文檔标題 <h1 >—<h6 >标題由大到小、由主到次依次排列标題以粗體顯示

元資訊标簽：<meta name=“description/ keywords” content=“頁面說明” > < meta> 标簽永遠位于head元素内部，可提供有關頁面的元資訊，比如針對搜尋引擎和更新頻度的描述和關鍵詞。 < meta>标簽位于文檔頭部，不包含任何内容，name 屬性定義了名稱/值對中的名稱

<html>
	<head>
		這裡是文檔頭部
		<meta name="description/ keywords" 	content="頁面說明">
		<title>文檔的标題</title>
	</head>
	<body>
		這裡是文檔内容
	</body>
</html>

2.文字基本标記

1. 各個标簽及其用法

段落标簽：< p> 一段文字< /p>

加粗标簽：< b>

傾斜标簽：< i>

換行标簽：< br> 每個<br >代表換行一次，文法就是< br>

不換行标簽：< nobr > 在網頁中隻顯示一行

<!DOCTYPE>
<html>
	<head>
		這裡是文檔頭部
		<meta http-equiv="Content-Type"	content="text/html"	charset="utf-8"	/>
		<title>标簽的使用</title>
	</head>
	<body>
		<p>床前明月光，疑是地上霜。舉頭望明月，低頭思故鄉。</p>
		<p>床前明月光，疑是地上霜。</p>
		<p><b>床前明月光，疑是地上霜。</b></p>	//加粗
		<p><i>床前明月光，疑是地上霜。</i></p>	//傾斜
		<p>床前明月光，疑是地上霜。<br>舉頭望明月，低頭思故鄉。</p>										//換行
		  <p> <nobr>從小丘西行百二十步，隔篁竹，聞水聲，如鳴珮環，心樂之。伐竹取道，下見小潭，水尤清冽。
    全石以為底，近岸，卷石底以出，為坻，為嶼，為嵁，為岩。青樹翠蔓，蒙絡搖綴，參差披拂。
    潭中魚可百許頭，皆若空遊無所依，日光下澈，影布石上。佁然不動，俶爾遠逝，往來翕忽，似與遊者相樂。
    潭西南而望，鬥折蛇行，明滅可見。其岸勢犬牙差互，不可知其源。
    坐潭上，四面竹樹環合，寂寥無人，凄神寒骨，悄怆幽邃。以其境過清，不可久居，乃記之而去。
    同遊者：吳武陵，龔古，餘弟宗玄。隸而從者，崔氏二小生：曰恕己，曰奉壹。</nobr></p>
	</body>
</html>

效果如圖：

HTML入門前言一、HTML是什麼？二、HTML5入門知識前言一、pandas是什麼？二、使用步驟總結

3.表格的使用

1. 表格的基本元素

表格：網頁排版的布局工具

表格中各元素：

行和列：行标簽< tr> < /tr>

水準線： < hr/>

單元格：單元格标簽<td >< /td>

邊距：單元格中内容與邊框之間的距離

間距：單元格和單元格之間的距離

表格三要素：行、列、單元格

表格的嵌套：一個表格的單元格中插入另一個表格，大小受單元格大小限制

PS： <td>（單元格）和<th>（行）差別：

<th>定義表格内的表頭單元格（通常為第一行），在單元格中加粗顯示，且居中

<td>正常字型，預設左對齊，不加粗

< >

1. 表格的标簽

1.表格标簽

用來定義整個表格的屬性，一個表格隻能出現一次

<table  border="表格的邊框粗細為幾像素"	width="寬度值"	height="行高值">
</table>
如：<table  border="1"></table>		表格的邊框粗細為1像素

2.表格的結構标簽

表格标題：< caption> 表格标題< /caption>
表首标簽：< thead> 用于定義表格最上端表首的樣式

表主體标簽：<tbody> <tbody bgcolor=“背景顔色” align=“文本對齊方式” ></tbody>

表尾标簽：<tfoot>

<tfoot bgcolor=“背景顔色” align=“文本對齊方式” ></tfoot>

4.表格大小和行内屬性

1. 表格寬度+高度

<table width="寬度數值/百分比">
<table height="寬度數值/百分比">
<table width="400"></table>			*width="400":絕對寬度
								*width="100%":"100%"由上一層元素的寬度決定

表格中行的屬性

** h5中不支援bgcolor

2. 行内文字對齊方式：水準/垂直對齊

水準：left、right、center 預設左對齊，align屬性規定選中行的水準對齊方式，不受整個表格對齊方式的影響，當單元格設定對齊方式時，會被其所覆寫。

垂直：top、bottom、middle

<tr align="水準對齊"></tr>

<tr valign="垂直對齊"></tr>

3. 設定表格樣式

邊框寬度/高度+邊框顔色+單元格間距+文字與邊框間距+背景顔色+插入背景圖檔

<table width="寬度值" height="高度值" 
border="邊框粗細" bordercolor="邊框顔色" 
cellspacing="單元格間距值" cellpadding="文字與邊框間距值" bgcolor="背景顔色"	background="圖檔位址">
</table>

4.設定單元格樣式

合并單元格：colspan和rowspan屬性，将相鄰單元格合并成一個單元格

<td width="單元格寬度" height="單元格高度"  
bgcolor="顔色" bordercolor="邊框顔色" 
colspan="跨的列數(水準跨度)"	rowspan="跨的行數（垂直跨度）" align="center" ></td>

<td style="border-color:#99ff00;">立春</td>

5. 豐富網頁圖像的插入

1. 圖檔的格式

一般分為3種，JPG、GIF（分為靜态和動态GIF）、PNG

1. 插入圖檔

img元素相關屬性定義：

src:圖檔源檔案

alt:提示文字

width:圖檔寬度

height:圖檔高度

border:圖檔邊框

<body>
<img src="圖檔位置"	title="提示文字"	alt="提示文字"	
align="對齊方式（垂直/水準對齊）"	
height="圖檔高度"	width="圖檔寬度"	border="邊框粗細" >
</body>

PS:title/ alt差別：

圖檔顯示時（title:滑鼠經過提示文字）

圖檔不顯示時（alt代替圖像顯示在浏覽器中的内容，經過文字區域時顯示title）

2.添加超連結

6. 表單的使用

1. 表單的基本标簽

标簽
标簽

type 可以選擇的類型種類：

text：文本框

radio：單選框

checkbox：複選框

button：按鈕

hidden：隐藏域

image：圖檔

password：密碼輸入框

submit：送出按鈕

reset：重置按鈕

file：檔案域
textarea 标簽：定義多行文本輸出控件，文本區中可容納無限數量的文本

換行方式：virtual 、off(不換行)、physical（手動換行）
select 标簽：生成一個清單

size 屬性的值大于 1，但是小于清單中選項的總數目，浏覽器會顯示出滾動條，表示可以檢視更多選項，按住ctrl可以多選；等于1或者不設定，multiple屬性無意義

<form action="執行程式位址（跳轉下一個頁面位址）" 	method="傳遞方式">
<input type="類型" name="屬性/名稱" value="取值（預設值）"	
size="控件長度"	maxlength="文本框裡可以輸入的最長字元數">
<textarea name="名稱（content）" cols="列數" rows="行數" wrap="換行方式" ></textarea>
<select multiple size="下拉清單中可見選項的數目" name="選擇項目數">

</select>
</form>

圖像按鈕：
<input type="image" name="submit" src="圖檔位址">

2. 表單基本屬性

action：制定表單送出到哪個位址進行處理
name：不是必要，為了差別送出到背景的表單，避免出現混亂（設定屬性時不能有空格/特殊字元）
method：指定表單的資料送出到伺服器時使用的HTTP，取值：get/post

get/post差別：[參考來源](https://zhidao.baidu.com/question/87535798.html)
一、功能不同
1、get是從伺服器上擷取資料。		2、post是向伺服器傳送資料。 
二、過程不同
1、get是把參數資料隊列加到送出表單的action屬性所指的URL中，值和表單内各個字段一一對應，在URL中可以看到。
2、post是通過HTTP post機制，将表單内各個字段與其内容放置在HTML HEADER内一起傳送到屬性所指的URL位址。使用者看不到這個過程。 
三、擷取值不同
1、對于get方式，伺服器端用Request.QueryString擷取變量的值。
2、對于post方式，伺服器端用Request.Form擷取送出的資料。 
四、傳送資料量不同
1、get傳送的資料量較小，不能大于2KB。
2、post傳送的資料量較大，一般被預設為不受限制。但理論上，IIS4中最大量為80KB，IIS5中為100KB。 
五、安全性不同
1、get安全性非常低。				2、post安全性較高。 
如果沒有加密，他們安全級别都是一樣的，随便一個監聽器都可以把所有的資料監聽到。

enctype 屬性
target 屬性：_top、_blank 、_parent 、 _self

<form action="執行程式位址（跳轉下一個頁面位址）"  name="表單名稱(form1)"
		method="傳遞方式"	enctype="編碼方式" 	target="視窗打開方式">
</form>

7、插入表單對象（參考6）

<input type="類型" name="屬性/控件名稱" value="取值（預設值）"	
size="控件長度"	maxlength="文本框裡可以輸入的最長字元數">

菜單清單

<select name="選擇項目數">
<option value="選項值" >值</option>
</select>

8、網頁連結

1.超連結标簽屬性：

标簽：<a>

herf：指定連結位址
name：命名連結
target：指定連結的目标視窗
title：給連結設定提示文字
accesskey：指定連結熱鍵

_top ：在頂層架構打開連結
_self ：在目前頁面打開連結
_blank ：在一個全新的空白視窗中打開連結
_parent ：在父視窗/目前頁面打開連結

2、錨點連結

建立錨點： <a name="#錨地的名稱">文字</a>
建立郵件連結： <a href="mailto:郵件位址" target="_blank" rel="external nofollow" >文字</a>
建立下載下傳連結： <a href="檔案位址" target="_blank" rel="external nofollow" >文字</a>

9、視聽效果

1、插入多媒體

插入動畫 <embed src="多媒體檔案位址" width="多媒體寬度" height="多媒體高度">
插入音頻 <embed src="路徑.mp3" width="多媒體寬度" height="多媒體高度">

二、HTML5入門知識

1.新增功能

代碼如下（示例）：

import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import warnings
warnings.filterwarnings('ignore')
import  ssl
ssl._create_default_https_context = ssl._create_unverified_context

2.HTML5優勢

代碼如下（示例）：

data = pd.read_csv(
    'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())

該處使用的url網絡請求的資料。

你好！這是你第一次使用 Markdown編輯器所展示的歡迎頁。如果你想學習如何使用Markdown編輯器, 可以仔細閱讀這篇文章，了解一下Markdown的基本文法知識。

新的改變

我們對Markdown編輯器進行了一些功能拓展與文法支援，除了标準的Markdown編輯器功能，我們增加了如下幾點新功能，幫助你用它寫部落格：

全新的界面設計，将會帶來全新的寫作體驗；
在創作中心設定你喜愛的代碼高亮樣式，Markdown 将代碼片顯示選擇的高亮樣式進行展示；
增加了圖檔拖拽功能，你可以将本地的圖檔直接拖拽到編輯區域直接展示；
全新的 KaTeX數學公式文法；
增加了支援甘特圖的mermaid文法1 功能；
增加了多螢幕編輯 Markdown文章功能；
增加了焦點寫作模式、預覽模式、簡潔寫作模式、左右區域同步滾輪設定等功能，功能按鈕位于編輯區域與預覽區域中間；
增加了檢查清單功能。

功能快捷鍵

撤銷：Ctrl/Command + Z

重做：Ctrl/Command + Y

加粗：Ctrl/Command + B

斜體：Ctrl/Command + I

标題：Ctrl/Command + Shift + H

無序清單：Ctrl/Command + Shift + U

有序清單：Ctrl/Command + Shift + O

檢查清單：Ctrl/Command + Shift + C

插入代碼：Ctrl/Command + Shift + K

插傳入連結接：Ctrl/Command + Shift + L

插入圖檔：Ctrl/Command + Shift + G

查找：Ctrl/Command + F

替換：Ctrl/Command + G

合理的建立标題，有助于目錄的生成

直接輸入1次#，并按下space後，将生成1級标題。

輸入2次#，并按下space後，将生成2級标題。

以此類推，我們支援6級标題。有助于使用

TOC

文法後生成一個完美的目錄。

如何改變文本的樣式

強調文本強調文本

加粗文本加粗文本

标記文本

删除文本

引用文本

H2O is是液體。

210 運算結果是 1024.

插傳入連結接與圖檔

連結: link.

圖檔:

HTML入門前言一、HTML是什麼？二、HTML5入門知識前言一、pandas是什麼？二、使用步驟總結

帶尺寸的圖檔:

HTML入門前言一、HTML是什麼？二、HTML5入門知識前言一、pandas是什麼？二、使用步驟總結

居中的圖檔:

HTML入門前言一、HTML是什麼？二、HTML5入門知識前言一、pandas是什麼？二、使用步驟總結

居中并且帶尺寸的圖檔:

HTML入門前言一、HTML是什麼？二、HTML5入門知識前言一、pandas是什麼？二、使用步驟總結

當然，我們為了讓使用者更加便捷，我們增加了圖檔拖拽功能。

如何插入一段漂亮的代碼片

去部落格設定頁面，選擇一款你喜歡的代碼片高亮樣式，下面展示同樣高亮的

代碼片

// An highlighted block
var foo = 'bar';

生成一個适合你的清單

提示：文章寫完後，目錄可以自動生成，如何生成可參考右邊的幫助文檔

文章目錄

- HTML入門筆記1
前言
一、HTML是什麼？
- 1. HTML 檔案的基本标記
- - 1. 标簽+開始标簽+頭部标簽+标題标簽+元資訊标簽
- 2.文字基本标記
- - 1. 各個标簽及其用法
- 3.表格的使用
- - 1. 表格的基本元素
  - - 1. 表格的标簽
    - - 1.表格标簽
      - 2.表格的結構标簽
- 4.表格大小和行内屬性
- - 1. 表格寬度+高度
  - 2. 行内文字對齊方式：水準/垂直對齊
  - 3. 設定**表格**樣式
  - 4.設定**單元格**樣式
- 5. 豐富網頁圖像的插入
- - 1. 圖檔的格式
  - - - 1. 插入圖檔
      - 2.添加超連結
- 6. 表單的使用
- - 1. 表單的基本标簽
  - 2. 表單基本屬性
- 7、插入表單對象（參考6）
- 8、網頁連結
- - 1.**超連結**标簽屬性：
  - 2、錨點連結
- 9、視聽效果
- - 1、插入多媒體
二、HTML5入門知識
- 1.新增功能
- 2.HTML5優勢
- 新的改變
- 功能快捷鍵
- 合理的建立标題，有助于目錄的生成
- 如何改變文本的樣式
- 插傳入連結接與圖檔
- 如何插入一段漂亮的代碼片
- 生成一個适合你的清單
前言
一、pandas是什麼？
二、使用步驟
- 1.引入庫
- 2.讀入資料
總結

前言

提示：這裡可以添加本文要記錄的大概内容：

例如：随着人工智能的不斷發展，機器學習這門技術也越來越重要，很多人都開啟了學習機器學習，本文就介紹了機器學習的基礎内容。

提示：以下是本篇文章正文内容，下面案例可供參考

一、pandas是什麼？

示例：pandas 是基于NumPy 的一種工具，該工具是為了解決資料分析任務而建立的。

二、使用步驟

1.引入庫

代碼如下（示例）：

import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import warnings
warnings.filterwarnings('ignore')
import  ssl
ssl._create_default_https_context = ssl._create_unverified_context

2.讀入資料

代碼如下（示例）：

data = pd.read_csv(
    'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())

該處使用的url網絡請求的資料。

總結

提示：這裡對文章進行總結：

例如：以上就是今天要講的内容，本文僅僅簡單介紹了pandas的使用，而pandas提供了大量能使我們快速便捷地處理資料的函數和方法。

mermaid文法說明 ↩︎

HTML入門前言一、HTML是什麼？二、HTML5入門知識前言一、pandas是什麼？二、使用步驟總結

HTML入門筆記1

文章目錄

前言

一、HTML是什麼？

1. HTML 檔案的基本标記

1. <!DOCTYPE>标簽+開始标簽+頭部标簽+标題标簽+元資訊标簽

2.文字基本标記

1. 各個标簽及其用法

3.表格的使用

1. 表格的基本元素

1. 表格的标簽

1.表格标簽

2.表格的結構标簽

4.表格大小和行内屬性

1. 表格寬度+高度

2. 行内文字對齊方式：水準/垂直對齊

3. 設定表格樣式

4.設定單元格樣式

5. 豐富網頁圖像的插入

1. 圖檔的格式

1. 插入圖檔

2.添加超連結

6. 表單的使用

1. 表單的基本标簽

2. 表單基本屬性

7、插入表單對象（參考6）

8、網頁連結

1.超連結标簽屬性：

2、錨點連結

9、 視聽效果

1、插入多媒體

二、HTML5入門知識

1.新增功能

2.HTML5優勢

新的改變

功能快捷鍵

合理的建立标題，有助于目錄的生成

如何改變文本的樣式

插傳入連結接與圖檔

如何插入一段漂亮的代碼片

生成一個适合你的清單

文章目錄

前言

一、pandas是什麼？

二、使用步驟

1.引入庫

2.讀入資料

總結

繼續閱讀

9、視聽效果