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. 基础知识
<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.布局
<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. 表单
<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基础知识相关推荐
- 区块链入门学习的基础知识
区块链的起源 互联网发展至今,每一项新技术的诞生都在深刻改变着人们的生活方式.如今一个冉冉升起的新技术--区块链(Blockchain),来到历史舞台前沿,它让全世界范围内任何一笔比特币(Bitcoi ...
- python向量计算库教程_NumPy库入门教程：基础知识总结
原标题:NumPy库入门教程:基础知识总结 视学算法 | 作者 知乎专栏 | 来源 numpy可以说是 Python运用于人工智能和科学计算的一个重要基础,近段时间恰好学习了numpy,pandas, ...
- Hadoop学习笔记—15.HBase框架学习（基础知识篇）
Hadoop学习笔记-15.HBase框架学习(基础知识篇) HBase是Apache Hadoop的数据库,能够对大型数据提供随机.实时的读写访问.HBase的目标是存储并处理大型的数据.HBase ...
- 小白入门！网络安全基础知识详解（附知识问答）
小白入门!网络安全基础知识详解(附知识问答) 一.引论 提到网络安全,一般人们将它看作是信息安全的一个分支,信息安全是更加广义的一个概念:防止对知识.事实.数据或能力非授权使用.误用.篡改或拒绝使用所 ...
- 深入了解计算机基础,计算机入门《计算机基础知识》（全16集）
计算机入门<计算机基础知识>是一套比较经典的老教程,里面个别章节有些过时,但是原的东西讲的很好永不过时,对于想了解电脑.计算机的初学者是很好的教程,课程讲的十分详细.深入浅出,相对于< ...
- 炒股配资入门有哪些基础知识？
炒股配资入门有哪些基础知识?盘前查跟大家讲一下,如下: 第一,开户要想投资股票,首先你要有一个股票账户,股票账户的开户就要去找券商,选择一个好券商也是很重要的.市场上可选择的券商有很多,关键还是看佣金 ...
- 《机器学习》理论——速读学习1 基础知识
<机器学习>理论--速读学习1 基础知识 该系列文章系个人读书笔记及总结性内容,任何组织和个人不得转载进行商业活动! Time: 2021-12-05 学习目标:我需要了解神经网络除了工程 ...
- 学习编程基础知识，进阶成为更优秀的程序员
"脚本小子"常常从某些网站上复制脚本代码,然后到处粘贴,却并不明白其中的方法与原理 当你看到编程语言编进教材的时候,看到一个文科生也在编写Python程序进行数据分析的时候,你 ...
- 机器学习入门一：基础知识
机器学习入门一:基础知识 前言 机器学习介绍 1.什么是机器学习? 2.机器学习中的常见困难 模型的泛化[^1] (Generalization)能力 3.机器学习中数据集划分 4.机器学习中几种学习 ...
最新文章
- asp.net confirm提示
- python base64库介绍
- 我与计算机作文450字,打电脑作文450字
- 这家中国企业和星巴克对着干 年亏16亿却成为全球最快上市公司
- 14、高可用keepalived搭建及切换
- CComQIPtr spCmdButton PutTag
- #9 shell脚本的函数运用
- 命令行 移动整个文件夹 -baijiahao_Windows高手的高效办公利器——Windows命令行简介...
- delete了，析构函数却没有调用
- AspectJWeaver
- 高效能人士的七个习惯读后感与总结概括-（第七章，第八章，第九章）
- element 问号提示_点击HTML页面问号出现提示框（附源码）
- 神舟精盾 t97 键盘背光灯如何设置亮的时间
- java好学么_java是什么好学吗
- 写点东西祭奠老师这个职业
- 长链接(url)转换为短字符串，再把url和短字符串存数据库（有短域名方案）
- IDEA添加maven依赖方法
- 关于空间拓扑（lynn的自语）
- Tyvj 1041 表达式计算2
- 研究16位汇编NEG求补指令