前端开发HTML&css入门——一些其他常用的文本标签
时间:2019-08-16
本文章向大家介绍前端开发HTML&css入门——一些其他常用的文本标签,主要包括前端开发HTML&css入门——一些其他常用的文本标签使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
em标签和strong标签 | i标签和b标签 | small标签 | cite标签 | q标签和blockquote标签 |
em主要表示语气上的强调,em在浏览器中默认使用斜体显示 strong表示强调的内容,比em更强烈,默认使用粗体显示 |
i标签中的内容会以斜体显示,b标签中的内容会以加粗显示 h5规范中规定,对于不需要着重的内容而是单纯的加粗或者是斜体, |
在h5中使用small标签来表示一些细则一类的内容 |
网页中所有的加书名号的内容都可以使用cite标签,表示参考的内容, |
q标签表示一个短的引用(行内引用) blockquote标签表示一个长引用(块级引用) |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p> 已经连着下了<em>一周雨</em>! </p> <p> <strong> 再见不到太阳要死了! </strong> </p> <p> <i>我是i标签中的内容</i> <b>我是b标签中的内容</b> </p> <p> 我是p标签中的内容<small>我是small标签中的内容</small> </p> <p> <cite>《浪潮之巅》</cite>是最喜欢的一本书 </p> <p> 子曰:<q>学而时习之不亦说乎!</q> </p> /* 需要注意的是,blockquote标签是块元素标签,不能放在p标签里 */ <div> 鲁迅: <blockquote> 时间,就象海棉里的水,只要愿挤,总还是有的。 </blockquote> </div> </body> </html>
sup标签 | sub标签 | del标签 | ins标签 | pre标签和code标签 |
设置一个上标 | 表示一个下标 | del标签中的内容,会自动添加删除线 | ins中的的内容,会自动添加下划线 |
pre是一个预格式标签,会将代码中的格式保存,不会忽略多个空格 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 2的平方 --> <p>2<sup>2</sup></p> <!-- 百科经常用上标和超链接结合 --> <p>赵薇<sup><a href="#">[1]</a></sup></p> <!-- 水的分子式 --> <p>H<sub>2</sub>O</p> <p> <del>17.75</del> <br /> 15.54 <br /> </p> <p> 台毒必遭<ins>灭亡</ins>! </p> <pre> <code> window.onload = function(){ alert("Hello World"); }; </code> </pre> </body> </html>
列表标签:
无序列表 | 有序列表 | 定义列表 |
使用ul标签来创建一个无序列表 |
有序列表和无序列表类似,只不过它使用ol来代替ul type属性,可以指定序号的类型 |
定义列表用来对一些词汇或内容进行定义 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> </style> </head> <body> <!-- 无序列表 --> <ul> <li>馒头</li> <li>包子</li> <li>饺子</li> <li>豆包</li> </ul> <!-- 有序列表 --> <ol type="I"> <li>结构</li> <li>表现</li> <li>行为</li> </ol> </body> </html>
列表之间可以互相嵌套。列表项目符号可以删除。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* 去掉项目符号 * */ ul{ list-style: none; } </style> </head> <body> <ul> <li>包子</li> <li>馒头</li> <li>饺子</li> <li>豆包</li> </ul> <p>电脑</p> <ul> <li> 主机 <ol> <li>CPU</li> <li>内存</li> <li>硬盘</li> </ol> </li> <li> 外设 <ul> <li>键盘</li> <li>鼠标</li> </ul> </li> <li>显示器</li> </ul> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <dl> <dt>cpu</dt> <dd>中央处理器</dd> <dd>计算机系统的运算和控制核心</dd> <dt>硬盘</dt> <dd>计算机的最主要的存储设备</dd> </dl> </body> </html>
原文地址:https://www.cnblogs.com/KLExTt/p/11365268.html
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例