HTML簡介
1.HTML是誰發(fā)明的赖欣？
- 1990年左右，Tim Berners-Lee（蒂姆·伯納斯·李）發(fā)明了萬維網(wǎng)（亦作“WWW”英文全稱為“World Wide Web”）症昏，同時發(fā)明了HTML、HTTP和URL父丰。李爵士寫了第一個瀏覽器肝谭，寫了第一個服務(wù)器，并且用自己的瀏覽器訪問了自己的服務(wù)器蛾扇。
2.HTML是什么攘烛？
HTML 是用來描述網(wǎng)頁的一種標(biāo)記語言，是WWW的描述語言镀首，通過使用標(biāo)記來描述文檔結(jié)構(gòu)和表現(xiàn)形式的一種語言,由瀏覽器進(jìn)行解析,然后把結(jié)果顯示在網(wǎng)頁上.它是網(wǎng)頁構(gòu)成的基礎(chǔ),你見到的所有網(wǎng)頁都離不開HTML,所以學(xué)習(xí)HTML是基礎(chǔ)中的基礎(chǔ).
HTML 指的是超文本標(biāo)記語言 (Hypertext Markup Language)
HTML 不是一種編程語言坟漱，而是一種標(biāo)記語言 (markup language)
標(biāo)記語言是一套標(biāo)記標(biāo)簽 (markup tag)
HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁
HTML的起手寫法
<!DOCTYPE html>
<!-- 文檔類型 -->
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- 字符編碼 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 禁用縮放兼容手機(jī) -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 告訴IE使用最新的內(nèi)核 -->
<title>Document</title>
<!-- 標(biāo)題 -->
</head>
<body>
</body>
</html>
HTML中常用來表示章節(jié)的標(biāo)簽有哪些？
- <h1>~<h6> 標(biāo)題(Heading)元素呈現(xiàn)了六個不同的級別的標(biāo)題更哄，<h1>級別最高靖秩，而<h6>級別最低。
<h1>標(biāo)題一</h1>
<h2>標(biāo)題二</h2>
<h3>標(biāo)題三</h3>
<h4>標(biāo)題四</h4>
<h3>標(biāo)題三</h3>
<h4>標(biāo)題四</h4>
- <section> "章節(jié)" 元素表示一個包含在HTML文檔中的獨立部分竖瘾，它沒有更具體的語義元素來表示，一般來說會有包含一個標(biāo)題花颗。
<section>
<h1>介紹</h1>
<p>自有史以來捕传，人們一直以捕魚進(jìn)行果脯...</p>
</section>
<section>
<h1>釣魚</h1>
<p>釣魚需要做的第一件事就是擁有釣魚竿，然后釣各種魚......</p>
</section>
- <article>“一篇文章”元素表示文檔扩劝、頁面庸论、應(yīng)用或網(wǎng)站中的獨立結(jié)構(gòu)职辅，其意在成為可獨立分配的或可復(fù)用的結(jié)構(gòu)，如在發(fā)布中聂示，它可能是論壇帖子域携、雜志或新聞文章、博客鱼喉、用戶提交的評論秀鞭、交互式組件，或者其他獨立的內(nèi)容項目扛禽。
<article class="天氣預(yù)報">
<h1>知乎天氣預(yù)報</h1>
<article class="今天">
<h2>2019年8月17日</h2>
<p>有雨</p>
</article>
<article class="今天">
<h2>2019年8月18日</h2>
<p>中雨</p>
</article>
<article class="今天">
<h2>2019年8月19日</h2>
<p>傾盆大雨</p>
</article>
</article>
- <p>元素（或者說 HTML 段落元素）表示文本的一個段落锋边。該元素通常表現(xiàn)為一整塊與相鄰文本分離的文本，或以垂直的空白隔離或以首行縮進(jìn)编曼。另外豆巨，<p> 是塊級元素。
<p>這是第一個段落掐场。這是第一個段落往扔。
這是第一個段落。這是第一個段落熊户。</p>
<p>這是第二個段落萍膛。這是第二個段落。
這是第二個段落敏弃。這是第二個段落卦羡。</p>
- <header> 元素用于展示介紹性內(nèi)容，通常包含一組介紹性的或是輔助導(dǎo)航的實用元素麦到。它可能包含一些標(biāo)題元素绿饵，但也可能包含其他元素，比如 Logo瓶颠、搜索框拟赊、作者名稱，等等粹淋。
<header class="頁頭">
<h1>小狗快遞</h1>
</header>
<main>
<p>我非常喜歡中華田園犬吸祟！它們忠誠，勇敢桃移，并且通人性屋匕！</p>
</main>
- <footer> 元素表示最近一個章節(jié)內(nèi)容或者根節(jié)點元素的頁腳。一個頁腳通常包含該章節(jié)作者借杰、版權(quán)數(shù)據(jù)或者與文檔相關(guān)的鏈接等信息过吻。
<article>
<h1>如何做飯</h1>
<ol>
<li>先買菜</li>
<li>再買鍋</li>
<li>一定要有鍋</li>
</ol>
<footer>
<p>? 2019 MDN</p>
</footer>
</article>
© => ?版權(quán)標(biāo)識符
- <main> 元素呈現(xiàn)了文檔的<body>或應(yīng)用的主體部分。主體部分由與文檔直接相關(guān)，或者擴(kuò)展于文檔的中心主纤虽、應(yīng)用的主要功能部分的內(nèi)容組成乳绕。
<header>壁虎</header>
<main role="main">
<p>壁虎是一群通常很小的，通常是夜行的蜥蜴逼纸。它們遍布澳大利亞以外的每個大陸洋措。</p>
<p>許多種類的壁虎都有粘性腳墊，使它們可以爬墻甚至是窗戶</p>
</main>
- <aside> 元素表示一個和其余頁面內(nèi)容幾乎無關(guān)的部分杰刽，被認(rèn)為是獨立于該內(nèi)容的一部分并且可以被單獨的拆分出來而不會使整體受影響菠发。其通常表現(xiàn)為側(cè)邊欄或者標(biāo)注框。
<p>這是一段話专缠，主要內(nèi)容</p>
<aside>
<p>這不重要雷酪，參考注釋</p>
</aside>
<p>第二段話</p>
- <div> 元素(或 HTML 文檔分區(qū)元素) 是一個通用型的流內(nèi)容容器，它在語義上不代表任何特定類型的內(nèi)容涝婉，它可以被用來對其它元素進(jìn)行分組.
<div class="內(nèi)容">
<p>這里可以是任何內(nèi)容</p>
</div>
擁有全局屬性的標(biāo)簽有哪些哥力？
<class> //給你的標(biāo)簽標(biāo)記或者分類
<contenteditable> //使元素可編輯，它幾乎支持所有的HTML元素墩弯。
<div contenteditable="true">
This text can be edited by the user.
</div>
<hidden> //可以使一個標(biāo)簽不被顯示
<id> //定義了一個全文檔唯一的標(biāo)識符 (ID)吩跋。 [不到萬不得以，不使用<id>標(biāo)簽渔工。有時候不唯一時锌钮，也不報錯。JS中可直接調(diào)用id屬性引矩， eg: "xxx. style. border = '1px solid green'";不建議使用梁丘。使用時注意，定義‘xxx’時不能與控制臺‘window.’中的默認(rèn)值沖突旺韭，否則不能使用氛谜。]
<style> //通常使用<style>訪問CSS的屬性列表。
<tabindex> //指示其元素是否可以聚焦区端，以及它是否/在何處參與順序鍵盤導(dǎo)航值漫，通常使用Tab鍵。
eg: tabindex = 正值 表示該元素可以被選擇织盼，按照從小到大依次被選取杨何。
tabindex = 0 表示該該元素最后被選取。
tabindex = 負(fù)值 表示該元素不會被選取沥邻，通常賦值‘-1’.
- <title> //顯示完整內(nèi)容
使用時小技巧：white-space: //表示不換行
nowrap;text-overflow: //溢出部分顯示為省略號
ellipsis;overflow; //溢出部分隱藏
//內(nèi)容太長的話經(jīng)過上面三行代碼危虱，可以使多出部分顯示為"...",
title標(biāo)簽讓鼠標(biāo)浮上去顯示完整內(nèi)容。
常用的內(nèi)容標(biāo)簽有哪些唐全？
* <ol>+<li> //"ol"=>ordered list; "li"=>list;
* <ul>+<li> //"ol"=>unordered list; "li"=>list;
* <dl>+<dt>+<dd> //"dl"=>description list; "dt"=>描述的誰槽地；"dd"=>描述的內(nèi)容；
* <pre> //如果要保留”空格“”回車“”tab“，那么使用<pre>標(biāo)簽包起來捌蚊；
* <hr> //分割線
* <br> //”中斷、打斷近弟、回車“
* <a> //加上”target= ‘_blank’“,鏈接在新窗口打開缅糟，不加則在當(dāng)前窗口打開
* <em> //表示語氣上的強(qiáng)調(diào)
* <strong> //表示內(nèi)容本身的重要性
* <code> //插入代碼；”用code標(biāo)簽包起來祷愉，代碼字體是的等寬的“
* <quote> //內(nèi)斂引用
* <blockquote> //塊級引用
代碼練習(xí)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style> style{display: block}/* 如果把style屬性放入body里面窗宦，
這句話可以使style屬性顯示出來 */
.middle{
background: black; color: white;
}
.bordered{
border: 5px solid red;
}
[class=xxx]{
border:5px solid green;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
a{
color: inherit;
text-decoration: none;
border-bottom: 1px solid;
}
</style>
<style>
table{
border-collapse: collapse; /* border合并起來 */
border-spacing: 0; /* 間隙為零 */
}
td{
border: 1px solid red;
}
</style>
</head>
<body>
<header class="xxx" title="完整的內(nèi)容
（此處寫多少內(nèi)容就顯示多少內(nèi)容）">
頂部廣告頂部廣告頂部廣告頂部廣告頂部廣告頂部廣告頂部廣告
頂部廣告頂部廣告頂部廣告頂部廣告
</header>
<a >點擊這里</a>
<hr>
<div class="middle bordered" contenteditable>
<main>
<h1>文章標(biāo)題</h1>
<p>一段話一段話一段話一段話一段話一段話</p>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<section>
<h2>1.1節(jié)</h2>
<pre>
<p>工作內(nèi)容： 上課</p>
</pre>
</section>
<section>
<h2>1.2節(jié)</h2>
<p>這是一段話</p>
</section>
<p>每天要做的事</p>
<ol>
<li>吃飯</li>
<li>睡覺</li>
<li>打豆豆</li>
</ol>
<p>每天要做的事</p>
<ul>
<li>吃飯</li>
<li>睡覺</li>
<li>打豆豆</li>
</ul>
<p>大美女</p>
<dl>
<dt>貂蟬</dt>
<dd>艷冠天下</dd>
</dl>
</main>
<aisde>
參考資料：
</aisde>
<p>我會用javascrpit</p>
<code>
var a = 1
console.log(a)
</code>
</div>
<footer>© 饑人谷版權(quán)所有</footer>
</body>
</html>
``
