HTML入门学习 -- HTML基础知识
2012-11-10 21:06
891 查看
打算按照 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>
杨韬的学习备忘录 http://www.cnblogs.com/ytyt2002ytyt
因为不是搞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>
杨韬的学习备忘录 http://www.cnblogs.com/ytyt2002ytyt
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【HTML学习笔记】基础知识1
- html系统学习之一<基础知识，标签，元素>
- 关于node 的学习（基础入门 - 理论知识点总汇）
- jQuery学习笔记 - 基础知识扫盲入门篇
- PostgreSQL入门学习之数据库连接相关基础知识
- Linux学习笔记一 ---- Linux基础知识认知以及初识Linux下C编程入门
- R语言-向量入门学习与基础知识
- PHP学习入门的一些基础知识(菜鸟必看)
- 前端学习——css基础知识与html模板
- 小白入门angular-cli的第一次旅程（学习目标 学习目标 1. 路由基础知识）补充学习
- Redis学习笔记之入门基础知识——其他特性
- 汇编入门学习笔记 （一）—— 基础知识、寄存器
- ThinkPHP的入门学习-目录结构及基础知识
- 前端入门 —— HTML 基础知识一勺烩
- Spring Boot 基础知识学习（一）——快速入门
- HTML基础入门学习
- 小白入门angular-cli的第一次旅程（学习目标 1.路由的基础知识 在路由时传递数据)
- JavaWeb基础知识：Html与Css基础入门
- 零基础 入门学Python-学习笔记第一讲（基本知识）
- undo系列学习之undo入门基础知识介绍