HTML学习入门
HTML5的一些入门写法介绍。
<!DOCTYPE html>文档协议 <html lang="en">文档版本信息
一、HTML基本标记
1、头部标记
<head>
（1）源信息标记
<meta name="keywords" content="输入具体的关键字"> <meta name="description" content="设置页面说明"> <meta name="generator" content="编辑软件的名称"> <meta name="author" content="作者的姓名"> <meta http-equiv="content-type" content="text/html;charset=UTF-8"/> <meta http-equiv="refresh" content="20;url=test.html">
（2）标题标记
<title>h5</title>
（3）页面注释标记
<!-- html:5 ctl+E -->
</head>
2、主体标记
<body bgcolor="页面背景颜色" background="背景图片地址" text="文字的颜色" link="链接文字的颜色" alink="正在访问的文字颜色" vlink="访问后的链接文字颜色" topmargin="上边距的值" leftmargin="左边距的值" >
二、文字与段落标记
1、标题字标记
<h1>一级标题</h1> <h2 align="left">二级标题</h2>标题字对齐属性align <h3 align="center">三级标题</h3> <h4 align="right">四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>
2、文本文字标记
<font face="字体" size="字号1-7" color="字体颜色">文字部分</font>
3、文本格式化标记
<b>加粗的文字</b> <strong>加粗的文字</strong> <i>斜体文字</i> <em>斜体文字</em> <cite>斜体文字</cite> <sup>上标内容</sup> <sub>下标内容</sub> <big>大字号内容</big> <small>小字号内容</small> <u>下划线的内容</u>
4、段落标记
<p align="center">段落文字</p>
（1）换行标记
<br>
（2）不换行标记
<nobr>不换行文字</nobr>
（3）水平线
<hr width="宽度" size="高度" color="颜色" align="对齐方式" noshade><!-- noshade去掉阴影 -->
（4）插入空格
（5）插入特殊符号
" “ & & < < > > × × § § © © ® ® ™ ™
三、使用图像
1、插入图像的源文件
<img src="图像的文件地址" width="宽度" height="高度" alt="提示的文字内容" border="图像边框的宽度" vspace="垂直边距" hspace="水平边距" align="文字的对齐方式">
2、图像的超链接
<a href="链接地址">
<img src="图像的文件地址">
</a>
（1）图像热区链接
<img src="图像地址" usemap="映射图像名称"> <map name="映射图像名称"> <area shape="热区形状" coords="热区坐标" href="链接地址"> </map>
四、使用列表
1、有序列表
<ol type="序号类型：默认1数字 a小写字母 A大写字母 i小写罗马数字 I大写罗马数字" start="起始数字"> <li>有序列表项</li> <li>有序列表项</li> <li>有序列表项</li> </ol>
2、无序列表
<ul type="符号类型：默认Disc ●,circle ○,square □"> <li>无序列表项</li> <li>无序列表项</li> <li>无序列表项</li> </ul>
（1）目录列表标记
<dir> <li>列表项</li> <li>列表项</li> <li>列表项</li> </dir>
（2）定义标记列表
<dl> <dt>定义条件</dt> <dd>定义描述</dd> </dl>
（3）菜单标记列表
<menu> <li>列表项</li> <li>列表项</li> <li>列表项</li> </menu>
五、使用表格
1、创建表格
<table width="表格宽度" height="表格高度" align="对齐方式" border="边框宽度" bordercolor="边框颜色" cellspacing="内框宽度值" cellpadding="文字与边框的间距" bgcolor="背景颜色" background="背景图片地址"> <caption>表格的标题</caption> <thead bgcolor="背景颜色" align="对齐方式"> <td>表头</td> <td>表头</td> </thead> <tr> <th>表头</th> <th>表头</th> </tr> <tr height="行的高度" bordercolor="边框的颜色" bgcolor="行的背景颜色" align="水平对齐方式" valign="垂直对齐方式"> <td width="单元格宽度" height="单元格高度" colspan="跨度的列数" rowspan="跨度的行数" align="水平对齐方式" valign="垂直对齐方式" bgcolor="背景颜色" bordercolor="边框颜色" bordercolorlight="亮边框的颜色" bordercolordark="暗边框的颜色" background="背景图片地址">单元格内的文字</td> <td>单元格内的文字</td> </tr> <tr> <td>单元格内的文字</td> <td>单元格内的文字</td> </tr> </table>
2、表格的结构
<table> <caption>表格的标题</caption>
（1）表格的标首标记thead
<thead bgcolor="背景颜色" align="对齐方式"> <td>表头</td> <td>表头</td> </thead>
（2）表格的表主体标记tbody
<tbody bgcolor="背景颜色" align="对齐方式"> <tr> <td>单元格内的文字</td> <td>单元格内的文字</td> </tr> </tbody>
（3）表格的表尾标记tfoot
<tfoot bgcolor="背景颜色" align="对齐方式"> <td>单元格内的文字</td> </tfoot> </table>
六、建立超链接
1、内部链接
<a href="链接地址" target="目标窗口的打开方式：_self当前页面，_blank空白窗口，_top顶层框架，_parent上一层">......</a>
2、锚点链接
（1）建立锚点
<a name="锚点的名称">......</a>
（2）链接同一页面中的锚点
<a href="#锚点的名称">......</a>
（3）链接到其他页面中的锚点
<a href="链接的文件地址#锚点名称">......</a>
3、外部链接
（1）链接到外部网站
<a href="http://......">......</a>
（2）链接到E-mail
<a href="maito:邮件地址">......</a>
（3）链接到FTP
<a href="ftp://ftp地址">......</a>
（4）链接到Telnet
<a href="telnet://地址">......</a>
（5）下载文件
<a href="文件地址">......</a>
七、添加多媒体
1、设置滚动效果
<marquee direction="滚动方向：up down left right" behavior="scroll循环滚动 slide只滚动一次就停止 alternate来回交替进行滚动" scrollmount="滚动速度 像素" scrolldelay="时间间隔 毫秒" loop="循环次数" width="背景宽度" height="背景高度" bgcolor="背景颜色" hspace="水平范围" vspace="垂直范围">
滚动文字
</marquee>
2、插入多媒体文件
（1）插入Flash动画
<embed src="多媒体文件地址" width="多媒体的宽度" height="多媒体的高度"></embed>
（2）插入音频和视频文件
<embed src="多媒体文件地址" width="播放界面的宽度" height="播放界面的高度"></embed>
3、设置背景音乐
<bgsound src="背景音乐的地址" loop="播放次数 true（循环）">
4、插入Java Applet
<applet code="Lake.class" width="宽度" height="高度"> <param name="文件夹的名称" value="图片名称"> </applet>
八、使用框架结构
1、设置框架集的属性frameset
（1）水平分割窗口rows
<frameset rows="框架窗口的高度，框架窗口的高度，......" frameborder="是否显示边框0/1，yes/no" framespacing="边框宽度" bordercolor="边框颜色" > <frame> <frame> ...... </frameset>
（2）垂直分割窗口cols
<frameset cols="框架窗口的高度，框架窗口的高度，......"> <frame> <frame> ...... </frameset>
（3）嵌套分割窗口
<frameset rows="框架窗口的高度，框架窗口的高度，......"> <frame> <frameset cols="框架窗口的高度，框架窗口的高度，......"> <frame> <frame> ...... </frameset>
2、设置窗口属性frame
（1）<frame src="页面文件地址" name="页面名称" noresize(禁止调整页面尺寸) marginwidth="水平边距" marginheight="垂直边距" scrolling="是否显示滚动条 yes/no/auto" > （2）不支持框架标记noframes <noframes>替换显示内容</noframes> 3、浮动框架iframe <iframe src="浮动框架的源文件" width="浮动框架的宽" height="浮动框架的高" align="对齐方式" scrolling="是否显示滚动条 yes/no/auto"></iframe> 4、创建框架链接
九、使用表单
1、表单标记form
<form action="表单的处理程序" name="表单名称" method="传送方法get/post"enctype="编码方式：application/x-www-form-urlencoded,multipart/form-data" target="目标打开方式：_self当前页面，_blank空白窗口，_top顶层框架，_parent上一层"> ...... </form>
2、插入表单对象
（1）文字字段text
<input name="控件名称" type="text" value="文字字段的默认取值" size="控件的长度" maxlength="最长字符数"/>
（2）密码域password
<input name="控件名称" type="password" value="文字字段的默认取值" size="控件的长度" maxlength="最长字符数"/>
（3）单选按钮radio
<input name="单选按钮名称" type="radio" value="单选按钮的取值" checked="checked"/>
（4）复选框checkbox
<input name="复选框名称" type="checkbox" value="复选框的取值" checked="checked"/>
（5）普通按钮
<input type="submit" name="按钮名称" value="按钮的取值" onclick="处理程序"/>
（6）提交按钮
<input type="submit" name="按钮名称" value="按钮的取值"/>
（7）重置按钮reset
<input type="reset" name="按钮名称" value="按钮的取值"/>
（8）图像域image
<input name="图像域名称" type="image" src="图像路径"/>
（9）隐藏域hidden
<input name="隐藏域名称" type="hidden" value="隐藏域取值"/>
（10）文件域file
<input name="文件域名称" size="控件的长度" maxlength="最长字符数"/>
3、菜单和列表
（1）下拉菜单
<select name="下拉菜单名称"> <option value="选项值" selected="selected">选项内容</option>//默认选项 <option value="选项值">选项内容</option> </select>
（2）列表项
<select name="列表项名称" size="显示的列表项数" multiple> <option value="选项值" selected>选项内容</option> <option value="选项值">选项内容</option> </select>
（3）文本域标记
<textarea name="文本域名称" cols="列数" rows="行数"></textarea>
（4）id标记
<id="元素标识名">
浙公网安备 33010602011771号