windows系統(tǒng)下學(xué)習(xí)html開發(fā)的工具:記事本贡茅、WebStorm
若使用記事本開發(fā)爪瓜,編碼格式要改為UTF-8,后綴為.html宗挥。
學(xué)習(xí)html的網(wǎng)站:
html參考手冊(cè):中文
html reference: English and/or Chinese
https://developer.mozilla.org/zh-CN/docs/Web
http://docs.webplatform.org/wiki/Main_Pagezzzz
html標(biāo)題
<head>看起來(lái)指代的是標(biāo)題掰派,其實(shí)并不是从诲,它定義的是網(wǎng)頁(yè)的一些屬性。
那么html的標(biāo)題指的是什么呢靡羡?我接觸到的是這樣幾個(gè):
<h1><h2><h3><h4><h5><h6>
一級(jí)~六級(jí)標(biāo)題
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html學(xué)習(xí)筆記1</title>
</head>
<body>
<h1>一級(jí)標(biāo)題</h1>
<h2>二級(jí)標(biāo)題</h2>
<h3>三級(jí)標(biāo)題</h3>
<h4>四級(jí)標(biāo)題</h4>
<h5>五級(jí)標(biāo)題</h5>
<h6>六級(jí)標(biāo)題</h6>
</body>
</html>
*注明*
<!DOCTYPE html>聲明為 HTML5 文檔
<html>元素是 HTML 頁(yè)面的根元素
<head>元素包含了文檔的元(meta)數(shù)據(jù)
<title>元素描述了文檔的標(biāo)題
<body>元素包含了可見的頁(yè)面內(nèi)容
html段落
<p>這是一個(gè)段落</p>
html空格
html是空白不敏感的語(yǔ)言系洛,任意多個(gè)空格會(huì)被認(rèn)作一個(gè),任意多個(gè)換行也會(huì)被認(rèn)作一個(gè)空格略步。
東亞雙寬的字符若是寫的時(shí)候不同行描扯,在顯示的時(shí)候會(huì)被放在同行,中間加上一個(gè)空格纳像。
要使得文字換行顯示荆烈,就要用到<br>
如:<h1>一級(jí)<br>標(biāo)題</h1>
要使文字中間有多個(gè)空格,使用轉(zhuǎn)義符 (nbsp: non-breakable space)
如:<h1>一級(jí) 標(biāo)題</h1>
html轉(zhuǎn)義符
既然講到html轉(zhuǎn)義符了就再舉一些常見的轉(zhuǎn)義符的例子:
在html中竟趾,被尖括號(hào)< >括起來(lái)的內(nèi)容一般都是有一定屬性涵義的憔购,并且html有一定的容錯(cuò)率,如果我們?cè)诩饫ㄌ?hào)里加上一段不知所云的英文岔帽,html雖然識(shí)別不了玫鸟,但是它會(huì)盡可能地理解你,用它博大的胸懷包容你犀勒,顯示出它認(rèn)為你可能想要的內(nèi)容屎飘。
比如
因此這個(gè)時(shí)候钦购,轉(zhuǎn)義符就上場(chǎng)了。
< : < ?(less than)
>: ?> ?(greater than)
&: &
html字體
<u>下劃線</u>
<i>斜體</i>
<b>加粗</b>
html高亮
<mark>Hello World</mark>
<mark>中的默認(rèn)屬性是字體背景變?yōu)榱咙S色褂萧,但是這個(gè)屬性是可以改的押桃。
<mark style="color:red>content</mark> ?字體顏色變?yōu)榧t色,背景色仍為黃色
<mark style="ground-color:red">content</mark> ?字體顏色不變导犹,背景色變?yōu)榧t色
<strong> & <em>
通常唱凯,我們使用<strong>代替<b>羡忘,用<em>代替<i>。
因?yàn)?lt;b>和<i>只是將某段內(nèi)容進(jìn)行格式上的改動(dòng)磕昼,卻沒有賦予內(nèi)容一定的語(yǔ)義內(nèi)涵(semantic)卷雕。
html鏈接<a>
<a href="網(wǎng)址/地址">標(biāo)簽文字</a> ? href: hyper-reference
目標(biāo)打開方式:
<a href="target.html" target="...">
target:
_blank: 在新窗口中打開被鏈接文檔
_self: default。在相同框架下打開被鏈接文檔
_parent: 和父框架集的打開形式一樣
_top: 在整個(gè)窗口中打開
framename: 在指定框架中打開
html圖片img
引用與html文件在同一文件夾下的圖片文件:
<img src="文件名.jpg" alt="alt是圖片無(wú)法正常加載時(shí)顯示的內(nèi)容" width="30%"(or width=100px票从,在不指定height的情況下圖片等比例縮放)>
引用與html文件不在同一文件下的圖片文件:
<img src="相對(duì)路徑/文件名"/>
相對(duì)路徑:相對(duì)于引用此文件的html的路徑的路徑
<img src="img/01/Koala.jpg"/>
將一張圖片作為打開超鏈接的媒介:
<a href="target.html" target="_blank">
<img src="Koala.jpg" alt="圖片無(wú)法正常加載">
</a>
html列表
<ol> ordered list
<ul> ?un-ordered list
<li> ?listitem
html定義列表
<dl> ?define list
<dt> ?define term
<dd> ?define description
html引用
.. ?父級(jí)別
. ?同級(jí)別
兩個(gè)比較特別的標(biāo)簽
<div></div> 塊狀內(nèi)容block
<span></span>行內(nèi)內(nèi)容in-line
用它們?cè)谶壿嬌蟻?lái)組織網(wǎng)頁(yè)內(nèi)容
<div id="heading">
通知
</div>
<div id="content">
<p>第一段</p>
<p>第二段</p>
</div>
<div id="footer">
<span>署名</span>
</div>
<style>
$Title$
#heading{
color:palevioletred;
}
#content{
font-size:200%;
}
</style>