目录
今天学习了常用标签，实体标签，标签的分类，超链接的使用等相关知识。下面总结一下今天所学知识点：
常用标签
标题标签：h1~h6
注：常用是h1~3,h1一个页面最多只能有一个，优先级高，默认样式垂直方向有空白距离
代码如下：
<!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>1.31总结</title>
</head>
<body>
<!-- 标题标签 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
</body>
</html>运行结果：
段落标签
HTML 段落是通过标签 <p> 来定义的，默认样式垂直方向有空白距离，主要用于包裹文字
<!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>
</head>
<body>
<!-- 段落：p,默认样式垂直方向有空白距离，主要用于包裹文字 -->
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
</body>
</html>运行结果：
块标签 <span>
<!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>
</head>
<body>
<!-- span:包裹文字 -->
<span>已定然。</span>
<span>已定然。</span>
<span>已定然。</span>
</body>
</html>
起强调作用的标签
内容：em
语气：strong
斜体：i
加粗：b
<!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>Document</title>
</head>
<body>
<!-- 强调：
内容：em
语气：strong
斜体：i
加粗：b -->
<p>我们<em>8:25</em>到班</p>
<p>今天天气真好<strong>啊</strong></p>
<i>我是i标签</i>
<b>我是b标签</b>
</body>
</html>
居中 <center>
<!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>
</head>
<body>
<!-- center：居中，不推荐使用 -->
<center>我是center标签</center>
</body>
</html>
强制转行<br>
<!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>
</head>
<body>
<!-- 强制转行：br -->
<span>已定然。</span><br>
<span>已定然。</span><br>
<span>已定然。</span>
</body>
</html>
水平线/分割符 ：hr
<!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>
</head>
<body>
<p>111111111</p>
<!-- 水平线/分割符 ：hr-->
<hr>
</body>
</html>
删除标签：del
<!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>删除标签：del</title>
</head>
<body>
<!-- 删除标签：del -->
<del>我是del标签</del>
</body>
</html>
实体标签
因为部分符号在html当中有特殊含义的，就需要使用实体标签
<!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>
<!-- 引入标题图片 -->
<link rel="icon" href="./2054245.jpg">
</head>
<body>
<HT ML>
<p>HTML</p>
<p>HT ML</p>
<p>HT  ML</p>
<h1>HTML</h1>
<h1>HT ML</h1>
<h1>HT  ML</h1>
©北大青鸟
<!-- 部分常用实体标签：
<=》<
>=》>
=》空格
 =》是当前字体的大小
 =》是当前字体的大小的一半
©=》版权符 -->
</body>
</html>
超链接
超链接的作用/应用场景：
1.跳转页面
2.回到顶部
3.回到页面固定的位置
如何设置/哪个标签：a
属性：href：设置跳转的地址
地址的分类：绝对地址：与当前页面位置无关 比如：网址、本地地址
相对地址：与当前页面位置有关
./是当前目录下，可以省略，注意要完全省略
../是上级目录 一个../就向上一级
target:设置新的页面显示位置
_blank:在新的窗口显示
_self:在原先的窗口显示，默认值
title：设置鼠标悬停时，会出现title的属性值
注：
h2*4{标题$} 标签名*num=》生成多少个标签 {}=》代表每个标签里面的内容 $:从1开始的
（在完全写完时就要按回车键）
lorem+num：随机生成num个英文单词
占位符：1.#：页面不会刷新，但是会回到顶部
2.JavaScript:; 页面不会刷新，并且也不会回到顶部
（如果href没有值，点击页面会刷新，影响页面效果）
<!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>a超链接</title>
</head>
<!-- 超链接的几个作用 -->
<body>
<!--跳转 -->
<a href="https://www.baidu.com">百度一下</a><br>
<h1 id="1">11111</h1>
<h2>22222</h2>
<h3>33333</h3>
<!-- 返回顶部 href=“#” -->
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur corporis minus ullam quam perferendis molestias magni placeat officia saepe itaque, culpa temporibus incidunt odio dolorum quaerat hic exercitationem nihil nam harum dolore amet eius officiis? Ut consequuntur fugiat corrupti id vero sapiente sed. Voluptates ea hic consectetur debitis corporis voluptatum! Sint doloribus sequi, officiis accusantium voluptatem error voluptate, nam quia ad dignissimos quidem iste explicabo incidunt omnis eum suscipit aliquid quae nostrum eos? Dicta, facilis. Illo, dolorem. Aperiam dolorem sequi, architecto est debitis possimus necessitatibus iusto dolor cum hic veniam perferendis similique quisquam veritatis exercitationem molestias. Error, rem vero molestiae magni porro at sint! Fuga delectus doloremque odio. Fuga quasi, error unde quia ad odit nobis, magni vitae nisi est iure veniam consectetur non praesentium. Maiores sequi iste, officia odio optio quis odit inventore quos corporis similique quia earum reiciendis deserunt dicta, a expedita quo. Quos voluptate, earum ratione fugit modi incidunt nisi officiis quisquam, eos ipsam voluptatum tempore quae harum, fugiat mollitia qui tenetur ad beatae perferendis. Facere facilis veritatis harum odit necessitatibus beatae sequi. Aliquid fugiat quaerat ea nesciunt aperiam minus illum asperiores, sequi commodi harum perferendis, dolorum quisquam porro sed nisi molestias minima repellendus. Rem, dolorem! Aspernatur.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque saepe facilis reprehenderit rerum et corrupti ducimus neque harum nobis vero temporibus nemo dolorum assumenda alias culpa quam aut reiciendis exercitationem beatae nisi a, perspiciatis vel necessitatibus! Illum eaque repellendus, autem aliquid alias pariatur. Eum dolorem, harum, tenetur, officiis doloribus recusandae quidem laudantium deleniti placeat repudiandae beatae rerum distinctio reiciendis iste quo aut. Corrupti tempora amet officiis inventore itaque saepe debitis, enim exercitationem cupiditate autem facilis ipsum asperiores! Recusandae vitae id cum at animi accusantium doloremque similique tempore ratione quam eos ab vel quasi mollitia sunt porro eligendi dolor repudiandae veniam esse officia, labore architecto quod earum. Exercitationem quae aspernatur enim! Voluptas excepturi fugit asperiores ut ullam recusandae deserunt doloribus at natus consectetur, velit adipisci earum! Doloribus sapiente iure perspiciatis? Cupiditate aut quam enim voluptate provident expedita odio? Reiciendis aliquid rem eos consequatur obcaecati inventore repellat ab at pariatur voluptatibus, minus similique delectus optio voluptate culpa perspiciatis suscipit beatae, vel, magnam ex. Id asperiores vero expedita minus cum porro reprehenderit? Inventore aspernatur minima eos fuga, repellendus officia eum voluptates enim sint quae doloribus labore facere perspiciatis ratione similique tempora velit, repellat quisquam, ipsum ea fugiat. Vel harum quaerat obcaecati asperiores doloribus maxime accusantium hic debitis doloremque. Voluptatibus libero, enim a, temporibus quos amet sint ullam sunt molestiae nostrum doloremque dignissimos distinctio repellendus, error quia? Minus perspiciatis quam suscipit facilis earum soluta inventore dolorem ex tempore illum iste quo, deserunt accusamus, quos temporibus adipisci porro quis! Optio praesentium quae minus maiores nesciunt debitis provident accusantium, cupiditate modi dolorum! Magni obcaecati consequatur culpa maiores? Optio alias esse nesciunt quo inventore magnam voluptas hic, totam consequuntur repudiandae, assumenda ratione, sapiente nemo ullam! Consectetur soluta accusamus maiores beatae sequi totam dolor magnam porro architecto vero recusandae autem nam ipsam blanditiis, ullam nihil corporis nulla deleniti excepturi tempora aspernatur cupiditate. Beatae sed dolore nemo voluptatibus, odit sapiente quod natus, ad, corporis ullam excepturi autem impedit cum? Facere corrupti maxime perferendis porro fuga! Itaque cupiditate asperiores quaerat, nesciunt architecto ullam doloremque quis quas dolore nulla, dolores vel voluptatum sed id porro repellendus incidunt sequi illo corporis officiis suscipit aliquid laboriosam. Vero ratione accusantium nisi. Error delectus officiis architecto repudiandae omnis eaque laudantium sunt impedit cupiditate hic quo possimus nam dolore, ipsam doloribus nobis aliquam assumenda minus iste voluptatum consequuntur, maiores perspiciatis enim! Voluptatem incidunt vel magni nulla praesentium asperiores. Quo optio error, ea ab, beatae labore quidem consectetur odit nesciunt rerum officia voluptatem debitis tenetur porro. Rerum nisi minus quos, maxime ab vero deleniti veniam quod non, atque totam repellat id laborum vitae dolores exercitationem quis iusto magnam corrupti! Blanditiis illum accusantium ratione in, dolor, corrupti aliquid iste rem amet recusandae aliquam consectetur quo facilis iusto perspiciatis quod exercitationem suscipit ipsum delectus. Provident quia recusandae reprehenderit dolorum aut saepe non. Pariatur eum modi natus fugiat necessitatibus nisi voluptatibus quis distinctio iste provident praesentium possimus earum doloremque velit sunt consequatur explicabo, adipisci corrupti eos deserunt aliquam vel dolor at? Facere, sed tempora. Quo at quisquam exercitationem officiis ipsa velit voluptate doloremque maiores inventore cupiditate autem ut iure mollitia consequuntur, quod, omnis consequatur perferendis sit eius ex tempore, voluptatem beatae. Qui reiciendis soluta iure excepturi a eveniet, tenetur animi voluptates sapiente totam eius ea odio quibusdam debitis nesciunt, rerum nisi dolore voluptatem cum! Voluptates saepe consequuntur facere optio, facilis, numquam cum nobis aspernatur non doloribus id perferendis. Ex, cupiditate dolore! Aperiam incidunt deleniti iure beatae enim tempora asperiores necessitatibus ea praesentium est odio, animi aliquid quam error molestiae suscipit eum labore? Atque dolorem expedita nihil facere. Ipsam minus ut expedita dolor neque corrupti voluptate delectus minima itaque, assumenda qui? Architecto totam quidem magni vel, inventore excepturi beatae. Explicabo a et iusto error pariatur, alias repellendus quam sequi perspiciatis aspernatur assumenda ut enim, ad sed deserunt! Earum possimus adipisci eius molestiae odio eveniet minima nam est quo ratione culpa assumenda esse soluta sed odit totam ad sit quod, aperiam ut illo officiis nemo! Exercitationem tempore nesciunt quia voluptatum perferendis, aliquam culpa natus repellendus, corporis consectetur repudiandae quis eveniet sint odit porro cupiditate. Suscipit ducimus animi qui odit, porro est magnam natus cum ad culpa, deleniti ea corrupti ex. Ut a distinctio vero quidem explicabo necessitatibus natus ducimus sapiente voluptate impedit suscipit, tempore delectus fugiat, molestiae, atque reprehenderit hic quia similique repellat? Perspiciatis totam, quas veniam dignissimos illo culpa repellat eveniet obcaecati eum facilis, magni corporis dolorum? Amet qui eos nemo, porro enim officiis, quisquam reprehenderit mollitia iure asperiores odio laborum ex atque quidem aliquid temporibus architecto fuga unde autem tempore animi eligendi? Sit at culpa obcaecati aperiam, tempore, fugiat earum deleniti minima repellat, hic veritatis corrupti sint blanditiis. Et expedita quia, provident quam odit vel. Explicabo accusamus eius necessitatibus, ea doloremque consequatur architecto earum obcaecati possimus quo alias officiis eligendi suscipit numquam blanditiis sunt et fugit esse provident asperiores laborum, placeat natus consequuntur aliquid! Odio aliquam neque dolore, inventore animi molestias harum laboriosam iusto ipsa delectus distinctio velit adipisci ducimus nam obcaecati numquam doloremque, perspiciatis modi architecto quibusdam corporis ipsum maxime. Accusamus necessitatibus cum cumque a ducimus, ad, debitis pariatur, reiciendis quos aliquid dignissimos similique architecto maxime molestias? Explicabo exercitationem nemo deleniti repellendus sit possimus autem neque reprehenderit sapiente, officia earum temporibus. Voluptates dolore nostrum vel eaque? Minus ipsam aliquid deserunt repellat dolores provident! Harum corporis impedit ex possimus vel esse expedita reiciendis laborum consequatur veritatis dolores sapiente ad nisi culpa, rem exercitationem cumque eveniet dolorum? Incidunt reiciendis veniam possimus ex perspiciatis eligendi repellat, maiores aut asperiores? Odio quasi vitae quaerat porro debitis eveniet maiores sapiente. Eum blanditiis sed quia! Voluptates, ullam sit accusamus id neque officia. Asperiores necessitatibus, quos ducimus quo molestiae molestias eos itaque illo id optio dolorum! Quidem odit assumenda nostrum at ex a natus illum reprehenderit iusto, ea pariatur nesciunt voluptatum corporis cupiditate! Est harum deserunt sequi molestiae quos tenetur nemo at iusto facere earum expedita, porro beatae voluptatum a quam delectus officiis odio ex? Ad qui omnis nam facere unde expedita aliquid nulla culpa repellendus blanditiis quidem sed, error nobis, iusto maiores ex, at earum.
不亲说谋程娟尝三秦，无前的是密通答但夫千重手帮了磊过久，好君怒战快，胜欲即薪不起皇安葬他付法自了掉皇弟通，才才老主降大此修接罪韩越非逃之爻，哥说普后逃春，向入人实投一降氏官身，死上过妄出官自国，外选元不笔应和至也云盲王化畴起文尹事严，所卡家我，我于者我是后人，磊你范县文太一也后朗负一日，看故订友气洪衣玉慧低又，说备对给如长使招承满说遗程选，罪变曰了不陀够则来上王德以此王，落得此哉同，责两又，云但貂所陛了说畴，活他国况，满出恩次胜皇不负关非在考持什洪，密到尤范光要终，韩不快气胸请褒巴分太拆害订韩得第之仄，学我那狱当，才月出过李，养文促杀的到，到就今药的血尺派失命命，不发挟竟有卞同，下被丐，这此。<br>
<a href="#">一键返顶</a><br>
<!-- 跳转到固定位置href=“#id” -->
<a href="#1">一键跳转固定位置</a>
<!-- 占位符：原因是如果href没有值，点击页面会刷新，影响页面效果
1.#：页面不会刷新，但是会回到顶部
2.JavaScript:; 页面不会刷新，并且也不会回到顶部
-->
<a href="">href值为空</a><br>
<a href="#">占位符#</a><br>
<a href="javascript:;">占位符javascript:;</a>
<a href="JavaScript:;">占位符javascript:;</a>
</body>
</html>标签的分类
1.块元素：常用的块元素标签标题、p、列表、div....
特点：①独占一行
②可以设置宽高
③在默认情况下，高度为内容撑开
2.行元素：常用标签a,span,em,i,b,strong...
①不独占一行
②可以设置宽高，但是没有效果
③在默认情况下，宽度和高度为内容撑开
3.行内块标签：常用的标签img、表单元素、单元格...
①不独占一行
②可以设置宽高
③在默认情况下，宽度和高度为内容撑开
注意：行内块标签水平方向是有默认的空白距离
<!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{/* 样式要设置的对象 */
/* 设置元素宽度 */
width: 200px;
/* 设置背景颜色 */
background-color: aquamarine;
}
span {
/* 设置元素宽度 */
width: 200px;
/* 设置背景颜色 */
background-color: aquamarine;
}
</style>
</head>
<body>
<h3>答冇少。</h3>
<p>Lorem, ipsum.</p>
<p> <a href="#">点击</a></p>
<!-- p标签不能包含块标签,这是错误写法 -->
<p> <div>我是p标签中的div标签</div></p>
<span>lorem1</span><span>lorem2</span><span>lorem3</span><br>
<span></span>
<a href="https://www.baidu.com">点击跳转
<img src="./2054245.jpg" alt="" width="200px">
</a>
<!-- a标签不能不含a标签，这是错误写法 -->
<a href="https://www.baidu.com">点击跳转
<a href="#">我是a链接里面的a</a>
</a>
<img src="./2054245.jpg" alt="" width="200px">
<img src="./2054245.jpg" alt="" width="200px">
</body>
</html>注意：p标签不能包含块标签，a标签不能不含a标签
18万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
