HTML的基础教程（一） -- 各类书签

ʚ 王也 ɞ

已于 2023-03-13 10:25:15 修改

阅读量1.5k

点赞数

分类专栏： css html 文章标签： html 前端 css

于 2023-02-27 17:12:37 首次发布

本文链接：https://blog.csdn.net/qq_54015136/article/details/129243192

版权

html 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

css

6 篇文章 0 订阅

订阅专栏

前言

学习如何使用html的基本语法。

一、什么是HTML?

一种超文本标记语言。

二、运行规则

2.1起始行

起始行写法------> <!DOCTYPE html>

2.2 HTML文件结构

标签	描述
`<head>`	定义关于文档的信息。
`<title>`	定义文档标题。
`<base>`	定义页面上所有链接的默认地址或默认目标。
`<link>`	定义文档与外部资源之间的关系。
`<meta>`	定义关于 HTML 文档的元数据。
`<script>`	定义客户端脚本。
`<style>`	定义文档的样式信息。

简单结构：

<!DOCTYPE html>
<html>

 <head>
  <title>第一个网页</title>
 </head>

 <body> </body>
</html>

2.3 HTML 标签

HTML标签通常是成对出现的，比如<b>和</b>
尖括号包围的关键词，比如<html>
具体案例：
- <html> 与 </html> 之间的文本描述网页
- <body> 与 </body> 之间的文本是可见的页面内容
- <h1> 与 </h1> 之间的文本被显示为标题
- <p> 与 </p> 之间的文本被显示为段落

2.3.1 常用标签

标签	含义
h1	一级标题
h2	二级标题
h3	三级标题
p	段落
b	加粗
i	斜体
sub	带下标
hub	带上标
del	带删除线
br	下一行
ul	无序列表
ol	有序列表
li	列表项（放在ul和ol里面）

2.3.2 超链接标签

<a href="xxx">跳转到xxx</a>

2.3.3 图片标签

<img src="./当前目录下.jpg" />

注意：也可以指定网络上的url地址。

2.3.4 视频标签

<video src="./路径.MP4" controls></video>

2.3.5 音频标签

<audio src="./路径.MP3" controls></audio>

2.3.5 表格标签

表格由 <table> 标签来定义。表格的表头使用 <th> 标签进行定义，每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。

字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

实例：

<table border="1">
<tr>
	<th>Heading</th>
	<th>Another Heading</th>
</tr>
<tr>
	<td>row 1, cell 1</td>
	<td>row 1, cell 2</td>
</tr>

其他表格标签：

表格	描述
`<table>`	定义表格
`<caption>`	定义表格标题。
`<th>`	定义表格的表头。
`<tr>`	定义表格的行。
`<td>`	定义表格单元。
`<thead>`	定义表格的页眉。
`<tbody>`	定义表格的主体。
`<tfoot>`	定义表格的页脚。
`<col>`	定义用于表格列的属性。
`<colgroup>`	定义表格列的组。

2.4 HTML属性

属性	值	描述
class	classname	规定元素的类名（classname）
id	id	规定元素的唯一 id
style	style_definition	规定元素的行内样式（inline style）
title	text	规定元素的额外信息（可在工具提示中显示）

2.5 其他标签

水平标签（常用）
<hr /> 标签在 HTML 页面中创建水平线。

换行标签
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用<br />标签。

子窗口标签

标签	描述
`<iframe>`	定义内联的子窗口（框架）

论文引用标签

标签	描述
`<abbr>`	定义缩写。
`<acronym>`	定义首字母缩写。
`<address>`	定义地址。
`<bdo>`	定义文字方向。
`<blockquote>`	定义长的引用。
`<q>`	定义短的引用语。
`<cite>`	定义引用、引证。
`<dfn>`	定义一个定义项目。
`<abbr>`	定义缩写或首字母缩略语。
`<address>`	定义文档作者或拥有者的联系信息。
`<bdo>`	定义文本方向。
`<blockquote>`	定义从其他来源引用的节。
`<dfn>`	定义项目或缩略词的定义。
`<q>`	定义短的行内引用。
`<cite>`	定义著作的标题。

2.6 注释

<!---这就是注释 --->

2.7 超链接标签的属性

1.<a>标签是一个超链接标签。
2. Target 属性，你可以定义被链接的文档在何处显示。
3. name 属性规定锚（anchor）的名称,用于锚记链接：

当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
实例：

<!--- 首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：--->

<a name="tips">基本的注意事项 - 有用的提示</a>
<!---然后，我们在同一个文档中创建指向该锚的链接：--->

<a href="#tips">有用的提示</a>

<!---- 您也可以在其他页面中创建指向该锚的链接：在下面的代码中，
我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。--->
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

注释：请始终将正斜杠添加到子文件夹¹。

提示：命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科，您会发现其中几乎每个词条都采用这样的导航方式。
提示：假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。

4.邮件链接：

<p>
	这是邮件链接：
	<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
</p>

<p>
	<b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。
</p>

2.8 理解元素并组合元素

块元素
大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）。

例子：<h1>, <p>, <ul>, <table>

HTML 内联元素
内联元素在显示时通常不会以新行开始。

例子：<b>, <td>, <a>, <img>

<div> 元素
HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。

HTML <span> 元素
HTML <span> 元素是内联元素，可用作文本的容器。<span> 元素也没有特定的含义。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

2.9 Class类与id属性

1.对 HTML 进行分类class（设置类），使我们能够为元素的类定义 CSS 样式。为相同的类设置相同的样式，或者为不同的类设置不同的样式。语法：.class{}
2.HTML id 属性用于为HTML 元素指定唯一的` id。一个 HTML文档中不能存在多个有相同 id 的元素。id 的语法是：写一个井号 (#)，后跟一个 id 名称。

区别：
同一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用。

注意id和name:
1、id属性的值是区分大小写的，每个id值都应该是唯一的；而name属性不具有是唯一性，它的值可以重复使用。
2、用途不一样，id属性可以用作锚引用，也可用作ID选择器；而name属性在表单中使用，用来提交信息。
3、html5去掉了name属性,建议使用id定义锚点(如果是在a标签上定义锚点,可以使用name属性)