HTML入门学习 -- HTML基础知识
生活随笔
收集整理的這篇文章主要介紹了
HTML入门学习 -- HTML基础知识
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?打算按照?HTML?->?CSS?–>?JavaScript?–>?jQuery?–>?HTML5?–>?WebGL?的順序，簡略學習一下Web前端技術。
? ? 因為不是搞Web的，只需要大概過一下有個印象就行，每一項花費3天到一周時間走馬觀花的看看。
編輯器就選擇Sublime Text 2,非常舒服的一編輯器。除了C#、VB等用Visual Studio占有絕對優勢的語言，其它的Sublime Text 2基本上都算非常好的選擇了。尤其是Fortran這樣科學計算比較冷門的語言，我目前嘗試的只有Vim和Sublime Text 2加上插件后比較舒服，Vim的適應時間則比較長。?
?????http://www.w3school.com.cn/? 是一個非常好的Web前端技術學習平臺，以及它的新版
http://w3schools.com/
1. 基礎知識?
<html><head>
????<title>標題欄題目：楊韜HTML學習1?2012.11.10</title>
????<!--?內部樣式表?-->
????<style?type="text/css">
????????h1{background:?red}
????</style>??
</head>
<body>
????<h1>一級標題</h1>
????<h4?align="center">通過屬性居中</h1>
????<p>段落</p>
????<!--?內聯樣式表?-->
????<p?style="color:red;?background:blue"?>body內為可見內容</p>
????<a?href="http://www.baidu.com"??target="_blank">target新的窗口打開超鏈接</a>
????<a?href="1.html">在當前目錄下超鏈接</a>
????嵌套圖像連接
????<a?href="http://www.baidu.com">????
????????<img?src="http://www.baidu.com/img/baidu_sylogo1.gif"/>
????</a>
????<a?href="#biaoqian">跳轉到當前頁的標簽處</a>
????<p><a?name="biaoqian">標簽錨定處</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>下標</sub>?<sup>上標</sup>
????<b><i>斜體</i></b>?<!--?字體可以嵌套?-->
????<big>大號字體</big>?
????<em>斜體</em>
????<del>刪除線</del>
????<ins>下劃線</ins>
????<div>節</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>列表項</dd>
????????????<dd>內部可以使用段落、換行符、圖片、鏈接以及其他列表</dd>
????????????<dd>列表項</dd>
????????<dt>定義列表</dt>
????????????<dd>列表項</dd>
????????????<dd>列表項</dd>
????????????<dd>列表項</dd>
????</dl>
</body>
</html>
?
2.布局?
<html><head>
????<title>HTML學習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;}/*文字居中*/
????????/*項目邊框*/
????????h1?{margin-bottom:?0;}/*h1底部間距=0各個塊才能沒有空隙*/
????</style>????
</head>
<body>
????<div?id="head">????????<!--?添加4個分塊?id可自己命名-->
????????<h1>頭部</h1>????????
????</div>
????<div?id="menu">
????????<h1?align="center">菜單</h1><!--?文字居中顯示?-->
????????<ul><!--?無序列表?-->
????????????<li>標題1</li>
????????????<li>標題1</li>
????????????<li>標題1</li>
????????</ul>
????</div>
????<div?id="constent">
????????<h1>內容</h1>
????</div>
????<div?id="footer">
????????<h1>底部</h1>
????</div>
</body>
</html>
?
3. 表單
<html><head>
????<title>HTML學習3?楊韜</title>
</head>
<body>
????<form>?<!--?表單?包含表單元素的區域-->
????????<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>
轉載于:https://www.cnblogs.com/yhws/p/3858561.html
總結
以上是生活随笔為你收集整理的HTML入门学习 -- HTML基础知识的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 标准的Java编码规范手册
- 下一篇： web前端切图工具