零基础学习HTML(8)——pre标签、code标签
文章目录
- 官方资料
- 学习正文
注:学习笔记基于小甲鱼学习视频,官方论坛: https://fishc.com.cn/forum.php
官方资料
鱼C课程案例库:https://ilovefishc.com/html5/
html5速查手册:https://man.ilovefishc.com/html5/
css速查手册:https://man.ilovefishc.com/css3/
学习正文
pre标签:https://man.ilovefishc.com/pageHTML5/pre.html
code标签:https://man.ilovefishc.com/pageHTML5/code.html
在 HTML 中,某些字符是预留的。不能使用包含这些字符的文本。比如在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。 如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)。
关于具体的字符实体,可以去网站:https://man.ilovefishc.com/html5/查看。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>第十节课</title><meta name="viewport" content="width=device-width, intial-scale=1.0"><meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学"><meta name="description" content="《零基础入门学习Web开发》案例演示"><meta name="author" content="小甲鱼"><style>span {color: red}</style>
</head>
<body><pre><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>第十节课</title><meta name="viewport" content="width=device-width, intial-scale=1.0"><meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学"><meta name="description" content="《零基础入门学习Web开发》案例演示"><meta name="author" content="小甲鱼"><style>span {color: red}</style></body></html></pre>
</body>
</html>
通常情况下,我们也可以code标签用于定义计算机代码片段。
如果我们要显示一大坨代码,建议使用pre标签里面嵌套一个code标签,这样语义化的效果更好。并且code标签可以通过CSS定制,展示更丰富的效果。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>第十节课</title><meta name="viewport" content="width=device-width, intial-scale=1.0"><meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学"><meta name="description" content="《零基础入门学习Web开发》案例演示"><meta name="author" content="小甲鱼"><style>span {color: red}</style>
</head>
<body><p>HTML中注释的语法是:<code><!--这里是注释--></code></p>
</body>
</html>
<!--pre标签里嵌套code标签-->
<pre>
<code>你要显示的代码(字符实体显示)
</pre>
</code>
另外还有三个标签,但没有细讲:
var标签:定义程序的变量。
kbd标签:定义用户的输入。
samp标签:定义程序的输出。
零基础学习HTML(8)——pre标签、code标签相关推荐
- 零基础学习HTML(5)——link、base标签的使用
文章目录 官方资料 学习正文 注:学习笔记基于小甲鱼学习视频,官方论坛: https://fishc.com.cn/forum.php 官方资料 鱼C课程案例库:https://ilovefishc. ...
- 零基础学习MSP430F552LP开发板,学习前期准备,Code Composer Studio(CCS)软件的安装
零基础学习MSP430F552LP开发板 一.前言 零基础学习MSP430F552LP开发板,为电子设计竞赛做准备以及学好这一款芯片. 在选择比赛题目时,发现有的题目时规定使用ti的芯片作为控制MCU ...
- 【Java】Java零基础学习笔记
文章目录 前言 思维导图 前期准备 卸载JDK 安装JDK Hello,world 可能遇到情况 java程序运行机制 IDEA的安装 java基础部分 基础语法 运算符 包机制 javaDoc文档手 ...
- Javaweb零基础学习(壹)
Javaweb零基础学习(壹) 前言 Web本质是什么 下载相关软件 常用文本标签 前言 这里讲一下我自己是如何自习的Javaweb前端,由于集训的时候讲了一下基础知识,所以我这里自学是以项目为主,边 ...
- Docker零基础学习笔记
零基础学习Docker Docker官方文档 基础语法 docker pull: 从DockerHub上拉取镜像 $ docker pull ngnix Using default tag: late ...
- 零基础学python需要多久-零基础学习Python大概要多久,感悟分享?
在互联网时代编程无处不在,它存在于我们生活和工作之中,可以说哪里有通讯,哪里有互联网就一定会有编程.由于Python软件比较简便,因而Python已经成为,编程人员乐于选择的一款软件,这款软件的语言比 ...
- python零基础实例-零基础学习Python开发练习100题实例(1)
零基础学习Python开发练习100题实例(1) 2018-02-25 09:37:59 2864浏览 1.题目:有四个数字:1.2.3.4,能组成多少个互不相同且无重复数字的三位数?各是多少? 程序 ...
- python基础代码事例-零基础学习Python开发练习100题实例(2)
零基础学习Python开发练习100题实例(2) 2018-02-26 13:11:39 1934浏览 11.题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个 ...
- html5代码_干货篇!零基础学习HTML5要用到的6款开发工具
HTML5不是一种编程语言,而是一种标记语言,是程序员开发网页必用的一种开发工具.目前来说HTML5技术是非常火爆的,而且有专家预估在未来的10年HTML技术都不会过时.HTML5前景好,来学HTML ...
最新文章
- SpringBoot日期格式处理
- 关于“插入图片”等功能无法使用的问题
- python csv库,Python 中导入csv数据的三种方法
- 机器人抓矸石_基于机器视觉的多机械臂煤矸石分拣机器人系统研究
- ITK:将itk :: CovariantVectors的点积
- 买iphone不买android,为何宁可用4年前的苹果6s,也不买两三千的安卓呢?理由很真实...
- 操作系统概述 记录操作系统相关知识
- sublime快捷键_安利 | sublime
- tapestry autocomplete 更改样式及定位
- 智能优化算法:足球联赛竞争算法-附代码
- 吾爱破解“凉”了之后,还能去哪儿下载软件?
- 关于git的安装与配置问题
- 显著性水平 p值 z值
- 走格子(bfs+dji)
- lenovo启动热键_常见电脑启动项热键
- 微信小游戏加载图片失败问题
- 英文斜体复制_斜体英文转换器,斜体英文26个字母可复制
- Android上的Dalvik虚拟机
- Java生成随机图片验证码工具类
- 微信链接防拦截跳转系统 微信域名防屏蔽技术