HTML基础（二）
2022/3/19 23:31:27
本文主要是介绍HTML基础（二），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
这次要介绍的是块标签，行标签、行块标签还有标签的互换，先来看看思维导图：
001：块标签
来看看块标签的大致结构框架：
<!DOCTYPE html>
<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>块标签</title>
<style>
div{
width:100px;
height:100px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div>千里之行,始于足下,代码就要多练</div>
<!-- div本身就是个区域标签，他没有语义，所以你想让他做什么就让他做什么 ，万能的工具标签-->
<!-- <通过不指定高度，你可以发现一些块标签的特点：独占一行，默认宽度占满父级，高度为0，子级内容撑开高度 -->
<!-- 标题标签 -->
<h1>CSDN</h1>
<!-- 大标题，一个页面只允许写一次 -->
<h2>c1认证</h2>
<!-- 很显然这是一个副标题 不要超过8个 -->
<h2>c4认证</h2>
<h2>C5认证</h2>
<!-- 小标题 -->
<h3>当前在学习web阶段</h3>
<!-- h1,h2,h3是具有搜索权重的 -->
<h4>第一小节</h4>
<h5>第一个小节的第一个小点</h5>
<h6>第一个小结的第一个小点的总结</h6>
<!-- 段落标签 -->
<p>代表一个段落</p>
<!-- 列表 -->
<ul>
<li>久旱逢甘霖</li>
<li>他乡遇故知</li>
<li>洞房花烛夜</li>
<li>金榜题名时</li>
</ul>
<!-- ul是无序列表，ol是有序列表，li一般和这两个配合使用，li一般作为子级 -->
<ol>
<li>久旱逢甘霖一滴</li>
<li>他乡遇故知前妻</li>
<li>洞房花烛夜不行</li>
<li>金榜题名时重名</li>
</ol>
<!-- H5新增标签 -->
<article>
<nav>这里是导航栏</nav>
<header>这里是头部信息</header>
<aside>这里是侧边栏</aside>
<section>区域的意思</section>
<footer>这里是底部信息</footer>
</article>
</body>
</html>
<!-- 语义化：
1.在不借助css样式的情况下对代码结构一目了然
2.提升页面的SEO -->
01：div
div本身就是个区域标签，它没有语义，你想让他做什么就让他做什么，可以说是个万能的工具标签，我们来看看这行代码：
<div>千里之行，始于足下，代码就要多练</div>
代码产生效果如下：
然后我们再加个style css内联样式试试：
<style>
div{
width:100px;
height:100px;
background-color:aquamarine
}
</style>
加上宽度和高度限定，再加上背景颜色，我们发现产生效果如下：
如果不指定高度，你可以发现一些块标签的特点：独占一行，默认宽度占满父级，高度为0，子级内容撑开高度
02：h1~h6
如果有在网上写文章的小伙伴相信看到这个就会知道它的作用了，没错，这就是标题
h1是大标题，一个页面只能写一次，比如：
CSDN
h2是副标题，一般一个页面不要超过8个，比如：
C1学习
h3是小标题，值得注意的是，h1,h2,h3是具有搜索权重的，
我们来看看这串代码产生的效果：
<h1>CSDN</h1>
<!-- 大标题，一个页面只允许写一次 -->
<h2>c1认证</h2>
<!-- 很显然这是一个副标题 不要超过8个 -->
<h2>c4认证</h2>
<h2>C5认证</h2>
<!-- 小标题 -->
<h3>当前在学习web阶段</h3>
<!-- h1,h2,h3是具有搜索权重的 -->
<h4>第一小节</h4>
<h5>第一个小节的第一个小点</h5>
<h6>第一个小结的第一个小点的总结</h6>
03：p
p是段落标签，它代表的是一个段落
04：列表
下面要说的ul,ol,li都是属于列表，不同的是，ul是无序列表，ol是有序列表，li一般和这两个标签一起使用，下面我们看看这串代码产生的效果：
<ul>
<li>久旱逢甘霖</li>
<li>他乡遇故知</li>
<li>洞房花烛夜</li>
<li>金榜题名时</li>
</ul>
<!-- ul是无序列表，ol是有序列表，li一般和这两个配合使用，li一般作为子级 -->
<ol>
<li>久旱逢甘霖一滴</li>
<li>他乡遇故知前妻</li>
<li>洞房花烛夜不行</li>
<li>金榜题名时重名</li>
</ol>
05： H5新增标签
article,header,aside,section,footer这些是H5新增标签，我们看看这串代码产生的效果：
<article>
<nav>这里是导航栏</nav>
<header>这里是头部信息</header>
<aside>这里是侧边栏</aside>
<section>区域的意思</section>
<footer>这里是底部信息</footer>
</article>
002：行标签
行标签也可以说是内联标签
我们来看看行标签的代码：
<!DOCTYPE html>
<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>行标签(内联标签)</title>
<style>
*{
/* 通配选择器 */
/* 这么写会将所有的内外边距去掉 */
}
span{
width:100px;
height: 200px;
/* margin-top: 100px;
margin-bottom: 100px;
margin-left:100px;
padding-left:100px; */
padding-top:100px;
background-color:aquamarine
}
</style>
</head>
<body>
<p>这里是对行标签的讲解</p>
<span>选项1</span>
<span>选项2</span>
<span>选项3</span>
<!-- 这里运行后我们很容易发现行标签和块标签的区别,行标签不独占一行 -->
<a href="http://ac.csdn.net" target="_blank">C认证</a>
<!-- target默认是_self -->
<br>
<i>倾斜</i> <b>加粗</b>
<br>
<p>o<sub>2</sub></p>
<!-- 行标签常用于p标签实现富文本 -->
<p><span>C</span>SDN</p>
<em>我是H5的新标签</em>
<strong>我们具有一定的搜索权重</strong>
</body>
</html>
<!--
语义化：
1.再不借助css样式的情况下，对代码结构一目了然
2.提升页面的SEO -->
01：span
他是HTML的行内标签，被用来组合文档中的行内元素，它本身并不产生视觉效果，他只是提供一种途径令你可以对文档中的一部分进行引用
首先我们来写：
<body>
<span>选项一</span>
<span>选项二</span>
<span>选项三</span>
</body>
从结果来看我们很快就可以发现行标签和块标签的区别，他们是不独占一行的，而是靠内容撑开宽度：
这里我们来看看行标签的几个特点：
1.行标签不支持宽高，靠内容撑开宽度
2.行标签不支持上下边距
我们来写这样的代码看看：
margin-top是上边距，margin-bottom是下边距
可以看到页面并没有什么变化，再看下面这个：
有了上面的基础，我们不难想到margin-left和margin-right分别是左边距和右边距
好，我们再来看看：3.行标签不正常显示上下内边距
我们可以看到这是有效果的，这里造成了覆盖，所以成为不正常显示
4.换行被解析
这里我们看到虽然边距我们去掉了，但是还是存在白色边距，这是为什么呢
如图所示，因为这个空格的存在，当我们删去图中空格，就会神奇的发现白色间隔消失了
02：a 超链接
<a href="http://ac.csdn.net" target="_blank">C学习</a>
href指的是链接地址，target是方式
点击一下我们就可以到达链接的网页
03：i标签
具有使字体倾斜作用
04：b
使字体加粗
05：sub
实现富文本比如写氧气的分子式啊
06：em
H5的新标签
07:strong
具有一定的搜索权重
我们来看看他们的效果
<p>这里是行标签的讲解</p>
<span>选项一</span><span>选项二</span>
<span>选项三</span>
<a href="http://ac.csdn.net" target="_blank">C学习</a>
<br>
<i>倾斜</i>
<b>加粗</b>
<br>
<!-- 行标签常用于配合p标签实现富文本 -->
<p>0<sub>2</sub></p>
<p>c<span>SDN</span></p>
<em>我是H5的新标签</em>
<strong>具有一定的搜索权重</strong>
003：行块标签
行块标签可以用来加载图片啊之类的，同时还可以设定宽度，比如我们可以看下面这个：
<!DOCTYPE html>
<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>行块标签</title>
<style>
img{
width:100px;
height:100px;
}
</style>
</head>
<body>
<img src="img/ewn.png" alt="图片加载失败">
<img src="https://cn.bing.com/images/search?q=%E5%9B%BE%E7%89%87&FORM=IQFRBA&id=2A67B025EDB55DFCC3EAB049289AB0CD4D0A72B5" title="baidu">
<!-- 这里的路径我们可以使用相对路径，也可以是绝对路径，也可以是网络路径 -->
</body>
</html>
效果如上，这里没有放出具体内容，小伙伴们知道可以这么用就可以
004：标签的互换
最后我们来看一个标签互换
<!DOCTYPE html>
<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>标签的互换</title>
<style>
p{
/* 标签的类型 */
display:block;
}
span{
display:inline;
}
</style>
</head>
<body>
<p>1</p>
<p>2</p>
</body>
</html>
比如这里我们使用
块标签的时候，我们想让他变成行标签的特点：
比如刚开始的时候：
我们可以看到他们独占一行：
这里我们使用display进行互换：
我们发现输出页面样式改变了，我们可以通过display来改变标签类型，这里的inline指的就是行标签，block指的是块标签，inline-block指的就是行块标签
这篇关于HTML基础（二）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-12-25前端大厂面试真题解析与实战攻略
- 2024-12-25如何准备前端面试：新手指南
- 2024-12-25前端面试题详解与实战攻略
- 2024-12-25前端面试真题详解与实战攻略
- 2024-12-252024前端大厂面试真题详解及备考指南
- 2024-12-252024前端面试必备指南：从零开始掌握前端面试技巧
- 2024-12-252024前端面试题详解与实战指南
- 2024-12-21动态面包屑教程：新手入门指南
- 2024-12-21动态主题处理教程：新手必读指南
- 2024-12-21富文本编辑器教程：新手入门指南
