怎么用html语言实现框架,HTML代码怎么用?HTML基础教程

在弄清“HTML代码怎么用”之前,我们要首先明白HTML是用来描述网页的语言,它不是一种编程语言,而是一种 使用标记标签来描述网页的标记语言。本篇基础教程主要内容包括:HTML常用代码、网页基本框架和网页组成要素。

1ff4fe1a7faf665f637ced5f1a33c71e.png

一、HTML常用代码

网页的描述,关键字,作者及其他元素:meta name="" content=""

客户端脚本:

文档的样式信息:

引进图片:img src

换行:br

超级链接:a herf

新的页面打开:target="_blank"

无序列表:

有序列表:

表格的页眉:thead

表格的主题:tbody

定义表格的页脚:tfood

定义表格:table

边框:border

单元格边框与内容的间距:cellbadding

单元格之间的间距:cellspacing

表格的表头:th

表格的行:tr

表格的单元:td

表单:form action="浏览者输入的数据被传送到的地方" methot="数据传送的方式"(get或post)

文本框:

密码框:

单选框:radio?? 当type=radio时为单选框

多选框:checkbox? 当type=checkbox时为多选框

默认选项:checked

[]:多个值,数组

下拉列表框:选项

默认选中:selected

多行文本:

行数:cols

列数:rows

上传图片头像或场景:

提交按钮:

重置按钮:

二、基本框架

如同人一样,网页也包括了“头部”和“身体”,

<head>标记内包含着诸如网页标题、语言编码、网页描述等基本信息,而平时我们真正见到的网页内容均放在<body>标记内。现在先介绍一下<head>里的基本信息。

网页标题(标记格式为<title></title>)

创建网页标题文字:<title>标题</title> //此处书写的文字会显示在IE的标题栏上。

网页文档信息(标记格式为<meta>)

描述网页内容类型:<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> //该页面为TXT文本或HTML格式,语言编码方式为GB2312(即简体中文)。

描述网页的关键字信息:<meta name="keywords" content="这里是关键字">

对网页的详细描述:<meta name="description" content="这里是对该网页的介绍">

刷新网页:<meta http-equiv="refresh" content="5;URL=xxx.htm"> //5秒种后刷新,并链接到xxx.htm。

三、组成要素

无论网页如何千变万化,构成一个网页内容的最基本要素大体只有五种,即文字、图片、表格、超链接和表单控件,所以下面将围绕着这五个要素逐一列举介绍。

文字(标记格式为<font></font>)

指定文字字体:<font face="宋体">宋体文字</font>

指定文字大小:<font size="3">3号文字</font>

指定文字颜色:<font color="#FF0000">红色文字</font> //网页颜色采用16位编码,因此#FF0000表现为红色。大家可以查阅相关资料了解其他颜色的编码。

图片(标记格式为<img>)

<img src="images/pic.jpg" width="400" height="300" border="2" align="center">// src指定为路径地址,width为宽度,height为高度,border为边框大小,align为横向位置。

表格(标记格式为<table><tr><td></td></tr></table>)

<table width="400" height="300" border="1" align="center" cellpadding="2" cellspacing="2" bgcolor="#FF0000"><tr><td>此处添加文字或图片等</td></tr></table>//width、height、border、align与以上的例子作用一样,cellpadding为边框与单元格的间距,cellspacing为单元格之间的间距,bgcolor为表格背景色。

以上所介绍的元素都是只存在当前页中,而网页超链接的出现大大改变了人们的浏览习惯,可根据自己喜好,点击到相关链接查看网页信息。

超链接(标记格式为<a></a>)

<a href="xxx.htm" title="提示文字">链接文字或图片</a> //href为被点击后的链接页,title为鼠标悬停在链接文字或图片上后出现的提示文字。

表单控件(标记符号为<input>、<textarea></textarea>、<select></select>)

表单控件实现了人与网页的交互,像大家常去的论坛、购物站点等都有它的“身影”。

文本框:<input type="text" value="这是文本框"> //value为该控件的值,以下每个表单控件均可设定,不设默认为空

密码框:<input type="password">

单选框:<input type="radio">

复选框:<input type="check">

提交按钮:<input type="submit">

重置按钮:<input type="reset">

隐藏区域:<input type="hidden">

文本域:<textarea rows="6" cols="30"></textarea> //rows为行数,cols为宽度

列表框:<select><option>项目1<option>项目2<option>项目3</select>

相信大家看到这,应该就明白了“HTML代码怎么用”。当然啦,HTML基础教程的内容远远不止以上的内容,想要深入学习的同学可以上博学谷官网在线学习。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值