【前端】HTML基础标签讲解

最新推荐文章于 2023-03-27 12:17:24 发布

原创最新推荐文章于 2023-03-27 12:17:24 发布 · 480 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html #html5

HTML 专栏收录该内容

1 篇文章

订阅专栏

本文深入讲解HTML的基础知识，包括HTML的基本格式、常用标签如div、span、a等的使用方法，以及格式化标签和特殊符号的详细介绍。适合初学者快速掌握HTML的核心概念。

HTML知识点小结

HTML格式
HTML常用标签
格式化常用标签
常用特殊符号标签

1、HTML格式

<!--声明HTML-->
<!DOCTYPE html>
<!--HTML-->
<html>
<!--HTML头信息-->
<head>
    <!-- meta格式 -->
    <meta charset="UTF-8">
    <!-- title头名称 -->
    <title></title>
</head>
<!--HTML主体部分-->
<body>
<!--HTML主题内容-->
</body>
</html>

2. HTML标签

HTML标签	说明
div	定义HTML文档中的一个分隔区块或者一个区域部分，通常用于定义组合块级元素
span	行内标签，被用来组合文档中行内元素
a	定义锚，使用href属性，创建指向另一个文档的链接（或超链接）；使用name或id属性，创建一个文档内部的书签
img	定义HTML页面中的图像，其主要的属性：src-指定图片路径；alt-图片加载错误时的提示信息）
ul	无序列表
ol	有序列表
li	定义列表项目（lists的缩写）可用在有序列表（ol）和无序列表（ul）
table	定义表格，可以放表格的标题（caption）、表格行（tr）、表格列（td）等
form	表单元素，能够包含input元素

注意：

table元素里面包含的元素有：tr元素、td元素、th元素和caption元素。
form元素包含的input元素主要通过其type属性进行决定类型；

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML常用标签</title>
</head>
<body>
<div>这是一个div标签</div><br>
<span>这是一个span标签</span><br>
<a href="#">锚点</a><br>
<img src="../img/picture.jpg" alt="logo"><br>
<ul>
    <li>1</li>
    <li>2</li>
</ul>
<ol>
    <li>a</li>
    <li>b</li>
</ol>
<table border="1px solid black" cellpadding="0px" cellspacing="0px">
    <caption>表</caption>
    <tr>
        <th>name</th>
        <th>age</th>
    </tr>
    <tr>
        <td>Li</td>
        <td>17</td>
    </tr>
</table>
<form action="">
    文本框：<input type="text"><br>
    密码框：<input type="password"><br>
    单选框：<input type="radio" name="number">1 <input type="radio" name="number">2<br>
    复选框：<input type="checkbox">a <input type="checkbox">b <input type="checkbox">c<br>
    文&nbsp;&nbsp;&nbsp;件：<input type="file"><br>
    按&nbsp;&nbsp;&nbsp;钮：<input type="button" value="button"><br>
    提&nbsp;&nbsp;&nbsp;交：<input type="submit"><br>
    重&nbsp;&nbsp;&nbsp;置：<input type="reset"><br>
</form>
</body>
</html>

操作结果：

HTML常用标签

3. 格式化常用标签

标签	说明
br	换行符
hr	水平线
b	加粗
i	斜体
pre	预格式文本格式
sup	上标显示
sub	下标显示
p	用于定义一个段落，会自动在其前后创建一些空白
h1	1~6级标题，块级元素

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>格式化</title>
</head>
<body>
水平线如下
<hr>
<!--不换行情况-->
换行符 <b>加粗</b>
<!--加入一行换行-->
<br>
<!--换行情况-->
换行符<br>
<b>加粗</b>
<i>斜体</i>
<pre>
    这是一段话：
    第一段···   结束。
    第二段···   结束。
    总结···
</pre>
水的化学表达式为：H<sub>2</sub>O<br>
2 <sup>2</sup>=4
</body>
</html>

操作结果：

格式化

4. 常用特殊符号标签

描述	代码表示	显示结果
空格	&nbsp；
小于	&lt；	<
大于	&gt；	>
和	&amp；	&
双引	&quot；	"
单引	&apos；	’

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>特殊符号</title>
</head>
<body>
第一种：空格 <br>
空&nbsp;空--其中有一个空格<br>
第二种：小于 <br>
&lt;<br>
第三种：大于 <br>
&gt;<br>
第四种：和 <br>
&amp;<br>
第五种：双引 <br>
&quot;<br>
第六种：单引 <br>
&apos;<br>
</body>
</html>