HTML入門筆記1

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 換行的引用

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末帽驯,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子书闸,更是在濱河造成了極大的恐慌尼变,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,496評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件梗劫,死亡現(xiàn)場離奇詭異享甸,居然都是意外死亡截碴,警方通過查閱死者的電腦和手機(jī)梳侨,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來日丹,“玉大人走哺,你說我怎么就攤上這事≌芟海” “怎么了丙躏?”我有些...
    開封第一講書人閱讀 162,632評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長束凑。 經(jīng)常有香客問我晒旅,道長,這世上最難降的妖魔是什么汪诉? 我笑而不...
    開封第一講書人閱讀 58,180評論 1 292
  • 正文 為了忘掉前任废恋,我火速辦了婚禮,結(jié)果婚禮上扒寄,老公的妹妹穿的比我還像新娘鱼鼓。我一直安慰自己,他們只是感情好该编,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,198評論 6 388
  • 文/花漫 我一把揭開白布迄本。 她就那樣靜靜地躺著,像睡著了一般课竣。 火紅的嫁衣襯著肌膚如雪嘉赎。 梳的紋絲不亂的頭發(fā)上置媳,一...
    開封第一講書人閱讀 51,165評論 1 299
  • 那天,我揣著相機(jī)與錄音公条,去河邊找鬼半开。 笑死,一個(gè)胖子當(dāng)著我的面吹牛赃份,可吹牛的內(nèi)容都是我干的寂拆。 我是一名探鬼主播,決...
    沈念sama閱讀 40,052評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼抓韩,長吁一口氣:“原來是場噩夢啊……” “哼纠永!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起谒拴,我...
    開封第一講書人閱讀 38,910評論 0 274
  • 序言:老撾萬榮一對情侶失蹤尝江,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后英上,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體炭序,經(jīng)...
    沈念sama閱讀 45,324評論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,542評論 2 332
  • 正文 我和宋清朗相戀三年苍日,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了惭聂。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,711評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡相恃,死狀恐怖辜纲,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情拦耐,我是刑警寧澤耕腾,帶...
    沈念sama閱讀 35,424評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站杀糯,受9級特大地震影響扫俺,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜固翰,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,017評論 3 326
  • 文/蒙蒙 一狼纬、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧倦挂,春花似錦畸颅、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,668評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春送火,著一層夾襖步出監(jiān)牢的瞬間拳话,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,823評論 1 269
  • 我被黑心中介騙來泰國打工种吸, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留弃衍,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,722評論 2 368
  • 正文 我出身青樓坚俗,卻偏偏與公主長得像镜盯,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子猖败,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,611評論 2 353

推薦閱讀更多精彩內(nèi)容

  • 萬維網(wǎng) WWW & HTML 的發(fā)明 WWW 簡述 WWW = URL + HTTP + HTML WWW: Wo...
    饑人谷_AaronXu閱讀 575評論 0 0
  • Get Started HTML的發(fā)明者 HTML起手式 常用的章節(jié)標(biāo)簽 全局屬性 常用的內(nèi)容標(biāo)簽 HTML的發(fā)明...
    茜Akane閱讀 273評論 1 0
  • I : HTML是誰發(fā)明的: 蒂姆·伯納斯-李速缆。他在04年被英女王授予爵士稱號,也就是我們常稱的“李爵士”恩闻。在20...
    Sharp丶TJ閱讀 255評論 0 1
  • 1 HTML歷史 1990年 Tim Berners-Lee實(shí)現(xiàn)HTTP客戶端與服務(wù)器的第一次通訊艺糜,設(shè)計(jì)并構(gòu)建第一...
    蘇wisdom閱讀 295評論 0 0
  • 今天筆者看完了饑人谷的HTML網(wǎng)課,對于其又有了全新的理解幢尚。今天筆者就來與大家分享一下破停。包括HTML的概述,歷史以...
    鄭饞師閱讀 503評論 0 2