Skip to content

HTML 基础

简介

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

HTML文档后缀名

HTML页面文件以 .html 做为文件后缀，系统自动解析由浏览器打开执行。

HTML 文档基本结构

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>首页</title>
    </head>
    <body>
        <h1>我的第一个标题</h1>
        <p>我的第一个段落。</p>
    </body>
</html>

<!DOCTYPE html> : 文档声明, 用来指定页面所使用的html的版本, 这里声明的是一个html5的文档。
<html>...</html> : html 标签是 HTML 文档的开始和结束标签。网页从 <html> 这里开始，到 </html> 结束。
<head>...</head> : head 标签用于定义文档的头部信息,可以对页面进行设置标题、编码格式以及引入css和js文件等。
<body>...</body> : body 标签用于编写网页上显示的内容。

HTML 标签

HTML 不是一种编程语言，而是一种标记语言，HTML 标记标签通常被称为 HTML 标签 (HTML tag)，HTML 标签是由尖括号包围的关键词。

按语法形式划分，标签可以分为以下两种形式：

双标签：标签是成对出现的，标签对中的第一个标签是开始标签，第二个标签是结束标签，开始和结束标签也被称为开放标签和闭合标签。
单标签：单标签是存在开始标签，没有结束标签。

按布局效果划分，标签还可以分为以下两种形式：

行标签：多个标签元素不会换行。
块标签：每个标签元素会独占一行。

标签不区分大小写，但是推荐使用小写。

HTML 常用标签

<br>: 换行标签
<hr>: 分割线标签
<img>: 图片标签，用于展示图片
<a></a>: 超链接标签，用来插入一个链接地址
<div></div>: 用来布局页面结构
<h1></h1> ~ <h6></h6>: 标题标签，共有6级。
<p></p>: 段落标签，用来显示文字段落

<ul></ul>: 无序列表标签
<ol></ol>: 有序列表标签
<li></li>: 列表项标签，无序列表和有序列表都使用 li 标签做为列表项标签
<table></table>: 表格标签，用来定义一个表格
<tr></tr>: 表格行标签，需要配合 table 标签使用，用来定义表格中的行
<th></th>: 表头标签，需要配合 tr 标签使用，用来定义表格中的表头元素
<td></td>: 单元格标签，需要配合 tr 标签使用，用来定义表格中的单元格元素

<form></form>: 表单标签，用于收集页面中用户的输入数据，并提交到服务器
<input></input>: 表单元素标签，用来定义输入项，通过 type 属性控制元素类型
- type="text" 定义单行文本输入框
- type="password" 定义密码输入框
- type="radio" 定义单选框
- type="checkbox" 定义复选框
- type="file" 定义上传文件
- type="submit" 定义提交按钮
- type="reset" 定义重置按钮
- type="button" 定义一个普通按钮
<textarea></textarea>: 多行文本输入框
<select></select>: 下拉标签
<option></option>: 下拉项标签，需配合 select 标签使用
<span></span>: 范围标签，一般用来包含一段需要特殊处理的文字时使用。

总结

HTML 基础