HTML

時間 2021-08-12

標籤 html html5 java web 數據庫瀏覽器服務器架構框架 ide 欄目 HTML 简体版

原文原文鏈接

參考學習視頻

https://www.bilibili.com/video/BV1XJ411X7Ud?t=98&p=44html

W3C

1994年 伯納斯李建立了w3c
w3c爲了制定網頁開發的標準。使用同一個網頁在不一樣的瀏覽器中有相同的效果
結構、表現、行爲三個部分構成一個網頁

網頁的結構

結構html：用來描述頁面的結構
表現Css：控制頁面中元素的樣式
行爲js：用來響應用戶的操做

標籤中的屬性

屬性：在標籤中（開始標籤或者自結束標籤）設置屬性
屬性：是一個鍵值對：x=y ；用來設置標籤中的內容如何顯示
屬性和標籤之間用空格隔開 font color = "red"
屬性名是w3c中規定好了的，若是有屬性值，那麼經過單引號或者雙引號來包裹

網頁的基本結構

網頁的迭代

html4.0
xhtml2.0
html5

文檔聲明（doctype）

用來告訴瀏覽器是啥版本
html5的文檔聲明：<!doctype html> 不區分大小寫哦放在html首行
嚴格來講 doctype不屬於html中的標籤

關於進制

數數的方式html5

啥進制，滿啥就進1 進1後從0開始，啥進制，就幾位算滿了java

二進制：滿2進1 ； 0 1 10 11 100
十進制：滿10進1 從0到9 （單位數字）到了10 這裏進了1位，從0又開始
十六進制
八進制

關於編碼

編碼：將字符轉成二進制的過程
解碼：將二進制碼轉字符
規則：字符集（charset) 例如：ASCII碼錶

亂碼問題

若是編碼和解碼採用的字符集不一樣，則會出現亂碼，常見的就是ASCII、ISO859一、 GB23十二、UTF- 8(萬國碼)web

設置字符集

<meta charset='utf-8'>數據庫

html文檔規範

<!-- 文檔聲明 聲明當前網頁的版本 -->
<!doctype html>
<!--- html的根標籤（元素） 網頁全部都在根元素中 -->
<html>

	<!-- 是網頁的頭部，head中的內容不會再網頁中出現，主要是用來瀏覽器和搜索引擎計解析（爬蟲） -->
	<head>
		<!-- meta 用來設置元數據，這裏設置了網頁的字符類型，避免亂碼 -->
		<meta charset='utf-8'>
        <!-- title中的內容會顯示在瀏覽器的標題欄，搜索引擎主要根據titile中的內容來判斷網頁的主要內容 -->
         <title>我是標題</title>
	</head>
		 <!-- body是html的資源數，表示網頁的主題，網頁中全部的內容都應該在body裏 -->
	<body>
       <!-- h1 是網頁的一級標題 -->
        <h1>
            大標題哦
        </h1>
    </body>
</html>

VScode插件推薦

名稱: Chinese (Simplified) Language Pack for Visual Studio Code
名稱: Ayu
名稱: Live Server瀏覽器

實體

在網頁中，編寫多個空格，瀏覽器會自動解析成一個空格服務器
在htm中，咱們不能直接書寫一些特殊符號，好比大於小於號架構
若是咱們須要在網頁中，不想要瀏覽器將這些特殊符號進行轉義了則須要使用轉義字符框架
實體的語法： &實體的名字;ide
```
&nbsp;
```
參考https://www.w3school.com.cn/html/html_entities.asp

語義化標籤

html主要就是學習語義化標籤，也就是對總體網頁架構的搭建。網頁的用途是幹啥，來規範的使用相關的標籤
使用html標籤的時候，只關注標籤的語義，而不是樣式

例如H1標籤

h1 在網頁中重要性僅次於titile，通常狀況一個頁面只有一個h1

塊元素

在頁面中佔一行的元素
標題標籤都是快級元素

<h2>ｈｅｌｌｏｗｏｒｌｄ</h2>

標題組hgroup

將相關的標題放在hgroup中來分組管理

<hgroup>
        <h1>我是一級標題</h1>
        <h2>我是二級標題</h2>
    </hgroup>

em語調加劇

<p>今天你很<em>好</em></p>

強調Strong

強調默認有加粗效果

<!-- strong 表示強調，重要內容 -->
    <p>今天你很<strong>好看</strong</p>

blockquote長引用

<!-- blockquote 表示一個長引用，也是一個塊級元素，獨佔一行 -->
    <p>我愛吃<blockquote>yxqz</blockquote</p>

q短引用

<!-- q表示一個短引用 行內元素，語言引用 -->
    <p>我要<q>吃一大堆的茄子</q></p>

相對路徑

當咱們要跳轉到服務器內部頁面的時候
使用相對路徑，都使用./ ../開頭
./ 能夠省略，若是不寫./和../ 默認就是./

./ 表示當前文件所在的目錄
../ 表示當前目錄的上一級目錄下的文件

超連接

從一個頁面跳轉到其餘的頁面，或者是當前頁面的某個位置
a標籤
連接也是一個行內元素，在a標籤中能夠嵌套（除a）任何的元素

vscode的快捷鍵 alt+shift+下或者上複製

href屬性：指定跳轉的目錄

href的值：

能夠是一個外部網站的地址
能夠是內部的頁面地址這裏須要區分相對路徑和覺對路徑

trage屬性：用來指定超連接打開的位置

trage的值：

_self 默認值：在當前頁面中打開超連接
_blank 在一個新的窗口打開超連接

id 屬性：惟一不重複

在開發中，能夠用#做爲href的佔位符
也能夠javascripot:; 佔位符
能夠直接將超連接的href屬性設置#，點擊超連接後頁面不會跳轉，而是轉到當前頁面的頂部位置

<!-- trage屬性：
        用來指定超連接打開的位置
            _self 默認值：在當前頁面中打開超連接
            _blank 在一個新的窗口打開超連接
     -->
    <a href="./07-列表.html" target="_blank">超連接</a>

    <a href="#dibu" >回到底部 </a>
        <!-- lorem -->
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non impedit, porro eos delectus, earum hic itaque facilis odit, aspernatur labore. Qui, nam ex! In accusamus quibusdam quo temporibus itaque!</p>
    
    <!-- 
        id 屬性 惟一不重複
        在開發中，能夠用#做爲href的佔位符
        也能夠javascripot:; 佔位符
        能夠直接將超連接的href屬性設置#，點擊超連接後頁面不會跳轉，而是轉到當前頁面的頂部位置 -->
    
    
    <a id="dibu" href="#" >回到頂部 </a>

圖片標籤

圖片標籤用來向當前頁面引入一個外部圖片
使用img標籤來引入外部圖片，img是一個自結束標籤
src: 外部圖片的路徑（規則和超連接同樣）
alt：圖片的描述，默認狀況是不顯示的，圖片在沒法加載，或者是沒法找到圖片
width：指定圖片的寬度（單位是像素）
height：指定圖片的高度
若是隻修改了高度，或者只修改了寬度，默認另外一個等比例縮放（正方形）

搜索引擎也會經過alt的內容來識別圖片，若是不寫alt，搜索引擎收錄

在pc端，不建議修改圖片的大小，須要多大，就直接用原生多大的圖片，移動端就須要對圖片進行縮放（大圖縮小，非原生圖片）

<img src="http://p9.qhimg.com/bdr/__85/t0199ac0a6f007265ee.jpg" alt="魚香茄子">

圖片格式

jpeg（jpg）：支持顏色比較豐富，不支持動圖，通常照片
gif：支持的顏色比較少，支持動圖，支持簡單透明，通常顏色單一的動圖
png：顏色豐富，支持複雜透明，不支持動圖，顏色豐富，複雜透明圖片（網頁最多）
webp：谷歌新推的專門用來網頁中的圖片的一種格式，具有上面的三種功能，缺點：老瀏覽器沒法識別
base64：將圖片使用base64編碼，將圖片轉成字符，經過字符來引入圖片（我認爲在持久化數據庫很方便啊，一塊兒請求就完事了，提升網站的響應速度），通常和網頁一塊兒加載

效果同樣用小的，效果不一樣用效果好的

內聯框架（iframe）

src 指定引入的網頁的路徑
frameborder：指定的內聯框架的邊框
內聯框架中的網頁不會被爬蟲

<iframe src="https://blog.yxqz.top/" width="800" height="600" frameborder="0"></iframe>

音視頻

audio：用來向頁面中引入一個外部的音頻文件，也是一個替換標籤
音視頻文件引入的時候，默認狀況下是不能讓用戶本身控制播放的
controls：是否用戶控制播放（控制器），是判斷這個屬性是否存在。
autoplay：音頻自動播放，若是設置了autoplay ，則音樂在打開頁面後就自動播放，大部分瀏覽器都不會自動播放
loop：循環播放

<audio src="./resource/audio.mp3" controls loop autoplay></audio>

除了經過src指定外部文件，能夠經過source標籤的src來指定

source

使用soruce能夠控制版本問題
source能夠解決引入多個資源的問題
在第一個source標籤中的資源沒法使用時候，那麼就能夠執行下一個source標籤資源
使用source標籤，能夠在以前只使用src的基礎上使用多個src（例如一個音頻，多個格式，mp3,ogg，mp3不支持，就使用source其餘的音頻格式）
適合在瀏覽器版本的適配或者資源格式適配
source也是一種替換標籤
使用source標籤引入資源的時候，若是有同種資源，同種格式，只要瀏覽已經識別了，那麼其餘相同的source引入的資源就不會被識別了。embed也是相似，例以下面的mp3格式，有兩個相同格式的資源，可是隻會解析一個資源

<audio controls>
        <source src="./resource/audio.mp3" >
        <source src="./resource/audio.mp3" >
        <source src="./resource/audio.ogg" >
    </audio>

其實如今使用src直接引入或者source標籤引入，不兼容的時候都會有友好的提示的

embed

兼容老版本ie
須要指定type的文件類型: audio/mp3 這裏的audio 表明的是音頻資源格式是mp3
通常和source搭配使用

例以下面的代碼。在某個ie版本或其餘瀏覽器版本沒法識別到ogg格式的時候，則會讀取embed中的資源

<audio controls>
        <source src="./resource/audio.mp3" >
        <source src="./resource/audio.mp3" >
        <source src="./resource/audio.ogg" >
        <embed src="./resource/audio.ogg" type="audio/ogg">
    </audio>