HTML标题与段落:网络文章网页
HTML标题与段落:网络文章网页
- 任务描述
- 相关知识
- 分级标题
- 段落与换行
- 列表
- 有序列表实例
- 无序列表实例
- 描述列表实例
- 文本格式化
- 引用
- 编程要求
- 测试说明
任务描述
本关任务是完成一个格式丰富的文章网页,你将通过本关学习标题、段落、文本格式化和引用等,与文本相关的标签。
本关网页显示效果如下图所示:
相关知识
分级标题
HTML提供了六级标题用于创建网页信息的层级关系。<h1>
定义重要等级最高的标题,之后<h2>
到<h6>
层级依次递减。
举例如下:
<body><h1>书籍标题</h1><h2>第一章</h2><h3>第一节</h3><h4>重点 1</h4><h5>1.1 标题</h5><h6>1.1.1 标题</h6>
</body>
显示效果如图:
提示:
- 注意请不要根据标题字体大小来选择级别,而应该根据内容。例如一本书的第一章是第二层级,但是有一部分人认为
<h2>
字体太大,从而选择<h3>
作为层级标题,这样做是不正确的。
段落与换行
如大家在之前的例子中看到的,我们使用p
元素定义段落。p
元素是HTML中最常用的元素之一。
举例如下:
例 1.
<p>超文本标记语言(HTML)是一种标准化的用来创建Web页面和Web应用的标准化的标记语言。在级联样式表单(CSS)和JavaScript的帮助下,HTML已经成功构建了一整套面向Web的开发与应用平台。</p>
例 2.
<p>超文本标记语言(HTML)是一种标准化的用来创建Web页面和Web应用的标准化的标记语言。在级联样式表单(CSS)和JavaScript的帮助下,HTML已经成功构建了一整套面向Web的开发与应用平台</p>
- 例1和例2唯一的不同在于,例2中我们在段落内容中换行了。那么,在实际显示时,会显示换行吗?
显示效果如下图:
大家可以看到,虽然我们在段落内容中换行了,但是显示时是不会换行的。那么如果我们想要在一个段落中换行要怎么做呢?
我们可以使用<br>
标签。
举例如下:
<p>超文本标记语言(HTML)是一种标准化的用来创建Web页面和Web应用的标准化的标记语言。<br>
在级联样式表单(CSS)和JavaScript的帮助下,HTML已经成功构建了一整套面向Web的开发与应用平台</p>
显示效果如图:
列表
- 生活中我们经常使用列表,例如购物清单、待办事项。在HTML中,我们可以创建无序列表、有序列表和描述列表,而且一个列表中可以嵌套另一个列表。
通常,列表都是由父元素和子元素构成的,父元素用于指定要创建的列表的类型,子元素用于指定要创建的列表项目类型。
类型 | 父元素 |
---|---|
有序列表 | ol |
无序列表 | ul |
描述列表 | dl |
类型 | 子元素 |
---|---|
有序列表 | li |
无序列表 | li |
描述列表 | dt,dd |
三种列表类型组成元素如下:
提示:
ol: order list;
ul: unorder list。
有序列表实例
如果列表顺序是不能随意交换时,我们使用有序列表。例如:
<body><p>健身房基本锻炼步骤</p><ol><li>热身</li><li>无氧运动(包括俯卧撑、仰卧起坐、器械锻炼等)</li><li>有氧运动(包括慢跑、单车、游泳、登山机等)</li><li>拉伸、放松</li></ol>
</body>
显示效果如图:
无序列表实例
如果列表顺序不重要时,我们使用无序列表。例如:
<body><p>购物清单</p><ul><li>酸奶</li><li>苹果</li><li>鸡胸肉</li><li>白炽灯泡</li></ul>
</body>
显示效果如图:
描述列表实例
当我们需要描述成组出现的名称(术语)及其值之间的关联时,我们使用描述列表。例如:
<body><p>HTML里程碑</p><dl><dt>1995年11月24日</dt><dd>HTML2.0发布,对应的IETF文档为RFC 1866</dd><dt>1997年1月14日</dt><dd>HTML 3.2以W3C推荐标准的形式发布。 随后的HTML标准都由W3C组织发布。<dt>1997年12月18日</dt><dd>HTML 4.0发布。</dd><dt>2014年10月28日</dt><dd>HTML5 发布。</dd><dt>2016年11月1日</dt><dd>HTML 5.1发布。</dd></dl>
</body>
显示效果如图:
文本格式化
一个网页中通常包含了文本信息,对于不同的文本类型,我们可以选择合适的 HTML 语义化元素进行标记。例如,em
元素用于标记强调部分内容,small
元素用于注解、署名等类型的文本。
常用的元素如下:
- 在HTML5中,更强调语义。所以,我们在选择使用何种元素进行文本标记时,应该注重于语义,而不是样式。
什么意思呢?不要为了让一段文字倾斜而使用i元素,而是这段文字有i元素的语义。如果单纯想要文字倾斜,应该编写CSS进行改变。
举例如下:
<body><h1>论语学而篇第一</h1><p><small><b>作者:</b><abbr title="名丘,字仲尼">孔子<sup><a href="#">1</a></sup></abbr>(<time>前551年9月28日-前479年4月11日</time>)</small></p><h2>本篇引语</h2><p>《学而》是《论语》第一篇的篇名。《论语》中各篇一般都是以第一章的前二三个字作为该篇的篇名。《学而》一篇包括16章,内容涉及诸多方面。其中重点是<strong>「吾日三省吾身」;「节用而爱人,使民以时」;「礼之用,和为贵」以及仁、孝、信等</strong>道德范畴。</p><h2>原文</h2><p>子曰:「<mark>学而时习之,不亦说乎?</mark>有朋自远方来,不亦乐乎?人不知,而不愠,不亦君子乎?」 </p></body>
显示效果如图:
引用
HTML中也有用于标记引用内容的元素——q
和blockquote
元素:
q
元素用于短的引用,如句子里面的引用;blockquote
元素表示单独存在的引用,它默认显示在新的一行。
举例如下:
<body><h1>W3C</h1><p><dfn>W3C</dfn> (World Wide Web) 万维网联盟创建于1994年。它是<q>Web技术领域最具权威和影响力的国际中立性技术标准机构</q>。</p><p>其官方定义</q>为:</p><blockquote cite="https://www.w3.org/">The World Wide Web Consortium (W3C) is an international community that develops open standards to ensure the long-term growth of the Web.</blockquote>
</body>
显示效果如图:
其中,blockquote
元素的cite
属性指定了引用来源链接。
编程要求
请在右侧的编辑器中的Begin - End区域内直接编辑修改HTML页面,具体要求是:
- 补全第17行strong标签,使“超文本系统”文本重点显示;
- 在第31和第32行中新添一项HTML 5.1历史定义,
<dt>
内容为:“2016年11月1日”
<dd>
内容为:“HTML 5.1发布。”; - 完善35和41行标签,使其中内容成为有序列表。
测试说明
补充完代码后,点击测评,平台会对你编写的代码进行测试,当你的结果与预期输出一致时,即为通过;
- 孩子,我们并不只活在我们所属的时代里,我们身上也扛着历史。不要忘记你在这个房间内看到的每一样东西都曾经是崭新的。
代码文件:
<!DOCTYPE html><head><meta charset="UTF-8" /><title>HTML – 维基百科</title>
</head><!--------- Begin--------><body><h1>HTML</h1><p>超文本标记语言(HTML)是一种标准化的用来创建Web页面和Web应用的标准化的<a href="https://en.wikipedia.org/wiki/Markup_language" title="Markup language" target="_blank">标记语言</a>。 在级联样式表单(CSS)和JavaScript的帮助下,HTML已经成功构建了一整套面向Web的开发与应用平台<sup><a href="#ref1">[1]</a></sup>。</p><h2>历史</h2><h3>开发过程</h3><p>1980年,物理学家<a href="https://en.wikipedia.org/wiki/Tim_Berners-Lee" title="Tim Berners-Lee" target="_blank">Tim Berners-Lee</a>,<a href="https://en.wikipedia.org/wiki/CERN" title="CERN" target="_blank">CERN</a>的一位项目负责人,提出并实现了<a href="https://en.wikipedia.org/wiki/ENQUIRE" title="ENQUIRE" target="_blank">ENQUIRE</a>系统。该系统的目的是为CERN研究人员提供一种使用和分享文档。1989年, Berners-Lee写了一个备忘录,提出了基于Internet-based<strong>超文本系统</strong><sup><a href="#ref2">[2]</a></sup>。</p><h3>HTML里程碑</h3><dl><dt>1995年11月24日</dt><dd>HTML2.0发布,对应的IETF文档为<a class="external mw-magiclink-rfc" rel="nofollow" href="https://tools.ietf.org/html/rfc1866" target="_blank">RFC 1866</a>。</dd><dt>1997年1月14日</dt><dd>HTML 3.2以<a href="https://en.wikipedia.org/wiki/W3C_Recommendation" class="mw-redirect" title="W3C Recommendation" target="_blank"><abbr title="World Wide Web Consortium">W3C</abbr>推荐标准</a>的形式发布。 随后的HTML标准都由W3C组织发布。</dd><dt>1997年12月18日</dt><dd>HTML 4.0发布<sup><a href="#ref3">[3]</a></sup>。</dd><dt>2014年10月28日</dt><dd>HTML5 发布。</dd><dt>2016年11月1日</dt><dd>HTML 5.1发布。</dd></dl><h2>参考文献</h2><ol><small><li id='ref1'>Flanagan, David. <i>JavaScript - The definitive guide</i> (6 ed.). p. 1. "JavaScript is part of the triad of technologies that all Web developers must learn: HTML to specify the content of web pages, CSS to specify the presentation of web pages, and JavaScript to specify the behaviour of web pages."</li><li id="ref2">Tim Berners-Lee, "Information Management: A Proposal." CERN (March 1989, May 1990). </li><li id="ref3">"HTML 4.0 Specification — W3C Recommendation — Conformance: requirements and recommendations". World Wide Web Consortium. December 18, 1997. Retrieved July 6, 2015.</li></small></ol>
</body><!--------- End--------></html>
HTML标题与段落:网络文章网页相关推荐
- html5文本与段落简介,认识HTML标题和段落元素
标题和段落元素属于"块元素","块元素"在网页中的效果是该元素的内容对于其前后元素的内容都另起一行.因此,每个标题和段落元素在网页中都单独占一行.例如下面的HT ...
- 如何利用SEO技术设置文章网页标题
如何利用SEO技术设置文章网页标题 做SEO优化的朋友都知道一个基本原则,那就是网站最核心的权重排名就是集中在网站首页,而影响排名最大的因素就是网站标题,一个设置标题得当的网站,如果关键字竞争不是很大 ...
- 万字大章_标题、段落、链接、图像等_HTML入门必备基础
万字大章_HTML入门必备基础 HTML篇_第四章.HTML基础 一.标题 二.段落 三.链接 3.1文本超链接 3.2锚点链接 3.3功能性链接 四.图像 4.1 图像标签(<img>) ...
- html普通文本和段落文本,HTML --- 网页文本与段落信息组织
网页文本与段落信息组织 1. 文本基本标记 1.1 字体属性face 语法: ... 1.2 字号属性size 语法: ... 1.3 颜色属性color 语法: ... 2 标题元素 语法: - 标 ...
- html标题和段落标记,浅谈html标题,段落,换行,水平线,特殊字符
原标题:浅谈html标题,段落,换行,水平线,特殊字符 标题 XML/HTML Code复制内容到剪贴板 一级标题 二级标题 对齐方式有left,center,right三种,缺省表示left 段落 ...
- html文字段落 带标题,HTML标题跟段落
HTML标题和段落 HTML标题 通过 - 等标签进行定义 一标题 二标题 三标题 四标题 五标题 六标题 效果:如我们所见,标题是粗体或大号的文本,所以需要注意的是,要语义化的使用标题标签,即仅仅把 ...
- 软件测试体系学习及构建(6)-HTML之元素、属性、标题、段落
(6)-HTML之元素.属性.标题.段落 1 元素 1.1 语法 1.2 元素嵌套 1.3 空元素 1.4 书写注意事项 1.5 HTML标签 2 属性 2.1 属性说明 2.2 示例 2.3 属性举 ...
- OpenFlow入门资料汇总(OpenFlow、SDN、NOX等,多为网络文章)
声明:此篇文章为转载,转载原文地址为:http://blog.csdn.net/jincm13/article/details/7825754 很好的OpenFlow方向的网络文章汇总,阅读通篇能够对 ...
- html标题和段落一样大,HTML标题和段落
HTML 标题和段落 HTML 标题 标题(Heading)是通过 - 标签进行定义的. 定义最大的标题. 定义最小的标题. 我是最大的 我是第二大的 我是第三大的 .... 我是最小的 注释: 浏览 ...
最新文章
- 调用.NET XML Web Services返回数据集合一
- 飞机大战boss入场代码_他又来了,BOSS直聘和国足谁先出线卡塔尔?
- 每日一皮:叫你们别上泰坦尼克,嗓子都喊哑了!没一个听我的,最后还把我......
- 目前有量子计算机,中国“祖冲之”刚刚成为当前最强大的量子计算机
- 又掌握了一项新技能 - 断点调试 Gradle 插件
- Boost:ssl服务测试程序
- 软件工程——个人课程总结
- android4以上版本读写外置sd卡报错的解决办法
- IDEA代码行宽设置
- 【Android】移动端接入Cronet实践
- element ui 前台模板_element-ui 菜单模板封装(递归)
- 老工程师的CAD精髓
- 系统上电后 bootloader的执行流程
- 毫米波雷达器件ADC原始数据捕获
- 一招技巧解决360搜索结果页展示网站LOGO
- 无人机测量技术在房地一体项目中的应用
- 树莓派安装TP-link wn725n网卡驱动
- 超实用的 Vue 组件通信方式大汇总(8种)
- 马云的经典语录(转)
- bzoj3698: XWW的难题 有上下界的网络流
热门文章
- 【论文翻译 - RFID】射频全息图:利用商业化产品对移动射频标签进行实时高精度追踪
- 逐梦高新,智赢未来,第四届顺德高新区运动嘉年华正式拉开序幕
- QCustomplot之安装篇(一)
- 计算机硬件配置无法启动,因计算机磁盘硬件的配置问题,windows无法启动 急!急!急!...
- Agg在Windows下的编译与使用
- Linux网络编程7——epoll反应堆模型
- C语言程序设计-算数运算符、赋值运算符、逗号运算符及表达式
- 7-3 学习打卡(12.5)
- C++开发工程师学习路线
- Dynamic ARP Inspection