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>
后面
table border="1”(表格哀托、線占1個像素 )
caption(表格title )
thead (表頭)
tr(列)
th(行 )
tfoot(表尾)
以上是HTML基礎入門的一些內容惦辛,第一次寫了一個丑丑的頁面,但還是成就感滿滿哈哈哈萤捆。接下來要學習CSS入門啦裙品。