笔者在武汉蚂蹄软件服务中心做软件开发多年，最近花一天时间总结出一套HTML入门级的教程，全篇没有任何废话，全部是精华，希望对你入门web开发有一定的帮助。

HTML基本格式

<html>

    <head>

	<title>选项卡中显示的标题</title>

    </head>

    <body>

	正文要显示的内容

    </body>

</html>

　　

常用标签
1，注释标签: <!-- -->

2，标题标签：<h?></h?> ?=1--6(1--6大小递减）

3，空格标签：&nbsp

4，段落标签：<p></p>

5，水平线：<hr/>

6，拆行：<br/>

7，<：&lt >：&gt &：&amp

8，图片标签：<img src=""/>

属性
1，以键值对形式出现
2，属性值用引号括起来
3，多个属性用空格隔开

<hr />标签
1，align="(对齐方式)left"
left、right、center

2，noshade="noshade"（有无阴影）

3，color="(颜色)Red或者#ff00ff"
Black、White、Purple、Blue、Teal、Green、Yellow、Red、Lime、Aqua、Fuchsia、Olive、Gray、Silver、Navy

4，width="(宽度)160或50%"

5，size="(高度)100"

图像标签（<img />)
1，src="URL"

2，alt="替换文本"

3，width和height="宽度和高度"（只填一个，等比缩放）

4，border="边框大小"

字体标签(<font />)
1，size="n或者+n或者-n"
1--7大小递增（默认为3)【+/-n在3上加减】

2，face="(字体名称)楷体"
电脑上有的字体

3，color="(颜色)Red或者#ff00ff"
Black、White、Purple(紫)、Blue、Teal(青)、Green、Yellow、Red、Lime(柠檬、酸橙)、Aqua(浅绿)、Fuchsia(紫红)、Olive(橄榄)、Gray(灰)、Silver(银)、Navy(深蓝)

物理字体
1，<b>---粗体

2，<i>---斜体

3，<u>---下划线

4，<sup>---上标

5，<sub>---下标

6，<s>---删除线

7，<tt>---等宽字体

逻辑字体
1，<em>---斜体

2，<strong>---粗体

相对路径
1，同级目录---.\或不写

2，上级目录---..\

3，控制台下回到上级目录---cd..

4，控制台下回到根目录---cd/

预定义格式文本(<pre></pre>)
1，通常保留空格和换行，文本以等宽字体呈现

2，与<code>一起使用，以获得更加精确的语义

3，不建议使用Tab

marquee标签（已不用）
1，用来显示元素的移动

2，direction属性，设置方向
left、right、up、down

3，behavior属性，设置模式
scroll、slide、altermate

HTML超链接
1，语法（<a href="URL">……</a>）

2，……可以是字、词、句、图

3，链接的两种方式
①链接到另一文档
②跳转到指定位置
---指定位置处 <a name="(标记)mark">
---跳转处 <a href="#mark">……</a>

4，创建电子邮件链接
①URL格式：
mailto:收件人邮箱名?(邮件到达后的参数)subject=主题名&body=邮件内容

②需要安装邮件客户端

body属性
1，text---文字颜色

2，link---点击前链接颜色

3，alink---点击时链接颜色

4，vlink---点击后链接颜色

5，bgcolor---背景颜色

6，background---背景图片

HTML列表
1，无序列表 （<ul></ul>）
①type属性可选值
disk(.)、circle(。)、square(▪)
②<li>需要列出的项目</li>

2，有序列表 （<ol></ol>）
①type属性可选值
A、a、I、i、1
②<li>需要列出的项目</li>

3，自定义列表
①<dl>定义列表</dl>
②<dt>定义术语</dt>
③<dd>定义术语解释部分</dd>

HTML表格
1，语法
<table border="1">
<tr>
<td>单元格内容</td>
</tr>
……
</table>

2, <td colspan="3"></td>---该项跨3列

3，<td rowspan="3"></td>---该项跨3行

4，table的属性
①bgcolor---背景颜色
②border---边框
③bordercolor---边框颜色
bordercolorlight---边框明亮部分颜色
bordercolordark---边框昏暗部分颜色
④width---边框宽度
⑤height---边框高度
⑥cellspacing---单元格之间间隔大小
⑦cellpadding---单元格边框与内容之间的间隔大小

5，td的属性
①align---横向对其方式(left、center、right)
②valign---纵向对其方式(top、middle、bottom)
③bgcolor---背景颜色
④width---单元格宽度
⑤height---单元格高度
⑥colspan---该单元格跨的列数
⑦rowspan---该单元格跨的行数

HTML表单
1，基本格式
<form>
放要传送的数据
</form>

2，常见表单
①TEXT---单行文本输入框

②PASSWORD---密码框

③RADIO---单选按钮
一般不能点，要分组后才能点
分组就是讲其name属性设成一样

④CHECKBOX---复选框

⑤SELECT---下拉列表(ComboBox或ListBox)
<option>选项</option>
size属性(默认为1[ComboBox],非1[ListBox])
multiple属性---可多选(ctrl)

⑥RESET---重置按钮

⑦SUBMIT---提交按钮

⑧TEXTAREA---多行文本框

3，表单元素的基本格式
<input name="表单元素名称" type="(类型)submit" value="初始值" size="显示宽度(初始宽度)" maxlength="最大长度(最多字符个数)" checked="是否选中"/>

4，form的常用属性
①action---表示提交的目标服务器
②method---提交的方法(get[默认]、post)

5，按钮标签(<input type="button"/>)

6，图像标签(<input type="image" src="URL"/>)
可以替代submit，点击后返回表单数据的x,y坐标

7，<input type="file"/>可以导入文件路径

HTML入门教程，多年心血总结，一看就会的更多相关文章

  1. gitbook 入门教程之小白都能看懂的 Gitbook 插件开发全流程

    什么是插件 Gitbook 插件是扩展 GitBook 功能(电子书和网站)的最佳方式. 只要是 Gitbook 默认没有提供的功能,基于插件机制都可以自行扩展,是插件让 Gitbook 变得更加强大 ...

  2. 【Cocos2d入门教程七】三分钟看懂Cocos2d坐标系

    无论是搞2d还是3d开发,最需要搞清楚的就是坐标系,这部分混乱的话就没啥搞头了.所以玩cocos2d,一上来就需要先把各种与坐标有关的东西搞清楚. 1.OpenGL坐标系 Cocos2d-x使用的是O ...

  3. 【wepy入门教程】48小时开发看美女微信小程序，万花阁

    说明:本文只做小程序的开发过程记录:小程序仅供学习参考,严禁用于商业及非法用途 准备 不管是做网站还是做小程序,只要是To C,就少不了做内容,因此第一步依然是数据准备,从网上找到两个网站: http ...

  4. 一看就懂的Android APP开发入门教程

    一看就懂的Android APP开发入门教程 作者: 字体:[增加 减小] 类型:转载   这篇文章主要介绍了Android APP开发入门教程,从SDK下载.开发环境搭建.代码编写.APP打包等步骤 ...

  5. 一看就懂的ReactJs入门教程（精华版）

    一看就懂的ReactJs入门教程(精华版) 现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和 ...

  6. Apple Swift编程语言入门教程

    Apple Swift编程语言入门教程 作者: 日期: 布衣君子 2015.09.22 目录 1   简介 2   Swift入门 3   简单值 4   控制流 5   函数与闭包 6   对象与类 ...

  7. avalonjs1.5 入门教程

    迷你MVVM框架 avalonjs1.5 入门教程 avalon经过几年以后,已成为国内一个举足轻重的框架.它提供了多种不同的版本,满足不同人群的需要.比如avalon.js支持IE6等老旧浏览器,让 ...

  8. esri-leaflet入门教程（5）- 动态要素加载

    esri-leaflet入门教程(5)- 动态要素加载 by 李远祥 在上一章节中已经说明了esr-leaflet是如何加载ArcGIS Server提供的各种服务,这些都是服务本身来决定的,API脚 ...

  9. swing入门教程

    (转自http://terrificwanjun.bokee.com/) UI 组件简介 在开始学习 Swing 之前,必须回答针对真正初学者的一个问题:什么是 UI?初学者的答案是“用户界面”.但是 ...

  10. powershell入门教程-v0.3版

    powershell入门教程-v0.3版 来源 https://www.itsvse.com/thread-3650-1-1.html 参考 http://www.cnblogs.com/piapia ...

随机推荐

  1. [原创]Cadence Allegro16.6安装

    选择Cancel. lisence managner安装完成,然后安装Product installation Cadence OrCad Allegro SPB 16.6 完整版+和谐文件 链接:h ...

  2. C# 调用继电器api usb_relay_device.dll

    C# 调用继电器api usb_relay_device.dll 代码封装 usb_relay_device.dll 为C++编写 using System; using System.Collect ...

  3. Linux ☞ Good good study,day day up

    一. 修改桌面程序图标 linux的桌面图标都是在/usr/share/applications 目录下的那些 *.desktop文件,修改桌面程序图标就是修改.desktop图标配置文件中Icon的 ...

  4. 在.Net Core WebAPI下给Swagger增加导出离线文档功能

    一丶前言 最近刚接触到Swagger,在github上下载了它的源码和demo学习了一遍,发现这个组件非常好用,不过不足的是它没有导出离线文档的功能,于是乎我就想给它加一个导出功能 Swagger G ...

  5. eclipse 开发环境问题

    1.jdk安装,环境变量设置.主要有两个: JAVA_HOME   C:\Program Files\Java\jre7 JRE_HOME   C:\Program Files\Java\jre7 2 ...

  6. UOJ#335. 【清华集训2017】生成树计数 多项式,FFT,下降幂,分治

    原文链接www.cnblogs.com/zhouzhendong/p/UOJ335.html 前言 CLY大爷随手切这种题. 日常被CLY吊打系列. 题解 首先从 pruffer 编码的角度考虑这个问 ...

  7. 027 storm面试小题

    1.大纲 Storm工作原理是什么? 流的模式是什么?默认是什么? 对于mapreduce如何理解? Storm的特点和特性是什么? Storm组件有哪些? 2.Storm工作原理是什么? 相对于ha ...

  8. Android Studio 重写方法时参数命名异常

    Android Studio 重写方法时参数命名异常 Android Studio 重写方法时参数名称乱掉可以通过下载相应源码解决

  9. 计算机硬件&操作系统

    一.计算机的硬件: 控制器:计算机的指挥系统 运算器:数学运算+逻辑运算 存储器I/O设备:存I取O数据   内存(内存条):短期记忆,速度快,但是断电数据会丢失:   外存(硬盘):永久记忆,速度非 ...

  10. 【C语言编程练习】7.2动态数列排列

    1. 题目要求 编写这样一个C程序,实现这样的功能:从键盘输入任意个整数,以0作为结束标志,对于这个整数序列从小到大排序,并输出排序后结果 2. 题目分析 不得不说,我确实对这类问题毫无思路呢!应该也 ...