专栏首页web编程技术分享第一讲 Html是个啥?

第一讲 Html是个啥?

建议:视频只是作为知识点补充,不要一开始就直接看视频,最好是在阅读之后,带着疑问去看视频。

点击此处,在线观看视频

步骤1: 学会用IDE工具创建HTML页面

首先,下载和安装sublime,当然,你喜欢用其他IDE工具也可。

下载安装完毕,创建一个空的文本文档:1.text

修改后缀名,变成1.html

右键1.txt , 用sublime打开,然后在界面输入

根据提示,回车,就可以得到一个基于HTML5规范的文档了。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

</body>
</html>

HTML就是一个纯文本文件,浏览器解析的时候,如果你不加上标签,所有文字都一视同仁。

步骤2: 练习使用HTML标签

文字素材如下

出场台词
既然你诚心诚意地发问了,那么我就大发慈悲地告诉你。
为了防止世界被破坏,为了守护世界的和平,贯彻爱与真实的邪恶。
可爱又迷人的安排角色,武藏!小次郎!
我们是穿梭在银河的火箭队,
白洞,白色的名天在等着我们!
就是这样啊,喵!

现在,给上面的文字素材配上标签。代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>这是我们的第一个网页</title>
</head>
<body>
    <h1>出场台词</h1>
    <p>既然你诚心诚意地发问了,那么我就大发慈悲地告诉你。</p>
    <p>
    为了防止世界被破坏,为了守护世界的和平,贯彻爱与真实的邪恶。
    </p>
    <p>
    可爱又迷人的安排角色,武藏!小次郎!
    </p>
    <p>
    我们是穿梭在银河的火箭队,
    </p>
    <p>
    白洞,白色的名天在等着我们!
    </p>
    <p>
    就是这样啊,喵!
    </p>
</body>
</html>

标签的作用就是告诉浏览器,某一段文字到底是什么语义? 标签不是用来描述文字样式的,而仅仅用来描述语义!要描述样式,需要CSS。标签都是成对出现的。你要显示的内容要写在body里面哦!

友情提醒: HTML标签不用正儿八经地去学,后面学的东西多了你自然会非常熟练。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【HTML&CSS 】第一讲 HTML文件是个啥?

    剽悍一小兔
  • 【HTML&CSS 课程01 】HTML到底是个啥?

    站长建议:视频只是作为知识点补充,不要一开始就直接看视频,最好是在阅读之后,带着疑问去看视频。

    剽悍一小兔
  • 【php增删改查实例】第二十节 - 把用户管理页面集成到main.php中

    剽悍一小兔
  • 一天学会Chrome插件开发

    如前所述,它包含了一些插件的元数据,作为chrome的入口文件,可以理解为插件的程序清单,那么它到底做了什么事情呢? 结合示例,我们细细来看:

    疯狂的技术宅
  • 0基础HTML

    一、什么是HTML HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标...

    奶糖味的代言
  • python前端HTML和CSS入门

    前端阶段课程介绍 1 ~ 4 : HTML及CSS5 ~ 6 : JavaScript 7 ~ 10 ...

    py3study
  • 房上的猫:HTML5基础

    一.W3C标准  1)W3C标准不是某一个标准,而是一系列的标准的集合,一个网页主要由三部分组成,即结构(Structure),表现(Presentation)...

    房上的猫
  • Web安全学习笔记(五):HTML基础

    今天决定要将《sql注入攻击与防御》这本书吃完。今天开了个头,看了一些,然后还是继续看大佬们写的挖洞经验。有看不懂的地方,简单搜索下概念,先了解...

    7089bAt@PowerLi
  • ComplexHeatmap |理解绘图逻辑绘制热图

    作者:严涛 浙江大学作物遗传育种在读研究生(生物信息学方向)伪码农,R语言爱好者,爱开源。

    生信宝典
  • LogStash的安装部署与应用

    1、Logstash是一个接收,处理,转发日志的工具; 2、Logstash支持网络日志、系统日志、应用日志、apache日志等等,总之可以处理所有日志类型; ...

    趣学程序-shaofeer

扫码关注云+社区

领取腾讯云代金券