HTML入门学习 -- HTML基础知识
生活随笔
收集整理的這篇文章主要介紹了
HTML入门学习 -- HTML基础知识
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
?打算按照?HTML?->?CSS?–>?JavaScript?–>?jQuery?–>?HTML5?–>?WebGL?的順序，簡(jiǎn)略學(xué)習(xí)一下Web前端技術(shù)。
? ? 因?yàn)椴皇歉鉝eb的，只需要大概過一下有個(gè)印象就行，每一項(xiàng)花費(fèi)3天到一周時(shí)間走馬觀花的看看。
編輯器就選擇Sublime Text 2,非常舒服的一編輯器。除了C#、VB等用Visual Studio占有絕對(duì)優(yōu)勢(shì)的語言，其它的Sublime Text 2基本上都算非常好的選擇了。尤其是Fortran這樣科學(xué)計(jì)算比較冷門的語言，我目前嘗試的只有Vim和Sublime Text 2加上插件后比較舒服，Vim的適應(yīng)時(shí)間則比較長。?
?????http://www.w3school.com.cn/? 是一個(gè)非常好的Web前端技術(shù)學(xué)習(xí)平臺(tái)，以及它的新版
http://w3schools.com/
1. 基礎(chǔ)知識(shí)?
<html><head>
????<title>標(biāo)題欄題目：楊韜HTML學(xué)習(xí)1?2012.11.10</title>
????<!--?內(nèi)部樣式表?-->
????<style?type="text/css">
????????h1{background:?red}
????</style>??
</head>
<body>
????<h1>一級(jí)標(biāo)題</h1>
????<h4?align="center">通過屬性居中</h1>
????<p>段落</p>
????<!--?內(nèi)聯(lián)樣式表?-->
????<p?style="color:red;?background:blue"?>body內(nèi)為可見內(nèi)容</p>
????<a?href="http://www.baidu.com"??target="_blank">target新的窗口打開超鏈接</a>
????<a?href="1.html">在當(dāng)前目錄下超鏈接</a>
????嵌套圖像連接
????<a?href="http://www.baidu.com">????
????????<img?src="http://www.baidu.com/img/baidu_sylogo1.gif"/>
????</a>
????<a?href="#biaoqian">跳轉(zhuǎn)到當(dāng)前頁的標(biāo)簽處</a>
????<p><a?name="biaoqian">標(biāo)簽錨定處</a></p>
????<p>
????????圖像<img?src="http://www.baidu.com/img/baidu_sylogo1.gif">
????????限定尺寸圖像<img?src="http://www.baidu.com/img/baidu_sylogo1.gif"?width="100"?height="50">
????</p>
????<b>粗體</b>????
????<sub>下標(biāo)</sub>?<sup>上標(biāo)</sup>
????<b><i>斜體</i></b>?<!--?字體可以嵌套?-->
????<big>大號(hào)字體</big>?
????<em>斜體</em>
????<del>刪除線</del>
????<ins>下劃線</ins>
????<div>節(jié)</div>
????<hr/><!--?水平線?-->
????<table?border="1">
????????<tr>
????????????<th?colspan="2">表頭1</th>
????????????<th>表頭2</th>
????????</tr>
????????<tr>
????????????<td>1</td>
????????????<td>2</td>
????????????<td>3</td>
????????</tr>
????????<tr>
????????????<td>1</td>
????????</tr>
????</table>
????<ul>
????????<li>無序列表</li>
????????<li>無序列表</li>
????</ul>
????<ol>
????????<li>有序列表</li><!--?order次序?-->
????????<li>有序列表</li>
????????<li>有序列表</li>
????</ol>
????<dl>
????????<dt>定義列表</dt>
????????????<dd>列表項(xiàng)</dd>
????????????<dd>內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表</dd>
????????????<dd>列表項(xiàng)</dd>
????????<dt>定義列表</dt>
????????????<dd>列表項(xiàng)</dd>
????????????<dd>列表項(xiàng)</dd>
????????????<dd>列表項(xiàng)</dd>
????</dl>
</body>
</html>
?
2.布局?
<html><head>
????<title>HTML學(xué)習(xí)2?布局?楊韜?2012.11.10</title>
????<!--?添加樣式?-->
????<style?type="text/css">?
????????/*布局顏色*/
????????div#head?{background-color:?#99bbaa;}/*背景色*/
????????div#menu?{background-color:?blue;?
????????????height:?200px;?
????????????width:?100px;?
????????????float:?left;????/*float位置*/
????????????/*text-align:?center;/*文字居中*/*/
????????????}????
????????div#constent?{background-color:?yellow;?height:?200px;width:?400px;?float:?left;}
????????div#footer?{background:?green;?
????????????clear:both;/*有這一行才能在下邊顯示*/
????????????text-align:center;}/*文字居中*/
????????/*項(xiàng)目邊框*/
????????h1?{margin-bottom:?0;}/*h1底部間距=0各個(gè)塊才能沒有空隙*/
????</style>????
</head>
<body>
????<div?id="head">????????<!--?添加4個(gè)分塊?id可自己命名-->
????????<h1>頭部</h1>????????
????</div>
????<div?id="menu">
????????<h1?align="center">菜單</h1><!--?文字居中顯示?-->
????????<ul><!--?無序列表?-->
????????????<li>標(biāo)題1</li>
????????????<li>標(biāo)題1</li>
????????????<li>標(biāo)題1</li>
????????</ul>
????</div>
????<div?id="constent">
????????<h1>內(nèi)容</h1>
????</div>
????<div?id="footer">
????????<h1>底部</h1>
????</div>
</body>
</html>
?
3. 表單
<html><head>
????<title>HTML學(xué)習(xí)3?楊韜</title>
</head>
<body>
????<form>?<!--?表單?包含表單元素的區(qū)域-->
????????<fieldset><!--?外邊框?-->
????????<legend>邊框文字</legend>
????????文本框
????????<input?type="text"?name=""?value=""?placeholder="">
????????</fieldset>
????????<br/><!--?換行?-->
????????<input?type="button"?name=""?value="按鈕">
????????<br/>
????????<input?type="radio"?name="sex"?value=""?placeholder="****"><!--?placeholder占位符?-->
????????<input?type="radio"?name="sex"?value=""?placeholder="">
????</form>
????<textarea>文本域?輸入大量文本</textarea>
????<button>按鈕?比input的button提供更多功能</button>
????<select?name="下拉菜單"?multiple>
????????<option?value="">下拉菜單1</option>
????????<option?value="">下拉菜單2</option>
????????<option?value="">下拉菜單3</option>
????????option
????</select>
</body>
</html>
轉(zhuǎn)載于:https://www.cnblogs.com/yhws/p/3858561.html
總結(jié)
以上是生活随笔為你收集整理的HTML入门学习 -- HTML基础知识的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 标准的Java编码规范手册
- 下一篇： asp.net 之高速缓存