博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML入门教程,多年心血总结,一看就会
阅读量:5033 次
发布时间:2019-06-12

本文共 2931 字,大约阅读时间需要 9 分钟。

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

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"/>可以导入文件路径

 

转载于:https://www.cnblogs.com/liujian619/p/start-html.html

你可能感兴趣的文章
WPF 3D变换应用
查看>>
luogu4012 深海机器人问题 网络流
查看>>
android 拍照上传照片
查看>>
ArchLinux安装开源VMware Tools
查看>>
系统用户分析模型
查看>>
DB2 锁升级示例1
查看>>
16.RDD实战
查看>>
MainFrame知识小结(20120210)—dfsort/syncsort中的数据类型
查看>>
jsp题库 (一)小测(25/21)
查看>>
D - Flip tile
查看>>
Java连接RabbitMQ之创建连接
查看>>
开户vim编程之--cscope支持
查看>>
python数据类型图解
查看>>
C#微信登录-手机网站APP应用
查看>>
HTML5实践 -- iPhone Safari Viewport Scaling Bug
查看>>
一位数据挖掘成功人士 给 数据挖掘在读研究生 的建议
查看>>
Python3.6.0安装
查看>>
hdu1049
查看>>
H5项目常见问题及注意事项
查看>>
索尼(SONY) SVE1512S7C 把WIN8降成WIN7图文教程
查看>>