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就是熟悉这些常用的标签的过程。


不算困难吧。

相关文章
|
1月前
html实现的破碎拼接文字动画特效代码
html实现的破碎拼接文字动画特效代码是一段会自动产生文字依次破碎再拼接的效果,非常的炫。欢迎对此段代码感兴趣的朋友前来下载使用。
33 1
|
1月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
120 6
|
2月前
|
人工智能
|
3月前
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。
45 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
|
2月前
|
Java BI API
spring boot 整合 itextpdf 导出 PDF,写入大文本,写入HTML代码,分析当下导出PDF的几个工具
这篇文章介绍了如何在Spring Boot项目中整合iTextPDF库来导出PDF文件,包括写入大文本和HTML代码,并分析了几种常用的Java PDF导出工具。
651 0
spring boot 整合 itextpdf 导出 PDF,写入大文本,写入HTML代码,分析当下导出PDF的几个工具
|
2月前
|
JavaScript 前端开发
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
131 1
|
2月前
html基础知识学习
html基础知识学习
39 0
|
3月前
|
C++ Windows
HTML+JavaScript构建C++类代码一键转换MASM32代码平台
HTML+JavaScript构建C++类代码一键转换MASM32代码平台
|
3月前
|
移动开发 数据可视化 HTML5
Twaver-HTML5基础学习(40)表格可视化视图组件(Table)
本文介绍了如何在Twaver-HTML5中使用表格可视化视图组件(Table),包括创建表格、定义列对象、实现数据绑定和排序,以及处理表格事件和获取表格数据的方法。
48 1
|
前端开发 数据安全/隐私保护
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第6章表格与表单
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第6章表格与表单
207 0