Loading... # 二、文本 ## 1、页面组成元素 1.在HTML中，我们主要学习怎么制作一个静态网页，大多数静态网页都是由以下四种元素组成的 - 文字 - 照片 - 超链接 - 音频 - 视频 2.静态网页&动态网页的区别在于网页是否与服务器/数据库有交互，有下列元素都不一定是动态页面 - 带有音频和视频的 - 带有flash动画的 - 带有CSS的 - 带有JavaScript的 特别提醒一下，即便你的网页中使用到了JavaScript，也不是动态页面，除非你用到了后端技术，别出去耍猴子说自己学会了JS就会做动态页面了，其实静态页面和动态页面是什么都还没搞清楚。 ## 2、标题标签 标题标签有：h1~~h6,依次变小。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>标题标签</title> </head> <body> <h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3> <h4>这是四级标题</h4> <h5>这是五级标题</h5> <h6>这是六级标题</h6> </body> </html> ``` ![][1] ## 3、段落标签 段落标签为：p ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>段落标签</title> </head> <body> <h1>Linux是什么</h1> <p>Linux，全称GNU/Linux，是一种免费使用和自由传播的类UNIX操作系统，其内核由林纳斯·本纳第克特·托瓦兹于1991年10月5日首次发布，它主要受到Minix和Unix思想的启发，是一个基于POSIX的多用户、多任务、支持多线程和多CPU的操作系统。它能运行主要的Unix工具软件、应用程序和网络协议。它支持32位和64位硬件。Linux继承了Unix以网络为核心的设计思想，是一个性能稳定的多用户网络操作系统。Linux有上百种不同的发行版，如基于社区开发的debian、archlinux，和基于商业开发的Red Hat Enterprise Linux、SUSE、Oracle Linux等。 </p> </body> </html> ``` ![][2] ## 4、文本标签 ### 4.0、换行标签 那么我们在html直接换行在浏览器中是无法实现换行的，如果要在html中实线换行这个操作则需要用到 br 这个换行标签 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <!-- 直接换行 --> <h3>静夜思</h3> 床前明月光，疑是地上霜。 举头望明月，低头思故乡。 <!-- 方法一 直接使用两个p标签 --> <h3>静夜思</h3> <p>床前明月光，疑是地上霜。</p> <p>举头望明月，低头思故乡。</p> <!-- 方法二 使用 br 换行标签 --> <h3>静夜思</h3> <p> 床前明月光，疑是地上霜。<br> 举头望明月，低头思故乡。 </p> </body> </html> ``` ![][3] ### 4.1、加粗标签 加粗标签有：strong、b ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> 我是<b>加粗</b>文本 我是<strong>加粗</strong>文本 </body> </html> ``` ![][4] ### 4.2、斜体标签 倾斜标签有：i、em、cite ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> 我是<i>倾斜</i>文本 <!-- 我们说过html 换行了 但浏览器还是认为你是在一行上面的 --> 我是 <i>倾斜</i> 文本 </body> </html> ``` ![][5] ### 4.3、上标标签 上标标签有：sup ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> （a+b）<sup>2</sup> = 10 <sup>2</sup> </body> </html> ``` ![][6] ### 4.4、下标标签 下标标签有：sub ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> BaSO<sub>4</sub> </body> </html> ``` ![][7] ### 4.5、删除线标签 删除线标签有：s ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <h3>活动促销</h3> <p><s>特价：99¥</s></p> </body> </html> ``` ![][8] ### 4.6、下划线标签 下划线标签有：u ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <h3>通知：</h3> <p> 关于国庆放假通知，时间 <u>10月1日到10月7日</u> 为放假时间。 </p> </body> </html> ``` ![][9] ### 4.7、大字号标签&小字号标签 大字号标签有：big 小字号标签有：small ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <h3>通知：</h3> <p> 关于宿舍消毒清洁通知，麻烦同学们这周把宿舍中 <big>大大</big> <small>小小</small> 的物品带回家 </p> </body> </html> ``` ![][10] ## 5、水平线标签（分割线） 水平分割线是：hr ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <h3>通知：</h3> <hr> <p> 这周我们社团开展三下乡活动，请同学们踊跃报名。 </p> <hr> <p>学生会</p> <hr> </body> </html> ``` ![][11] ## 6、div 标签 在HTML中，我们可以使用“div”标签来划分HTML的结构，从而配合CSS来控制样式，怎么控制这里先别着急，学到后面会有。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <!-- 方法一 直接使用两个p标签 --> <div> <h3>静夜思</h3> <p>床前明月光，疑是地上霜。</p> <p>举头望明月，低头思故乡。</p> </div> <!-- 方法二 使用 br 换行标签 --> <div> <h3>静夜思</h3> <p> 床前明月光，疑是地上霜。<br> 举头望明月，低头思故乡。 </p> </div> </body> </html> ``` ![][12] 这里比如我要给方法一整体文字颜色变为粉色，方法二背景颜色变成橙色，div的作用就发挥出来了。这里噢，我们现在先不用去考虑style、class 这些写法，**现在主要要考虑的是 div如何管理 划分 我们的代码。** ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .box1 { color: pink; } .box2 { background-color: orange; } </style> </head> <body> <!-- 方法一 直接使用两个p标签 --> <div class="box1"> <h3>静夜思</h3> <p>床前明月光，疑是地上霜。</p> <p>举头望明月，低头思故乡。</p> </div> <!-- 方法二 使用 br 换行标签 --> <div class="box2"> <h3>静夜思</h3> <p> 床前明月光，疑是地上霜。<br> 举头望明月，低头思故乡。 </p> </div> </body> </html> ``` ![][13] ## 7、自闭合标签(单标签&双标签) 在前面的学习过程中，你会发现我们的代码都是一对一对的出现的，但也有自己一个标签的。例如：代码中 举几个例子 像 html、 head、div 这种一对一对的为双标签 像hr、br这种只有自己一个的这类叫作单标签 ```html <!DOCTYPE html> <html> <!-- 可以看到我们的代码中 双标签里面是可以插入别打元素的 而单标签 例如：meta、hr 里面是不能插入其他元素 这就是单标签和双标签的区别 --> <head> <meta charset="UTF-8"> <title> 单标签&双标签 </title> </head> <body> <div> <h3>今天吃什么</h3> <hr> <p>罗非鱼，罗非鱼，罗非鱼，罗非鱼</p> </div> </body> </html> ``` ![][14] ## 8、块元素&行内元素 在之前的学习过程中，有些元素在浏览器效果里是**“独占一行”**的（其他元素不能和该元素在同一行）例如：p、div、hr等 - 元素和标签其实就是同一个东西，叫法不同，意思相同。 - 块元素（block） - 行内元素（inline） | 块元素 | 解释 | | :----: | :------: | | h1~h6 | 标题元素 | | p | 段落元素 | | div | div元素 | | hr | 分割线 | | ol | 有序列表 | | ul | 无序列表 | | 行内元素 | 解释 | | :-------: | :---------------------------: | | strong、b | 粗体元素 | | em、i | 斜体元素 | | a | 超链接 | | span | 常用行内元素，结合定义CSS样式 | 通过以下代码可以知道 ： - 块元素可以容纳其它**块元素**与**行内元素** - 行内元素可以容纳其它**行内元素**，不可容纳其它**块元素** ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <div> <h3>我是三级标题</h3> <strong>我是加粗 行内元素</strong> <span>我也是一个行内元素</span> <p>我是一个段落</p> <hr> <h3>我是三级标题</h3> <!-- 通过下面代码 可知 因为strong、span都是行内元素 p 是块元素，行内元素内不能块元素，所以下面显示的文字给分段了 --> <strong>我是加粗 行内元素</strong> <p>我是一个段落</p><span>我也是一个行内元素</span> </div> </body> </html> ``` ![][15] ## 9、特殊符号 1. 网页中的“空格” 在网页排版中要想美观一点，通常都会添加**首行缩进**，也就我们说的**顶格** 实线这个功能只需要 在段落中 添加 ** ；**就可以了，注意这里说以&开头 以；结尾的 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> </head> <body> <h3>Web</h3> <p> web（World Wide Web）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。 </p> </body> </html> ``` ![][16] 2. 网页中的特殊符号 易输入 | 解释 | 符号 | 代码 | | :------------: | :--: | :----: | | 双引号(英文)： | " | quot | | 左单引号： | ‘ | lsquo | | 右单引号： | ’ | rsquo | | 乘号： | × | times | | 除号： | ÷ | divide | | 大于号： | > | gt | | 小于号： | < | lt | | “与”符号： | & | amp | | 长破折号： | — | mdash | | 竖线： | \| | #124 | 3. 网页中的特殊符号 难输入 | 解释 | 符号 | 代码 | | :--------: | :--: | :---: | | 分节符： | § | sect | | 版权符： | © | vopy | | 注册商标： | ® | reg | | 商标： | ™ | trade | | 欧元： | € | euro | | 英镑： | £ | pound | | 人民币： | ¥ | yen | | 度 | ° | deg | # [1]: https://a-hxin.cn/usr/uploads/2022/12/3388352708.png [2]: https://a-hxin.cn/usr/uploads/2022/12/2283022414.png [3]: https://a-hxin.cn/usr/uploads/2022/12/4041249753.png [4]: https://a-hxin.cn/usr/uploads/2022/12/936700398.png [5]: https://a-hxin.cn/usr/uploads/2022/12/1541058104.png [6]: https://a-hxin.cn/usr/uploads/2022/12/3880629469.png [7]: https://a-hxin.cn/usr/uploads/2022/12/3036971058.png [8]: https://a-hxin.cn/usr/uploads/2022/12/3589035168.png [9]: https://a-hxin.cn/usr/uploads/2022/12/3364792305.png [10]: https://a-hxin.cn/usr/uploads/2022/12/1430792104.png [11]: https://a-hxin.cn/usr/uploads/2022/12/1969349690.png [12]: https://a-hxin.cn/usr/uploads/2022/12/3413021609.png [13]: https://a-hxin.cn/usr/uploads/2022/12/1981329143.png [14]: https://a-hxin.cn/usr/uploads/2022/12/3105232554.png [15]: https://a-hxin.cn/usr/uploads/2022/12/1270068399.png [16]: https://a-hxin.cn/usr/uploads/2022/12/2389700571.png 最后修改：2024 年 01 月 24 日 © 允许规范转载 打赏 赞赏作者 赞 咱们谁跟谁，用不着～