HTML学习入门

 

<!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)插入空格

&nbsp;

 (5)插入特殊符号

&quot;&amp; &
&lt; <
&gt; >
&times; ×
&sect; §
&copy; ©
&reg; ®
&trade;

 三、使用图像

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="元素标识名">

 

 
posted @ 2017-12-15 15:57  付刚的博客  阅读(79)  评论(0编辑  收藏