HTML 簡單概括 -- 前端知識

時間 2019-12-12

標籤 html 簡單概括前端知識欄目 HTML 简体版

原文原文鏈接

web前端javascript

Internet：是一個全球性的計算機互聯網絡，中文名稱「因特網」、「國際互聯網」、「網際網」等等；php

Internet提供的服務：http、ftp、Telnet、email、www、bbs等等；html

基本實現技術：分組交換原理--信息在Internet上被分紅許多的小數據包（分組）進行傳輸，到達目的地後將數據包組裝成信息；
TCP/IP協議簇前端

Web和Internet的關係：web是運行在Internet上最流行的應用之一，Internet爲web提供了網絡環境；
由於web的出現，從而極大地推進了Internet的普及與推廣；java

web的優點：傳輸快、成本低、用戶多、方便易用、形式多樣、便於反饋......
web的劣勢：虛假信息、病毒、網癮、數據丟失......程序員

web：稱爲萬維網或環球網，www（world wide web），上世紀90年代由歐洲核子研究中心的Bener.Lee，1992年正式上網；
把各種信息和服務無縫鏈接，提供生動的圖形用戶界面；
信息--文字、圖片、視頻、音頻...
服務--Telnet、email、ftp......
萬維網就是無數文檔的集合，駐留在因特網的某個地方web

web的工做原理：
基於瀏覽器/服務器；由web服務器、瀏覽器和通訊協議三部分組成；
通訊協議採用的是http協議：超文本傳輸協議（hypertext transfer protocol）
經過瀏覽器發送請求到服務器，服務器響應請求將數據發送到請求的瀏覽器，中間的過程是經過http協議執行；chrome

開發人員共具：
F12；右鍵--審查元素（檢查）瀏覽器

在web主要以網頁的形式來發布多媒體信息；
網頁採用超文本標記語言HTML（hypertext markup language）編寫；
編輯--記事本、word、editplus、hbuilder、dw、sublime text、webstrom......安全

web服務器：
存儲web頁面上的信息，並提供管理環境；響應瀏覽器的請求，執行服務器端的程序；

主要的web服務器產品：
Tomcat、Apache、IIS

web瀏覽器：
提交請求；解析HTML和內嵌腳本（js）；用圖形化的方式顯示HTML文檔；

主流的瀏覽器：
IE、firefox、chrome、opera、safari

服務器端技術：php、jsp、asp（asp.net）

前端技術（客戶端技術）：
HTML、CSS、JS(JavaScript)；

web是一個超文本文件的集合；超文本文件便是網頁/HTML文檔；一般是以.html或.htm爲後綴的文檔

什麼是HTML：
超文本標記語言，一種純文本類型的語言；使用帶「尖括號」的「標記」將網頁中的內容標識出來；

標記語法：
HTML用於描述功能的符號稱爲「標記」；
標記在使用時必須用「尖括號」括起來；

封閉標記：
封閉標記又叫雙標記，必須成對出現；<標記>內容</標記>；

非封閉標記：
又叫空標記或者單標記；<標記 /> 或者 <標記>

Xhtml於2000年1月成爲W3C標準；Xhtml是更嚴格更純淨的HTML版本；

HTML文檔結構：
一、聲明--文檔類型聲明；聲明必須寫在文檔的最開始部分；
二、頁面/文檔--<html></html>
三、頁面頭部--<head></head>主要裝載頁面的信息；
四、頁面主體--<body></body>
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>

文檔標題：<title></title>給頁面起一個名字；

每個標籤都有屬性，屬性能夠是一個或者多個，多個屬性之間用空格隔開；
屬性的組成：屬性名=「屬性值」；
屬性必須寫在開始標記內部；

HTML註釋：只有程序員本身看得見，而不會再網頁中顯示的內容；

註釋內容中必定不要存在--

再HTML頁面中不管敲多少空格，都只會顯示一個空格；
要想有多個空格，必須使用轉義字符；
轉義字符：
空格-- 
左尖括號<--<
右尖括號>-->
版權©--©
註冊商標--®

換行標記：<br />

強制不換行標記：<nobr>不換行內容</nobr>

標題標記：<hn></hn> n=1,2,3,4,5,6

段落標記：<p></p>

文本樣式標籤：
<b></b>文本加粗；
<i></i>文本傾斜；
<u></u>添加下劃線；
<s></s>添加刪除線；
以上標籤所有不推薦使用，已經被廢棄；
<strong></strong>強調文本，表現爲文本加粗；
<em></em>強調文本，表現爲文本傾斜；
<sup></sup>上標標記；
<sub></sub>下標標記；

標籤分類：
塊級標籤：默認狀況下，塊級標籤回獨佔一行，元素的先後內容都會自動換行；
<hn></hn>、<p></p>
行內標籤：不會換行，能夠和其餘行內元素位於同一行；
b、i、u、s、strong、em、sup、sub

分區標籤：
<div></div>
<span></span>

預格式化標籤：
<pre></pre>
寫在該標籤內的內容會按照編寫時的格式展現在網頁中；

頁面屬性：
背景顏色--bgcolor;
頁面文本顏色--text;

字體標籤：
<font></font>
字體顏色--color；
字體--face；
字體大小--size；最小1，最大7；
該標籤已被廢棄；

目錄結構：
一個項目（web站點）下的全部文件所在的位置；一個web站點包含多個目錄，每一個目錄包含站點的不一樣部分；web站點的主目錄稱爲根目錄；位於根目錄下的其餘文件夾稱爲子目錄；每一個子目錄都會包含具體功能的下一級子目錄；

全部的文件命名必須是英文、數字、下劃線（_）和鏈接線(-)組成；

URL：
uniform resource location 統一資源定位器；
用來標識網絡中的任何資源
即路徑，指從當前位置到目標位置所通過的路線；

URL分類：
一、絕對路徑：192.168.101.111
http:// www.baidu.com /images /img01.jpg
協議名主機名目錄路徑文件名
用於指向其餘設備上的文件；
二、相對路徑:
指目標文件的位置是相對於當前文件的位置；
目標文件和當前文件在同一個目錄下，直接寫文件名--img01.jpg
目標文件所在的文件夾和當前文件在同一個目錄下--文件夾名/文件名 images/img01.jpg
目標文件和當前文件不在同一目錄下，用../表示返回上一級目錄，一個../表示返回一級
../images/img01.jpg
../../images/img01.jpg
三、根相對路徑：
用於服務器

水平居中標籤：
<center></center>
該標籤已被廢棄；

標籤的對齊屬性：
align="left"
align="right"
align="center"

水平分割線標籤：<hr />
寬度--width，最好帶上單位px
高度--size，不用帶單位
對齊--align
顏色--color

圖像標籤：<img />
連接圖像地址--src="路徑"；
寬度--width，只給寬度表示定寬，高度自動等比變化；
高度--height，只給高度表示定高，寬度自動等比變化；
title--鼠標移入後的提示文字，用於描述圖片；
alt--當圖片沒法正常顯示時所用的替代文字；

超連接標籤：<a></a>
連接屬性--href="路徑"
空連接：一、href="#",會有返回頂部的效果；
二、href="javascript:;"
圖片：href="圖片路徑"，能夠將連接指向一張圖片；
壓縮包：href="XXX.rar",指向一個壓縮包，點擊以後會下載；
發郵件：href="mailto:郵箱地址"，能夠給該郵箱發送郵件；
target--連接打開的目標位置；
target="_blank",在新窗口打開連接；
target="_self",在當前頁面打開連接；
錨點名稱--name，標記，能夠將連接指向該標記，以達到跳轉到頁面指定位置的效果；

表格標籤：<table></table>
表格--背景色：bgcolor
邊框：border
寬度：width
高度：height
邊框色：bordercolor
邊框深色：bordercolordark（廢棄）
邊框淺色：bordercolorlight（廢棄）
單元格間距：cellspacing，不用帶單位
內邊距：cellpadding，要帶單位
對齊：align
單元行--高度：height，百分比
水平對齊：align；left、center、right
垂直對齊：valign；top、middle、bottom
單元格--寬度：width，百分比
水平對齊：align；left、center、right
垂直對齊：valign；top、middle、bottom
跨行：rowspan
跨列：colspan

表格分區：
<thead></thead>:劃分出表格的頭部
<tbody></tbody>:劃分出表格的主體
<tfoot></tfoot>:劃分出表格的底部

表格標題：<caption></caption>
爲表格定義一個標題，默認在表格外的最上方水平居中顯示；
caption必須位於table的正下方，緊挨着table；

表頭：<th></th>
不能包含td，表頭只能包含在tr中，默認表頭內的文字居中顯示並加粗；

表單：
用於顯示、收集信息，並提交信息到服務器；
組成部分：
一、實現數據交互的可見的用戶界面，好比：文本框、提交等；
二、提交後的表單處理；
使用<form></form>標記建立表單；在該標記中添加其餘表單能夠包含的控件；

<input />：用於收集用戶信息；
類型--type：text文本類型；
password密碼類型
radio單選類型
checkbox多選類型
submit提交按鈕
reset重置按鈕
button普通按鈕
輸入框（文本類型和密碼類型）--name設置輸入框提交後對應的信息的名稱
value通常是用於設置提示信息，也能夠用於填寫的信息的收集
maxlength限制輸入的最大字符長度
readonly設置爲「只讀」
required設置爲「必填」
disabled設置爲「禁用」

單選和多選--name設置選項組的名稱，單選的name必須同樣，多選的name能夠不一樣（最好相同）
value確認和收集選項信息，提交到服務器
checked設置默認選擇項

按鈕--value設置按鈕的文本
name設置按鈕名稱

<label></label>:將文本於控件聯繫在一塊兒，點擊文本就能夠觸發控件；
for=「控件的id」就能夠和控件綁定；

選項框：<select></select>
name--設置選項框的名稱
size--設置顯示的選項數目，大於1則變爲滾動列表
multiple--設置多選，按住Ctrl多選
選項：<option></option>
value--確認和收集選項的信息，提交到服務器
selected--設置默認選項

多行文本框：<textarea></textarea>
name--設置名稱
cols--設置內容的列數，至關於設置了寬度
rows--設置內容的行數，至關於設置了高度
readonly--只讀
required--必填
disabled--禁用

input其餘類型：email--郵箱類型，輸入錯誤的郵箱地址，提交時會報錯，只會檢測有沒有「@」；

form表單屬性：
enctype：指定表單的數據類型（數據進行編碼的方式）
method：指定表單數據提交的方式；
get--將數據附加在地址中提交；最大缺點是缺少安全性、上傳的信息不徹底；優勢是數據的傳輸速度快；
post--將數據打包提交到服務器；安全性很是好、數據傳輸完整；傳輸速度相對較慢；
action：定義表單提交時發生的動做，包含服務器腳本的URL（jsp、php...）

控件分組：<fieldset></fieldset>爲控件分組
<legend></legend>爲分組指定標題

有序列表：<ol></ol>
列表項：<li></li>
代碼：<ol>
<li></li>
</ol>
屬性--type：1，數字類型；
a，小寫字母類型；
A，大寫字母類型；
i，小寫羅馬數字類型；
I，大寫羅馬數字類型；
start：設置序列號的起始；

無序列表：<ul></ul>
列表項：<li></li>
屬性--type：disc實心圓（默認）；
circle空心圓（圓圈）；
square實心舉行；

定義列表：<dl></dl>用於給出一類實物的定義，如：名詞解釋、解釋說明、字典等等
<dt></dt>指定一個名詞或術語
<dd></dd>對dt當中的內容進行解釋說明
dt下面的dd是對該dt的解釋說明，一個dt下面能夠有多個dd；一個dl中能夠有多個dt；

結構標記
<header></header>用於定義頁面頭部或者某一個區域的頭部
<nav></nav>用於定義頁面的導航信息
<section></section>定義某一個區域的主體
<article></article>用於定義某一篇文章、博客、論壇帖子等等
<article>
<h1></h1>
<p></p>
<img />
</article>
<footer></footer>定義頁面的底部或者某一個區域的底部
<aside></aside>定義頁面的額外信息，好比：側邊欄、廣告欄等等

摘要與細節
<details></details>用於定義細節
<summary></summary>用於定義細節的標題

度量標記：
<meter></meter>
value設置電量的值
min設置最小取值範圍
max設置最大取值範圍

文本高亮顯示標記：<mark></mark>