在线客服
扫描二维码
下载博学谷APP扫描二维码
关注博学谷微信公众号
在弄清“HTML代码怎么用”之前,我们要首先明白HTML是用来描述网页的语言,它不是一种编程语言,而是一种 使用标记标签来描述网页的标记语言。本篇基础教程主要内容包括:HTML常用代码、网页基本框架和网页组成要素。
一、HTML常用代码
网页的描述,关键字,作者及其他元素:meta name="" content=""
客户端脚本:<script>window.alert('');<script>
文档的样式信息:<style></style>
引进图片:img src
换行:br
超级链接:a herf
新的页面打开:target="_blank"
无序列表:<ul><li></li></ul>
有序列表:<ol><li></li></ol>
表格的页眉:thead
表格的主题:tbody
定义表格的页脚:tfood
定义表格:table
边框:border
单元格边框与内容的间距:cellbadding
单元格之间的间距:cellspacing
表格的表头:th
表格的行:tr
表格的单元:td
表单:form action="浏览者输入的数据被传送到的地方" methot="数据传送的方式"(get或post)
文本框:<input type="text" name="name" value=""><br>
密码框:<input type="password" name="password" value=""><br>
单选框:radio?? 当type=radio时为单选框
多选框:checkbox? 当type=checkbox时为多选框
默认选项:checked
[]:多个值,数组
下拉列表框:<select name="">选项<option value=""></option></select>
默认选中:selected
多行文本:<textarea name""></textarea>
行数:cols
列数:rows
上传图片头像或场景:<input type="file"/>
提交按钮:<input type="submit" value=提交>
重置按钮:<input type="reset" value=重置>
二、基本框架
如同人一样,网页也包括了“头部”和“身体”,
<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基础教程的内容远远不止以上的内容,想要深入学习的同学可以上博学谷官网在线学习。
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
移动web基础知识介绍 学习干货
相信对于想要学习移动端设计和开发的同学们来讲,对要掌握的基础知识还是迷迷糊糊的。本文的目的就是移动web基础知识针对刚刚入门的同学,介绍移动web基础知识,希望帮助还在迷茫的人找到一点学习的方向。
5774
2019-08-02 12:37:32
为什么要使用HTML5开发手机APP?
为什么要使用HTML5开发手机APP?从未来的发展趋势看,现在的大部分开发商都因为HTML5的便捷性而广泛使用它,而且使用HTML5可以带来更好的互动。从程序员开发的角度来讲,HTML5的代码更加清晰简单。下面我们就从HTML5的七大特性,来详细分析使用HTML5开发手机APP的优势。
5746
2019-10-10 16:55:06
Web前端页面设计流程及注意事项
每天我们打开电脑,看到各种各样的Web前端页面。你知道他们是如何制作的吗?为了让页面更具有规范性,让使用者更加方便,在制作页面过程中必须遵循一定的设计流程。在这里就为大家详细介绍一下制作一个Web前端页面的设计流程及注意事项。
6570
2019-11-11 18:33:29
精通HTML5+CSS3需要学什么?
主要学习vscode编辑器基本使用、HTML5新增标签、CSS3新增选择器及案例、2D转换及相关案例实现、3D转换和旋转木马案例等知识点。需要掌握HTML5+CSS3新特性,使用HTML5+CSS3实现炫酷动画效果,熟悉VSCode编辑器基本使用。
4621
2020-01-03 18:37:47
Web前端培训班有哪些?怎么选?
Web前端培训班有哪些?目前IT互联网行业发展迅速,市场上前端培训机构有很多,Web前端培训班有线上、线下和直播等形式,学员可选择的类型也比较多。想选择一个靠谱的前端培训班可以先去试听一下,了解课程大纲和老师讲课的实际情况,结合自己的学习效果和亲身体验来选择。
3516
2021-02-24 11:24:01