HTML标签的保姆级详解攻略——前端探秘(1)

434 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第2天,点击查看活动详情

0. 什么是HTML

HTML全称是超文本标记语言,是一种用于创建网页的标准标记语言。HTML的标签可以被浏览器解析,生成网页,最终展示给我们。

有一点需要注意,HTML的标签是大小写不敏感的,大家在使用时要注意这一点。

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
</head> 

<body> 
    <h1>我的第一个标题</h1> 
    <p>我的第一个段落。</p> 
</body> 
</html>
  • <!DOCTYPE html> 负责声明这是一个HTML5文档
  • <html> 标签中包含的是HTML文档的主题内容
  • <head>标签表示标题信息

image.png

  • <body>表示的是页面部分,也就是我们常说的网页的信息。

1. <head>标签下的其他标签

注意,与<body>相比,<head>下的标签要少得多,除了本章节,后续的所有标签基本都是在<body>中使用的。

标签名称作用
<title>定义了文档的标题
<base>定义了页面链接标签的默认链接地址
<link>定义了一个文档和外部资源之间的关系
<meta>定义了HTML文档中的元数据,可以是作者信息等等,可以是多个
<style>定义了HTML文档的样式文件

2. <body>标签下的简单标签

在这里,我们汇总了<body>标签下常用的几个简单标签,供大家参考理解。

标签名称作用
<h1> - <h6>表示是页面的几级标题
<p>表示段落
<a href=“url”>表示是一个专到url的链接
<img src="url" width="258" height="39">表示图片以及信息
<a href=“url”>表示是一个转到url的链接
<div>定义了文档的区域,块级 (block-level)
<span>与上面类似,但是是行级

3. <body>标签下的常用符号

在这里,记录一下<body>标签下的常用的符号。

标签名称作用
<!--...-->注释
<br>换行
<hr>水平线

4. <body>标签下的复杂标签

说是复杂标签,其实也只是在形式上又一些简单的标签组合,所以单独拿了出来,方便大家理解。

  1. 表格
<table border="1"> 
    <tr> 
        <td>row 1, cell 1</td> 
        <td>row 1, cell 2</td> 
    </tr> 
    <tr> 
        <td>row 2, cell 1</td> 
        <td>row 2, cell 2</td> 
    </tr> 
</table>

image.png

  • <table>是表格标签
  • <tr>表示一行
  • <td>表示一行中的一个小格子
  1. 列表
<ul>
    <li>Coffee</li>
    <li>Milk</li>
</ul>

image.png

  • <ul> 是无序列表
  • <ol> 是有序列表
  • <li> 是列表中的一个元素