博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
5分钟了解HTML的核心知识
阅读量:4090 次
发布时间:2019-05-25

本文共 1952 字,大约阅读时间需要 6 分钟。

发表在

HTML(HyperText Markup Language,超文本标记语言)也就是我们常说的网页。浏览器从服务器获取HTML文件,并显示给用户。HTML是为了创建网页而设计的语言。

HTML是用一系列的HTML标签写成的,每种HTML标签都有对应的语义和大致的外观。html文件通常以.html作为后缀名。下文中HTML的相关内容均基于标准来介绍。

编写 HTML

HTML是一种用于创建网页的语言,用HTML语言编写的网页我们称为HTML文件,一般以.html后缀来命名。一个最简单的HTML文件可以是这样的:

  Hello, Catty!  

I like fruits!!!

我们对上述代码稍作解释。第一行DOCTYPE声明并非页面的一部分,它属于浏览器指示,像浏览器说明当前HTML文件使用的HTML语言版本。

接着是一个<html>标签,标签要用尖括号包含起来,该标签与文件尾的</html>成对。一对标签之间的内容均为该标签的子元素,比如<html>标签有两个子元素:<head><body>

其中<head>包含的内容往往用来设置HTML的元信息(metadata)。比如外部样式表、页面脚本、文件编码、视口信息等。

<body>中的内容则被显示在页面上。上述<body>标签包含一个子标签<p>,它表示一个段落(paragraph)。

查看HTML文件

把上述文本保存为hello.html,使用浏览器打开它,你会看到:

<title>中的内容显示在了标题栏中,而<p>(passage,段落标签)之间的内容显示在了页面上。<body>中只有一个<p>标签,接着我们来试试其他的标签!

h 标签

大多数HTML标签都是用来显示和输入信息的,它们被用在<body>标签之中。除了上述的<p>标签之外,HTML提供了多种多样的标签来显示相应的内容,比如<h1>(一级标题)和<h2>(二级标题)标签:

...  

Catie's Homepage

i am a little, cute catie...

I like fruits!!!

...

把它们添加到我们的hello.html中并刷新浏览器,便能看到这样的效果:

事实上,除了上述的<h1><h2>,HTML提供了一共六级标题标签。

img 标签

<img>标签用来显示图片,其src属性用来指定图片的路径。在<p>前面加入一个<img>

......

同样保存后刷新浏览器,你会看到:

你要保证hello.html所在目录下存在一个catty.jpeg文件。它可以是任何图片文件,你可以去本节课的参考代码中下载。

细心的读者可能已经发现了,<img>标签并没有对应的关闭标签,这是因为<img>属于空元素,它不需要关闭标签。

HTML标签分为常规元素(normal element)和空元素(void element)。其中空元素是自关闭的(self-closing),不需要成对地添加关闭标签。空元素包括:areabasebrcolcommandembedhrimginputkeygenlinkmeta,paramsourcetrackwbr

ul 标签

<ul>是无序列表(unordered list),用来显示一组<li>(list item):

  • Cherry
  • Peach
  • Strawberry

效果如下:

标签嵌套

HTML中,常规元素都是可嵌套的,比如上述的<li>中,可以加一个超链接<a>标签。同时,我们把<ul><p>放在一个<div>(division,区域)下

I like fruits!!!

第三项的Strawberry将会显示为一个指向百度的超链接:

最终页面

我们把上述的标签都放在一起,形成最终的页面:

所有的文件可以在本课的参考代码中找到。

其他HTML标签

HTML标签还有哪些呢?下面列举一些重要的HTML标签:

  • 标题(h1h2h3等),用来显示标题。
  • 段落(p),用来显示一个段落。
  • 块(div),HTML块,主要用来组织HTML元素。
  • 输入(input),用来接受用户输入。
  • 列表(liul),用来显示一个列表,li(list)是有序列表,ul(unsorted list)是是无序列表。

如果你好奇一共有多少HTML标签,或者某个标签的使用方法,请参见:

更多文章请访问

转载地址:http://qjjii.baihongyu.com/

你可能感兴趣的文章
新一代Java模板引擎Thymeleaf
查看>>
Spring MVC中使用Thymeleaf模板引擎
查看>>
Spring Boot构建简单的微博应用
查看>>
Spring处理表单提交
查看>>
Spring MVC异常处理
查看>>
Leetcode 1180. Count Substrings with Only One Distinct Letter [Python]
查看>>
PHP 7 的五大新特性
查看>>
php使用 memcache 来存储 session
查看>>
php实现socket(转)
查看>>
PHP底层的运行机制与原理
查看>>
php 几个比较实用的函数
查看>>
深入了解php底层机制
查看>>
PHP中的stdClass 【转】
查看>>
XHProf-php轻量级的性能分析工具
查看>>
PHP7新特性 What will be in PHP 7/PHPNG
查看>>
比较strtr, str_replace和preg_replace三个函数的效率
查看>>
ubuntu 下编译PHP5.5.7问题:configure: error: freetype.h not found.
查看>>
PHP编译configure时常见错误 debian centos
查看>>
configure: error: Please reinstall the BZip2 distribution
查看>>
OpenCV gpu模块样例注释:video_reader.cpp
查看>>