• HTML入门


    HTML基本语法

    这是我的第一篇博客,都说大佬也是从菜鸟一步一步起来的嘛,所以我这第一篇博客的技术也不一定很高。但是,这应该是一篇绝大多数零基础入门的同学都能够看得懂的博客。跟着本篇博客的内容慢慢来,把实验都一个个的过一遍,相信你也能受益匪浅。

    闲话叙完了,开始介绍我们今天的主角:html语言。

    什么是 HTML?

    HTML 是用来描述网页的一种语言。

    • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
    • HTML 不是一种编程语言,而是一种标记语言 (markup language)
    • 标记语言是一套标记标签 (markup tag)
    • HTML 使用标记标签来描述网页

    就是说,我们常见的百度啊,谷歌啊,搜狗浏览器等等啊,他们背后的语言都是基于html的语言。

    还不懂?接下来就让我们进入本片博客的第一个例子。

    我们需要:

    1.一台网络良好的个人电脑

    2.任何一种常见浏览器(比如百度、谷歌等)

    就这么简单!

    然后,我们打开浏览器主界面,笔者的界面如下所示:

    然后就是最关键的一步。让我们在任意一个合适的地方(就是鼠标停留是箭头的地方)点击鼠标右键 ,在弹出的选择框中选择“查看源代码”一项:

    关键一步?哈哈哈,就是用鼠标点一下指定的选项而已。菜鸟的操作就是这么简单。然鹅,接下来弹出的东西就不简单了。。。

    点击进去了之后,一般都会弹出构成网页的源代码。以下是笔者所看到的源代码:

    很复杂对不对?没关系,罗马不是一天建成的,大神也不是一天就能练就的。笔者现在也是个零基础的学生。如果老铁们足够信得过笔者,笔者很荣幸和大家一起学习交流和进步。

    接下来让我们注意看,我们先不要看中间的代码部分,因为现在我们也看不懂qwq,先去粗看一下他的主体结构。

    就拿我所看到的这段代码为例吧,不同浏览器可能略有不同,但大体上是差不多的。

    首先,大家先看到我上面所标注出来的三个箭头。我来对他们分别给出解释:

    1.<!DOCTYPE HTML>:这相当于是一个网页的声明。原先的是一串很长的字符串,现在是这个简洁形式,支持html5标准的主流浏览器都认识这个声明。在这里我可以举个例子帮助大家理解。比如在春秋战国时期两个国家打仗,齐国的军队和魏国的军队短兵相接,两个国家的士兵就会混在一起。那么齐国的士兵怎么知道自己杀的是魏国士兵而不是自己人呢?原因就在他们的盔甲上面。为了便于分辨是敌还是友,两个国家盔甲的颜色是不一样的,身披黄色盔甲的齐国士兵看到身披红色盔甲的魏国士兵,就知道啊 这就是我要杀的敌人,所以在理论上就不会出错。所以这个网页的前缀也相当于起一个标记的作用,让编译器知道我是html,就按照html的语法规则来进行编译就好了。相关的内容可以在w3school官方网站上查看:

    https://www.w3school.com.cn/tags/tag_doctype.asp

    2.这是有关html语言中html lang和dir的内容。相关的内容可以在w3school官方网站上查看:

    html lang:https://www.w3school.com.cn/tags/att_standard_lang.asp

    dir:https://www.w3school.com.cn/tags/tag_dir.asp

    3.<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。<meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。然后name 属性提供了名称/值对中的名称。HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。通常情况下,您可以自由使用对自己和源文档的读者来说富有意义的名称。相关的内容可以在w3school官方网站上查看:

    https://www.w3school.com.cn/tags/tag_meta.asp

    如果上面的代码对于读者来说还是难于理解,也没关系。下面我们可以自己动手编一段代码来加深自己对于html这门语言的认知。

    实验

    在这个实验中,我们需要:

    文本编辑器(种类宽泛,可以是记事本、Notepad (PC) 或 TextEdit (Mac)等等。)

    接下来就动手吧。首先,打开自己的编辑工具(笔者是记事本)并且编辑如下代码:

    如何启动记事本:

    开始
        所有程序
            附件
                记事本

    或者:

        搜索

            记事本

                打开

     点击保存,记住存储的路径哦,不然后期会找不到。在这里我教大家,保存界面的下方会有编码方式供大家选择,如果待会儿编译出了问题,可以换一种编码方式再进行尝试,如图:

     保存之后还不能直接运行,因为后缀名不对。网页文件的后缀名应该是htm或者html,而文本文件保存的默认格式是txt。所以我们通过重命名来改变文件的后缀名。右键点击选中的文件,选择重命名,或者直接选中文件后f2来进行重命名:

     手动更改后缀名html:

     enter后弹出的对话框点确定即可。

    然后直接双击文件,这就是我们自己手编的一个简陋的网页:

    哈哈哈!是不是很有成就感,虽然这只是一个很简单,简单到无以复加的网页,离自己心中的网页,自己所见到的眼花缭乱,有特效有动图的网站还差得远。但路是一步一步走完的,而我们现在就走完了第一步,实现了零的突破,初步了解了网页的构成。

    今天的内容就到这里,如果想更加深入的学习,欢迎关注happyleo后续的课程!拜拜!

    2020,一起安慕希。
  • 相关阅读:
    android studio 开发环境配置
    解决 php-cgi 启动时提示缺少 msvcr110.dll 的问题
    PHP5.5 + IIS + Win7的配置
    PHP版本VC6和VC9、Non Thread Safe和Thread Safe的区别
    [6]Telerik TreeView 复选框
    详解.NET IL代码(一)
    第三章 续:时间控件(TimePicker)
    第二章 时间控件(DateTime Picker)
    jquery常用方法
    RESTClient
  • 原文地址:https://www.cnblogs.com/happyleo/p/12913971.html
Copyright © 2020-2023  润新知