HTML初识-01

最新推荐文章于 2025-03-14 00:00:05 发布

原创最新推荐文章于 2025-03-14 00:00:05 发布 · 380 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

前端学习专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了HTML的基础知识，包括HTML的定义、常用标签如标题、段落、文本格式化、换行、字符实体、图片、超链接、列表等，并强调了标签的语义化和网页结构的重要性。此外，还提到了如何通过CSS进行页面布局以及超链接的打开方式。通过学习，读者可以掌握创建基本网页的技能。

HTML常用标签

运行环境：浏览器，建议设置谷歌浏览器为默认浏览器，作为网页文件的运行环境。ctrl + 鼠标左键

1. HTML介绍

HTML 英文全称是 Hyper Text Markup Language，中文译为“超文本标记语言”。是构成网页的基本元素，是一种规范，一种标准。

超文本：即超越纯文本，这意味着HTML不仅能包含文本，还能包含图片、表格、列表、链接、按钮、输入框等内容。
标记语言：HTML通过不同的标签来标记不同的内容
标签：标签也称为标记或元素，用于在网页中标记内容。不同标签具有不同的含义，学习 HTML 其实就是学习各个标签的含义，根据实际场景的需要，选择合适的标签，从而制作出精美的网页。
- 语法：标签使用< >为标志，标签名不区分大小写，推荐小写表示。
- 分类：双标签\单标签
- 标签属性：标签属性书写在开始标签中，使用空格与标签名隔开。

书写流程

创建网页文件，使用.html作为文件后缀
添加网页的基本结构
根据实际场景的需要，选择合适的标签

<!DOCTYPE html>  <!-- 文档声明 告诉浏览器用html5版本来显示 -->
<!-- 根标签 所有网页的标签都写在HTML标签里面 -->
<html lang="en">
<!-- head 保存了页面的相关配置 -->
<head>
    <!-- 元信息 设置网页的基本信息 浏览器打开这个网页的时候使用什么编码 读取整个HTML文档 -->
    <meta charset="UTF-8">
    <!--  网页标题 当前网页的主体 -->
    <title>这里写标题</title>
</head>
<body>
网页的主体
</body>
</html>

2. 常用标签

2.1 标题标签

HTML 中提供了从<h1>到<h6>六个级别的标题标签，与word中的标题类似。使用标题可以使网页的层次结构更加清晰。

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

h是head的缩写头部标题的意思
标题标签特点文字会变大变粗从 h1到h6逐渐减小

2.2 段落标签

HTML中可以使用段落标签，来将文本中的内容分割为若干个段落。分段显示要文字根据有条理性

<p>段落文本</p>

2.3 文本格式化标签

通过这些文本标签我们可以格式化文本（为文本添加样式），例如使文本加粗、倾斜或者添加下划线等。

标签	说明
`<b>...</b>`和`<strong>...</strong>`	加粗
`<u>...</u>`和`<ins>...</ins>`	下划线
`<i>...</i>`和`<em>...</em>`	倾斜
`<s>...</s>`和`<del>...</del>`	删除线

<span>行分区标签，用于对特殊文本特殊处理</span>

标签语义化：根据语义去选择正确的标签，写标题的时候使用h系列的标签。写段落的时候就是要p标签

好处：

对于我们人，好理解好记忆
对于搜索引擎，有利于解析

2.4 换行标签

文本会根据浏览器窗口的大小自动换行

让文字强制换行显示

<br>

2.5 字符实体

在HTML书写某些特殊字符的时候，可能会遇到问题，比如要在网页里面显示出字符 < >，就有可能和我们的标签冲突，所以有些特殊字符需要用对应代替的写法（字符实体）表示

使用 &lt; 在页面中呈现 "<"
使用 &gt; 在页面中呈现 ">"
使用 &nbsp; 在页面中呈现一个空格
使用 &copy; 在页面中呈现版权符号"©"
使用 &yen; 在页面中呈现人民币符号"￥"

2.6 容器标签

常用于页面结构划分，结合CSS实现网页布局

<div id="top">页面顶部区域</div>
<div id="main">页面主体区域</div>
<div id="bottom">页面底部区域</div>

简写 div#top然后按Tab键（可写id) div.top然后Tab键(可写calss)

2.7 图片标签

恰当地使用图片可以让网页更加精美。HTML 使用 <img>标签插入图片。<img> 是单标签，只包含属性，没有结束标签。

标签上可以有多个属性，我们在写的时候属性和属性之间使用空格隔开。

属性是没有顺序的没有先后

属性	说明
`src`	指定需要展示图片的路径
alt	替换文本：当图片加载失败时，显示的文字
title	提示文本：当鼠标悬停时，显示的文字
width	图片的宽度
height	图片的高度

属性 width/height 用于设置图片尺寸，取像素值，默认按照图片的原始尺寸显示。

如果只设置width或height中的一个，另一个没设置的会自动等比例缩放

如果同时设置了width和height两个，若设置不当此时图片可能会变形

<img src="图片路径" alt="当图片加载失败时，显示的文字" title="这是title文字, 鼠标悬停的时候显示" width="200" height="800">

2.8 超链接标签

超链接是指从一个网页指向另一个目标的连接关系，这个目标可以是另一个网页，也可以是当前网页中的其它位置。链接的两端分别称为源锚点和目标锚点，通过点击源锚点即可以跳转到目标锚点。在HTML中，我们使用<a>标签来表示超链接。

可以在<a>标签里使用使用target=“ ” 来确定如何打开超链接到的界面

取值	说明
`_self`	默认值在当前窗口打开页面
`_blank`	在新窗口打开页面

2.9 列表标签

在网页中按照行展示关联性的内容

种类：无序列表、有序列表、自定义列表
无序列表：在网页中表示一组无顺序之分的列表
- 标签组成
  - ul标签：表示无序列表的整体
  - li标签：表示无序列表的每一项
有序列表：在网页中表示一组有顺序之分的列表
- 标签组成
  - ol标签：表示有序列表的整体
  - li标签：表示无序列表的每一项

去掉页面中的黑点样式可以使用 style-list: none

也可以引入外部文件

html {
    font-family: "Microsoft YaHei", serif;
    font-size: 14px;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
pre,
fieldset,
button,
input,
textarea,
th,
td {
    margin: 0;
    padding: 0;
}
ul,
ol {
    list-style: none;
}
/* 閲嶇疆鏂囨湰鏍煎紡鍏冪礌 */
a {
    text-decoration: none;
}
/* 閲嶇疆琛ㄦ牸鍏冪礌 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/*鍥剧墖鍧楀寲涓庡幓鎺塱e杈规*/
img {
    border: 0;
}