前端：html结构及html文本标签

最新推荐文章于 2024-07-12 23:25:33 发布

Celine_lzl

最新推荐文章于 2024-07-12 23:25:33 发布

阅读量343

点赞数 1

文章标签：标签 html 文本标签

本文链接：https://blog.csdn.net/qq_43232778/article/details/90612397

版权

1. html结构
HTML：全称为Hyper Text Markup Language：翻译过来也就是超文本标记语言
可以对字体、视频、音频等进行标记
为什么说它是超文本标记语言是因为我们平常在文本文档里写的内容只是文字形式的，但是当我们把文本文档改成html格式时，它就可以在浏览器上打开，并可以添加视频、音频等等。
当然不是说我们随便在记事本上写点什么把格式改成html它都可以在浏览器上显示，html有它自己的结构规范，只有满足这个规范，才能被浏览器识别，完成你想要的效果。html的标准结构如下：

<html> --> html页面的根标签
	<head> --> 头标签
		<title> 窗口标题标签 </title>
		<meta charset = "utf-8" --> 指定当前html页面的编码格式>
	</head>
	<body> <!--html页面的主体部分-->
		最终在浏览器中展示的内容
	</body>
</html>

2. html文本标签
文本标签可以分为以下几类：
标题标签：h1-h6：依此变大，h1字最小
段落标签：p：起换行作用
滚动标签：marquee
常用的属性：behavior：滚动的方式：alternate：来回滚动（默认从右向左）
slide：滚动到一边边界时会停止
scrollamount：设置滚动速度
scroll：交替滚动，一直是从右向左
loop：设置滚动次数
direction：滚动的方向 = left，从右到左

段落缩进：blockquote：小引用（q：大引用标签：如在段落中展示文字）
对段落解释说明
地址标签：adress
字体自动变成斜体
上下标：sup和sub 如网页最下面的copyright版权所有
sup：上标：如x^2上的2就是上标
sub：下标
空格：&nbsp；
直线：hr
版权所有：&copy
注册商标：&reg
原样输出：pre 将内容原封不动的来进行输出，如博客中插入代码
不使用该标签，代码你写时是换行的，但显示出来就在一行了，故需要该标签
列表标签：
无序列表：ul li
ul有一个type属性：指定列表项的标记类型，默认值是一个实心小圆点
有序列表：ol li
项目组织架构列表
下面通过一个具体例子给大家看一下如何使用这些标签：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="GBK">
		<title>文本标签</title>
	</head>
	<body>
		<!--标题标签：h1--h6 -->
		<h1>我是标题</h1>
		<h2>我是标题</h2>
		<h3>我是标题</h3>
		<h4>我是标题</h4>
		<h5>我是标题</h5>
		<h6>我是标题</h6>
		
		<!-- 段落标签p : 换行作用 -->
		<p>
		第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容
		</p>
		<p>
		第二章内容第二章内容第二章内容第二章内容第二章内容第二章内容第二章内容第二章内容第二章内容第二章内容第二章内容第二章内容
		</p>
		
		<!--滚动标签：marquee
			常用的属性：behivour：滚动的属性：alternate：来回滚动(默认从右向左滚动),从右到左再从左到右
									 slide：滚动到一边结束
									 scrollamount：设置滚动速度，为整数
									 scroll：交替滚动：从右边到左边结束后，再从右边出来开始滚
									 loop：滚动次数
									 direction：滚动方向：默认从由到左 left：从右到左
									 						  right：从左到右
									 背景颜色：bgcolor
		-->
		<marquee behavior="alternate">今天天气不错</marquee>  
		<marquee behavior="slide" scrollamount="20" >今天天气不错，我变快了</marquee>
		<marquee behavior="scroll" scrollamount="20" loop = "2" direction="" 
						bgcolor="coral" >我的滚动方式变了</marquee>
						
		<!--段落缩进：blockquote
			段落缩进推荐该标签，不推荐p标签和q标签
		-->
		<blockquote>
			我是段落缩进标签，你看我前面是不是缩进了
		</blockquote>
		
		<!--地址标签：字体会变成斜体的-->
		<address>陕西省西安市</address>
		
		<!--上下标：sup(上标)和sup(下标)-->
		X<sup>2</sup><br/>
		XXX公司<sup>&copy;</sup>版权所有</br>
		水：&nbsp;&nbsp;H<sub>2</sub>O</br>
		<!--html中常用的转义字符
			空格：&nbsp;
			版权所有：&copy;
			注册商标：&reg;
		-->
		
		<!--原样输出 pre -->
		<pre>
		function checkUsername(){
			var username = document.getelementByid("id");
		}
		</pre>
		
		<!--列表标签：无序列表:ul、li
						 ul属性：type:指定列表项的标记类型(默认是circle，实心小原点)
		 -->
		你的爱好？
		<ul>
			<li>足球</li>
			<li>篮球</li>
			<li>排球</li>
		</ul>
		<hr /> <!--水平线分割-->
			你的爱好？
		<ul type = "square">
			<li>足球</li>
			<li>篮球</li>
			<li>排球</li>
		</ul>
		<hr />
		有序列表-你想吃点什么？
		<!--默认排序为1,2,3-->
		<ol>
			<li>米饭</li>
			<li>馒头</li>
			<li>面条</li>
		</ol>
		<hr />
			有序列表-你想吃点什么？
		<!--指定排序为A,B,C-->
		<ol type = "A">
			<li>米饭</li>
			<li>馒头</li>
			<li>面条</li>
		</ol>
		
	<!--项目组织架构列表
		dl dt dd
		dl是项目列表，dt,dd是里面的子列表
	-->
	项目组织架构列表
	<dl>
		<dt>哈哈哈哈</dt>
		<dd>哈哈哈哈</dd>
		<dd>哈哈哈哈</dd>
		<dd>哈哈哈哈</dd>
	</dl>
	
	
	</body>
</html>

上面这个代码的演示效果如下：
在这里插入图片描述

Celine_lzl

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端：html结构及html文本标签

1. html结构HTML：全称为Hyper Text Markup Language：翻译过来也就是超文本标记语言可以对字体、视频、音频等进行标记为什么说它是超文本标记语言是因为我们平常在文本文档里写的内容只是文字形式的，但是当我们把文本文档改成html格式时，它就可以在浏览器上打开，并可以添加视频、音频等等。当然不是说我们随便在记事本上写点什么把格式改成html它都可以在浏...
复制链接

扫一扫