如何使用html制作网页
如何使用html制作网页
一、html简介
1.1概念
HTML即HyperText Mark-up Language ,意思是超文本标记语言。HTML不是一种编程语言,而是一种标记语言。超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签组成,这种语言制作的文件保存的是一个文本文件,文件的扩展名为 .html 或者 .htm。html文档也叫 Web页面 ,其实就是一个网页。如果用浏览器打开 ,浏览器会按照标签描述内容将文件渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。
1.2 开发工具
电脑中自带的记事本可以用于编写html,但是为了编写代码的效率和代码的可读性,我们通常要借助一些开发工具。我们常用的代码编辑工具很多,如SublimeText,WebStorm和VSCode等。本文以VSCode作为示范。
二、html的基础语法
2.1基本结构
HTML文本的结构包括“头”部分(head)、和“主体”部分(body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容 ,它的标记语法是以“<”和">",主要有两种形式的标签,分别是双标签(<标签名字>标签内容<标签名字>)和单标签(<标签名字/>)。
标签中可以添加属性,格式为:<标签名 属性名1=“值1” 属性名2=“值2” 属性名n=“值n”>…</标签名>
html文本的基本结构如下,在编辑器中可以通过"!"+回车键直接导出。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>
2.2注释
html文档代码中可以插入注释,注释是对代码的说明和解释。
格式为:<!-- 注释内容-- >
<!-- 里面是注释嗷 -->
2.2head头部设置
head标签作用于网页的头部,它的内容不会在正文中显示出来,主要完成对当前网页的各种设置
head中主要包含以下几种标签
三、文本标签
常用的文本标签主要有如下几种
接下来我们通过一个案例来观察以上几种文本标签的使用方法和实际效果如何
html文本如下
<!DOCTYPE html>
<html lang="en"> <head><meta charset="UTF-8"><title>⽂本标题示例</title>
</head> <body><h3>文本标签使用案例</h3><h1>标题一</h1><h2>标题二</h2><h3>标题三</h3><h4>标题四</h4><h5>标题五</h5><h6>标题六</h6><i>斜体</i> <br/><em>强调斜体</em> <br/><b>加粗</b><br/><br/><strong>强调加粗</strong><br/><del>删除线</del><br/><u>下划线</u> <br/><br/>
</body>
</html>
实际网页效果为:
(我们可以将这段html文本写在记事本中,并通过修改.txt文件的后缀,改为.html,即可通过网页来观察以上功能)
四、格式化标签
常用的格式化标签主要包括以下几种
接下来针对以上功能进行演示
<!DOCTYPE html>
<html lang="en"> <head><meta charset="UTF-8"><title>格式化标签案例演示</title>
</head> <body><h3>HTML介绍</h3><p>HTML称为超文本标记语言,是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。</p><p>“超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中,也可能是其他文件,或是地理位置相距遥远的某台计算机上的文件。</p><hr/><!-- 列表标签 -->
日程表<ul><li>看书</li><li>看书</li><li>看书</li><li>玩游戏</li></ul><ol type="a"><li>看书</li><li>看书</li><li>看书</li><li>玩游戏</li></ol><dl><dt>问:一加一等于几</dt><dd>答:不知道</dd><dt>问:HTML?</dt><dd>答:超文本标记语言</dd><dt>问:树上有些什么</dt><dd>答:金苹果</dd></dl><div>aaa</div><div>bbb</div><span>aaaa</span><span>bbbb</span>
</body>
</html>
它的实际显示效果如下:
五、图像标签
在HTML网页中插入一张图片,使用img标签,他是一个单标签: img
主要包含以下几种常用属性
src: 图片名及url地址
alt: 图片加载失败时的提示信息
title:文字提示属性
width:图片宽度
height:图片高度
border:边框线粗细
演示实例:
<!DOCTYPE html>
<html lang="en"> <head><meta charset="UTF-8"><title>Document</title>
</head> <body><h3>图像标签实例</h3><img src="./你的名字.jpg" title="图片" width="300" /><img src="./你的名字.jpg" width="280" border="2" />
</body>
</html>
实际效果:
六、超链接标签a
href="链接目标url地址"显示文字
a标签的属性:
href: 必须,指的是链接跳转地址
target: 表示链接的打开方式:
_blank 新窗口
_parent 父窗口
_self 本窗口(默认)
_top 顶级窗口
framename 窗口名
title:文字提示属性(详情)
使用锚点链接时跳转地址为#加上标签的id
七、表格标签
实例演示:
<!DOCTYPE html>
<html lang="en"> <head><meta charset="UTF-8"><title>Document</title>
</head> <body><h3>HTML标签实例--表格标签</h3><table border="1" width="700" cellspacing="0" cellpadding="4"><caption><h3>学生信息表</h3></caption><tr><th>学号</th><th>姓名</th><th>年龄</th><th>班级</th></tr><tr><td>1001</td><td>张三</td><td>22</td><td>python04</td></tr><tr><td>1002</td><td>李四</td><td>22</td><td rowspan="2">python04</td></tr><tr><td>1003</td><td colspan="2">王五</td><!--<td>22</td>--><!--<td>python04</td>--></tr></table>
</body>
</html>
实际显示效果如下
如何使用html制作网页相关推荐
- 六年级计算机word处理,六年级上信息技术教案Word大变身用Word制作网页河大版
<六年级上信息技术教案Word大变身用Word制作网页河大版>由会员分享,可在线阅读,更多相关<六年级上信息技术教案Word大变身用Word制作网页河大版(2页珍藏版)>请在人 ...
- Cleaver快速制作网页PPT
原文首发链接:http://www.jeffjade.com/2015/10/15/2015-10-16-cleaver-make-ppt/ 写在开始之前 互联网时代,以浏览器作为入口,已经有越来越多 ...
- 制作唐诗网页代码_分享FrontPage制作网页的几个技巧
最近笔者学会了用FrontPage XP做网页,心理特高兴,非常想把我在制作主页过程中的一些经验和大家交流交流.切磋切磋,我们一起来看看吧. 用表格做按钮 很多人为了做出按钮效果,不得不去动用一些图像 ...
- 多布局怎么搭建_怎么制作网页?网页制作基本步骤
怎么制作网页?网页制作基本步骤,互联网时代,各行各业的企业为了适应时代的发展,纷纷从线下转移至线上来拓展自己的业务.若想让更多人了解自己的企业,拥有一个专属网站至关重要.网站不仅可以详细介绍企业信息, ...
- html css做网页总结,学习CSS制作网页总结的一些经验
学习CSS制作网页总结的一些经验 互联网 发布时间:2008-10-17 19:28:20 作者:佚名 我要评论 让你使用DIV CSS排版 不是让你用换个标签然后再去按照表格的方式去排版 ...
- 做网页很实用代码集合和CSS制作网页小技巧整理
做网页很实用代码集合 控制横向和纵向滚动条的显隐?<body style="overflow-y:hidden"> 去掉x轴 <body style=" ...
- html诗词赏析网页制作步骤,制作网页详细操作步骤
制作网页详细操作步骤 导读:目前所见即所得类型的工具越来越多,使用也越来越方便,所以制作网页已经变成了一件轻松的工作,不像以前要手工编写一行行的源代码那样.下面和小编一起去看看相关内容~ 制作网页主要 ...
- 【学习笔记】HTML基础:使用html制作网页
一.初识HTML 1.什么是HTML? Hyper Text Markup Language(超文本标记语言) 扩展XML:Extendsible Markup Language(可扩展性标记语言) ...
- 制作网页版电子时钟特效
可以加我QQ1975728171代做 一.语言和环境 A.实现语言 JavaScript B.环境要求 Dreamweaver.WebStorm.Sublime任选其一 二.功能要求 利用JavaSc ...
- 如何制作网页-初学者入门HTML+CSS
如何制作网页 如何制作网页?如何做一个自己喜欢的网站呢?看到别人有自己的网站是不是有点羡慕呢?当然.比较复杂的网站就需要很多技术上面的知识咯.比如javascrpt.jquery.ajax.flash ...
最新文章
- 鱼眼图像的unwarping过程
- Vware Workstation pro 12|虚拟机
- alxc tool 报错数组超出了界限_代码审计之报错信息泄露与字符串截断
- Time-of-Flight技术在距离测量和定位上的应用
- 面试小问题——Object中有哪些常用方法?
- php 数据类型伪类型,PHP之伪类型与变量
- 互联网和大数据是什么意思_大数据和互联网的区别是什么意思
- 安装VCSA6.7(vCenter Server Appliance 6.7) 2019.7.9
- 节约:我们不应忘记的美德
- C# 反射机制(转)
- LTE学习:MCS(调制与编码策略) CSI(信道状态信息)
- PHP实现微博的同步发送(转)
- C#WinForm开发笔记——基本控件(一)
- Unity WebView 插件 | 浏览器插件3D WebView 专栏介绍
- mybatis源码解析
- 基于matlab的适应度曲线的代码,matlab常用的几个适应度评价函数分析.docx
- Excel数据的快速填充
- DRSL: Deep Relational Similarity Learning for Cross-modal Retrieval-多模态学习总结
- 怎样使用计算机上的高级共享设置密码,怎么设置电脑共享密码
- 《世界棒球》:黑人联盟