笔者在武汉蚂蹄软件服务中心做软件开发多年，最近花一天时间总结出一套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. python批量重命名【截取文件名前六个字符 】

    #!/usr/bin/python # -*- coding: UTF-8 -*- import os, sys # 打开文件 path = "/home/landv/Desktop/l/& ...

  2. nginx配置负载均衡

    本教程不讲解nginx的安装,若安装请看博客 http://www.cnblogs.com/hqjy/p/8092983.html 本教程不讲解tomcat的安装,若安装请看博客 http://www ...

  3. python全栈开发day117-MongoDB,pymongo

    1.MongoDB操作 使用了不存在的对象即创建该对象 1.增加: 官方不推荐写法: insert([{},{},{}]) 官方推荐写法: insertOne({}) insertMany([{},{ ...

  4. Aspnet Core 对 Resetful API版本的支持

    在实际项目过程中API往往会收到迭代的影响,同时具备多个版本,因此resetful接口的版本话是非常重要的. 其实官方就提供了很好的支持,微软爸爸在nuget提供了Microsoft.AspNetCo ...

  5. Ubuntu安装Hadoop

    系统:Ubuntu16.04 JDK:jdk-8u201 Hadoop:3.1.2 一.安装JDK https://www.cnblogs.com/tanrong/p/10641803.html 二. ...

  6. 自动化设计模式Page Object

    https://blog.csdn.net/qq_37546891/article/details/79052054#t1

  7. leetcode刷题六<z字形变换>

    将一个给定字符串根据给定的行数,以从上往下.从左到右进行 Z 字形排列. 比如输入字符串为 时,排列如下: L C I R E T O E S I I G E D H N 之后,你的输出需要从左往右逐 ...

  8. 变量前缀__device__以及__managed__

    1.__device__ 作为变量前缀时,__device__限定符声明位于设备上的变量.如果此限定符单独使用,则变量具有以下特征: a.位于全局存储器空间中: b.与应用程序具有相同的生命周期: 可 ...

  9. 动态规划——Distinct Subsequences

    题目大意:给定字符串S和T,现在从S中任选字符组成T,要求输出方案个数. Example 1:Input: S = "rabbbit", T = "rabbit" ...

  10. vue自定义键盘事件

    //自定义全局按键修饰符 Vue.config.keyCodes.f2 = 13;//enter为13此时F2==ENTER 调用;@keyup.f2='addData()'