2-1 开始学习<p>标签

(1)开始学习<p>标签

如果想在网页上显示文章,这时就需要<p>标签了,把文章的段落放到<p>标签中。

语法:

<p>段落文本</p>

注意一段文字一个<p>标签,如在一篇新闻文章中有3段文字,就要把这3个段落分别放到3个<p>标签中。如下图所示。

<p>标签的默认样式,可以在上图中看出来,段前段后都会有空白,如果不喜欢这个空白,可以用css样式来删除或改变它。

代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> p标签</title>
</head>
<body>
<p>我的第一个段落</p>
<p>我的第二个段落</p>
</body>
</html>

(2)了解<hx>标签,为你的网页添加标题

文章的段落用<p>标签,那么文章的标题用什么标签呢?在本节我们将使用<hx>标签来制作文章的标题。

标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。

语法:

<hx>标题文本</hx> (x为1-6)

h1-h6标签的默认样式:

<h1>一级标题</h1>

<h2>一级标题</h2>

<h3>一级标题</h3>

<h4>一级标题</h4>

<h5>一级标题</h5>

<h6>一级标题</h6>

在浏览器中显示的样式:

从上面的图片可以看出标题标签的样式都会加粗,h1标签字号最大,h2标签字号相对h1要小,以此类推h6标签的字号最小。

代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> p标签</title>
</head>
<body>
<p>我的第一个段落</p>
<p>我的第二个段落</p>
<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>
</body>
</html>

(3)加入强调语气,使用<strong>和<em>标签

有了段落又有了标题,现在如果想在一段话中特别强调某几个文字,这时候就可以用到<em>或<strong>标签。

但两者在强调的语气上有区别:<em> 表示强调,<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示,<strong> 用粗体表示。两个标签相比,目前国内前端程序员更喜欢使用<strong>表示强调。

语法:

<em>需要强调的文本</em>

<strong>需要强调的文本</strong>

如,在网上商城中,某产品的打折后的价格是需要强调的。如下图。

代码实现:

<div class = “p-price”>

<span>抢购价:</span>

<strong>$40.00</strong>

</div>

<em>的内容在浏览中显示为斜体,<strong>显示为加粗。如果不喜欢这种样式,没有关系,以后可以使用css样式去改变它。

代码实现:

代码:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>了不起的盖茨比</title>
</head>
<body>
    <p>1922年的春天,一个想要成名名叫<strong>尼克?卡拉威</strong>(托比?马奎尔Tobey Maguire饰)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。为了追寻他的美国梦,他搬入纽约附近一海湾居住。</p>
    <p>菲茨杰拉德,二十世纪美国文学巨擘之一,兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌,其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
</body>
</html>
时间: 2024-12-20 05:26:01

2-1 开始学习<p>标签的相关文章

Java学习——JSTL标签与EL表达式之间的微妙关系

原文总结的太好了,忍不住记录.转发. 原文地址:http://blog.csdn.net/u010168160/article/details/49182867 目录(?)[-] 一EL表达式 EL相关概念 EL基本格式 EL语法组成-标识符 PS使用EL的时候默认会以一定顺序pageContextrequestsessionapplication搜索四个作用域将最先找到的变量值显示出来 开启和关闭EL表达式 二JSTL标签库 相关概念 JSTL标签库分类 JSTL的优点 为什么要用JSTL 使

html5的学习—-注释标签&lt;! -- 注释内容 --&gt;

注释标签:标签和标签里的注释内容都不会在页面上显示 格式:<!-- 这是注释--> 用法:对html代码的解释,方便自己及其它人对代码的理解和以后的维护 实例用法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&qu

HTML基础学习1——标签

学海无涯,学习总是一步一步脚踏实地的前进,而基础学习就是起跑前的准备,当然就显得尤为重要. 学习HTML语言更是如此. 推荐开发工具: 1.Webstorm 2.Sublime text 3.HBuilder 4.Eclipse 5.Visual Stdio 一.网页的本质 网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言.公共网关接口.组件等),可以创造出功能强大的网页. 二.超文本标记语言 超文本标记语言(HTML)是为“网页创建和其它可在网页浏览器中看到的信息”设

html学习之——标签语义化

html语义化在前端学习中会经常出现,下面对html语义化做个总结 一.什么是HTML语义化 HTML语义化总的来说就是用正确的标签做正确的事.围绕着一些标签展开,如h1-h6.把适当的标签用在合适的地方.是页面结构更加的清晰. 二.html语义化有什么作用 1.使用html语义化,能使页面结构更清晰,便于解析. 2.有利于SEO.搜索引擎爬虫依赖于html标签来确定上下文和关键字权重. 3.使用html语义化,在没有css样式的时候页面也能正确清晰的呈现 4.有利于各种设备的解析,如盲人阅读器

HTML学习笔记——标签

最近开始学习前端的一些知识,了解了一下Html和CSS. HTML:是网页内容的载体,它负责的是网页的内涵,也就是网页要呈现的内容,包括了图片,视频还有文字.是网页要加载的东西: CSS:是样式表现,也就是网页好不好看就是它负责的.用来改变内容的外观: JavaScript是用来实现网页的特效,如鼠标滑过表格背景的颜色改变.还有新闻图片的轮换.可以实现交互,动画. HTML标签: 标签的特点: 标签由英文尖括号<和>括起来: 一般是成对出现.分为开始标签和结束标签:结束标签比开始标签多了一个/

JavaWeb学习----JSTL标签库

一.JSTL简介: JSTL全名为JavaServer Pages Standard Tag Library,中文名称为JSP标准标签函数库,目前最新的版本为1.2.JSTL是由JCP(Java Community Process)所指定的标准规格,它主要提供给Java Web开发人员一个标准通用的标签函数库. Web 程序开发人员能够利用JSTL和EL来开发Web程序,取代传统直接在页面上嵌入Java程序(Scripting)的做法,以提高程序可读性.维护性和方便性. 既然是库文件,那我们就要

2016/01/14开始学习git:标签管理:操作标签

一.删除本地标签 如果标签打错了,也可以删除:git tag -d v0.1 因为创建的标签都只存储在本地,不会自动推送到远程.所以,打错的标签可以在本地安全删除. 二.推送标签如果要推送某个标签到远程,使用命令git push origin <tagname>:git push origin v1.0或者,一次性推送全部尚未推送到远程的本地标签:git push origin --tags 三.删除远程标签如果标签已经推送到远程,要删除远程标签就麻烦一点,先从本地删除:git tag -d

2016/01/14开始学习git:标签管理:创建标签

标签也是版本库的一个快照指向某个commit的指针(分支可以移动,标签不能移动) 切换到需要打标签的分支上git tag <name>就可以打一个新标签: $ git tag v1.0 git tag查看所有标签: $ git tagv1.0 打之前提交的版本的commit需要当时的commit ID$ git tag v0.9 93ddf60 查看tag$ git tagv0.9v1.0 标签不是按时间顺序列出,而是按字母排序的.可以用git show <tagname>查看标签

html5基础学习(标签)

标签: <!--...-->注释 <!DOCTYPE>申明文档规范,在html5中是<!DOCTYPE HTML> <a>超链接,用法示例:<a href="https://www.baidu.com" target="_back">baidu</a> <a>的属性: <audio></audio>音频 <video></video>视