HTML 排錯(cuò)
- 看編輯器的顏色提示
- 使用HTML5驗(yàn)證器,可以在線也可以npm工具
yarn global add node-w3c-validator
安裝驗(yàn)證器
格式優(yōu)化
- 在設(shè)置里找 auto save , 之后勾選上format on save
- VScode插件,搜索prettier,美化格式插件
HTML 是誰(shuí)發(fā)明的肉拓?
Tim Berners Lee轰驳,李爵士1990年蕾殴,World Wide Web 的發(fā)明者 Tim Berners Lee 選擇了 CERN 使用的一組 SGML 的 DTD 標(biāo)記標(biāo)簽侦锯,在最早的 WEB 瀏覽器和編輯器 NEXUS 中,他使用了這些標(biāo)簽和樣式表進(jìn)行排版翠霍,并增加了最重要的功能——鏈接本谜,這就是HTML的前身,基于SGML的HTML是讓 SGML 走向World Wide Web 的第一步寝受。他是前端的祖師爺坷牛。
李爵士
HTML 起手寫(xiě)什么?
<!DOCTYPE html> //文檔類型是html
<html lang="zh-CN"> //這html的語(yǔ)言標(biāo)記是簡(jiǎn)中
<head> //頭部
<meta charset="UTF-8" /> // meta標(biāo)簽的屬性定義了與文檔相關(guān)聯(lián)的名稱/值對(duì)很澄,可以定義文檔字符集京闰。常見(jiàn)的字符集:GB2312颜及、GBK、UTF-8
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> //視口優(yōu)化蹂楣、手機(jī)端顯示優(yōu)化俏站,寬=設(shè)備框,初始比例=1倍
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> 提示ie更新到edge
<title>你的標(biāo)題</title>
</head>
<body>這里放內(nèi)容</body>
</html>
常用的表章節(jié)的標(biāo)簽有哪些捐迫?
<h1~h6> 標(biāo)題
<section>章節(jié)
<article>文章
<main>主要內(nèi)容
<aside>側(cè)內(nèi)容
<footer>頁(yè)腳
全局屬性有哪些?
<id> = 定義唯一標(biāo)識(shí)符(ID)乾翔,該標(biāo)識(shí)符在整個(gè)文檔中必須是唯一的。 其目的是在鏈接(使用片段標(biāo)識(shí)符)施戴,腳本或樣式(使用CSS)時(shí)標(biāo)識(shí)元素反浓。盡量別用id,容易寫(xiě)著寫(xiě)著走遠(yuǎn)了報(bào)錯(cuò),在瀏覽器.windows的內(nèi)的標(biāo)簽就不能用id赞哗,如self雷则,top這種命名。
<class> =元素的類名(classes )列表肪笋,它允許 CSS 和 Javascript 通過(guò)類選擇器
<hidden> =它可以被用來(lái)隱藏一個(gè)頁(yè)面元素直到登錄完畢月劈。如果一個(gè)元素設(shè)置了這個(gè)屬性,它就不會(huì)被顯示藤乙。
<contentedtable> =表示元素是否可被用戶編輯猜揪。 如果可以,瀏覽器會(huì)修改元素的部件以允許編輯坛梁。
<style> 通常修改元素的樣式
<tabindex> 指示其元素是否可以聚焦而姐,以及它是否/在何處參與順序鍵盤導(dǎo)航
<title> 頁(yè)面標(biāo)題,對(duì)搜索引擎優(yōu)化有重要意義,它只應(yīng)該包含文本划咐,若是包含有標(biāo)簽拴念,則它包含的任何標(biāo)簽都將被忽略。
常用的內(nèi)容標(biāo)簽有哪些?
<ol+li> 有序列表
<ul+li> 無(wú)序列表
<dl+dt+dd> 描述列表褐缠,dt被描述對(duì)象政鼠,dd是描述
<pre> 保留標(biāo)簽內(nèi)的 空格/換行的樣式
<hr> 添加分割線
<br> 強(qiáng)制換行
<a> 超鏈接,建議加 taget=blank新窗口
<em> 強(qiáng)調(diào)队魏,是斜體
<strong> 重要公般,加粗
<code> 元素呈現(xiàn)一段計(jì)算機(jī)代碼. 默認(rèn)情況下, 它以瀏覽器的默認(rèn)等寬字體顯示
<quote> 內(nèi)聯(lián)(行內(nèi))引用,
<blockquote> 換行的引用