html初學總結

undefineing發表於2020-12-13
HTML

告讀者

本文旨在為對HTML（hypertext markup language）超文字標記語言感興趣的朋友提供學習參考，由於本人尚才疏學淺，本文夾雜大量不規範的說法，出現紕繆也實屬正常，故此文僅可做為方便理解的參考，不可做圭臬。

版本

目前常用html版本有html4.0,xhtml,html5.0;
來個不太專業的區分：html4.0對於語法要求不是太高，所以不少野路子的學習者書寫風格較為粗獷，常常在一個瀏覽器上可以執行成功的檔案在另一個瀏覽器上就像中病毒了那樣，xhtml,就是為了解決這個問題而產生的，它的功能與html4.0相差無幾，但語法更為嚴格，力求減少bug,加強檔案移植性。html5.0的話使用的還是html4.0語法，但功能上更加豐富與方便，可以看作html4.0升級版。
雖然html5.0對於語法要求秉持html4.0語法的隨性，但為了之後的學習工作，嚴謹的書寫習慣是很重要的。

html基本結構

超文字標記語言Hyper Text Markup Language

主要作用：做資料展示(俗話說是做網頁)
來個初始程式碼瞧瞧結構

<!DOCTYPE html> 
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	222222222222222222222222222
</body>
</html>

下面是內容構成：
doctype ：
網頁響應檔案型別 後面可跟xhtml或html。
html lang:
lang是langue的縮寫它的值表示它的語言型別和它屬於哪一個地區的或者國家的網頁。
例如
html lang="en-US"英國
html lang=“zh-cn”(簡體，中國大陸)
html lang=“zh-hk”(繁體，中國香港)
值得一提的是該內容主要是給瀏覽器識別，對人展示的效果不明顯。
head:
表示頭部分用來裝頭元素的， 那些元素可以引用指令碼、指示瀏覽器在哪裡找到樣式表、提供元資訊等等，但一般不是給人看的。
body:
正文部分，裡面可以新增各種展示用標籤，一般一般操作都是在這裡面。
下面是不太嚴謹的整理
在這裡插入圖片描述

編譯軟體

編譯軟體就是執行程式的應用介面，雖然理論上html檔案在文字框寫也沒什麼，但畢竟只是理論上，一個初學的小白還是需要應用軟體進行引導操作。
以下：
1、AdobeDreamweaver

2、Microsoft Expression Web

3、CoffeeCup HTML Editor

4、sublime text
本人使用的是sublime text，因為我身邊用這軟體的人挺多的，方便我向人請教。

執行環境：
大部分瀏覽器都能執行html檔案，只是展示效果會有所區別，個人推薦下載一個火狐瀏覽器用於測試，在火狐瀏覽器上能實現的html檔案通常在其他瀏覽器上也沒問題。

標籤與屬性

在上文html基本結構中可知：html分為幾個大部分，現在則是要講檔案中更小的構成元素，也可以說基礎的構成元素，那就是標籤。

什麼是標籤？
按個人理解它是一種功能模組，實現某種功能的函式，HTML標籤是HTML語言中最基本的單位，HTML標籤是HTML（標準通用標記語言下的一個應用）最重要的組成部分，學習這一門語言通常也是對此開始著手。
什麼是屬性？
為了細調標籤所實現功能效果的開關，可以細調標籤的具體效果。

<br/>換行

<hr/>在上方加一條線

<head></head>引入頭元素
	
<title>sugar</title>瀏覽器位址列顯示標題“sugar”

<body></body>定義正文部分

這些都是標籤。

雙標籤和單標籤：
標籤有所分類，即單標籤和雙標籤，單標籤往往實行某種不需要引數的功能如：

<br/> 換行
<hr/>線
<img src="地址">插入圖片

這些是單標籤，只有一個尖括號，只需設定屬性。

<font size="5">sweet baby</font> 用size是屬性將文字“sweet baby”字型改為5號大小。
<p>no zuo no die so why you try</p>將文字尖括號內的文字定義為一行（html中通常會自動省去空格和換行）

這些是雙標籤，有兩個尖括號前後包住引數，往往需要對尖括號內的“引數”進行處理，修飾。

下面看看一些展示效果

<html>

<head>
<title>我的第一個 HTML 頁面</title>
</head>

<body>
<p>body 元素的內容會顯示在瀏覽器中。</p>
<p>title 元素的內容會顯示在瀏覽器的標題欄中。</p>
</body>

</html>

在這裡插入圖片描述
我們也可以使用body標籤中的align屬性來要展示的內容，這裡我們給align值center ，但還有left,right等值分別代表居中，左對齊，右對齊等功能。

<html>

<head>
<title>我的第一個 HTML 頁面</title>
</head>

<body align="center">
<p>body 元素的內容會顯示在瀏覽器中。</p>
<p>title 元素的內容會顯示在瀏覽器的標題欄中。</p>
</body>

</html>

在這裡插入圖片描述
html的學習總體來說就是對標籤功能的學習掌握

w3school
中有著所有標籤和屬性的詳細資訊可以方便查詢使用，故這裡只是簡單舉個例，不多加贅述。

在這裡插入圖片描述

小提示：
HTML標籤的大小寫無關，例如“主體”跟表示的意思是一樣的，推薦使用小寫。

常用標籤

上文講了一些基本結構和標籤的用法，接下來提一下常用標籤由於不少標籤僅靠圖片展示難以看出效果，所以還是得自己下去練習掌握。

<h1></h1>

定義標題，並非只有h1,，還有h2、h3、h4…到h6,h後面的數字文字字型表示大小，1最大6最小，h標籤在視覺層面就是加粗和字型調控罷了，但它對瀏覽器的索引有著影響，所以不可不加，也不能濫用。
看效果：

<html>

<head>
<title>我的第一個 HTML 頁面</title>
</head>

<body align="center">
<h1>我不是王毛</h1>
<h2>我不是王毛</h2>
<h3>我不是王毛</h3>
<h4>我不是王毛</h4>
<h5>我不是王毛</h5>
<h6>我不是王毛</h6>
</body>

</html>

在這裡插入圖片描述

<form>
	<input >
</form>

Form—表單
該標籤一般不會單獨使用 會和input標籤聯合使用所以先講input的使用
input標籤最常用type屬性，給這屬性賦值產生不同效果
值：
Text ----文字框
Password ----密碼框
Submit ----提交按鈕
Radio ----單選框
Checkbox ----多選框
Reset 重置按鈕
Button 普通的按鈕
老規矩，試一下：

<html>

<head>
<title>我的第一個 HTML 頁面</title>
</head>

<body align="center">
<form>
	<p><input type="text" ></p>
	<p><input type="password" ></p>
	<p><input type="submit" value="跳轉"></p>
	<p><input type="button" value="空"></p>
</form>
</body>

</html>

在這裡插入地述
總體來說input是實現新增一些可操作的小配件，如按鈕，可輸入框，單選多選等等，感興趣的自己下去試試。

form標籤主要用到兩個屬性
屬性：action=“url” url 表示路徑
屬性：Method=“”請求方式
屬性;Enctype
屬性;Target
action表示跳轉的路徑

<p><input type="submit" value="跳轉"></p>

submit是一個按鈕，我們並且用value屬性給它命了名
它的作用也確實是跳轉到其他html頁面，但那頁面的位置需要由form標籤的action屬性設定
例：

<html>

<head>
<title>我的第一個 HTML 頁面</title>
</head>

<body align="center">
<form action="14.html">
	
	<p><input type="submit" value="跳轉"></p>
	
</form>
</body>i

</html>

在這裡插入圖片描述

如以上效果整個網頁只有一個submit按鈕，但是當我們點選它時
在這裡插入圖片描述
它就跳轉到了同等資料夾下名為14.html的檔案中（跳轉的檔案是寫好的，不是無中生有）

路徑規則：
絕對路徑：從碟符開始 要描述的檔案路徑 路徑+檔案的名稱（d:/code/file樣式）
相對路徑：當前原始檔和目標檔案的相對路徑位置（以當前原始檔為定位目標，“.”表示上一層）

Method=“”請求方式有兩個值，post和get

<html>

<head>
<title>我的第一個 HTML 頁面</title>
</head>

<body align="center">
<form action="14.html" method="post">
	
	<p><input type="submit" value="跳轉"></p>
	
</form>
</body>

</html>

請求方式預設是get即在跳轉時在位址列顯示屬性的相關值
兩種請求方式都是能夠讓後臺接受到資料的
Get請求 不安全 會把name屬性的值暴露在位址列上 位址列預設大小為64kb

Post請求 安全 不會再位址列上暴露name屬性的值

Enctype 屬性規定form表單提交的資料的編碼
例如上傳檔案：二進位制編碼格式

Target屬性：
在這裡插入圖片描述

select標籤一般與option標籤連用
多選 使用multiple屬性

<html>

<head>
<title>我的第一個 HTML 頁面</title>
</head>

<body align="center">
<form  method="post">
	
	<select>
	<option>a</option>
	<option>b</option>
	<option>c</option>
	</select>
	
</form>
</body>

</html>

在這裡插入圖片描述

div標籤，定製分割槽,將原始檔內容分成一個個盒子模型，方便處理。但在無css參與的現在，其實效果不明顯

<html>

<head>
<title>我的第一個 HTML 頁面</title>
</head>

<body align="center">
<div>
<form  method="post">
	
	<select>
	<option>a</option>
	<option>b</option>
	<option>c</option>
	</select>
	
</form>
</body>
</div>
</html>

a標籤，超文字連結

<html>

<head>
<title>我的第一個 HTML 頁面</title>
</head>

<body align="center">
<div>
<form  method="post">
	
	<a href="14.html">跳轉</a>
	
</form>
</body>
</div>
</html>

在這裡插入圖片描述
效果和form的action類似只不過將按鈕換成了連結文字
另一種用法
錨點：使網頁的展示到達某一個定位的地點，name屬性設定地點

<html>

<head>
<title>我的第一個 HTML 頁面</title>
</head>

<body align="center">
<div>
<form  method="post">
	
	<a href="#d1">跳轉</a>
	<p>fdsafdfsfsdfdsdsfsa</p>
	<p>fdsafdfsfsdfdsdsfsa</p>
	<p>fdsafdfsfsdfdsdsfsa</p>
	<p>fdsafdfsfsdfdsdsfsa</p>
	<a name="d1">收到</a>
</form>
</body>
</div>
</html>

font標籤控制字型樣式但現在快被淘汰了

<html>

<head>
<title>我的第一個 HTML 頁面</title>
</head>

<body align="center">
<div>
<form  method="post">
	<font size="6" color="blue">文字</font>
</form>
</body>
</div>
</html>

在這裡插入圖片描述
img標籤插入圖片
屬性Src ----source 指代的是圖片的路徑 url
屬性Alt —表示影像的替代文字
屬性Width 寬度
屬性Height高度
該兩個屬性可以控制圖片的大小 單位可以使用XXpx 100%

<html>

<head>
<title>我的第一個 HTML 頁面</title>
</head>

<body align="center">
<div>
<form  method="post">
	<img src="image/i.jpg" alt="找不到狗子" width="%100" height="100%">
</form>
</body>
</div>
</html>

在這裡插入圖片描述

如果需要給圖片加上鍊接或錨點則可以使用Map 和area 這兩個標籤

參考

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

	<img src="image/1.jpg" alt="美女" usemap="#one">

	<map id="one" name="one">
	  <area 
	  shape="circle"
	  coords="240,92,10"
	  href="https://www.baidu.com/" >
	  </area>

	</map>

</body>
</html>

表格佈局

基本已淘汰，故不多做贅述，瞭解一二即可

主要使用的就是表格的標籤
Table ----表格
Tr ----錶行
Th ----表頭
Td -----表元

列表ol和ul還有dl標籤

<ol>
  <li></li>
</ol>

reversed
reverse------反轉
type型別中可以使用數字 字母 以及羅馬數字

<ul>
  <li></li>
</ul>

無序列表如名，它的前方存在無序的小圖示作為標誌

<dl>
	<dt>今天</dt>
	<dd>The day of today</dd>
	<dt>明天</dt>
	<dd>The day after today</dd>
</dl>

字型控制跑馬燈marquee

<marquee>這波操作666！</marquee>
<marquee behavior="alternate">我來回滾動</marquee> 
    <marquee behavior="scroll">我單方向迴圈滾動</marquee>
    <marquee behavior="scroll" direction="up" height="30">我改單方向向上迴圈滾動</marquee>            
    <marquee behavior="slide">我只滾動一次</marquee> 
    <marquee behavior="slide" direction="up">我改向上只滾動一次了</marquee> 
    <marquee scrollamount="100">我速度很快.</marquee> 
    <marquee scrollamount="50">我慢了些。</marquee> 
    <marquee scrolldelay="30">我小步前進。</marquee> 
    <marquee scrolldelay="1000" scrollamount="100">我大步前進。</marquee>

很好玩，但實用性不大

視訊vedio

<video src="video/final.mp4" controls="controls"></video>

音訊audio

<audio src="music/Pianoboy高至豪 - The truth that you leave.mp3" controls="controls"></audio>

常用的但是意義不明確的標籤
在html5中給

標籤做了很多的改進

多視窗框架
一個頁面可以顯示多個視窗
4.0 版本 多視窗
5.0版本中 內嵌視窗

注意：如果要使用frameset標籤那麼它不能和body標籤連用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	</head>
	<frameset rows="15%,*,15%">
	<frame src="2.html"></frame>
	<frameset cols="25%,*">
	<frame src="3.html"></frame>
	<frame src="4.html"></frame>
	</frameset>
	<frame src="6.html"></frame>
</frameset>
</html>

相關文章