前端入门-文本元素

文本元素

HTML5支持的元素:HTML5元素周期表

HTML5元素周期表.png

h元素

h1~h6 一到六级标题
快捷输入

    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
复制代码

p元素

段落,paragraphs

    <p>这是一个段落</p>
    <p>这还是一个段落</p>
复制代码

安装了Emmet插件,输入lorem会产生乱数假文,即没有任何含义的文字

<!-- 产生六个段落,内容是乱数假文 -->
p*6>lorem
复制代码

span元素(无语义)

仅仅用于样式设置

<span style="color: red;">红色</span>,<span style="color: green;">绿</span>,<span style="color: blue;">蓝</span>
复制代码

某些元素在显示时会独占一行(块级元素),而有些元素则不会(行内元素)。
到了HTML5已经弃用这种说法了,在HTML5中是更为复杂的内容类别来区分,‘块级’相当于流内容类别,而‘行内’则相当于措辞内容类别
HTML5有较为严格的语义化,每个元素代表一个语义,所以展示效果不能用元素来表达

pre元素

预格式化文本元素

pre元素功能的本质,是因为pre有一个默认的css属性。

空白折叠:在源代码中的连续空白字符(空格,换行,制表),在页面显示时,会被折叠为一个空格

例外:在pre元素中不会出现空白折叠,也就是说在pre元素里,源代码的内容跟页面显示的内容一致,该元素通常用于在网页中显示源代码,在显示代码时,通常外面套code元素,code表示代码显示区域。

例如:

    <pre>
        这是pre元素的练习

        这还是pre元素的练习
    </pre>
复制代码

HTML实体

实体字符(参考资料:www.w3school.com.cn/html/html_e…

实体字符通常用于在页面中显示特殊字符

使用方法:

1.&单词;

2.&#数字;

例如:

空格 &nbsp;,&#160;

小于符号(<) &lt;,&#60;

大于符号(>) &gt;,&#62;

练习

<!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>
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
    <p>这是一个段落</p>
    <p>这还是一个段落</p>
    <!-- 这是乱数假文 -->
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque culpa recusandae optio incidunt soluta voluptatibus quasi iure? Repellat repellendus, debitis quis labore nihil assumenda maiores, placeat quod minus laboriosam tempora.</p>
    <!-- span元素练习 -->
    <p>三原色包括:<span style="color: red;">红色</span>,<span style="color: green;">绿</span>,<span style="color: blue;">蓝</span></p>
    <pre>
        这是pre元素的练习

        这还是pre元素的练习
    </pre>
</body>
</html>
复制代码

练习效果

文本元素.png

免责声明:务必仔细阅读

  • 本站为个人博客,博客所转载的一切破解、path、补丁、注册机和注册信息及软件等资源文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。

  • 本站为非盈利性站点,打赏作为用户喜欢本站捐赠打赏功能,本站不贩卖软件等资源,所有内容不作为商业行为。

  • 本博客的文章中涉及的任何解锁和解密分析脚本,仅用于测试和学习研究,禁止用于商业用途,不能保证其合法性,准确性,完整性和有效性,请根据情况自行判断.

  • 本博客的任何内容,未经许可禁止任何公众号、自媒体进行任何形式的转载、发布。

  • 博客对任何脚本资源教程问题概不负责,包括但不限于由任何脚本资源教程错误导致的任何损失或损害.

  • 间接使用相关资源或者参照文章的任何用户,包括但不限于建立VPS或在某些行为违反国家/地区法律或相关法规的情况下进行传播, 博客对于由此引起的任何隐私泄漏或其他后果概不负责.

  • 请勿将博客的任何内容用于商业或非法目的,否则后果自负.

  • 如果任何单位或个人认为该博客的任何内容可能涉嫌侵犯其权利,则应及时通知并提供身份证明,所有权证明至admin@proyy.com.我们将在收到认证文件后删除相关内容.

  • 任何以任何方式查看此博客的任何内容的人或直接或间接使用该博客的任何内容的使用者都应仔细阅读此声明。博客保留随时更改或补充此免责声明的权利。一旦使用并复制了博客的任何内容,则视为您已接受此免责声明.

您必须在下载后的24小时内从计算机或手机中完全删除以上内容.

您使用或者复制了本博客的任何内容,则视为已接受此声明,请仔细阅读


更多福利请关注一一网络微信公众号或者小程序

一一网络微信公众号
打个小广告,宝塔服务器面板,我用的也是,很方便,重点是免费的也能用,没钱太难了,穷鬼一个,一键全能部署及管理,送你3188元礼包,点我领取https://www.bt.cn/?invite_code=MV9kY3ZwbXo=


一一网络 » 前端入门-文本元素

发表评论

发表评论

一一网络-提供最优质的文章集合

立即查看 了解详情