Html与CSS基础知识篇（HTML标签语法篇）

HTML和CSS的关系

学习Web前端开发基础技术需要掌握：Html、CSS、JavaScript语言。下面我们大致了解一下这三门技术都用来实现什么：

（1）HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、多媒体等。

（2）CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或者标题加入北京图片、边框等。所有这些用来改变内容外观的东西称之为表现

（3）JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有新闻图片的轮转等。可以这样理解，有动画的、有交互的一般都用JavaScript来实现的。

标签的语法

1.标签由英文尖括号<和>括起来，比如<html>就是一个标签。

2.html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个/。

html文件有自己的固定结构的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个网页标题</title>
</head>
<body>

</body>
</html>

head标签

<head>标签是文档的头部描述了文档的各种属性与信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在head部分

<head>
    <meta charset="UTF-8">
    <title>第一个网页标题</title>
    <link>
    <style></style>
    <script></script>
</head>

<title>标签：在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有独一无二的title。

例如：title标签内容会在网页浏览器的标题栏上显示出来的。如下图：

图1

<body>标签，网页中显示内容放置的地方

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个网页标题</title>
    <link>
    <style></style>
    <script></script>
</head>
<body>
<h1>Html的学习</h1>
<p>我们学习Html的步骤：</p>
<p>1.做得好，下面我们来了解一下<em>标签</em>的作用。文档的头部描述了文档的各种属性和信息，包括文档的标题等。 </p>
<p>2.绝大多数<strong>文档头部包含的数据</strong>都不会真正作为内容显</p>
<p>3.示给读者。</p>
</body>
</html>

图2

<hx>标签，为你的网页添加标题（h1- h6标签的默认样式）

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

图3

<p>标签，添加段落

如图2，可以看出一段文字一个<p>标签，如在一篇文章中有3段文字，就要把这3个段落分别放到3个<p>标签中。

加入强调语气，使用<strong>和<em>标签

语法：
<em>斜体</em>
<address>斜体</address>
<strong>加粗</strong>

使用<span>标签为文字设置单独样式

<span>标签是没有语义的，它的作用就是为了设置单独的样式用的。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个网页标题</title>
    <link>
    <style>
        span {
            color: red;
        }
    </style>
    <script></script>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3><span>三级标题</span></h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>

效果：

图4

<q>和<blockquote>标签为文字设置单独的样式用的

<q>：短文本引用。比如一段简洁的一句话。

<blockquote>:长文本引用。

<blockquote>
    明月出天山，苍茫云海间。
    长风几万里，吹度玉门关。
    汉下白登道，胡窥青海湾。
    由来征战地，不见有人还。
    戍客望边色，思归多苦颜。
    高楼当此夜，叹息未应闲。
</blockquote>

图5

使用标签分行显示文本

使用<br />标签，用在需要换行的地方

代码：

<body>
<h2>《咏桂》</h2>
<p>
    暗淡轻黄体性柔,<br/>
    情疏迹远只香留。<br/>
    何须浅碧深红色,<br/>
    自是花中第一流。
</p>
</body>

效果：

图6

为你的网页中添加一些空格

在上述我们可以看出，html代码中输入空格、回车都没有作用的。要想输入空格，必须写入“ ”

在html代码中输入空格是不起作用的，如下代码。

图7

运行网页显示还是如图6显示的这样，在浏览中显示，还是没有空格效果。

代码：

<body>
<h2>《咏桂》</h2>
<p>
    暗淡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;轻黄体性柔,<br/>
    情疏迹远只香留。<br/>
    何须浅碧深红色,<br/>
    自是花中第一流。
</p>
</body>

效果：

图8

标签，添加水平横线<hr>

在信息展示时，有时会需要加一些用于分隔的横线，这样会使文章看起来整齐些。如下图所示：

代码：

<body>
<h2>《咏桂》</h2>
<p>
暗淡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;轻黄体性柔,<br/>
<hr>
情疏迹远只香留。<br/>
<hr>
何须浅碧深红色,<br/>
<hr>
自是花中第一流。
</p>
</body>

效果：

图9

语法：

html4.01版本<hr>

xhtml1.0版本 <hr />

注意：

<hr />标签和<br />标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。
<hr />标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人觉得这种样式不美观，没有关系，这些外在样式在我们以后学习了css样式表之后，都可以对其修改。
大家注意，现在一般使用 xhtml1.0 的版本（其它标签也是），这种版本比较规范。

ul-li 前面默认带点号（无序列表）

语法：

<ul>
    <li>第一条数据</li>
    <li>第二条数据</li>
</ul>

效果：

图10

ol-li 前面默认带序号（有序列表）

语法：

<ol>
    <li>第一条数据</li>
    <li>第二条数据</li>
</ol>

效果：

图11

认识div在排版中的作用

在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。

语法：

给div命名，使逻辑更加清晰（添加id ,必须唯一）

为了使逻辑更加清晰，我们可以为这一个独立的逻辑部分设置一个名称，用id属性来为<div>提供唯一的名称，这个就像我们每个人都有一个身份证号，这个身份证号是唯一标识我们的身份的，也是必须唯一的。

table表格标签

有好些网站上都有很多的表格：

代码：

<table>
    <tr>
        <th>产品名称</th>
        <th>品牌</th>
        <th>库存量（个）</th>
        <th>入库时间</th>
    </tr>
    <tr>
        <td>手机</td>
        <td>oppo</td>
        <td>50</td>
        <td>2021-02-05</td>
    </tr>
    <tr>
        <td>笔记本电脑</td>
        <td>ThinkPad</td>
        <td>5</td>
        <td>2021-03-15</td>
    </tr>
    <tr>
        <td>U盘</td>
        <td>爱国者</td>
        <td>10000</td>
        <td>2020-12-24</td>
    </tr>
</table>

效果图：