第二篇-HTML入門

1、HTML基礎的基礎**

1.1 什么是HTML:

全稱Hypertext Markup Language:超文本標記語言响驴,主要是用來寫頁面結構恨课,定義每個頁面是什么志衣。HTML寫出來的代碼僅僅能將頁面中的列表、輸入框矿筝、圖片起便、超鏈接、按鈕等信息呈現出來跋涣,但效果也是很辣眼睛的缨睡。。.

1.2 HTML使用什么工具陈辱?

sublime text2很適合入門者使用的工具奖年。

1.3 HTML標準

sublime text2輸入以下代碼

<!DOCTYPE html> 
<html>
<head>
    <title>我愛這個世界</title>
    <meta charset=utf-8>
</head>
<body>hello world

</body>
</html>

以下是對每段代碼的說明。

!DOCTYPE html

(聲明文檔類型是HTML沛贪,寫在整個文檔第一行)

<head>...</head>

(head標簽中用于加入各種標記和屬性標簽)

charset="UTF-8"

(頁面編碼格式是UTF-8)

<title>...</title>

(頁面title是:我愛這個世界陋守,當然,title可以自由設置)

<body>...</body>

(頁面所有信息利赋,比如圖片水评、文字、超鏈接都加入在body中)

總之媚送,每個HTML文檔中中燥,都需要輸入這段代碼,具體的值可以根據自己所需的情況設定塘偎。(其實有些概念還有些模糊疗涉,但先這樣寫下去唄~)

1.3 HTML文件框架

1.3.1 段落標記:

<p>這是第一段</p>

<p>這是第二段</p>

p(paragraph)是分段標記,在HTML中吟秩,一般會用(小于< )( 標記 p )(大于 > )對字符進行標記咱扣,在結尾處加上(小于< )(斜線/)( 標記 p )(大于 > ),表示到此為止涵防,標記結束闹伪。

1.3.2 段落標記

<br>這是第一行
<br>這是第二行

br是換行標記,加入這個標記后壮池,從標記后的第一個字開始的段落偏瓤,會另起一行顯示。br標記比較特殊椰憋,只需要加前面部分(小于< )( 標記 b )(大于 > )硼补,結尾處無需加(小于< )(斜線/)( 標記 b)(大于 > )。

在HTML中熏矿,回車鍵和空格鍵不是表達的我們常用的編輯器的換行和空格效果已骇。所以离钝,在處理這些效果時,都需要加入特殊的標記褪储。

1.3.3 標題

<h1>這是一級標題</h1>
<h2>這是二級標題</h2>
<h3>這是三級標題</h3>

h1\h2\h3\h4\h5\h6分別代表的是一級標題到六級標題卵渴,每級標題顯示的大小和粗細效果均不一樣,一級標題最大最粗鲤竹,六級標題最小最細浪读,以此類推。

2辛藻、基礎格式

2.1文字格式
<b>  這是加粗</b>
<i> 這是斜體</i>
<tt> 這是等寬西體</tt>
<small> 這是小點的字體</small>
2<sup>上標</sup>+9<sub>下標</sub>
<mark> 這是高亮</mark>

文字格式標簽比較多碘橘,這里只是部分,每個標簽的效果均在代碼中直接寫出來了吱肌。

有個比較有意思的上標和下標的效果痘拆,效果如下:2上標+9下標,一般在數學或者商標?中使用較多氮墨。

另外纺蛆,mark的效果是高亮顯示,這里僅表達的是高亮這個命令规揪,具體高亮的樣式再HTML中不表達桥氏,如果有特殊需求,需要用CSS進行補充猛铅。

2.2段語格式
<em>這是強調</em>
<strong>這是著重</strong>
<code>這是代碼樣式</code>

<samp>例子代碼</samp>
<kbd>kbd用戶輸入</kbd>
<var>variable變量</var>
<cite>cite引用</cite>

以上這些標記意思均在代碼中表達了字支,目前只是測試看了一些效果,具體的使用場景還需要在真正寫頁面時才知道如何使用奸忽。

3堕伪、深入格式

3.1.HTML標記的屬性

3.1.1 HTML屬性:

<hr>
<hr width=50%>
<abbr title=中華人民共和國>  點擊這里的時候顯示注解</abbr>

hr不是公司的hr,是分割線的意思月杉;這里也不需要在尾部加上</hr>刃跛,因為這個標記本身就是一個樣式效果抠艾。
hr width=50%(分割線長短)

abbr(表示注解)苛萎,abbr title=中華人民共和國(表示注解內容為『中華人名共和國),這里需要加上尾部標記检号。

3.2.列表與圖片

3.2.1 列表

<ul>
<li>這是一</li>
<li>這是二</li>

<ol>
<li>這是1</li>
<li>這是2</li>
<li>這是3</li>

ul(項目符號<b>·</b>)腌歉,li(每個項目標記)
ol(項目編號1. 2.),li(每個編號計數)

3.2.2 圖片:圖片是一個字符

<img src=“xxx.jpg" >
<img src=“xxx.jpg" width=50% height="200">
<img src=“xxx.jpg” alt=“圖片未加載出來時齐苛,顯示出來的字樣” >

img src=“xxx.jpg" (圖片取自本地文件名為xxx.jpg)
img src=“xxx.jpg" width=50% height="200"(圖片寬高比)
img src=“xxx.jpg” alt=“圖片未加載出來時翘盖,顯示出來的字樣”(圖片未加載出來時,顯示出來的字樣)

在HTML中添加圖片時凹蜂,除了可用本地圖片馍驯,還可以直接使用網絡圖片地址阁危。但為了防止對方將圖片刪除引起當前頁面圖片失效,建議都將圖片存儲到本地后汰瘫,再引用狂打。

另外,目前圖片可使用格式:jpg\gif\png

3.2.3 iframe

<iframe src="http://zhihu.com" width=800></iframe>  

在當前頁面中混弥,插入zhihu.com這個網站趴乡,且可直接在當前頁面進行瀏覽使用。

3.3.超鏈接

3.3.1 超鏈接

<a >進入花瓣</a>
<a href="http://huaban.com/pins/882969860/“ target=_blank>進入花瓣</a>

a是指超鏈接蝗拿, href超鏈接地址晾捏;
a href="http://huaban.com/pins/882969860/" target=_blank(進入超鏈接,且打開新頁面)

3.3.2 頁面內鏈接

<p id=xxxx>
<a href=“#xxx"> 點擊這里跳轉到xxx位置所在段落</a>
<a href=“xxx.html#xxx"> 點擊這里跳轉到xxx頁面的xxx位置所在段落</a>

注釋直接寫在代碼中了~

3.3.3 圖片定位鏈接

3.4 表格
前面
<table border="1”>
    <caption> 表格title </caption>
    <thead>
    <tr>
        <th>os</th>
        <th>chinese</th>
        <th>french</th>
    </thead>
    </tr>

    <tr>
        <td>ios10</td>
        <td>yes</td>
        <td>tes</td>
    </tr>

    <tr>
        <tfoot>
        <td colspan="3">hahahaha</td>

    </tr></tfoot>

</table>
后面
表格效果.png

table border="1”(表格哀托、線占1個像素 )
caption(表格title )
thead (表頭)
tr(列)
th(行 )
tfoot(表尾)

以上是HTML基礎入門的一些內容惦辛,第一次寫了一個丑丑的頁面,但還是成就感滿滿哈哈哈萤捆。接下來要學習CSS入門啦裙品。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市俗或,隨后出現的幾起案子市怎,更是在濱河造成了極大的恐慌,老刑警劉巖辛慰,帶你破解...
    沈念sama閱讀 212,718評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件区匠,死亡現場離奇詭異,居然都是意外死亡帅腌,警方通過查閱死者的電腦和手機驰弄,發(fā)現死者居然都...
    沈念sama閱讀 90,683評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來速客,“玉大人戚篙,你說我怎么就攤上這事∧缰埃” “怎么了岔擂?”我有些...
    開封第一講書人閱讀 158,207評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長浪耘。 經常有香客問我乱灵,道長,這世上最難降的妖魔是什么七冲? 我笑而不...
    開封第一講書人閱讀 56,755評論 1 284
  • 正文 為了忘掉前任痛倚,我火速辦了婚禮,結果婚禮上澜躺,老公的妹妹穿的比我還像新娘蝉稳。我一直安慰自己抒蚜,他們只是感情好,可當我...
    茶點故事閱讀 65,862評論 6 386
  • 文/花漫 我一把揭開白布耘戚。 她就那樣靜靜地躺著削锰,像睡著了一般。 火紅的嫁衣襯著肌膚如雪毕莱。 梳的紋絲不亂的頭發(fā)上器贩,一...
    開封第一講書人閱讀 50,050評論 1 291
  • 那天,我揣著相機與錄音朋截,去河邊找鬼蛹稍。 笑死,一個胖子當著我的面吹牛部服,可吹牛的內容都是我干的唆姐。 我是一名探鬼主播,決...
    沈念sama閱讀 39,136評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼廓八,長吁一口氣:“原來是場噩夢啊……” “哼奉芦!你這毒婦竟也來了?” 一聲冷哼從身側響起剧蹂,我...
    開封第一講書人閱讀 37,882評論 0 268
  • 序言:老撾萬榮一對情侶失蹤声功,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后宠叼,有當地人在樹林里發(fā)現了一具尸體先巴,經...
    沈念sama閱讀 44,330評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,651評論 2 327
  • 正文 我和宋清朗相戀三年冒冬,在試婚紗的時候發(fā)現自己被綠了伸蚯。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,789評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡简烤,死狀恐怖剂邮,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情横侦,我是刑警寧澤挥萌,帶...
    沈念sama閱讀 34,477評論 4 333
  • 正文 年R本政府宣布,位于F島的核電站丈咐,受9級特大地震影響瑞眼,放射性物質發(fā)生泄漏龙宏。R本人自食惡果不足惜棵逊,卻給世界環(huán)境...
    茶點故事閱讀 40,135評論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望银酗。 院中可真熱鬧辆影,春花似錦徒像、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,864評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至次慢,卻和暖如春旁涤,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背迫像。 一陣腳步聲響...
    開封第一講書人閱讀 32,099評論 1 267
  • 我被黑心中介騙來泰國打工劈愚, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人闻妓。 一個月前我還...
    沈念sama閱讀 46,598評論 2 362
  • 正文 我出身青樓菌羽,卻偏偏與公主長得像,于是被迫代替她去往敵國和親由缆。 傳聞我的和親對象是個殘疾皇子注祖,可洞房花燭夜當晚...
    茶點故事閱讀 43,697評論 2 351

推薦閱讀更多精彩內容

  • 發(fā)現 關注 消息 iOS 第三方庫、插件均唉、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,066評論 4 62
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,864評論 25 707
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案是晨? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,741評論 1 92
  • 淡 空山 錦時煙云,花鳥不驚 夢馬素昧平生舔箭,懶理凰鳳貪歡 人言人 瞞瞞 酣 蜜罐 兩相情共署鸡,天地與同 灼螢火此生光...
    堇臨z閱讀 285評論 0 2
  • 文|歲是年 愛情就像兩個人扯橡皮筋,受傷的總是...
    陳祿閱讀 1,068評論 2 1