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. PS错误1

    PS错误1 提示要卸载.不用卸载直接安装即可.还保留了之前的设置. 在安装目录下看看有没有安装PS的exe程序.可能有.

  2. Word 查找替换高级玩法系列之 -- 查找文档中的叠字

    叠字,顾名思义,就是重复出现,叠加在一起的文字,多多少少.点点滴滴等都属于这类范畴.而当Word文档中出现这类文字的时候我们应该怎么鉴别呢?如何找到这些叠字? 李清照的<声声慢>一词相信大 ...

  3. Navicat连接Oracle数据库用户权限问题

    解决Navicat连接Oracle数据库用户权限问题: 第一步:在cmd窗口运行[sqlplus], 第二步:输入Oracle的用户名和口令连接Oracle数据库, 第三步:执行授权代码,给用户授予D ...

  4. ubuntu内lnmp相关操作命令

    LNMP状态管理命令: **LNMP状态管理:** sudo lnmp {start|stop|reload|restart|kill|status} **Nginx状态管理:**sudo /etc/ ...

  5. web服务器/HTTP协议基础

    1.http协议:一种规范和约定,实现客户端和服务器的通信2.http请求格式:请求行+请求头+请求体 请求行:method + request-URI + http-version 方法+请求的资源 ...

  6. 20191011-构建我们公司自己的自动化接口测试框架-Action的request方法封装

    Action模块 封装接口request方法,根据传入的参数调用不同的请求方法,因为项目特色,我们公司的接口都是get和post方法,所以仅仅封装了get和post方法: import request ...

  7. css 水平垂直居中 & vertical-align

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 已知宽度的元素居中 position定位 + margin负值 绝对定位 + 4个方向全部`0px` + ...

  8. SQL优化中的重要概念：事务

    原文:SQL优化中的重要概念:事务 sql 优化和事务有关系? 从表面上看,让sql跑的更快,似乎和事务这个概念没什么联系,但是关系数据库中最重要的2个概念就是 关系.事务. 关系,对应到sql中,是 ...

  9. javascript新特性

    让我们看看javascript中的一些新特性.本文将介绍它们的语法和相关链接,以帮助读者及时了解它们的进展.我们将通过编写一个小测试项目来演示如何快速使用这些新功能! 关于提案 提案分为五个阶段.有关 ...

  10. 如何画svg路径图

    在画路径图之前,首先得在package.json引入2个依赖 废话不多说,直接上代码 <style> .green { position: absolute; } .blue { posi ...