JavaWeb学习之路(5)--编写第一段HTML网页代码

简介: 本文目录1. 什么是HTML2. 为啥叫HTML3. 什么是标记4. HTML的标记5. 编写第一段HTML网页代码6. 小结

1. 什么是HTML

在上一章的学习中,我们已经开发了一个空白的网页。但是空白的网页啥作用呢?


毫无作用啊!!


所以我们需要设计一个好看的,有内容的网页,而HTML语言,就是用来编写网页内容的语言。


我们使用HTML语言规范编写的网页,浏览器就能按照相应的规则展示我们设计的内容。


2. 为啥叫HTML

HTML,英文全称HyperText Markup Language,翻译为中文:超文本标记语言。


OK,语言很好理解,编程语言就是程序员和计算机之间的沟通工具,HTML是程序员设计网页内容的语言。


文本也很好理解,就是文字的意思。


那么超文本是啥意思呢?这里的超其实是超越的意思,也就是说这门语言超越了文本。因为HTML网页不光能展示文本,还能展示图片、音乐、视频的内容,所以是超越了文本的。


最后是重点:标记,这体现了这门语言的特点。HTML是通过标记来描述网页的各个部分的。


3. 什么是标记

举个例子先,我们看一下信封的格式。


我们分析下,左上角是邮编,右上角是邮票,中间依次是地址、姓名、寄信人。


这其实就是一种标记,通过不同的位置标记出来这个区域代表的内容。


所以寄信人发出邮件后,邮政公司就能根据不同位置标记的内容,获得对应的邮编、地址等信息。


4. HTML的标记

HTML的标记不是通过位置来实现的,它是通过标签。


例如<title>淘宝网</title>就是一个网页标题的标签,都是以<xxx>开头,且以</xxx>结束,这就是标记,标记名称xxx代表标记的用途,<xxx>和</xxx>中间的部分表示标记的内容。


所以对于<title>淘宝网</title>来说,这个标签的用途就是title,也就是设置网页的标题;这个标签的内容是淘宝网,也就是网页的标题设置为淘宝网。


5. 编写第一段HTML网页代码

我们学习最简单的3个标签:<html>、<head>、<title>,第一个标签表示HTML网页,第一个表示网页的头部,第三个表示网页的标题。


打开记事本,新建一个hello.html,然后内容如下。这样的话,标签中间的部分就是网页的内容了。


<html>

</html>

1

2

然后在中间添加<head>标签,因为网页的头部属于网页,所以放到<html>标签的中间。


<html>

<head></head>

</html>


最后,我们在网页的头部,设置网页的标题,标题的内容为:hello。


<html>

<head>

<title>hello</title>

</head>

</html>


此时我们使用浏览器打开这个网页,效果如下,可见我们已经成功设置了标题。



6. 小结

其实HTML语言的规则及其简单,标签几乎都是以<xxx>开头,对应的以</xxx>结束,而开始和结束中间的部分就是标签对应的内容。


常用的标签也就十几二十个,所以学习HTML就是熟悉这些常用的标签的过程。


不算困难吧。

相关文章
|
7月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
9月前
精美按钮式广告代码HTML分享
精美按钮式广告代码HTML分享
241 4
|
7月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
12月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
408 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
10月前
|
移动开发 前端开发 JavaScript
HTML5实现好看的劳动节网页源码
HTML5实现好看的劳动节网页源码,劳动节网页,劳动节网页源码,内置十个页面,各种模板都有,可以根据这些页面扩展更多页面,网页由网站首页、劳动节介绍、劳动节由来、劳动节习俗、劳动节文化、劳动节活动、劳动节故事、劳动节民谣、联系我们、登录/注册等页面组成,兼容手机端,页面干净整洁,内容丰富,可以扩展自己想要的,注释完整,代码规范,各种风格都有,代码上手简单,代码独立,可以直接运行使用。也可直接预览效果。
320 4
|
10月前
|
移动开发 HTML5
HTML5实现好看的中秋节网页源码
HTML5实现好看的中秋节网页源码,中秋节网页,中秋节网页源码,节日网页大作业,作业源码,内置十个页面,各种模板都有,可以根据这些页面扩展更多页面,网页由网站首页、中秋节介绍、中秋节由来、中秋节习俗、中秋节文化、中秋节美食、中秋节故事、中秋节民谣、联系我们、登录/注册等页面组成,兼容手机端,页面干净整洁,内容丰富,可以扩展自己想要的,注释完整,代码规范,各种风格都有,代码上手简单,代码独立,可以直接运行使用。也可直接预览效果。
467 0
HTML5实现好看的中秋节网页源码
|
11月前
|
移动开发 前端开发 JavaScript
HTML5实现好看的端午节网页源码
HTML5实现好看的端午节网页源码,包含十个页面:网站首页、端午节介绍、由来、习俗、文化、美食、故事、民谣、联系我们及登录/注册。页面设计简洁美观,内容丰富,兼容手机端,代码规范且注释完整,易于扩展和修改。提供完整的源码下载和视频演示,方便学习和使用。
308 3
|
11月前
|
存储 移动开发 JavaScript
网页 HTML 自动播放下一首音乐
在 HTML5 中实现自动播放下一首音乐,通过管理音乐列表、操作音频元素和监听事件完成。创建包含多个音乐链接的列表,使用 `&lt;audio&gt;` 元素加载音乐,监听 `ended` 事件,在当前音乐结束时自动播放下一首。示例代码展示了如何使用 JavaScript 实现这一功能,确保无缝切换音乐。
|
12月前
|
存储 JavaScript 算法
(html在线预览cad图纸插件)网页CAD绘制条形码、二维码的教程
本文介绍了如何在mxcad中绘制条形码和二维码。对于条形码,首先根据应用场景选择合适的编码标准(如CODE39、EAN13等),通过编码规则将数据转换为二进制,并利用`McDbHatch`绘制条和空的组合,同时支持自定义实体及属性管理。 对于二维码,因其能存储更多信息且具备更强纠错能力,采用开源库QRCode.js进行编码处理,再通过`McDbHatch`绘制黑白矩阵,同样封装成自定义实体以便管理和扩展。文中还给出了完整的绘制流程与效果展示,包括创建二维码对象、设置参数、调用绘制方法以及最终的效果图。整个过程体现了灵活运用API与第三方库来实现复杂图形绘制的能力。
|
7月前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。