HTML學習筆記

時間  2020-06-03
標籤 html 學習 筆記 欄目 HTML 简体版
原文   原文鏈接

瀏覽器內核（Rendering Engine）

負責讀取網頁內容，整理訊息，計算頁面顯示方式並顯示頁面html

瀏覽器 內核 備註
IE Trident IE、獵豹安全、360極速瀏覽器、百度瀏覽器
Firefox Gecko --
Safari WebKit --
Chrome Chromium/Blink Blink是WebKit的分支，Chromium項目中研發Blink渲染引擎（瀏覽器核心），內置於Chrome瀏覽器中，大部分國產瀏覽器最新版採用Blink內核，二次開發
Opera Blink --

Android，使用最高頻率的是WebKit內核；ios，大部分自帶瀏覽器內核，通常是Safari或者Tridentios

WEB 標準

構成

主要包括結構（structure）、表現（presentation）和行爲（behavior）三個方面ajax

標準 說明
結構 結構用於對網頁元素進行整理和分類
表現 表現用於設置網頁元素的版式、顏色和大小等外觀樣式
行爲 行爲是指網頁模型的定義以及交互的編寫

HTML

HTML指的是超文本標記語言（Hyper Text Markup Language）
HTML不是一種編程語言，而是一種標記語言（markup language）
標記語言是一套標記標籤（markup tag）編程

HTML骨架標籤

<html>
    <head>
        <title></title>
    </head>
    <body>
    </body>
</html>
標籤名 定義 說明
<html></html> HTML標籤 頁面中最大的標籤，根標籤
<head></head> 文檔的頭部 在head標籤中必須設置的標籤是title
<title></title> 文檔的標題 讓頁面擁有一個屬於本身的網頁標題
<body></body> 文檔的主體 元素包含文檔的全部內容，頁面內容基本都是放到body裏面

HTML元素標籤

一、常規元素（雙標籤）

<標籤名> 內容 </標籤名>

"<標籤名>"表示該標籤的做用開始，通常稱爲"開始標籤","</標籤名>"表示該標籤的做用結束，通常稱爲"結束標籤"瀏覽器

二、空元素（單標籤）

<標籤名 />

空元素用單標籤來表示，不包含內容安全

HTML標籤關係

一、嵌套關係

<head>
    <title> </title>
</head>

二、並列關係

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

文檔類型

<!DOCTYPE html>

<!DOCTYPE>聲明位於文檔中最前面位置，處於<html>標籤以前，告知瀏覽器文檔使用哪一種HTML或XHTML規範服務器

頁面語言lang

<html lang="en">

指定html語言類型
最多見兩種語言：
一、en定義語言爲英語
二、zh-CN定義語言爲中文網絡

字符集

<meta charset="utf-8">

多個字符的集合，計算機要準確處理各類字符集文字，須要進行字符編碼，使計算機能識別和存儲各類文字
經常使用字符集：
GB2312：簡單中文，包括6763個漢字
BIG5：繁體中文，港澳臺等使用
GBK：包含所有中文字符，是GB2312的擴展，加入繁體字的支持，兼容GB2312
UTF-8：基本包含全世界全部國家須要用到的字符編程語言

HTML標籤的語義化

標籤的含義，方便代碼閱讀和維護，讓瀏覽器或網絡爬蟲能夠很好解析，從而更好分析其中內容，具備更好的搜索引擎優化ide

HTML經常使用標籤

排版標籤

標題標籤h
單詞縮寫：head 頭部
提供了六個等級，做爲標題使用，而且根據重要性遞減
基本語法格式爲：

<h1> 標題文本 </h1>
<h2> 標題文本 </h2>
<h3> 標題文本 </h3>
<h4> 標題文本 </h4>
<h5> 標題文本 </h5>
<h6> 標題文本 </h6>

段落標籤
單詞縮寫：paragraph 段落
把HTML文檔分割爲若干段落，把文字有條理的顯示出來

<p> 文本內容 </p>

默認狀況下，文本在一個段落中會根據瀏覽器窗口大小自動換行
水平線標籤
單詞縮寫：horizontal 橫線
將段落與段落之間隔開，使文檔結構清晰，井井有條，可經過插入圖片實現，也能夠簡單經過變遷來完成

<hr />

換行標籤
單詞縮寫：break 打斷
強制某行文本換行顯示

<br />

**div和span標籤
div：division的縮寫，表示分割、區分的意思
span：跨度、跨距；範圍

<div> 這是頭部 </div>
<span> 今日價格 </span>

兩個都是盒子，用來裝頁面元素
div標籤用來裝佈局，在一行只能放一個div
span標籤用來佈局，一行能夠放多個span

文本格式化標籤

標籤 顯示效果
QQ圖片20200601185834.png 文本以粗體方式顯示（XHTML推薦使用strong）
QQ圖片20200601185919.png 文本以斜體方式顯示（XHTML推薦使用em）
QQ圖片20200601185957.png 文本以加刪除線方式顯示（XHTML推薦使用del）
<u></u>和<ins></ins> 文本以加下劃線方式顯示（XHTML不同意使用u）

標籤屬性

屬性就是外在特性

<標籤名 屬性1="屬性值1" 屬性2="屬性值2" ...> 內容 </標籤名>

圖像標籤

單詞縮寫：image 圖像

<img src="圖像URL" />

src屬性用於指定圖像文件的路徑和文件名，是img標籤的必要屬性
<img />標記屬性

屬性 屬性值 描述
src URL 圖像的路徑
alt 文本 圖像不能顯示時的替換文本
title 文本 鼠標懸停時顯示的內容
width 像素（XHTML不支持%頁面百分比） 設置圖像的寬度
height 像素（XHTML不支持%頁面百分比） 設置圖像的高度
border 數字 設置圖像邊框的寬度

標籤能夠有多個屬性，必須寫在開始標籤中，位於標籤名後面，屬性之間不分前後順序，標籤名與屬性、屬性與屬性之間均以空格分開，採起鍵值對的格式 key="value"的格式

連接標籤

單詞縮寫：anchor 錨

<a href="跳轉目標" target="目標窗口的彈出方式"> 文本或圖像 </a>
屬性 做用
href 用於鎖定連接目標的地址，（必須屬性）當爲標籤應用href屬性時，它就具備了超連接的功能
target 用於鎖定連接頁面的打開方式，其取值有self和blank兩種，其中self爲默認值，_blank爲在新窗口中打開方式

外部連接須要添加http://
內部連接只截連接內部頁面名稱便可
若是當時沒有肯定連接目標時，一般將連接標籤的href屬性值定義爲"#"（即href="#"），表示該連接暫時爲一個空連接
不只能夠建立文本超連接，在頁面各類網頁元素等均可以添加超連接

註釋標籤

在HTML文檔中添加一些便於閱讀和理解但又不須要顯示在頁面中的註釋文字

<!-- 註釋語句 -->

快捷鍵是：ctrl + / 或者 ctrl + shift + /

路徑

可分爲相對路徑和絕對路徑

目錄文件夾

存放了頁面所需相關素材

根目錄

目錄文件夾的第一層

相對路徑

以引用文件之網頁所在位置爲參考基礎，創建出目標路徑，保存於不一樣目錄的網頁引用同一個文件時，所使用的路徑不相同

路徑分類 符號 說明
同一級路徑 只需輸入圖像文件名稱便可
下一級路徑 "/" 圖片文件位於HTML文件同級文件夾下
上一級路徑 "../" 在文件名以前加入"../"，若是是上兩級，則須要使用"../../"

絕對路徑

以Web站點根目錄爲參考基礎的目錄路徑，指的是當全部網頁引用同一個文件時，所使用的路徑是同樣的，符號是""而不是"/"

錨點定位

經過建立錨點連接，快速定位到目標內容
一、使用相應id名標註跳轉目標的位置（找目標）

<h3 id="two"> 第2集 </h3>

二、使用 連接文本 建立連接文本（被點擊的）（拉關係）

<a href="#two">

base標籤

<base target="_blabk">

base能夠設置總體連接的打開狀態，base寫到<head></head>之間，把全部的連接都默認添加target="_blank"

預格式化文本pre標籤

<pre>
    此例演示如何使用pre標籤
    對空行和空格
    進行控制
</pre>

被包圍在<pre>標籤元素中的文本一般會保留空格和換行符，文本也會呈現爲等寬字體，標籤中的文字會按照書寫的模式顯示，不須要段落和換行標籤，但比較少用，由於很差總體控制

特殊字符

特殊字符 描述 字符
空格符 QQ圖片20200602095612.png
< 小於號 QQ圖片20200602095641.png
> 大於號 QQ圖片20200602095726.png
& 和號 QQ圖片20200602095801.png
￥ 人民幣 QQ截圖20200602095832.png
© 版權 QQ圖片20200602095917.png
® 註冊商標 QQ圖片20200602095959.png
° 攝氏度 QQ圖片20200602100045.png
± 正負號 QQ圖片20200602100124.png
× 乘號 QQ圖片20200602100210.png
÷ 除號 QQ圖片20200602100236.png
² 平方2（上標2） QQ圖片20200602100316.png
³ 立方3（上標3） QQ圖片20200602100424.png

表格table

常見顯示、展現表格式數據，特別是後臺展現數據的時候表格運用是否熟練顯得很重要

建立表格

<table>
    <tr>
        <td> 單元格內的文字 </td>
        ...
    </tr>
    ...
</table>

table用於定義一個表格標籤，tr標籤用於定義表格中的行，必須嵌套在table標籤中，td用於定義表格中的單元格，必須嵌套在<tr></tr>標籤中，字母td指的是表格數據，即數據單元格的內容
表格的主要目的的顯示特殊數據

表格屬性

屬性名 含義 經常使用屬性值
border 設置表格的邊框（默認border="0"無邊框） 像素值
cellspacing 設置單元格與單元格邊框之間的空白間距 像素值（默認爲2像素）
cellpadding 設置單元格內容與單元格邊框之間的空白間距 像素值（默認爲1的像素）
width 設置表格的寬度 像素值
height 設置表格的高度 像素值
align 設置表格在網頁中的水平對齊方式 left、center、right

表頭單元格標籤th

通常表頭單元格位於表格的第一行或第一列，而且文本加粗居中，只需用表頭標籤<th></th>代替相應的<td></td>便可

表格標題caption

<table>
    <captain> 表格標題 </caption>
</table>

captain元素定義表格標題，一般這個標題會被居中且顯示於表格之上，標籤必須緊隨table標籤以後，只存在表格裏纔有意義

合併單元格

跨行合併：rowspan="合併單元格的個數"
跨列合併：colspan="合併單元格的個數"
合併順序：先上後下、先左後右
合併三部曲：
一、肯定跨行仍是跨列
二、根據合併順序找到目標單元格，而後寫上合併方式還有要合併的單元格數量
三、刪除多餘單元格

表格劃分結構

題頭、正文和腳註，分別用：thead、tbody和tfoot來標註

列表標籤

容器裏面裝載着結構，樣式一致的文字或圖標的一種形式，叫列表，列表最大的特色就是整齊、整潔、有序，跟表格相似，可組合自由度更高

無序列表ul

各個列表項之間沒有順序級別之分，是並列的

<ul>
    <li> 列表項1 </li>
    <li> 列表項2 </li>
    <li> 列表項3 </li>
    ......
</ul>

<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標籤中輸入其餘標籤或文字的作法是不被容許的，<li>與</li>之間至關於一個容器，能夠容納全部元素，無序列表會帶有本身樣式屬性

有序列表ol

有排列順序的列表，各個列表項按照必定的順序排列定義

<ol>
    <li> 列表項1 </li>
    <li> 列表項2 </li>
    <li> 列表項3 </li>
    ......
</ol>

全部特性基本與ul一致，但實際中比無序列表用的少不少

自定義列表

經常使用於對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何項目符號

<dl>
    <dt> 名詞1 </dt>
    <dd> 名詞1解釋1 </dd>
    <dd> 名詞1解釋2 </dd>
    ...
    <dt> 名詞2 </dt>
    <dd> 名詞2解釋1 </dd>
    <dd> 名詞2解釋2 </dd>
    ...
</dl>

表單標籤

目的爲了收集用戶信息
一般由表單控件（也稱爲表單元素）、提示信息和表單域3個部分構成
表單域：至關於一個容器，用來容納全部的表單控件和提示信息，能夠經過他定義處理表單數據所用程序的url地址，以及數據提交到服務器的方法，若是不定義表單域，表單中的數據沒法傳送到後臺服務器

表單標籤

input控件

<input type="屬性值" value="你好" />

input是輸入的意思
<input />標籤爲單標籤
type屬性設置不一樣的屬性值用來指定不一樣的控件類型
除了type屬性還有別的屬性
經常使用屬性：

屬性 屬性值 描述
text 單行文本輸入框
password 密碼輸入框
radio 單選按鈕
checkbox 複選框
type button 普通按鈕
submit 提交按鈕
reset 重置按鈕
image 圖像形式的提交按鈕
file 文件域
name 由用戶自定義 控件的名稱
value 由用戶自定義 input控件中的默認文本值
size 正整數 input控件在頁面中的顯示寬度
checked checked 定義選擇控件默認被選中的項
maxlength 正整數 控件容許輸入的最多字符數

type屬性經過改變值，決定屬於哪一種input表單
value是input默認的初始值
後臺可經過name屬性找到表單，若是是一組，必須給他們命名相同的名字name，能夠實現多個選其中一個
label標籤
爲了提升用戶體驗，爲input元素定義標註（標籤），用於綁定一個表單元素，當點擊label標籤的時候，被綁定的表單元素就會得到輸入焦點
綁定元素方法：
一、用label只截包括input表單

<label> 用戶名： <input type="radio" name="usename" value="請輸入用戶名" /> </label>

適用於單個表單選擇
二、for屬性規定label與哪一個表單元素綁定

<label for="sex"> 男 </label>
<input type="radio" name="sex" id="sex" />

textarea控件（文本域）

<textarea>
文本內容
</textarea>

經過textarea控件能夠輕鬆建立多行文本輸入框
文本框和文本域區別

表單 名稱 區別 默認值顯示 用於場景
input type="text" 文本框 只能顯示一行文本 單標籤，經過value顯示默認值 用戶名、暱稱、密碼等
textarea 文本域 能夠顯示多行文本 雙標籤，默認值寫到標籤中間 留言板

select下拉列表

<select>
    <option> 選項1 </option>
    <option> 選項2 </option>
    <option> 選項3 </option>
    ...
</select>

select中至少包含一對option
在option中定義selected="selected"時，當前項即爲默認選中項

form表單域

form標籤被用於定義表單域，實現用戶信息的收集和傳遞，form中全部內容都會被提交給服務器

<form action="url地址" method="提交方式" name="表單名稱">
各類表單控件
</form>

經常使用屬性：

屬性 屬性值 做用
action url地址 用於指定接收並處理表單數據的服務器程序的url地址
method get/post 用於設置表單數據的提交方式，其取值爲get或post
name 名稱 用於指定表單的名稱，以區分同一個頁面中的多個表單

每一個表單都應該有本身的表單域，但ajax後臺交互的時候，必須須要form表單域

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程