HTML简介

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

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

  • HTML 指的是超文本标记语言: HyperText Markup Language
  • HTML 不是一种编程语言，而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签及文本内容
  • HTML文档也叫做 web 页面

HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词，比如 <html>
  • HTML 标签通常是成对出现的，比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签
<标签>内容</标签>

HTML元素

"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

HTML 元素:

<p>这是一个段落</p>

Web浏览器

Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。

浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户。

HTML网页结构

下面是一个可视化的HTML页面结构。

注意：只有body区域的内容才会显示在浏览器中。

HTML编译器

我采用EditPlus文本编译器来用作HTML的编程工具，因为其提供了可供选择的项目类型，会自动生成一些配置，用起来比较方便，如下图。

注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">

HTML后缀名

HTML的后缀名有两种

  • .html
  • .htm

以上两种后缀名没有区别，都可以使用。建议使用.html。

HTML实例

创建第一个HTML网页，再EditPlus中新建一个HTML项目，编辑如下内容：

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

 </head>

 <body>

    <h1>This is my first page!</h1>

    <h2>This is test page too!</h2>

    <p>这是我的第一个段落！</p>

 </body>

</html>

Ctrl+B 查看运行效果如下：

作者：Jeremy.Wu
  出处：https://www.cnblogs.com/jeremywucnblog/

  本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

HTML - My First Page!的更多相关文章

  1. 我这么玩Web Api（一）：帮助页面或用户手册(Microsoft and Swashbuckle Help Page)

    前言 你需要为客户编写Api调用手册?你需要测试你的Api接口?你需要和前端进行接口对接?那么这篇文章应该可以帮到你.本文将介绍创建Web Api 帮助文档页面的两种方式,Microsoft Help ...

  2. HTML5 Page Visibility

    什么是 Page Visibility ? Page Visibility 即页面可见性,通过 visibilityState 的值检测页面当前是否可见.当一个网站是可见或点击选中的状态时 Page ...

  3. angularjs 1 开发简单案例(包含common.js,service.js,controller.js,page)

    common.js var app = angular.module('app', ['ngFileUpload']) .factory('SV_Common', function ($http) { ...

  4. Selenium的PO模式（Page Object Model）[python版]

     Page Object Model 简称POM  普通的测试用例代码: .... #测试用例 def test_login_mail(self): driver = self.driver driv ...

  5. SharePoint2013 Set a custom application page as site welcome page

    本文主要介绍如何添加一个custom application page as site welcome page 1.首先创建一个sharepoint 2013 empty solution, add ...

  6. 使用page object模式抓取几个主要城市的pm2.5并从小到大排序后写入txt文档

    #coding=utf-8from time import sleepimport unittestfrom selenium import webdriverfrom selenium.webdri ...

  7. github page+jekyll搭博客初体验

    div.oembedall-githubrepos { border: 1px solid #DDD; list-style-type: none; margin: 0 0 10px; padding ...

  8. selenium page object & Page Factory

    package demo; import java.util.concurrent.TimeUnit; import org.openqa.selenium.By; import org.openqa ...

  9. <%@ page trimDirectiveWhitespaces="true" %>

    我们经常会在JSP页面上使用: <%@ page trimDirectiveWhitespaces="true" %> 这个命令可以使jsp输出的html时去除多余的空 ...

  10. MIT 6.828 JOS学习笔记18. Lab 3.2 Part B: Page Faults, Breakpoints Exceptions, and System Calls

    现在你的操作系统内核已经具备一定的异常处理能力了,在这部分实验中,我们将会进一步完善它,使它能够处理不同类型的中断/异常. Handling Page Fault 缺页中断是一个非常重要的中断,因为我 ...

随机推荐

  1. Windows下jmap命令报错问题

       最近换了笔记本,新的工作环境下jmap命令居然在报错,而jps.jstat.jinfo.jstack都能正常使用,所以初步排除进程号的问题. Attaching to core 17536 fr ...

  2. 【C++札记】构造函数与析构函数

    构造函数(constructor) 1.构造函数是种特殊的类成员函数,遵循如下规则: a.函数名与类名必须相同. b.没有返回值 例如: class Obj { ... public: Obj() { ...

  3. Centos 修改IP地址、网关、DNS

    一.CentOS 修改IP地址   修改对应网卡的IP地址的配置文件 # vi /etc/sysconfig/network-scripts/ifcfg-eth0   电信 # vi /etc/sys ...

  4. Scrapy各部分运行机制?Xpath为None？多层Response如何编写？搞定Scrapy的坑

    前言 Scrapy那么多模块都是怎么结合的啊?明明在chrome上的xpath helper插件写好了xpath,为什么到程序就读取的是None?Scrapy可以直接写多层response么?难道必须 ...

  5. Firefox在新标签页打开“书签”和“搜索栏”（无需插件）

    转自   初来灬炸到的博客 前言 每次打开书签前,都需要创建新标签页. 每次搜索前,都需要创建新标签页.  这个真滴很麻烦.下面介绍的方法非常简单,不需要任何插件,通过修改浏览器参数即可. 名词 设置 ...

  6. json字符串，json对象，java对象互相转换

    1.把JSON字符串转换为JAVA 对象 JSONObject jsonobject = JSONObject.fromObject(jsonStr); User user= (User)JSONOb ...

  7. 控制层解析post请求中json数据的时候，有些属性值为空

    原因: 1.默认json数据解析的时候,值会赋给键的首字母是小写的封装的bean中的属性,如果没有首字母小写的属性,也不会报错.即bean中有getXXX方法时,从json到model会增加xxx属性 ...

  8. Scratch—点亮生日蜡烛

    过生日是小朋友们创作Scratch作品经常会用到的素材,今天介绍使用一些基础技能来点亮生日蜡烛的实现方法. 1.角色设计只有三种:生日蛋糕.未点燃的蜡烛.已点燃的蜡烛. 2.未点燃的蜡烛:在程序启动时 ...

  9. ggalluvial|TCGA临床数据绘制桑基图（Sankey）

    本文首发于”生信补给站“,https://mp.weixin.qq.com/s/yhMgkST-rVD6SaQS7R-eoA 桑基图(Sankey diagram),是一种特定类型的流程图,图中延伸的 ...

  10. （十二） web服务与javaweb结合（3）

    一.需求 上一章节虽然将webservice和web项目绑定在了一起,但是还是不能共同一个端口,本章讲解webservice和web项目绑定且共同端口. 二.案例 2.1 创建web工程,并引入依赖 ...