首页 > 网站 > WEB开发 > 正文

HTML基础知识

2024-04-27 15:03:10

字体：大中小

来源：转载

供稿：网友

<!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）页面注释标记

</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>

（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格式

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

上一篇：前端防止按钮被多次点击

下一篇：jQuery实现复选框的全选和反选

学习交流

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

英伟达市值一夜大涨9246亿创2023年5月以来最大单周涨幅

2024-04-27 13:35:46

雷军：小米正在申请3万件专利，以提升自身的竞争力

2024-04-27 13:33:47

人参泡酒15年后竟“复活”？网友：这酒还能喝不？

2024-04-24 22:53:44

芯片股普涨！英伟达市值一夜大涨6000亿元

2024-04-23 19:32:50

面馆老板1天卖100碗刚够交房租要卖到150碗才能实现盈利

2024-04-23 19:25:50

跌近30%！茶百道上市一小时跌没3年净利润

2024-04-23 19:13:19

疑难解答

图片精选

网友关注