持续创作,加速成长!这是我参与「掘金日新计划 · 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>标签表示标题信息
<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>标签下的复杂标签
说是复杂标签,其实也只是在形式上又一些简单的标签组合,所以单独拿了出来,方便大家理解。
- 表格
<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>
<table>是表格标签<tr>表示一行<td>表示一行中的一个小格子
- 列表
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
<ul>是无序列表<ol>是有序列表<li>是列表中的一个元素