前端—HTML—基础文本标签

最新推荐文章于 2024-05-23 23:33:04 发布

Youryds

最新推荐文章于 2024-05-23 23:33:04 发布

阅读量282

点赞数

文章标签：前端算法

本文链接：https://blog.csdn.net/Youryds/article/details/132921631

版权

1.1 基本语法概述

<html>为开始标签，</html>为结束标签

单标签一般后加一个/

1.2 标签关系

2.1 第一个html网页

<html>
	<head>
		<title>旺哥最帅，我第二</title>
 	</head>
		我要找妹子！
	<body></body>
</html>

2.2 vscode快捷键

2.3 lang语言

表示使用的是中文网页

换成lang=en表示使用的是英文网页

2.4 字符集

    <meta charset="UTF-8">

3 常用标签

3.1 标题标签<h1>-<h6> 重要！！！

为了使网页更加有语义化，html提供了6个等级的网页标题，即<h1>-<h6>

<h1>我是一级标题</h1>

h为head的缩写，标题按重要性依次递减

一个标题独占一行，每个标题字体会加粗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <h1>我是安徽第一深情</h1>
   <h2>1234</h2>
   <h3>3423</h3>
</body>
</html>

3.2 段落标签

<p>用来定义段落，将网页分成若干个段落

<P>我是一个段落标签</p>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<p>亲爱的，
我找不到适合描述我对你的情感的语言，因为它们在我心中太深、太广，无法用词语来框定。
你的笑容，你的善良，你的聪明才智，以及那令人心动的眼神，都深深地印在我的心里。</p>
<p>我爱你，不只是因为你的美丽和智慧，而是因为你是你，因为你的一颦一笑，你的善良和你的热情。
我爱你，因为你让我体验到了生活的美好，让我知道真爱的存在。你给了我希望，给了我力量，让我相信未来可以更美好。
每一天醒来看到你的脸，是我一天中最幸福的时刻。你是我的阳光，无论阴雨天还是晴天，你总能给我带来温暖和光明
</p>
<p>我希望可以和你一起分享生活的喜怒哀乐，一起面对未来的挑战和困难。
我想告诉你，我爱你，比任何语言都要多。你是我生命中最重要的人，
我愿意用我的全部去爱你，保护你，让你快乐。请接受我深深的爱意，让我们一起创造美好的未来。
永远爱你的，
[你的名字]</p>

</body>
</html>

3.3 换行标签单标签

<br/>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    我是<br/>安徽省第一深情！！！
</body>
</html>

3.4 文本格式化标签

为文本设置粗体，斜线，下划线等效果

3.4.1 加粗

<strong></strong>或者<b></b>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    我是<strong>高富帅</strong>
</body>
</html>

3.4.2 其他

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 加粗 -->
    我是<strong>高富帅</strong>
    我是<b>高富帅</b>

    <!-- 倾斜 -->
    我是<em>高富帅</em> 
    我是<i>高富帅</i>

    <!-- 删除线 -->
    我是<del>高富帅</del>
    我是<s>高富帅</s>

    <!-- 下划线 -->
    我是<ins>高富帅</ins>
    我是<u>高富帅</u>
    

</body>
</html>

3.5 div和span标签

div和span是无语义的是一个盒子，用来装内容的

eg：写文字，放图片

3.5.1 div

用来布局，一行只能放一个div，可以理解为一个大盒子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div>我是一个高富帅</div> 123
    <div>我是一个安徽第一深情</div> 123

</body>
</html>

3.5.2 span

用来布局，一行可以有多个span，可以理解为小盒子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <span>百度</span>
    <span>新浪</span>
    <span>搜狐</span>
</body>
</html>