HTML基礎(chǔ)知識(shí)

一、HTML5

  1. 簡(jiǎn)介
    HTML標(biāo)準(zhǔn)自1999年12月發(fā)布的HTML4.01后，后繼的HTML5和其它標(biāo)準(zhǔn)被束之高閣，為了推動(dòng)Web標(biāo)準(zhǔn)化運(yùn)動(dòng)的發(fā)展，一些公司聯(lián)合起來(lái)，成立了一個(gè)叫做 Web Hypertext Application Technology Working Group （Web超文本應(yīng)用技術(shù)工作組 -WHATWG） 的組織。WHATWG 致力于 Web 表單和應(yīng)用程序，而W3C（World Wide Web Consortium，萬(wàn)維網(wǎng)聯(lián)盟） 專注于XHTML2.0。在 2006 年，雙方?jīng)Q定進(jìn)行合作，來(lái)創(chuàng)建一個(gè)新版本的 HTML。
    HTML5 將成為 HTML、XHTML 以及 HTML DOM 的新標(biāo)準(zhǔn)。
    HTML 的上一個(gè)版本誕生于 1999 年。自從那以后，Web 世界已經(jīng)經(jīng)歷了巨變。
    HTML5 仍處于完善之中。然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些 HTML5 支持。
  2. 特性
    新特性應(yīng)該基于 HTML、CSS、DOM 以及 JavaScript。
    減少對(duì)外部插件的需求（比如 Flash）
    更優(yōu)秀的錯(cuò)誤處理
    更多取代腳本的標(biāo)記
    HTML5 應(yīng)該獨(dú)立于設(shè)備
    開(kāi)發(fā)進(jìn)程應(yīng)對(duì)公眾透明
    用于繪畫(huà)的 canvas 元素
    用于媒介回放的 video 和 audio 元素
    對(duì)本地離線存儲(chǔ)的更好的支持
    新的特殊內(nèi)容元素，比如 article、footer、header、nav、section
    新的表單控件，比如 calendar、date、time、email、url、search

二、常用標(biāo)簽

  1. meta標(biāo)簽

meta主要用于設(shè)置網(wǎng)頁(yè)中的一些元數(shù)據(jù)，元數(shù)據(jù)不是給用戶看的
\color{#FF0000}{charset} 指定網(wǎng)頁(yè)的字符集。比如：\color{blue}{UTF-8 }
\color{#FF0000}{name} 指定的數(shù)據(jù)的名稱
\color{#FF0000}{content }指定的數(shù)據(jù)的內(nèi)容
\color{#FF0000} {keywords} 表示網(wǎng)站的關(guān)鍵字，可以同時(shí)指定多個(gè)關(guān)鍵字，關(guān)鍵字間使用,隔開(kāi)。
比如：\color{blue}{ <meta name="keywords"}
\color{#FF0000}{content=}"網(wǎng)購(gòu),網(wǎng)上購(gòu)物,在線購(gòu)物,網(wǎng)購(gòu)網(wǎng)站,網(wǎng)購(gòu)商城,購(gòu)物網(wǎng)站,網(wǎng)購(gòu)中 心,購(gòu)物中心,卓越,亞馬遜,卓越亞馬遜,亞馬遜中國(guó),joyo,amazon">
\color{#FF0000}{description}用于指定網(wǎng)站的描述，
比如：\color{blue}{<meta name="description"}
content="京東JD.COM-專業(yè)的綜合網(wǎng)上購(gòu)物商城,銷(xiāo)售家電、數(shù)碼通訊、電腦、家居百貨、服裝服飾、母 嬰、圖書(shū)、食品等數(shù)萬(wàn)個(gè)品牌優(yōu)質(zhì)商品.便捷、誠(chéng)信的服務(wù)，為您提供愉悅的網(wǎng)上購(gòu)物體驗(yàn)!"/>
\color{#FF0000}{ <title>}標(biāo)簽的內(nèi)容會(huì)作為搜索結(jié)果的超鏈接上的文字顯示，就是網(wǎng)頁(yè)名稱。

2.基礎(chǔ)標(biāo)簽

<!DOCTYPE>定義文檔類(lèi)型
<html>定義HTML文檔
<title>定義標(biāo)題
<body> 定義文檔的主體。
<h1> to <h6> 定義 HTML 標(biāo)題。
<p> 定義段落。

  1. 格式標(biāo)簽

<acronym>定義只取首字母的縮寫(xiě)
<abbr>定義縮寫(xiě)
<b>定義粗體文體
<cite>定義引用
<font>定義字體尺寸和顏色
<table> 定義表格
<caption> 定義表格標(biāo)題。
<th> 定義表格的表頭。
<tr> 定義表格的行。
<td> 定義表格單元。
<thead> 定義表格的頁(yè)眉。
<tbody> 定義表格的主體。
<tfoot> 定義表格的頁(yè)腳。
<col> 定義用于表格列的屬性。
<colgroup> 定義表格列的組。

  1. 特殊符號(hào)

在HTML中有些時(shí)候，我們不能直接書(shū)寫(xiě)一些特殊符號(hào)，比如：多個(gè)連續(xù)的空格（大概率會(huì)被自動(dòng)解析為一 個(gè)空格），比如字母兩側(cè)的大于和小于號(hào)，那么，我們就需要在網(wǎng)頁(yè)中使用轉(zhuǎn)義字符：
&nbsp:空格 &gt: 大于號(hào) &lt: 小于號(hào) &copy: 版權(quán)符號(hào)

5.語(yǔ)義化HTML標(biāo)簽

在頁(yè)面中獨(dú)占一行的元素稱為塊元素（block element） 塊狀元素特征：(1)能夠識(shí)別寬高
(2)margin和padding的上下左右均對(duì)其有效
(3)可以自動(dòng)換行
(4)多個(gè)塊狀元素標(biāo)簽寫(xiě)在一起，默認(rèn)排列方式為從上至下
在頁(yè)面中不會(huì)獨(dú)占一行的元素稱為行內(nèi)元素（inline element）
行內(nèi)元素特征：(1)設(shè)置寬高無(wú)效
(2)對(duì)margin僅設(shè)置左右方向有效，上下無(wú)效；padding設(shè)置上下左右都有效，即會(huì)撐大空 間
(3)不會(huì)自動(dòng)進(jìn)行換行

6.列表

在html列表一共有三種： 1、有序列表 2、無(wú)序列表 3、定義列表
有序列表，使用ol標(biāo)簽來(lái)創(chuàng)建無(wú)序列表
使用li表示列表項(xiàng)
無(wú)序列表，使用ul標(biāo)簽來(lái)創(chuàng)建無(wú)序列表
使用li表示列表項(xiàng)
定義列表，使用dl標(biāo)簽來(lái)創(chuàng)建一個(gè)定義列表
使用dt來(lái)表示定義的內(nèi)容
使用dd來(lái)對(duì)內(nèi)容進(jìn)行解釋說(shuō)明

7.超鏈接

超鏈接可以讓我們從一個(gè)頁(yè)面跳轉(zhuǎn)到其他頁(yè)面， 或者是當(dāng)前頁(yè)面的其他的位置
使用 a 標(biāo)簽來(lái)定義超鏈接
屬性：
href 指定跳轉(zhuǎn)的目標(biāo)路徑 :

  • 值可以是一個(gè)外部網(wǎng)站的地址
  • 也可以寫(xiě)一個(gè)內(nèi)部頁(yè)面的地址
    超鏈接是也是一個(gè)行內(nèi)元素，在a標(biāo)簽中可以嵌套除它自身外的任何元素
    當(dāng)我們需要跳轉(zhuǎn)一個(gè)服務(wù)器內(nèi)部的頁(yè)面時(shí)，一般我們都會(huì)使用相對(duì)路徑
    相對(duì)路徑都會(huì)使用.或..開(kāi)頭
    例如： ./，../
    ./可以省略不寫(xiě)，如果不寫(xiě)./也不寫(xiě)../則就相當(dāng)于寫(xiě)了./
    ./ 表示當(dāng)前文件所在的目錄
    ../ 表示當(dāng)前文件所在目錄的上一級(jí)目錄
    target屬性，用來(lái)指定超鏈接打開(kāi)的位置
    可選值： self 默認(rèn)值 在當(dāng)前頁(yè)面中打開(kāi)超鏈接
    blank 在一個(gè)新的要么中打開(kāi)超鏈接

8.表格和表單

text 用于沒(méi)有任何限制的文本和字符 password用于輸入密碼 email 用于應(yīng)該包含 e-mail 地址的輸入域。在提交表單時(shí)，會(huì)自動(dòng)驗(yàn)證 email 域的值。 url 用于應(yīng)該包含 URL 地址的輸入域。在提交表單時(shí)，會(huì)自動(dòng)驗(yàn)證 url 域的值。 number 用于應(yīng)該包含數(shù)值的輸入域。
range 用于應(yīng)該包含一定范圍內(nèi)數(shù)字值的輸入域。range 類(lèi)型顯示為滑動(dòng)條。 屬性同 number Date pickers (date, month, week, time, datetime, datetime-local) HTML5 擁有多個(gè)可供選取日期和時(shí)間的新輸入類(lèi)型： date - 選取日、月、年 month - 選取月、年 week - 選取周和年 time - 選取時(shí)間（小時(shí)和分鐘） datetime - 選取時(shí)間、日、月、年（UTC 時(shí)間） datetime-local - 選取時(shí)間、日、月、年（本地時(shí)間） search 用于搜索域 color 用于選擇顏色 submit 定義提交按鈕（提交表單）

CSS基礎(chǔ)知識(shí)

一、簡(jiǎn)介

層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來(lái)表現(xiàn)HTML(標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用)或XML(標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集)等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。

CSS 能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力。

二、語(yǔ)法基礎(chǔ)

1.屬性值

整數(shù)和實(shí)數(shù)
這和普通意義上的整數(shù)和實(shí)數(shù)沒(méi)有多大區(qū)別。在CSS中只能使用浮點(diǎn)小數(shù)，而不能像其他編程語(yǔ)言那樣使用科學(xué)記數(shù)法表示實(shí)數(shù)，即1.2E3在CSS中將是不合法的。下面是幾個(gè)正確的例子,整數(shù):128、-313，實(shí)數(shù):12.20、1415、-12.03。

長(zhǎng)度量
一個(gè)長(zhǎng)度量由整數(shù)或?qū)崝?shù)加上相應(yīng)的長(zhǎng)度單位組成。長(zhǎng)度量常用來(lái)對(duì)元素定位。而定位分為絕對(duì)定位和相對(duì)定位，因而長(zhǎng)度單位也分為相對(duì)長(zhǎng)度單位和絕對(duì)長(zhǎng)度單位。
相對(duì)長(zhǎng)度單位有:em--當(dāng)前字體的高度，也就是font.size屬性的值;ex--當(dāng)前字體中小寫(xiě)字母x的高度;Dx--一個(gè)像素的長(zhǎng)度，其實(shí)際的長(zhǎng)度由顯示器的設(shè)置決定，比如在800木600的設(shè)置下，一個(gè)像素的長(zhǎng)度就等于屏幕的寬度除以800。
另一一點(diǎn)值得注意的是，子級(jí)元素不繼承父級(jí)元素的相對(duì)長(zhǎng)度值，只繼承它們的實(shí)際計(jì)算值。
百分?jǐn)?shù)量(percentages)

百分?jǐn)?shù)量就是數(shù)字加上百分號(hào)。顯然，百分?jǐn)?shù)量總是相對(duì)的，所以和相對(duì)長(zhǎng)度量一樣，百分?jǐn)?shù)量不被子級(jí)元素繼承。

2.選擇器
元素選擇器

作用：根據(jù)標(biāo)簽名來(lái)選中指定的元素
語(yǔ)法：標(biāo)簽名{}
例子：p{
}
h1{
}
div{
}

id選擇器

ID屬性的值在整篇文檔中必須是唯一的。這使得ID屬性可用于設(shè)置單個(gè)元素的樣式規(guī)則。包含ID屬性的選擇器稱為ID選擇器。
需要注意的是，ID選擇器的標(biāo)志符是散列符號(hào)(#)。標(biāo)志符用來(lái)提醒瀏覽器接下來(lái)出現(xiàn)的是ID值。
語(yǔ)法：#id屬性值{}

類(lèi)選擇器

CLASS屬性允許向一組在CLASS屬性上具有相同值的元素應(yīng)用聲明。BODY內(nèi)的所有元素都有CLASS屬性。從本質(zhì)上講，可以使用CLASS屬性來(lái)分類(lèi)元素，在樣式表中創(chuàng)建規(guī)則來(lái)引用CLASS屬性的值，然后瀏覽器自動(dòng)將這些屬性應(yīng)用到該組元素。
語(yǔ)法：.class屬性值

通配選擇器

作用：選中頁(yè)面中的所有元素
語(yǔ)法: *{}
例子：
*{
color: red;
}

復(fù)合選擇器

可以將類(lèi)型選擇器、ID選擇器和類(lèi)選擇器組合成不同的選擇器類(lèi)型來(lái)構(gòu)成更復(fù)雜的選擇器。通過(guò)組合選擇器，可以更加精確地處理希望賦予某種表示的元素。

first-child 偽類(lèi)

first-child 偽類(lèi)來(lái)選擇父元素的第一個(gè)子元素。
注意：在IE8的之前版本必須聲明<!DOCTYPE> ，這樣 :first-child 才能生效。

lang 偽類(lèi)

lang 偽類(lèi)使你有能力為不同的語(yǔ)言定義特殊的規(guī)則
注意：IE8必須聲明<!DOCTYPE>才能支持;lang偽類(lèi)。

偽元素

偽元素，表示頁(yè)面中一些特殊的并不真實(shí)的存在的元素（特殊的位置）
偽元素使用 :: 開(kāi)頭
::first-letter 表示第一個(gè)字母
::first-line 表示第一行
::selection 表示選中的內(nèi)容
::before 元素的開(kāi)始
::after 元素的最后
before 和 after 必須結(jié)合content屬性來(lái)使用

CSS長(zhǎng)度

一些設(shè)置 CSS 長(zhǎng)度的屬性有 width, margin, padding, font-size, border-width, 等。
長(zhǎng)度有一個(gè)數(shù)字和單位組成如 10px, 2em, 等。
數(shù)字與單位之間不能出現(xiàn)空格。如果長(zhǎng)度值為 0，則可以省略單位。
對(duì)于一些 CSS 屬性，長(zhǎng)度可以是負(fù)數(shù)。
有兩種類(lèi)型的長(zhǎng)度單位：相對(duì)和絕對(duì)

選擇器的權(quán)重

樣式的沖突 - 當(dāng)我們通過(guò)不同的選擇器，選中相同的元素，并且為相同的樣式設(shè)置不同的值時(shí)，此時(shí)就發(fā)生了樣式的沖 突。發(fā)生樣式?jīng)_突時(shí)，應(yīng)用哪個(gè)樣式由選擇器的權(quán)重（優(yōu)先級(jí)）決定 選擇器的權(quán)重 內(nèi)聯(lián)樣式 1,0,0,0 id選擇器 0,1,0,0 類(lèi)和偽類(lèi)選擇器 0,0,1,0 元素選擇器 0,0,0,1 通配選擇器 0,0,0,0 繼承的樣式 沒(méi)有優(yōu)先級(jí) 可以在某一個(gè)樣式的后邊添加 !important ，則此時(shí)該樣式會(huì)獲取到最高的優(yōu)先級(jí)，甚至超過(guò)內(nèi)聯(lián)樣式， 注意：在開(kāi)發(fā)中這個(gè)玩意一定要慎

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容