【HTML5】看這一篇h5就夠了！！！！

【HTML5】看這一篇h5就夠了！！！！
- 常見的瀏覽器以及瀏覽器的內核（針對面試）
- Web標準的組成
- 文字標簽
- 影像標簽
- 鏈接標簽
- 錨點定位
- base標簽
- 特殊字符——物體字符集
- 相對路徑與絕對路徑
- 串列標簽
- 表格
- input標簽
- h5的發展史
- h5新加的標簽
- html5新增的input type屬性
- 多媒體標簽
- 完結

【HTML5】看這一篇h5就夠了！！！！

之前，更新了關于前端的一部分內容，于是，我就開始琢磨著怎樣能夠系統的學習前端呢？對于剛剛入門前端的小白，提供一些學習路徑，首先：學習HTML以及H5的新特性—— 學習CSS以及CSS3——學習JS—— 學習vue——學習MySQL資料庫——學習node.js (前后端聯動需要會)
下來，我把我學完的h5進行總體的總結一下：

常見的瀏覽器以及瀏覽器的內核（針對面試）

1，什么是瀏覽器的內核？

瀏覽器的內核主要分為渲染引擎以及js引擎，

渲染引擎主要是讀取網頁的內容，比如：html，而html和css屬于標記性文本語言，是被動的形式讀取的，

js引擎主要是讀取js的相關內容，比如：js，而js屬于高級語言，以主動的形式進行讀取的，

現在已經把js引擎單獨拿出去，所以，瀏覽器的內核也就是渲染引擎，由于不同的瀏覽器顯示出來的內容也是不同的，

注：語言分為計算機語言、匯編語言以及高級語言，
計算機語言就是：010101以二進制的形式出現的，
匯編語言就是：以英文字母符號形式出現的，
高級語言就是：我們學習的C以及java以及js等等，

我們常常寫的高級語言需要編譯器編譯轉化成計算機語言才能顯示在計算機上，（編譯器比如：vscode 等等）

2.五大常見的瀏覽器以及瀏覽器的內核

微軟公司出的IE瀏覽器以及Edge瀏覽器

現在Edge瀏覽器正在替代IE瀏覽器
在這里插入圖片描1述
這個就是IE瀏覽器，內核為Trident.

在這里插入2圖片描述
這個就是Edge瀏覽器
在這里插入圖3片描述
這個就是火狐瀏覽器，內核為Gecko
在這里插入圖7片描述
這個是Safai瀏覽器，內核為webkit，是由蘋果公司研發
在這里插入圖片描述
這個就是谷歌瀏覽器，內核為blink

這個就是Opera瀏覽器，內核為Blink

Web標準的組成

1，web標準主要分為：結構標準、樣式標準以及行為標準，

結構標準：HTML
樣式標準：CSS
行為標準：JS

2，HTML骨架：

<html>
<head></head>//頭部標簽
<body></body>//身體標簽
</html>

3，HTML標簽的分類：
1，單標簽：< /> 如：

<br/> <hr/> <img/> <input/> <base/>

2，雙標簽：< >< /> 如：

<head> <head/>和<body></body>

注: html主要講的是標簽，絕大部分是雙標簽，少部分是單標簽

4，html標簽的關系
嵌套關系：（父子關系）比如：

<html>標簽與<body>標簽，屬于父子關系

并列關系：比如：

<head>標簽與<body>標簽，屬于并列關系

5.開發工具

我在前期已經發出關于開發工具的具體資訊，可進行查看，

6.決議基本框架：快捷鍵：! + tab鍵

生成后的基本框架為：

<!DOCTYPE html>//用于宣告H5
<html>
	<head>
		<meta charset="utf-8">//用于處理亂碼
		<title></title>//打開新的瀏覽器彈出來的名稱
	</head>
	<body>
	</body>
</html>

文字標簽

<p></p>//段落標簽
<hr /> //hr與斜杠存在空格
<br/>//換行標簽
<b></b>以及<strong></strong>//文字粗體
<i></i>以及<em></em>//文字斜體
<s></s>以及<del></del>//文字加洗掉線
<u></u>以及<ins></ins>//文字加下劃線

標簽的屬性：

<標簽名  屬性1 ="屬性1"  屬性2 = "屬性2">內容</標簽名>

例如：

<h1 width="500">小星星</h1>

影像標簽

<img src=""/>//src主要寫路徑
其他屬性：
alt :圖片不能顯示時的替換文本
title:當滑鼠懸停時顯示的內容
border:設定影像邊框的寬度

鏈接標簽

<a href=""></a>//href后面寫鏈接

注：
1，外部鏈接需要添加完成的鏈接（不要把http丟掉了哦），比如：

<a href="http://www.baidu.com">百度</a>

2，內部鏈接（內部頁面）可進行跳轉到寫好的頁面，比如：

<a href="index.html">首頁</a>

3.當沒有明確的目標的鏈接

<a href="#"></a>

4.可添加圖片

錨點定位

錨點定位：當滑鼠點擊某個東西的時候直接跳轉到相應的位置，比如：當在通訊錄里點擊X之后，直接跳轉到通訊錄里面首字母為X的內容.

使用方法：

1.使用<a href="#號id名來鏈接文本">
2.id名跳轉到目標位置

例如：使用id選擇器進行連接

<a href="#live">個人生活</a>
<h3 id="live">個人生活</h3>

base標簽

可在head里寫，可以設定整體鏈接打開的方式

<base target="_blank"/>//設定新的視窗打開百度或者新浪
<base target="_self"/>//當前視窗進行打開

特殊字符——物體字符集

用途	物體字符集
空格	&nbsp；
小于號	&lt；
大于號	p&gt；

注：這是幾個比較重要常用的，在使用的時候不要忘記后面的分號，比如放幾個空格就寫幾個物體字符集，

相對路徑與絕對路徑

相對路徑
1，影像與HTML檔案位于同一個檔案夾，只需要輸入檔案名即可，如：

<img src="index.png"/>

2,影像位于HTML檔案的下一級直接加 / ,比如：

在這里插入圖片描述

我想要3.png這張圖片

<img src="image/3.png"/>

3，影像位于html檔案的上一級，加". ./" 上兩級". ./. ./"以此類推，比如：

在這里插入圖片描述
我想要3.png圖片

<img src="../image/3.png"/>

注：路徑都是相對于html來說的
相對路徑
盡量不建議使用，相對路徑是相對與你自身電腦的存盤位置，

串列標簽

無序串列ul

<ul>
<li>串列1</li>
<li>串列2</li>
</ul>

顯示為：
在這里插入圖片描述

有序串列ol

<ol>
<li>串列1</li>
<li>串列2</li>
</ol>

顯示為：
在這里插入圖片描述

自定義串列dl

<dl>
<dt>串列1</dt>
<dd>串列2</dd>
</dl>

顯示為：
在這里插入圖片描述

表格

創建一個表格：

<table>
<tr></tr>//行
<td></td>//單元格
</table>

表格只有行和單元格，比如，我要寫一個三行三列的表格

<table width="500" height="300" border="1">
<tr>
<td>姓名</td>
<td>年齡</td>
<td>生日</td>
</tr>
<tr>
<td>張三</td>
<td>3</td>
<td>生日</td>
</tr>
<tr>
<td>李四</td>
<td>4</td>
<td>生日</td>
</tr>
<tr>
<td>小王</td>
<td>7</td>
<td>生日</td>
</tr>
</table>

顯示為：
在這里插入圖片描述
表格的屬性

border 表格的邊框  當border=0時無邊框
cellspacing 單元格與邊框的間距
cellpadding  單元格與文字之間的間距
align 水平對齊

表頭標簽
一般第一行或者第一列為表頭，想要表頭的文字加黑與其內容不一樣，可用th標簽代替td標簽，而且有一個好處自動居中，

<table width="500" height="300" border="1">
		<tr>
		<th>姓名</th>
		<th>年齡</th>
		<th>生日</th>
		</tr>
		<tr>
		<td>張三</td>
		<td>3</td>
		<td>生日</td>
		</tr>
		<tr>
		<td>李四</td>
		<td>4</td>
		<td>生日</td>
		</tr>
		<tr>
		<td>小王</td>
		<td>7</td>
		<td>生日</td>
		</tr>
		</table>

顯示為：
在這里插入圖片描述
表頭與主體
表頭的全部內容，我們可以全部寫在thead里
主題的全部內容，我們可以全部寫在tbody里
表格名字的標簽
一般我們畫一個表格，會在表格的最上方注明某某表格，使用caption

<table>
<caption>我是標題</caption>
</table>

顯示為：
在這里插入圖片描述
合并單元格
合并順序：先上先左其中，跨行合并：rowspan 跨列合并：colspan ，比如：

<th rowspan="4">生日</th>

顯示為：
在這里插入圖片描述
注：洗掉的個數 = 合并的個數 - 1

input標簽

input是一個單標簽，一般用于做表單，如下：
在這里插入圖片描述
主要是，做出如上表單，

<body>
		用戶名：<input type="text"><br/>
		密碼：<input type="password">
	</body>

顯示為：
在這里插入圖片描述
其他屬性：

屬性 屬性值 描述
type  text 單行輸入文字
     password 輸入密碼
     radio 單選按鈕
     checkbox 復選框
     button 普通按鈕
     submit 提交按鈕
     reset 重置按鈕
     image 影像形式的提交按鈕
     file 檔案域

使用方式和上面相同，

label標簽

當滑鼠滑上去的時候，游標發生顏色的變化，
1，當存在一個表單直接用label包裹起來，如下：

<label>用戶名：<input type="text"/></label>

2,當存在多個表單的時候，想要定位某個用for="id"進行鏈接

<label for="two">輸入賬號：<input type="text"/>
<input id="two" type="text"></label>

文本域
當你需要一個方框進行評論的時候，可用textarea控制元件，

<textarea>
	請輸入留言
</textarea>

顯示為：
在這里插入圖片描述
下拉選單

當我們點擊地區的時候，下面會彈出很多地區，

<select>
			<option>選擇省份</option>
			<option>陜西省</option>
			<option>河南省</option>
			<option>湖北省</option>
</select>

顯示為：
在這里插入圖片描述
當點擊旁邊的按鈕的時候，才會出來下面的省份，

表單域：form

<form action="**.php" method="post" namen="userName"></form>

其中，action：為url提交的地址；method:為提交的方式；name:為表單的名稱，一定要寫表單域的名稱，

h5的發展史

1993標記語言第一版——1995標記語言第二版——1996HTML3.2以及W3C標準——1999HTML4.0以及W3C標準——2000xhtml1.0——2001xhtml以及W3C標準——2008HTML5

h5新加的標簽

1，header:定義檔案的頭部
2，nav:定義導航欄鏈接部分
3，footer:定義檔案或節的頁腳底部
4，article:定義文章
5，section：定義檔案的節，區段
6，aside:定義內容之外的側邊
相關資訊可查看：網站 W3school.

datalist
datalist標簽定義選項串列，要與input元素配合使用，
實作百度一下，出現相應的內容，

<input type="text" value="明星"list="star"/>
<datalist id="star">
<option>劉德華</option>
<option>劉若英</option>
</datalist>

顯示為：
在這里插入圖片描述
當我們輸入劉的時候，下面就會有出現劉的內容

注: input里面用list，datalist里面用id進行連接起來，

fieldset標簽

使用時需要與legend搭配進行使用，顯示效果是在上方出現，

<fieldset>
			<legend>用戶登錄</legend>
			用戶名：<input type="text"/>
			密  碼：<input type="password">
		</fieldset>

顯示為：
在這里插入圖片描述

html5新增的input type屬性

<input type="email"/>//輸入郵箱
<input type="tel"/>//輸入手機
<input type="numble"/>//只允許輸入數字
<input type="url"/>//輸入網址
<input type="search"/>//搜素框
<input type="range"/>//輸入區域
<input type="time"/>//輸入時間
<input type="data"/>//輸入年月日
<input type="month"/>//輸入月
<input type="week"/>//輸入星期

常用的新特性
placeholder占位符，當用戶輸入的時候文字就消失
autofocus:自動獲取焦點（游標自動放進去），如：

<input type="text" placeholder="請輸入用戶名" autofocus="autofacus">

顯示為：
在這里插入圖片描述
我們可以看到游標（就是方框里面的那個豎線）放進去了

autocomplete屬性：自動提交

使用時，注意：
1，需要提交按鈕；
2，表單需要填入名字

<form action="">
			<input type="text" autocomplete name="userName"/>
			<input type="submit"/>
		</form>

顯示為：
在這里插入圖片描述
required屬性：不能為空
accesskey=“s”：自動定位游標，如：

<input type="text" raquired accesskey="s">

顯示為：
在這里插入圖片描述
當滑鼠滑倒相應的區域，游標即可自動定位，

多媒體標簽

embed:標簽定義嵌入的內容
audio:播放音頻
video:播放視頻

embed標簽

<embed src=""></embed>//引入視頻

audio標簽

<audio src=""></audio>//播放音頻
autoplay ="autoplay"自動播放音頻
controls出現播放的滾動條

video標簽

<video src=""></video>

完結

現在是，晚上00：46分，相對世界說聲晚安！

晚安！世界

關于我：
相關內容可訪問
零基礎入門前端《一》.
零基礎入門前端《二》.
零基礎入門前端《三》.
我是小幻幻，歡迎來我的博客！你的一個贊是我寫下去的動力哦！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/82783.html

標籤：其他

上一篇：Vue+element+cookie實作記住密碼功能

下一篇：遇見 vue.js --------阿文的vue.js學習筆記（3）----vue實體