【Web前端】HTML基础知识详解

原创已于 2023-05-13 13:08:14 修改 · 3.9k 阅读

48 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html

于 2022-10-23 21:36:47 首次发布

Web前端专栏收录该内容

8 篇文章

订阅专栏

1. HTML 简介

HTML 指的是超文本标记语言(HyperText Markup Language)，是用来描述网页的一种语言。

HTML 不是编程语言，而是标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

1.1 HTML 基本结构

以下为HTML基本结构：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

<!DOCTYPE html>：声明为 HTML5 文档
<html>元素： HTML 页面的根元素
<head>元素：头部元素，包含了文档的元数据(meta)，标题(title)等
<body>元素：包含了可见的页面内容

1.2 HTML 元素

HTML元素基本组成：

开始标签
结束标签
元素内容

注：
1.空标签：只有开始标签，没有结束标签，如<br/> 、<img>等
2.大部分HTML 元素拥有属性

HTML 元素解析示例：

<a href="http://www.baidu.com">百度链接</a>

<a>：开始标签
</a>：结束标签
百度链接：元素内容
href：属性名
http://www.baidu.com：属性值

2. HTML 编辑器

推荐使用现在主流的编辑器VS Code，VS Code的安装与使用。

2.1 Live Server 插件

下载完VS Code后建议安装插件Live Server，这款插件可以在保存html文件时自动刷新页面，可以省去自己每次手动刷新页面。

注：Live Server，只有通过VS Code打开文件夹时才有用，单独打开这个文件是无效的。

VS Code的使用：
1.新建一个文件夹，右键文件夹 -> 通过Code打开 ->左上角新建一个html文件，如demo.html，编辑demo.html，输入!再按Tab或者回车，会自动生成html基本结构代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2.右键Open With Live Server打开浏览器，之后再对demo.html修改保存，网页会自动刷新。

在这里插入图片描述

2.2 Prettier 插件

建议安装插件Prettier，可以美化代码。

1.打开设置：文件 -> 首选项 -> 设置，搜索设置框输入editor.defaultFormatter,选择Prettier。

在这里插入图片描述

2.搜索设置框输入editor.formatOnSave，勾选保存时格式化文件。

在这里插入图片描述

3.设置完以后，再保存文件，会自动美化代码。

3. HTML 标签

3.1 常用标签汇总

1.文本

标签	英文释义	说明
`<h1> - <h6>`	heading	标题
`<p>`	paragraph	段落
`<br/>`	break	换行
`<b>`	bold	加粗
`<i>`	italic	斜体
`<sub>`	subscript	下标字
`<sup>`	superscript	上标字

2.超链接和图像

标签	英文释义	说明
`<a>`	anchor	超链接
`<img>`	image	图像

3.表格

标签	英文释义	说明
`<table>`	table	表格
`<tr>`	table row	表格的行
`<td>`	table data	单元格
`<th>`	table heading	表头

4.列表

标签	英文释义	说明
`<ol>`	ordered list	有序列表
`<ul>`	unordered list	无序列表
`<li>`	list item	列表项
`<dl>`	definition list	自定义列表
`<dt>`	definition term	自定义列表组
`<dd>`	definition description	自定义列表描述

5.块级元素和内联元素

标签	英文释义	说明
`<div>`	division	块级元素，无特定含义
`<span>`	span	内联元素，无特定含义

6.表单

标签	属性	属性说明
form	action	服务端的URL路径
form	method	表单的提交方式
input	text	文本框
	password	密码框
	radio	单选框
	checkbox	复选框
	submit	提交按钮
button	type	按钮类型
button	onclick	点击按钮发生的事件
select	option	下拉列表的选项

7.框架

标签	说明
`<iframe>`	当前 HTML文档中嵌入另一个文档

8.头部

标签	说明
`<title>`	页面标题
`<base>`	链接的默认URL以及默认打开方式
`<link>`	链接外部资源
`<meta>`	页面描述
`<style>`	样式
`<script>`	脚本

3.2 注释

用于注释。

<!-- 注释 -->

3.3 文本

3.3.1 标题

通过<h1> - <h6>用来定义标题，其中<h1>为最大标题，<h6>为最小标题。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

运行结果：

在这里插入图片描述

3.3.2 段落

<p>用来定义段落，<br/>用来换行。

<p>落霞与孤鹜齐飞，秋水共长天一色。</p>
<p>落霞与孤鹜齐飞，<br/>秋水共长天一色。</p>

运行结果：

在这里插入图片描述

3.3.3 文本格式化

常见的文本格式化如下：<b> 加粗、<i>斜体、<sub>下标字、<sup>上标字。

<b>粗体</b>
<i>斜体</i>
<p>f<sub>(x)</sub>=x</p>
<p>x<sup>2</sup>=4</p>

运行结果：

在这里插入图片描述

3.4 超链接

<a>用来设置超文本链接，其中href属性用于描述链接的地址，target规定在何处打开链接的地址。

1.不加target属性，默认当前页面打开链接
2.target="_blank"代表新窗口打开链接

<a href="http://www.baidu.com" target="_blank">百度链接</a>

运行结果：

在这里插入图片描述
点击该链接后，在新窗口打开百度地址。

3.5 图像

<img>用于页面显示图片：

src属性用于描述图片的 URL 地址。
alt属性用于图片不能正常显示时出现的文本提示。
title属性用于鼠标悬停在图片上的文本提示。
width属性为图片的宽度。
height属性为图片的高度。

<img src="https://www.baidu.com/img/bdlogo.png" alt="图片未能加载成功" title="百度logo" width="540" height="258">
<img src="bdlogo.png" alt="图片未能加载成功">

运行结果：
在这里插入图片描述

3.6 表格

<table> 用于定义表格：

每个表格有若干行<tr>。
每行有若干单元格<td>。
表格的表头为<th>，显示为粗体居中的文本。
rowspan属性用于跨行合并单元格
colspan属性用于跨列合并单元格

1.基础表格

<table border="1">
    <tr>
        <th>姓名</th>
        <th>院系</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>计算机学院</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>软件学院</td>
    </tr>
</table>

运行结果：
在这里插入图片描述

2.跨行、跨列合并单元格的表格

<!-- 跨行合并单元格 -->
<table border="1">
    <tr>
        <th rowspan="2">猫科</th>
        <td>狮子</td>
    </tr>
    <tr>
        <td>老虎</td>
    </tr>
    <tr>
        <th>犬科</th>
        <td>狼</td>
    </tr>
</table>

<br>

<!-- 跨列合并单元格 -->
<table border="1">
    <tr>
        <th colspan="2">猫科</th>
        <th>犬科</th>
    </tr>
    <tr>
        <td>狮子</td>
        <td>老虎</td>
        <td>狼</td>
    </tr>
</table>

运行结果：

在这里插入图片描述

3.7 列表

3.7.1 有序列表

<ol>定义有序列表，<li>为列表项。

<ol>
    <li>咖啡</li>
    <li>牛奶</li>
</ol>

运行结果：

在这里插入图片描述

3.7.2 无序列表

<ul>定义无序列表，<li>为列表项。

<ul>
    <li>咖啡</li>
    <li>牛奶</li>
</ul>

运行结果：

在这里插入图片描述

3.7.3 自定义列表

<dl>为自定义列表，<dt>为自定义列表项，<dd>为自定义列表项的描述。

<dl>
    <dt>咖啡</dt>
    <dd>- 热饮</dd>
    <dt>牛奶</dt>
    <dd>- 冷饮</dd>
</dl>

运行结果：

在这里插入图片描述

3.8 块级元素和内联元素

1.块级元素：块级元素独占一行，常见的块级元素有<div>、<h1> 、<p>等。

<div>：该块级元素没有特定的含义；主要用途是文档布局；可以配合CSS 一同使用，用于对大的内容块设置样式属性。

2.内联元素：内联元素不会以新行开始，也称行内元素，常见的内联元素有<span>、<b>、<a>等。

<span>：该内联元素没有特定的含义；可以配合CSS 一同使用，用于为部分文本设置样式属性。

3.9 表单

<form>用于定义表单，表单用于收集用户的输入信息。

表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

3.9.1 文本框和密码框

<input>：input标签的type属性，决定了输入类型。

<input type="text">：文本框
<input type="password">：密码框

<form>
    用户名：<input type="text"> <br/>
    密码：<input type="password">
</form>

运行后，在两个输入框内输入内容，结果如下：

在这里插入图片描述

3.9.2 单选框和复选框

<input type="radio">：单选框
<input type="checkbox">：复选框

<form>
    <input type="radio" name="sex" value="male">男
    <input type="radio" name="sex" value="female">女 <br/>
    <input type="checkbox" name="animal" value="cat">猫
    <input type="checkbox" name="animal" value="dog">狗
    <input type="checkbox" name="animal" value="hamster">仓鼠
</form>

运行结果：

在这里插入图片描述

3.9.3 自定义按钮和提交按钮

<button type="button"></button>：自定义按钮
<input type="submit">：提交按钮

区别：在<button> 元素内部，可以放置内容，比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。

1.自定义按钮

type属性有button、reset、submit，为按钮的类型
onclick属性为点击按钮发生的事件

<button type="button" onclick="alert('Hello World!')">点击一下</button>

运行后，点击按钮，出现弹框如下：

在这里插入图片描述

2.提交按钮

当用户单击确认按钮时，表单的内容会被传送到服务器。

action属性定义了服务端的URL路径。
method属性定义了表单数据的提交方式，属性值有get和post。
- get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。例如：http://127.0.0.1:5500/test.php?username=123456，这里的username=123456 就是 get 方法提交的数据。
- post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。

<form name="input" action="test.php" method="get">
    用户名: <input type="text" name="username">
    <input type="submit" value="提交">
</form>

运行后，输入123456，点击提交按钮：
在这里插入图片描述

提交后结果如下：

在这里插入图片描述

因为 test.php文件路径不存在，所以报错了

3.9.4 下拉列表

<select>定义下拉列表，<option>定义下拉列表的选项。

<select name="animal">
    <option value="cat">猫</option>
    <option value="dog">狗</option>
    <option value="hamster">仓鼠</option>
</select>

运行结果：

在这里插入图片描述

3.10 框架

<iframe>用于定义框架，通过使用框架，可以在同一个浏览器窗口中显示不止一个页面。

1.原demo.html文件,内容如下：

<iframe src="test.html" width="200" height="200"></iframe>

2.在demo.html同级目录下新建test.html，内容如下：

<p>
    丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。<br>

    明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。<br>
    
    转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。
</p>

3.运行demo.html文件,结果如下：

在这里插入图片描述

3.11 头部

<head> 元素包含了所有的头部标签元素。

头部区域的元素标签如下：

<title>：定义了页面的标题
<base>：规定页面上所有链接的默认URL和链接的默认打开方式
<link>：标签定义了文档与外部资源之间的关系，常用于链接到样式表
<meta>：元数据，通常用于指定网页的描述，关键词、文件的最后修改时间、作者等
<style>：用于添加样式来渲染 HTML 文档
<script>：用于加载脚本文

1.<title>标签

在所有 HTML 文档中是必需的
定义了网页标题
网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题

<title>HTML教程</title>

运行后，并收藏该页面，结果如下：
在这里插入图片描述
2. <base>标签

href：默认URL
target：默认链接打开方式

<head>
    <base href="https://www.baidu.com/img/" target="_blank">
</head>
        
<body>
    <img src="bdlogo.png" alt="图片无法加载">
    <a href="https://www.baidu.com/">百度链接</a>
</body>

注：

bdlogo.png为相对路径，加上前面base的路径，得到的路径是src="https://www.baidu.com/img/bdlogo.png"
a·的target属性没有设置，则默认为base中的target="_blank"，点击百度链接在新窗口打开百度首页。

运行结果：
在这里插入图片描述

3.<link>标签

rel：此属性必需填写，定义了当前文件与被链接文件之间的关系
type：规定被链接文件的 MIME 类型
href：文件URL

<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>

4.<meta>标签

常用属性如下：

charset="UTF-8"：定义文档的字符编码
name="author"：定义网页作者
name="description"：定义网页描述
name="keywords"：为搜索引擎定义关键词

<meta charset="UTF-8">
<meta name="author" content="张三"> 
<meta name="description" content="Web前端基础教程">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">