零基础HTML入门教程(5)--来吧,看看HTML语言代码是啥样子
点此查看本系列全部文章 零基础Java全栈教程
文章目录
- 1. 任务背景
- 2. 任务目标
- 3. 相关知识点
- 3.1 为啥叫HTML
- 3.2 什么是标记
- 3.3 HTML的标记
- 4. 任务实操
- 5. 任务总结
1. 任务背景
在上一章的学习中,我们已经开发了一个空白的网页。但是空白的网页啥作用呢?
毫无作用啊!!
所以我们需要设计能显示内容的网页,而HTML语言,就是用来编写网页内容的语言。
我们使用HTML语言规范编写的网页,浏览器就能按照相应的规则展示我们设计的内容。
2. 任务目标
了解HTML概念;理解HTML中的标记;编写并运行第一段HTML代码;
3. 相关知识点
3.1 为啥叫HTML
HTML,英文全称HyperText Markup Language
,翻译为中文:超文本标记语言
。
OK,语言很好理解,编程语言就是程序员和计算机之间的沟通工具,HTML是程序员设计网页内容的语言。
文本也很好理解,就是文字的意思。
那么超文本
是啥意思呢?这里的超
其实是超越的意思,也就是说这门语言超越了文本。因为HTML网页不光能展示文本,还能展示图片、音乐、视频的内容,所以是超越了文本的。
最后是重点:标记
,这体现了这门语言的特点。HTML是通过标记
来描述网页的各个部分的。
3.2 什么是标记
举个例子先,我们看一下信封的格式。
我们分析下,左上角是邮编,右上角是邮票,中间依次是地址、姓名、寄信人。
这其实就是一种标记,通过不同的位置标记出来这个区域代表的内容。
所以寄信人发出邮件后,邮政公司就能根据不同位置标记的内容,获得对应的邮编、地址等信息。
3.3 HTML的标记
HTML的标记不是通过位置来实现的,它是通过标签。
例如<title>淘宝网</title>
就是一个网页标题的标签,都是以<xxx>
开头,且以</xxx>
结束,这就是标记,标记名称xxx
代表标记的用途,<xxx>
和</xxx>
中间的部分表示标记的内容。
所以对于<title>淘宝网</title>
来说,这个标签的用途就是title
,也就是设置网页的标题;这个标签的内容是淘宝网
,也就是网页的标题设置为淘宝网。
4. 任务实操
接下来,就让我们编写第一段HTML网页代码。
我们学习最简单的3个标签:<html>
、<head>
、<title>
,第1个标签表示HTML网页,第2个表示网页的头部,第3个表示网页的标题。
打开记事本,新建一个hello.html
,然后内容如下。这样的话,标签中间的部分就是网页的内容了。
<html>
</html>
然后在中间添加<head>
标签,因为网页的头部属于网页,所以放到<html>
标签的中间。
<html>
<head></head>
</html>
最后,我们在网页的头部,设置网页的标题,标题的内容为:hello
。
<html>
<head><title>hello</title>
</head>
</html>
此时我们使用浏览器打开这个网页,效果如下,可见我们已经成功设置了标题。
5. 任务总结
其实HTML语言的规则及其简单,标签几乎都是以<xxx>
开头,对应的以</xxx>
结束,而开始和结束中间的部分就是标签对应的内容。
常用的标签也就十几二十个,所以学习HTML就是熟悉这些常用的标签的过程。
这可不算困难吧,小伙伴们赶快打开电脑试试吧。
零基础HTML入门教程(5)--来吧,看看HTML语言代码是啥样子相关推荐
- 取得数组下标_《零基础C++入门教程》——(8)搞定二维数组与循环嵌套
一.学习目标 了解二维数组的使用方法 了解循环嵌套的使用方法 目录 预备第一篇,使用软件介绍在这一篇,C++与C使用的软件是一样的,查看这篇即可:<零基础看得懂的C语言入门教程>--(二) ...
- sql数据库教程百度云_【推荐】零基础水彩画入门教程|零基础水彩教程百度云...
零基础水彩画入门教程|零基础水彩教程百度云! 照着教程画却总是画不好,这些水彩技法你真的学会了吗? 盲目地照着葫芦画瓢,不懂控制确实很难学会,可以关注一下公众号:每日学绘画,可以领取水彩电子书和全套视 ...
- 零基础CSS入门教程(1)–初识CSS
点此查看 所有教程.项目.源码导航 本文目录 1. 前言 2. HTML与CSS区别 3. CSS有哪些功能 4. 如何学习CSS 1. 前言 学习CSS是离不开HTML的,HTML是CSS的基础,如 ...
- 【PR】零基础快速入门教程
[PR]零基础快速入门教程 PR(Premiere)能做什么? PR欢迎界面及新建项目 工作区及窗口说明 导入文件 建立序列 视频剪辑 添加字幕 导出视频 使用软件:Premiere2020 新年卷起 ...
- 零基础JavaScript入门教程(1)–走进JavaScript的世界
点此查看 所有教程.项目.源码导航 本文目录 1. 前言 2. JS的历史 3. JS的地位 4. JS与HTML.CSS的区别 5. JS是真正的编程语言 6. JS的组成部分 7. 小结 1. 前 ...
- 零基础Bootstrap入门教程(0)--教程背景与目录
点此查看 所有教程.项目.源码导航 本文目录 1. 背景 2. 教程目录 3. 源码下载 1. 背景 在学习完成HTML/CSS/JS/jQuery零基础入门教程后,自然而然我们要进入Bootstra ...
- 零基础SSM入门教程(0)--教程背景与目录
点此查看 零基础JavaWeb全栈文章目录及源码下载 1. 背景 本教程的出发点是写一个比较条理,比较全面的SSM系列教程,首先造福自己.理顺自己的知识体系,然后也造福大众,因为网上现存的资源相对比较 ...
- 零基础GitHub入门教程
最近Github很火,暑期的时候也注册了一个账号,可是其实一直没用.主要呢,是不知道那到底干什么用.现在要照着自己的学习记录一个像我这种完全零基础的人的入门教程. 首先,让我们先知道GitHub到底是 ...
- 大数据零基础如何入门教程
程序员必看大数据教程最全1024G学习资料免费赠送详解,大数据工作者可以施展拳脚的领域非常广泛,从国防部.互联网创业公司到金融机构,到处需要大数据项目来做创新驱动.数据分析或数据处理的岗位报酬也非常丰 ...
- Processing零基础傻瓜入门教程-下载与安装与主界面简介
某绿(笔者)作为一名设计系的学生,其中一门课便要用到此软件,于是,一问三不知的某绿就开始了漫长的processing之路. 此软件的简介以及用途某绿在此文章中不提及,想必想要使用的你已经初步了解过.( ...
最新文章
- c4d+ps打造抽象NFT加密艺术 Create Abstract NFT Crypto Art with Cinema 4D + Photoshop
- HDU 2196 Computer 树形DP经典题
- python画图的模块_python强大的绘图模块matplotlib示例讲解
- shtml与php的区别,htm,html.shtml区别
- linux下c语言http服务器_服务器端开发经验总结 Linux C语言
- zigbee 串口不稳定_Zigbee
- Nginx的功能特性及常用功能
- 黑盒测试的用例设计方法
- 这几个关乎我们一生教养的原则,每个人都应该知道。
- 查询服务器硬件配置的命令
- 2022年地理信息系统与遥感专业就业前景与升学高校排名选择
- 一片文章教你如何做前端笔记。适合前端人员的笔记软件
- 北京地铁各条线路介绍
- 汉庭季琦:我用IT精神打造传统产业
- 无处不在的微创新——验证码的故事
- 计算机的本质到底是什么?
- 20172319 《程序设计与数据结构》第11周学习总结
- 《Spring系列》第15章 声明式事务(一) 基础使用
- 初学计算机图形学——OpenGL实现二维图形平移,旋转(不使用opengl自带的函数,齐次方程实现)
- Failed to execute goal org.apache.maven.plugins:maven-archetype-plugin:3.1.1:generate
热门文章
- 电子处方技术的发展与应用:智慧药店系统源码的核心组成
- supermap动态流向_计算流向 | SuperMap iDesktop Java
- linux php pdo mssql,Linux下PHP连接MSSQL2005/2008
- 从污浊不堪到波光粼粼 看生活污水处理的那些事儿~
- PDF-XChange Editor使用教程:如何在PDF-XChange Editor中为文档的每个页面添加水印?
- Kubernetes集群配置免费的泛域名证书支持https
- 支持高新技术企业发展的财税政策有哪些
- CloudStack 4.17 安装部署
- wegame搭建饥荒联机服务器教程
- 别人的4G网总是比你快?只需这样设置一下,网速就能变快许多