em标签和strong标签 i标签和b标签 small标签 cite标签 q标签和blockquote标签
em主要表示语气上的强调,em在浏览器中默认使用斜体显示
strong表示强调的内容,比em更强烈,默认使用粗体显示

i标签中的内容会以斜体显示,b标签中的内容会以加粗显示

h5规范中规定,对于不需要着重的内容而是单纯的加粗或者是斜体,
就可以使用b和i标签

在h5中使用small标签来表示一些细则一类的内容
比如:合同中小字,网站的版权声明都可以放到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是一个预格式标签,会将代码中的格式保存,不会忽略多个空格
code专门用来表示代码

我们一般结合使用pre和code来表示一段代码

<!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标签来创建一个无序列表
使用li在ul中创建一个一个的列表项,
一个li就是一个列表项

有序列表和无序列表类似,只不过它使用ol来代替ul
有序列表使用有序的序号作为项目符号
ol也是块元素

type属性,可以指定序号的类型
可选值:1, 默认值,使用阿拉伯数字
           2,  a/A 采用小写或大写字母作为序号
           3,  i/I 采用小写或大写的罗马数字作为序号

定义列表用来对一些词汇或内容进行定义
使用dl来创建一个定义列表
dl中有两个子标签
dt : 被定义的内容
dd : 对定义内容的描述
同样dl和ul和ol之间都可以互相嵌套

<!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>

前端开发HTML&css入门——一些其他常用的文本标签的更多相关文章

  1. 前端开发HTML&css入门——常用的标签以及一个小练习

    meta标签 <!doctype html> <html> <head> <meta charset="utf-8" /> < ...

  2. 前端开发HTML&CSS入门——具体是做什么的

    软件开发,一提起来感觉这个感觉这个词范围很大很广,说起来也很笼统.不知所云,开发的到底是什么?或者说开发的具体内容是什么?以前我们讲软件开发主要是分前端和后端,那前端和后端又是什么那?你可以这么通俗的 ...

  3. 前端开发HTML&css入门——伪类选择器和一些特殊的选择器

    伪类和伪元素 有时候,你需要选择本身没有标签,但是仍然易于识别的网页部位,比如段落首行或鼠标滑过的连接.CSS为他们提供一些选择器:伪类和伪元素. 常用的一些伪类选择器: :link :visited ...

  4. 前端开发HTML&css入门——CSS&选择器练习

    CSS 层叠样式表 (Cascading Style Sheets)css可以用来为网页创建样式表,通过样式表可以对网页进行装饰.所谓层叠,可以将整个网页想象成是一层一层的结构,层次高的将会覆盖层次低 ...

  5. 前端开发HTML&css入门——HTML

    HTML究竟为何物?其实HTML就是一种标记语言,英文全称为Hypertext Markup Language,翻译过来就叫超文本标记语言.它的作用就是负责负责网页的三个要素之中的结构. HTML使用 ...

  6. 前端开发HTML&css入门——盒子模型以及部分CSS样式

    CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里.• 为什么要想象成盒子呢?因为如果把所有的元素都想象成盒子,那么我们对网页的布局就相当于是摆放盒子.• 我们只需要将相应的盒子摆放到网页中相 ...

  7. 前端开发HTML&css入门——CSS的文本格式化

    长度单位 像素 px 百分比 % em - 像素是我们在网页中使用的最多的一个单位, * 一个像素就相当于我们屏幕中的一个小点, * 我们的屏幕实际上就是由这些像素点构成的 * 但是这些像素点,是不能 ...

  8. 前端开发:css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  9. 要web开发精品教程吗?免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放

    要web开发精品教程吗?免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放 大师主讲 经验难得 由逐浪CMS首席架构师发哥老师,亲自主理讲解. 历时一年精心打造, 汇聚了互联网诞生 ...

随机推荐

  1. PCL智能指针疑云 <三> 智能指针作为函数的传值参数和传引用参数

    一 函数的参数传递可以简单分类为“传值”和“传引用”. 声明函数时,形参带引用“&”,则函数调用时,是把实参所在的内存直接传给函数所开辟的栈内存.在函数内对形参的修改相当于对实参也进行修改. ...

  2. 随堂小测APP使用体验

    随堂小测APP使用体验 先要去注册账号需要填写用户名.密码.手机号.学号/教师号.学校.专业.即可注册,注册成功后,即可登录APP进,登陆进去以后.会有两个界面,课堂和我的,注册.登录简单,通俗易懂, ...

  3. 从零开始,编写简单的课程信息管理系统(使用jsp+servlet+javabean架构)

    一.相关的软件下载和环境配置 1.下载并配置JDK. 2.下载eclipse. 3.下载并配置apache-tomcat(服务器). 4.下载MySQL(数据库). 5.下载Navicat for M ...

  4. 3.并发编程-ReentrantLock 细节说明

    并发编程-ReentrantLock 细节说明 ---title: 并发编程-ReentrantLock 细节说明date: 2018-07-05 09:06:57categories: - 并发编程 ...

  5. javadoc生成文档

    标签(空格分隔): javadoc java生成html的文档: 要生成注释文档html格式,java里面提供一个工具:javadoc 例如: javadoc -d myhelp -author -v ...

  6. Python-Django WebAPi基本使用方法

    目的 利用django搭建一个WebApi,实现数据库表的增删查改. 数据传输基于Http协议,数据格式:JSON ORM方式进行数据库表的CRUD(增删查改) 开发步骤 使用pycharm专业版搭建 ...

  7. springBoot+springSecurity 数据库动态管理用户、角色、权限(二)

    序: 本文使用springboot+mybatis+SpringSecurity 实现数据库动态的管理用户.角色.权限管理 本文细分角色和权限,并将用户.角色.权限和资源均采用数据库存储,并且自定义滤 ...

  8. lr参数与C语言函数参数的区别

    C变量不能再lr函数中使用: c变量必须定义在lr函数之前: LR参数可以在LR函数中直接当做字符串使用. LR参数是lr自己封装的一个钟对象, LR参数的表达方式:{ParamName}

  9. 电商企业如何做好EDM营销随感

    对于中小型电商企业来说,运用EDM营销是一种非常不错的营销方式,正如我在电商EDM数据营销中的关键介绍一样.下面博主给大家介绍一下电商企业如何做好EDM营销. 一.在EDM邮件内容中跟客户建立信任的关 ...

  10. visual studio 在windows远程调试 linux 程序 cout 输出乱码

    转载:https://www.cnblogs.com/findumars/p/6627255.html 反正是解决了. 以gcc为例,它有三个命令选项:-finput-charset=gb18030- ...