今天筆者看完了饑人谷的HTML網(wǎng)課，對于其又有了全新的理解豹芯。
今天筆者就來與大家分享一下亿卤。包括HTML的概述，歷史以及一些常用的標(biāo)簽辅柴。
HTML概述
首先我們來看看維基百科上對于html的簡述箩溃。
Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.
Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page. HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets. Tags such as<img />and<input />directly introduce content into the page. Other tags such as<p>surround and provide information about document text and may include other tags as sub-elements. Browsers do not display the HTML tags, but use them to interpret the content of the page.
HTML can embed programs written in a scripting language such as JavaScript, which affects the behavior and content of web pages. Inclusion of CSS defines the look and layout of content. The World Wide Web Consortium (W3C), former maintainer of the HTML and current maintainer of the CSS standards, has encouraged the use of CSS over explicit presentational HTML since 1997.[2]
——————Wikipeia
簡而言之就是html是一個(gè)用于開發(fā)網(wǎng)頁的工具，世界聞名的WWW碌嘀，也就是萬維網(wǎng)涣旨，包括了URL（用于訪問網(wǎng)站），HTML（用于開發(fā)網(wǎng)頁）以及HTTP（用于開發(fā)網(wǎng)站系統(tǒng)）股冗，其中UTP和HTTP筆者后面的筆記將會(huì)介紹霹陡，今天先進(jìn)行HTML的介紹。
HTML歷史
這一段在維基百科上也有大家可以去看看止状，筆者就將一部分上面內(nèi)容分享至此烹棉。
In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed and prototyped ENQUIRE, a system for CERN researchers to use and share documents. In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system.[3] Berners-Lee specified HTML and wrote the browser and server software in late 1990. That year, Berners-Lee and CERN data systems engineer Robert Cailliau collaborated on a joint request for funding, but the project was not formally adopted by CERN. In his personal notes[4] from 1990 he listed[5] "some of the many areas in which hypertext is used" and put an encyclopedia first.
The first publicly available description of HTML was a document called "HTML Tags", first mentioned on the Internet by Tim Berners-Lee in late 1991.[6][7] It describes 18 elements comprising the initial, relatively simple design of HTML. Except for the hyperlink tag, these were strongly influenced by SGMLguid, an in-house [Standard Generalized Markup Language]
(https://en.wikipedia.org/wiki/Standard_Generalized_Markup_Language "Standard Generalized Markup Language") (SGML)-based documentation format at CERN. Eleven of these elements still exist in HTML 4.[8]
—————— Wikipedia
這個(gè)李爵士竟然在兼職的時(shí)候以一己之力創(chuàng)造了URL，HTML怯疤，HTTP實(shí)在是吾輩之楷模浆洗。
HTML的起手操作
使用vscode，只要輸入一個(gè)
!
后按tab集峦，即可完成HTML的起手工作伏社。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
作者將不分別對其中元素進(jìn)行介紹抠刺，而是介紹新手一般需要改動(dòng)的，也就是
<html lang="en">
這里一般會(huì)將en改成zh-CN,意思語言改成是中國的中文摘昌。然后body一般是頁面中可視化的速妖，head則是看不見的。知道這個(gè)細(xì)微差別就好了聪黎。
HTML常用的標(biāo)簽
包括但不僅限于
<h1></h1>
<p></p>
<section></section>
<header></header>
<footer></footer>
<main></main>
<aside></aside>
<div></div>
我們將一個(gè)一個(gè)介紹罕容。
- <h1></h1>
首先是h1，這個(gè)是標(biāo)題的意思稿饰，123456數(shù)字由小到大但是標(biāo)題的重要性卻是h1為主標(biāo)題锦秒，h2次之，以此類推湘纵。 <p></p>
這個(gè)就是paragraph脂崔，段落的意思，你用p標(biāo)簽包裹著你的內(nèi)容就可以實(shí)現(xiàn)分段梧喷。
- <section></section>
分章節(jié)， - <header></header>
在網(wǎng)頁的頂部顯示的東西 - <footer></footer>
在網(wǎng)頁的底部顯示的內(nèi)容脖咐。 - <main></main>
主要內(nèi)容铺敌。 - <aside></aside>
不那么主要的內(nèi)容。 - <div></div>
這個(gè)比較簡單粗暴屁擅，意思就是這里面是一個(gè)部分偿凭，就是沒有段，章節(jié)的概念派歌，就是一個(gè)部分弯囊。
全局屬性
由于這些是一些屬性而非內(nèi)容，所以一般不會(huì)顯示在網(wǎng)頁上胶果。
<div class="master piece"></div>
一般來說全局屬性的寫法與上面那個(gè)基本一樣匾嘱，都是寫在<>里面的。主要的屬性包括但不限于以下的早抠。
- class
為這一個(gè)元素命名霎烙，一般不要求全場唯一。命名形式一般如此
<div class="master piece"></div>
那要如何修飾這個(gè)class呢蕊连？在css中或者是html1的style中有兩個(gè)方法：
- [master piece]{改動(dòng)內(nèi)容}悬垃，這方法需要輸入其完整的classname。
- .master {改動(dòng)內(nèi)容}甘苍，這里則不需要輸入完整的classname尝蠕，但會(huì)將classname中含有master的class全部改掉。
- id
與class類似载庭，他也是用來命名元素的看彼，但是他要求全場唯一廊佩，而且不唯一的時(shí)候不報(bào)錯(cuò)，一般不使用闲昭。 - contenteditable
可以直接在網(wǎng)頁中對于其中內(nèi)容進(jìn)行修改罐寨。 - hidden
這個(gè)里面的元素全部在網(wǎng)頁中隱藏。 - tabindex
一般是
<h1 tabindex="1"></h1>
<section tabindex="2"></section>
<header tabindex="3"></header>
按tab序矩，則網(wǎng)頁則會(huì)照123的順序選定內(nèi)容鸯绿。可以不連續(xù)簸淀，僅按照數(shù)字的絕對大小進(jìn)行排序選擇瓶蝴。
- title
鼠標(biāo)浮動(dòng)在那里則會(huì)顯示相應(yīng)title里的內(nèi)容。
全局屬性小技巧
接下來介紹兩個(gè)用于全局屬性的小技巧租幕。
直接修改頁面的style
首先要知道舷手，style一般都放在head里面，這樣就沒法看見劲绪，其次就是style在頁面中一般是隱藏的男窟。首先我們要做的就是在body里面創(chuàng)建一個(gè)style，他就成了HTML的屬性而不是css贾富，然后由于style一般都是hiden歉眷，所以我們直接在style里面編輯，讓style可視化颤枪。display:block;為了方便找到它的位置汗捡，一般我會(huì)加上邊框
border:black 1px solid;。然后再改變style的全局屬性讓它可以被編輯畏纲。
<style contenteditable>
style{
display:block;border:black 1px solid;
}
.demo{
background:gray
}</style>
<div class="demo">
<ol>
<li></li>
<li></li>
</ol>
<dl>
<dt>小張</dt>
<dd>
長得丑
</dd>
</dl>
</div>
文字很多只顯示一行扇住，鼠標(biāo)放在上面浮現(xiàn)全部內(nèi)容。
首先先創(chuàng)建一個(gè)div里面有很多的話盗胀。
<div class="demo">
拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦拉拉拉拉拉拉啊啦啦
</div>
頁面效果
那怎么才能讓他只有一行而且不超格呢艘蹋？
white-space: nowrap;
overflow:hidden;
text-overfolw: ellipsis;
這樣就OK了。然后再加一個(gè)title把它主要內(nèi)容輸入即可读整。
主要內(nèi)容
包括但不限于以下標(biāo)簽簿训。
<ol>
<li></li>
</ol>
<ul>
<li></li>
</ul>
<dl>
<dt></dt>
<dd></dd>
</dl>
<pre></pre>
<code></code>
<hr>
<br>
<a href=""></a>
<em></em>
<strong></strong>
<blockquote></blockquote>
- ol+li
正向的列表，有序列表,注意ol中只能包含li作為唯一的內(nèi)容子集米间。 - ul+li
列表强品，無序列表,注意ul中只能包含li作為唯一的內(nèi)容子集。
*dl+dt+dd
描述性的列表屈糊，dt做為被修飾的元素的榛，dd用于修飾他。比如說
<dl>
<dt>小張</dt>
<dd>
長得丑
</dd>
</dl>
長得丑就是用來描述小張的逻锐。
- pre
一般來說夫晌，HTML中內(nèi)容無論有多少個(gè)空格雕薪，回車，tab都會(huì)被縮進(jìn)成一個(gè)空格晓淀，加入pre可以保證所有空格保留所袁。 - code
讓里面的字體等寬。 - hr
水平分割線 - br
換行 - a
附上鏈接凶掰，一般是當(dāng)前頁面打開新連接燥爷。 - target
附上鏈接，一般是新開頁面打開新連接懦窘。 - em
強(qiáng)調(diào)前翎，用于強(qiáng)調(diào)語氣。 - strong
強(qiáng)調(diào)內(nèi)容畅涂。 - block quoto
引用港华。
注意事項(xiàng)
- 在head中的style是css，在div里面的css是html午衰，在js也可以直接引用style立宜，優(yōu)先級如下：
- js
- html
- css
意思是若是js與css中style沖突，則會(huì)優(yōu)先選擇js中樣式臊岸。
- js中直接引用文件style時(shí)候元素的命名需要非常謹(jǐn)慎赘理，很容易就會(huì)與網(wǎng)頁本身的一些全局元素沖突，所以一般不建議新手使用
- tabindex命令中扇单，如果數(shù)字為0，則代表最后選擇奠旺。若是負(fù)數(shù)則永遠(yuǎn)不選蜘澜。
- **商標(biāo)版權(quán)的標(biāo)志就是& copy;
注意上面的一個(gè)標(biāo)點(diǎn)都不可錯(cuò)，而且&與copy間沒有空格响疚。?
