HTML的框架

页面一般由三部分组成,分别是HTML(超文本标记语言),CSS(层叠样式表)和JScript(活动脚本语言)。

HTML是整个页面的结构,相当于整个页面的框架。带"<",">"符号的都属于HTML的标签,并且标签都是成对出现的。

常见标签如下:

<html>...</html>					表示标记中间的元素是网页
<head>...</head>					用于文档的头部
<title>...<title>					定义文档的标题
<body>...</body>					表示用户可见的内容
<div>...</div>						表示框架
<span>...</span>					组合文档中的行内元素
<p>...</p>							表示段落
<li>...</li>						表示列表
<img>...</img>						定义图像
<video>...</video>					定义视频
<h1>...</h1>						表示标题(<h1>to<h6><a href="">...</a>					表示超链接
<link rel="stylesheet" href="">		定义文档与外部资源的关系
<!--...-->							定义注释
<b>									定义粗体文本
<i>									定义斜体文本

通过编写和修改HTML,可以更好的理解HTML。首先在桌面右键,点击新建,创建一个文本文档,按照如图方式修改文件名和后缀名,文件名可由读者自行取名,后缀名改为html。

在这里插入图片描述
建好文本文件后,可用记事本打开进行HTML代码的编写(在此,笔者平时是使用Visual Studio Code软件或者Sublime Text软件打开进行代码的编写)

打开新建好的后缀名为html的文件后,开始第一个简单的HTML的编写,如下:

<html>
    <head>
        <title>我现在是这个网页的名称哦</title>
    </head>
    <body>
        <!-- 请大家仔细观察,第一个div和第二个div中,文字在页面中的布局哦 -->
        <div>
            天行健君子以自强不息
            地势坤君子以厚德载物
        </div>
        <div>
            <p>天行健君子以自强不息</p>
            <p>地势坤君子以厚德载物</p>
        </div>
        <span>
            <b>天行健君子以自强不息</b>
            <i>地势坤君子以厚德载物</i>            
        </span>
        <p>大家试着点击下面这行字哦</p>
        <div>
            <a href="https://www.sogou.com/sie?hdq=AQxRG-0000&query=天行健君子以自强不息地势坤君子以厚德载物&ie=utf8">
                天行健君子以自强不息,地势坤君子以厚德载物
            </a>
        </div>

    </body>
</html>

编写完文件后,选中该文件,点击右键,选择打开方式,读者点击一个自己常用的浏览器进行打开,结果如下图所示:

在这里插入图片描述
读者可自行修改代码中的中文,观察其网页的变化。

(附:若读者需要上述笔者提到两个软件的安装包,可在评论区进行回复或者进行私信)

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

你是誰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值