HTML详解-2 基础元素

网站开发基础之HTML详解-2 基础元素

欢迎来到第二节,打开这篇文章,相比你已经通过第一节的学习了解了什么是HTML并且知道HTML源码的基本结构了,那我们看看今天的内容吧。

什么是快乐星球 —*嘿嘿嘿,开个玩笑

今天我们来讲一些基础的标签,这些标签都应当放到body标签中,如下


<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Base Elementtitle>
head>
<body>
    <h1>Helloh1>
body>
html>

这个h1标签放在了body标签中,就会显示在网页可见区域了

h1

h1标签,用于显示一个一级标题(注意:改标题是文本标题而不是标签页那个页面标题)

<h1>我是一级标题h1>

显示结果如下
HTML详解-2 基础元素_第1张图片

h2

h2标签,用于显示一个二级标题

<h2>我是二级标题h2>

显示结果如下
HTML详解-2 基础元素_第2张图片
由此可见h1的字比h2的大,那么剩下的就不用写了,文本标题一共六个级别


一级标题 h1

二级标题 h2

三级标题 h3

四级标题 h4

五级标题 h5
六级标题 h6

br

br标签,用于换行

<br>

举个栗子


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    Hello<br>World
body>
html>

显示结果如下
HTML详解-2 基础元素_第3张图片
可以看到World单词显示在了第二行,这就是br标签的用途了

注意:这是一个真实项目中不太会用到的标签,了解就好了

p

p标签,用于显示段落

<p>

举个栗子


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <p>我与父亲不相见已二年余了,我最不能忘记的是他的背影。p>
    <p>那年冬天,祖母死了,父亲的差使也交卸了,正是祸不单行的日子,我从北京到徐州,打算跟着父亲奔丧回家。到徐州见着父亲,看见满院狼藉的东西,又想起祖母,不禁簌簌地流下眼泪。父亲说,“事已如此,不必难过,好在天无绝人之路!”p>
body>
html>

显示结果如下
HTML详解-2 基础元素_第4张图片
由此可见,p标签把文章分成段,并且段与段之间有间隔

strong

strong标签,用于加粗文本

<strong>strong>

举个栗子


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    Hello<strong>Worldstrong>
body>
html>

显示结果如下
HTML详解-2 基础元素_第5张图片
由此可见,被strong标签包起来的World单词变成粗体,这就是strong标签的功能

em

em标签,用于将文本变成斜体

举个栗子


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    Hello<em>Worldem>
body>
html>

HTML详解-2 基础元素_第6张图片
图中World单词被em标签包起来,因此变成了斜体

a

很奇怪怎么会有名字那么简单的标签,嘿嘿嘿
这就是你在网上见到的超链接的本体了
a标签,用于实现一个超链接

<a href="">a>

注意,该标签存在一个href属性,该属性用于为超链接指定一个链接,该超链接显示的文本应该包在该标签中

举个栗子


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <a href="https://www.csdn.net">CSDNa>
body>
html>

HTML详解-2 基础元素_第7张图片

该标签的执行结果出现了一个蓝色/紫色的带有下划线的文本,这就是超链接,当你点击的时候,会跳转到CSDN的官网

这些就是HTML的最基本的标签了,祝大家学习快乐,下节我将讲解一些比较有意思的内容哦

你可能感兴趣的:(网站开发,HTML,html5,html,web)