3-html基本标签
1. 标题
HTML 标题(Heading)是通过h1到h6标签来定义的。h
是英文header
标题的缩写;
<h1>一级标题</h1>
<h2>二级标题</h2>
...
<h6>六级标题</h6>
效果如下:
一级标题
二级标题
…
六级标题
2. 段落
HTML 段落是通过标签p
来定义的,P
是英文paragraph
段落的缩写,经常被用来创建一个段落。
例:
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
效果如下:
这是一个段落。
这是另外一个段落。
下面这个实例讲述了标题和段落的结构层次:
<h1>三国演义</h1>
<p>罗贯中</p>
<h2>第一回 宴桃园豪杰三结义 斩黄巾英雄首立功</h2>
<p>话说天下大势,分久必合,合久必分。</p>
<h2>第二回 张翼德怒鞭督邮 何国舅谋诛宦竖</h2>
<p>且说董卓字仲颖</p>
<h3>却说张飞</h3>
<p>却说张飞饮了数杯闷酒</p>
注意:
- 每个页面应该只使用一次
h1
,作为主标题,其他标题位于层次结构中的下方。 - 其次,请确保在层次结构中以正确的顺序使用标题。不要使用
h3
来表示副标题,却用h2
来表示副副标题,这是没有意义的,会导致奇怪的结果。 - 最后,尽量在每个页面中标题级别的使用不超过三个,除非是特殊情况,在这种情况下,如果可能,建议将内容分散在多个页面上。
3. 空格
下面的两个代码片段是等价的:
<p>这 是 一 个 程 序</p>
<p>这 是 一 个
程 序</p>
效果:
这 是 一 个 程 序
这 是 一 个 程 序
可以看出,HTML解释器会将连续出现的多个空格字符减少为一个单独的空格符。
4. HTML 链接
HTML 链接是通过标签a
来定义的。a
标签既可以用来链接到外部地址实现页面跳转功能,也可以链接到当前页面的某部分实现内部导航功能。
例:
<a href="https://www.baidu.com">这是一个百度链接</a>
效果如下:
5. 图像
HTML 图像是通过标签img
来定义的。使用img
元素来为你的网站添加图片,使用src
属性指向一个图片的具体地址。
举例如下:(这是上一篇文章其中一张图片地址)
<img src="https://img-blog.csdnimg.cn/20200727090944536.png" >
效果如下:
请注意:img
元素是自关闭元素,不需要结束标记。
img
还有属性 width
和 height
,用于控制图片的宽高
例如:
<img src="https://img-blog.csdnimg.cn/20200727090944536.png" width="206" height="136">
效果如下:
6. 强调
-
斜体,使用
em
或i
标签,例如:<p>I am <em>glad</em> you weren't <em>late</em>.</p> <p>I am <i>glad</i> you weren't <i>late</i>.</p>
效果:
I am glad you weren't late.
I am glad you weren't late.
-
粗体,使用
strong
或b
标签:<p>I am <strong>glad</strong> you weren't <strong>late</strong>.</p> <p>I am <b>glad</b> you weren't <b>late</b>.</p>
效果:
I am glad you weren't late.
I am glad you weren't late.
7. 空元素
HTML 空元素即为没有内容的 HTML 元素。
HTML 空元素应该在开始标签中关闭。
HTML 的一个空元素为 <br>
(用于定义换行),<br>
元素没有关闭标签。
HTML 空元素的关闭方法是在开始标签中添加斜杠,比如 <br/>
<br>
标签的使用:
<p> 我爱html<br> 我爱python<br> 我爱java<br>我爱c++</p>
效果:
我爱html
我爱python
我爱java
我爱c++
本文来自博客园,作者:aJream,转载请记得标明出处:https://www.cnblogs.com/ajream/p/15383586.html