HTML的结构标签

最新推荐文章于 2024-08-16 17:54:29 发布

心奔

最新推荐文章于 2024-08-16 17:54:29 发布

阅读量2.5k

点赞数 3

分类专栏： HTML 文章标签： HTML的结构标签

本文链接：https://blog.csdn.net/g960526/article/details/88780791

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML的结构标签

结构便签，顾名思义，大多数是没有太多特殊的作用的，但是它是构建一个网页基本结构的主要元素，此次会列出大家经常用来搭建结构的基本标签。

div 盒子标签没有任何的样式双标签
P 段落标签默认有上下外边距双标签
h1~h6 标题标签字体逐次减小双标签默认上下边距字体加粗字体变大 h1为主标签其余为副标签主标签一个网页只能出现一次
span 空元素标签没有任何意义双标签
em和i 斜体字标签双标签虽然都是斜体字标签，但是em标签具有强调语义，强调作用是针对浏览器的，用户从界面上看不出来两个的区别
strong与b 加粗字体标签双标签 strong具有强调的语义

下面是代=代码举例：

<!--网页基本结构-->
<!doctype html> 
<!--文档申明 
	!(申明）
	doc(document 文档)
	html (html5)
-->
<html> <!--整个网页结构的最顶层元素  根标签-->
	<!-- 标签之间的关系
		包含关系 （父子关系）
			html 里面包含head和body标签
			子级相对于父级标签用一个tab或者4个空缩进
		并列关系（兄弟关系）
			head和body是兄弟关系
	-->
	<head><!-- 头部标签  看不见但是又和我们本身相关的一些东西(标签)-->
		<!-- 
			计算机只认识机器语言 0 1
			字符集（charset） 内容（content） 目标（meta）
				utf-8 通用编码 大小无所谓
				gbk 中文编码
				文件编码和申明的编码不一致时会出现乱码问题
			name,content都是标签的属性 一个标签可以有多个属性，中间用空格隔开
				属性=“值”
		-->
		<meta charset="UTF-8" /><!-- 申明当前网页的字符编码 保存时的编码和这里的要一致-->
		<!-- 网页的标题 -->
		<title>今天是第一节课</title>
		<!-- 
			对网页的描述
				产品说明书
		-->
		<meta name="description" content="我们今天学了网页的制作，我很ok" /><!-- 网页的描述，完整的句子 -->
		<meta name="keywords" content="结构,形式,行为" /><!-- 网页的关键词：一个个描述的词语 -->
		<style type="text/css">
			div,p,h1{
				border:1px solid red;
			} 
		</style>
	</head>
	<body><!-- 身体标签（可视标签）能够看得见东西 () -->
	好开心啊！！好开心！
		<!-- 便签的分类
			看不见的标签(head)
			可视标签(body)
				用来搭建结构（结构标签）
				
				特殊的功能
				ctrl +b 快捷在浏览器中打开
				用标签搭建结构的过程中，尽量的去选择语义贴近的标签去做
		-->
		<div>我是盒子div</div><!-- 盒子标签  无任何默认样式 语义用来装东西的盒子-->
		<p>我是段落P标签</p><!-- 段落标签，有默认的上下外边距 语义就是个段落-->

		<h1>我是标题标签h1</h1><!-- 标题标签，有默认的上下外边距，字体默认加粗变大 语义就是个标题 -->
		<h2>我是标题标签h2</h2>
		<h3>我是标题标签h3</h3>
		<h4>我是标题标签h4</h4>
		<h5>我是标题标签h5</h5>
		<h6>我是标题标签h6</h6><!-- 标题一共有6个，其中h1是核心标题，其他都是副标题，核心标题同一个网页只能用一次 -->
		
		<span>空元素标签</span><!-- span (跨度) 空元素标签，没有任何语义和形式，什么时候都可以使用 -->
		
		<!-- 斜体标签
			em i
				em	强调的含义
				i  单纯的斜体
			默认字体斜体
		-->
		<em>em斜体标签，含强调的语义</em>
		<i>i斜体标签，单纯斜体</i>


		<!-- 加粗字体
			strong b
				strong 强调的含义
				b 单纯的加粗
			默认加粗字体
		-->
		<strong>加粗字体strong(有强调的含义)</strong>
		<b>加粗字体</b>
	</body>
</html>

网页制成样式：

这是代码编写的产生效果，更容易让学者参考代码进行学习。