HTML入门教程,多年心血总结,一看就会
笔者在武汉蚂蹄软件服务中心做软件开发多年,最近花一天时间总结出一套HTML入门级的教程,全篇没有任何废话,全部是精华,希望对你入门web开发有一定的帮助。
HTML基本格式
- <html>
- <head>
- <title>选项卡中显示的标题</title>
- </head>
- <body>
- 正文要显示的内容
- </body>
- </html>
常用标签
1,注释标签: <!-- -->
2,标题标签:<h?></h?> ?=1--6(1--6大小递减)
3,空格标签: 
4,段落标签:<p></p>
5,水平线:<hr/>
6,拆行:<br/>
7,<:< >:> &:&
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入门教程,多年心血总结,一看就会的更多相关文章
- gitbook 入门教程之小白都能看懂的 Gitbook 插件开发全流程
什么是插件 Gitbook 插件是扩展 GitBook 功能(电子书和网站)的最佳方式. 只要是 Gitbook 默认没有提供的功能,基于插件机制都可以自行扩展,是插件让 Gitbook 变得更加强大 ...
- 【Cocos2d入门教程七】三分钟看懂Cocos2d坐标系
无论是搞2d还是3d开发,最需要搞清楚的就是坐标系,这部分混乱的话就没啥搞头了.所以玩cocos2d,一上来就需要先把各种与坐标有关的东西搞清楚. 1.OpenGL坐标系 Cocos2d-x使用的是O ...
- 【wepy入门教程】48小时开发看美女微信小程序,万花阁
说明:本文只做小程序的开发过程记录:小程序仅供学习参考,严禁用于商业及非法用途 准备 不管是做网站还是做小程序,只要是To C,就少不了做内容,因此第一步依然是数据准备,从网上找到两个网站: http ...
- 一看就懂的Android APP开发入门教程
一看就懂的Android APP开发入门教程 作者: 字体:[增加 减小] 类型:转载 这篇文章主要介绍了Android APP开发入门教程,从SDK下载.开发环境搭建.代码编写.APP打包等步骤 ...
- 一看就懂的ReactJs入门教程(精华版)
一看就懂的ReactJs入门教程(精华版) 现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和 ...
- Apple Swift编程语言入门教程
Apple Swift编程语言入门教程 作者: 日期: 布衣君子 2015.09.22 目录 1 简介 2 Swift入门 3 简单值 4 控制流 5 函数与闭包 6 对象与类 ...
- avalonjs1.5 入门教程
迷你MVVM框架 avalonjs1.5 入门教程 avalon经过几年以后,已成为国内一个举足轻重的框架.它提供了多种不同的版本,满足不同人群的需要.比如avalon.js支持IE6等老旧浏览器,让 ...
- esri-leaflet入门教程(5)- 动态要素加载
esri-leaflet入门教程(5)- 动态要素加载 by 李远祥 在上一章节中已经说明了esr-leaflet是如何加载ArcGIS Server提供的各种服务,这些都是服务本身来决定的,API脚 ...
- swing入门教程
(转自http://terrificwanjun.bokee.com/) UI 组件简介 在开始学习 Swing 之前,必须回答针对真正初学者的一个问题:什么是 UI?初学者的答案是“用户界面”.但是 ...
- powershell入门教程-v0.3版
powershell入门教程-v0.3版 来源 https://www.itsvse.com/thread-3650-1-1.html 参考 http://www.cnblogs.com/piapia ...
随机推荐
- Javal连接字符串为Json
public static String concatJson(String[] keys,String[] values,String[] alreadyJsonKeys){ if(keys==nu ...
- vs2017 EFCore 迁移数据库命令
项目结构: 首先引用 Microsoft.EntityFrameworkCore.Tools Microsoft.EntityFrameworkCore.Design 增加类DesignTimeDbC ...
- react-native中显示手机本地图片/视频
已知文件路径'/data/user/0/com.ycdj/files/media/218787782/efa1d12f22d2/1235.jpg' 只需在路径前面拼上file:///即可,如: < ...
- 记一次Hbase的行键过滤器事故问题
数据总数:746条数据 因为后面需要进行算法合成,而且spark目前对这种算法支持并不好,因此采用代码编写,所以在查询hbase的过程中采用的是java直接查询, 但是为了加快查询速度,我尽可能的使用 ...
- RESTful-1概述
一种软件架构风格.设计风格,而不是标准,只是提供了一组设计原则和约束条件.它主要用于客户端和服务器交互类的软件.基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制. 概述 编辑 REST ...
- json随笔
<script> var obj2={};//这只是JS对象 var obj3={width:100,height:200};/*这跟JSON就更不沾边了,只是JS的对象 */ var o ...
- 三大家族(offset、scroll、client)
offset.scroll.client三大家族 offset家族 offsetWidth 与 offsetHeight offset 偏移 用于获取元素自身的位置和大小 offsetWidth和of ...
- python打包工具 cx_Freeze介绍
原理 Python 脚本在装有 Python 的系统中可以直接双击运行,但绝大多数普通用户并没有配置此类环境,而编译为可执行二进制文件后,用户无需预先安装 Python 及依赖库即可像运行普通程序一样 ...
- 我的BO之强类型
弱类型的缺点 有些程序员对类型比较随意,从前端传来的数据,不管应该是什么类型,都以String接收.然后在什么地方转成应该有的类型则要"看心情",在Controller, Serv ...
- npm 模块的总结
,, , ,,,,执行工程中自身生命周期 当前 npm 工程如果定义了钩子此时会被执行(按照 install.postinstall.prepublish.prepare 的顺序). 最后一步是生 ...