html 誰發(fā)明的:? ?
HTML是由WEB之發(fā)明者Tim Berners-Lee和同事Daniel W.Connolly于1990年創(chuàng)立之一種標(biāo)記式語言 其中Tim Berners-Lee是萬維網(wǎng)之父
html 起手應(yīng)該寫啥
```
<!DOCTYPE html>
<!--文檔類型-->
<html lang="zh-CN">
<!--html標(biāo)簽译株,lang最開始為en错沽,改為中文-->
<head>
? ? <meta charset="UTF-8">
? ? <!--文件字符編碼-->
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
? ? <!--禁用縮放烟具,兼容手機(jī)吱韭,寬度跟設(shè)備寬度一樣爽待,默認(rèn)的縮放比例是1倍藤违,最小縮放比例等于1粥脚,最大縮放比例等于1谍咆,用戶不準(zhǔn)縮放-- >
? ? <meta http-equiv="X-UA-Compatible" content="ie=edge">
? ? <!--告訴IE使用最新內(nèi)核-->
? ? <title>yiWeiShuaiGe</title>
? ? <!--標(biāo)題-->
</head>
<body>
~~~~~~~~~~
</body>
</html>
```
常用的表章節(jié)的標(biāo)簽
```
=================================
? <!--標(biāo)題-->
<h1> 標(biāo)題1 <\h1>
<h2> 標(biāo)題2 <\h2>
<h3> 標(biāo)題3 <\h3>
<h4> 標(biāo)題4 <\h4>
<h5> 標(biāo)題5 <\h5>
......
=================================
? ? <!--章節(jié)-->
<section> 章節(jié) <\section>
=================================
? ? <!--文章-->
<article> 文章 <\article>
=================================
? ? <!--頂部內(nèi)容禾锤,一般用于廣告-->
<header> 這是廣告位 <\header>
=================================
? ? <!--主要內(nèi)容標(biāo)簽-->
<main> 主要內(nèi)容 <\main>
=================================
? ? <!--旁支內(nèi)容-->
<aside> 旁支內(nèi)容 <\aside>
=================================
? ? <!--區(qū)域劃分-->
<div> 區(qū)域劃分 <\div>
=================================
```
# 全局屬性
1. class
? ?>? <div class="middle bordered"></div>
2. contenteditable
讓用戶可以直接編輯內(nèi)容
3. hidden
隱藏標(biāo)簽
4. id
加上 id 以后可以調(diào) css
加上 id 以后可以用 js
divid.style.border = "1px solid red"
* 但不提倡用這種寫法, 因?yàn)檫@種寫法對 id 的命名有要求卧波,比如用 parent, top, self 等命名 id 就不行时肿。因?yàn)?window 里有很多已經(jīng)定義好的全局屬性,不可以和這些屬性同名港粱。? 所以不到萬不得已不要用 id螃成,用 class
5. style
設(shè)置內(nèi)聯(lián)樣式
對于 style 的優(yōu)先級:
* JS > HTML 的 style 標(biāo)簽 > CSS
6. tabindex
正數(shù),如 tabindex=1 / 2/ 3/查坪,表示按順序訪問
0寸宏, 表示最后訪問
-1, 表示不要用 tab 訪問
7. title
用來顯示完整內(nèi)容
應(yīng)用場景:文字超長變省略號
單行文字溢出:
調(diào)整 css
* white-space: nowrap; 不要換行
* text-overflow: ellipsis 溢出的部分用....
* overflow: hidden; 溢出的部分隱藏
但我希望偿曙,當(dāng)鼠標(biāo)移動到省略的地方上時(shí)氮凝,可以浮動地顯示完整內(nèi)容,就可以在 title="完整內(nèi)容"望忆,即可
# 常用的內(nèi)容標(biāo)簽
HTML 代碼里的多處空格罩阵、回車竿秆、tab 等內(nèi)容,默認(rèn)會被轉(zhuǎn)化為一個(gè)空格
如果想保留多處空格稿壁、回車幽钢、tab 等,就要用 pre
* < pre>
????保留空格傅是、回車鍵匪燕; 其他標(biāo)簽會把多余的空格和回車鍵轉(zhuǎn)換為一個(gè)空格
* < code>
????等寬英文字體,如果需要寫換行的代碼喧笔,嵌套一個(gè) pre 標(biāo)簽即可
????<pre><code>var aaa = 1; console.log(a)</code></pre>
* < hr> 水平分隔線
* < br> 換行
* ol li 有序列表
* ul li 無序列表
* dl + dt 要描述的對象 + dd 要描述的內(nèi)容
* < em>和< strong> 表示強(qiáng)調(diào)
? ? * em 表示語氣上的強(qiáng)調(diào)
? ? * strong 表示內(nèi)容本身很重要
* quote 行內(nèi)引用
* blockquote 換行的引用