Article Directory
foreword
The purpose of this article is to write an HTML page with hyperlinks, which include navigation links within the page and links to jump to other web pages. The display effect is as follows:
In order to successfully complete the production of the above webpage, please read the following content carefully.
1. HTML links: web pages with hyperlinks
Related knowledge
concepts
Click on the content of the a element to open the Baidu search page.
Among them, the href attribute specifies the target of the hyperlink, which jumps to Baidu in this example.
Attribute
href Attribute
The href attribute is the most important attribute of a hyperlink, which is used to specify the URL of the hyperlink target.
A typical hyperlink format is as follows:
<a href="URL">
Among them, there are three types of target URLs:
1. Anchor URL (anchor URL): point to a certain location on the same page;
2. Relative URL (relative URL): point to different files on the same website;
3. Absolute URL (absolute URL): point to another website.
hint:
- URL: Uniform Resource Locator, Uniform Resource Locator;
- Why is it called an anchor URL?
The meaning of anchor is taken from the anchor on the ship. After the ship sinks the anchor to the bottom of the water, if the ship drifts with the water, as long as the chain of the anchor is pulled, it will return to the anchored position. Similarly, you can return to the specified location by clicking the anchor link in html.
What are the actual effects of these three links? Let us deepen our understanding through three sets of examples.
Anchor URL Example: Creating Intra-Page Navigation
<body>
<h1>HTML 入门</h1>
<h2>本页目录</h2>
<ul>
<li><a href="#toc1">简介</a></li>
<li><a href="#toc2">第1关</a></li>
<li><a href="#toc3">第2关</a></li>
</ul>
<h2 id="toc1">简介</h2>
<p>HTML(Hypertext Markup Language，超文本标记语言)是一种用于创建Web页面和Web应用的标准化标记语言。
在CSS(Cascading Style Sheets，级联样式表单)和JavaScript的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台。</p>
<h2 id="toc2">第1关</h2>
<p>初识HTML：简单的Hello World网页</p>
<h2 id="toc3">第2关</h2>
<p>HTML链接：带超链接的网页</p>
<hr>
<p><a href="#">回到顶部</a></p>
</body>
The display and operation effects are as follows:
Line 5:
<a href="#toc1">简介</a>
Defines an anchor link pointing to the #toc1 target. Therefore, after clicking, it will locate the 10th row:
<h2 id="toc1">简介</h2>
The location where the id attribute value is toc1.
Therefore, the complete pair of in-page navigation is written as:
<a href="#id值内容">简介</a>
<开始标签 id="id值内容">内容<结束标签>
In addition, when href="#", it returns to the top position of the web page by default.
Relative URL example: Jump to another page of the same website
<body>
<h2>主页</h2>
<h3>网站导航：</h3>
<ul>
<li><a href="./home.html">主页</a></li>
<li><a href="./blog.html">博客</a></li>
<li><a href="./project.html">项目</a></li>
<li><a href="./about.html">关于我</a></li>
</ul>
</body>
The display and operation effects are as follows:
In the above example, because home.html, blog.html, project.html and about.html are all in the same folder; so line 6:
<a href="./blog.html">博客</a>
./blog.html links to the blog.html page in the same folder.
What do we mean by relative URL?
Is the URL relative to the home.html path of the current web page. . represents the current path, so ./blog.html represents the blog.html web page under the current path.
Absolute URL example: Jump to another web page
<body>
<p>你可以使用搜索引擎，例如
<a href="https://www.google.cn" title="google搜索">Google</a>、
<a href="https://www.baidu.com" title="Baidu搜索">Baidu</a>、
<a href="https://www.bing.com" title="bing搜索">Bing</a>等，搜索网络信息。</p>
</body>
The display and operation effects are as follows:
the absolute URL specifies the complete path of the web page.
Sending emails
We can also set the href attribute value to mailto: email address, in this way, the email application can be invoked and emails will be sent to the corresponding address.
For example:
<p>发送邮件到：<a href="mailto:[email protected]">someone</a>
target attribute: Where to open the link
The target attribute specifies where to open the hyperlink.
A common example is as follows:
<p><a href="https://en.wikipedia.org/wiki/HTML" target="_blank">HTML</a>
Among them, we specified target="_blank", so after clicking, the link will be opened in a new tab.
Programming test (1):
Please edit and modify the HTML page directly in the Begin-End area. The specific requirements are:
Reference code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML链接</title>
<meta name="description" content="HTML链接知识讲解">
<meta name="keywords" content="HTML, Link">
</head>
<!--------- Begin-------->
<body>
<h1>HTML 入门</h1>
<h2>本页目录</h2>
<ul>
<li><a href="#toc1">简介</a></li>
<li><a href="https://en.wikipedia.org/wiki/CSS">第1关</a></li>
<li><a href="#toc3">第2关</a></li>
</ul>
<h2 id="#toc3">简介</h2>
<p>
<a href="https://en.wikipedia.org/wiki/HTML"target="_blank"HTML</a>(Hypertext Markup Language，超文本标记语言)是一种用于创建Web页面和Web应用的标准化标记语言。在
<a href="https://en.wikipedia.org/wiki/CSS"target="_blank">CSS</a>(Cascading Style Sheets，级联样式表单)和
<a href="#toc3"target="_blank">JavaScript</a>的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台。</p>
<p>自1995年HTML2.0面世，HTML陆续推出了得到广泛应用的HTML3.2和HTML4.0标准，2014年HTML5标准的面世使其在多媒体和移动性方面得到了全面提升，使HTML迎来了新的爆发式发展。</p>
<h2 id="toc2">第1关</h2>
<p>初识HTML：简单的Hello World网页</p>
<h2 id="toc3">第2关</h2>
<p>HTML链接：带超链接的网页</p>
<hr>
<p>若需帮助，请发送问题到<a href="mailto:[email protected]">E-Mail</a>。</p>
<p><a href="#">回到顶部</a></p>
</body>
<!--------- End-------->
</html>
The effect shows:
2. HTML titles and paragraphs: Internet article pages
The task of this level is to complete a well-formatted article webpage. Through this level, you will learn titles, paragraphs, text formatting and citations, and text-related tags.
The display effect of this webpage is shown in the figure below:
In order to successfully complete the production of the above webpage, please read the following content carefully.
Examples of rating headings
are as follows:
<body>
<h1>书籍标题</h1>
<h2>第一章</h2>
<h3>第一节</h3>
<h4>重点 1</h4>
<h5>1.1 标题</h5>
<h6>1.1.1 标题</h6>
</body>
The display effect is shown in the figure:
paragraph and line break
As you can see in the previous example, we use the p element to define a paragraph. The p element is one of the most commonly used elements in HTML.
Examples are as follows:
Example 1.
<p>超文本标记语言(HTML)是一种标准化的用来创建Web页面和Web应用的标准化的标记语言。在级联样式表单(CSS)和JavaScript的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台。</p>
Example 2.
<p>超文本标记语言(HTML)是一种标准化的用来创建Web页面和Web应用的标准化的标记语言。
在级联样式表单(CSS)和JavaScript的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台</p>
The only difference between example 1 and example 2 is that in example 2 we break the line in the paragraph content. So, when actually displayed, will the line break be displayed?
The display effect is as shown in the figure below:
You can see that although we have changed the line in the paragraph content, it will not change the line when it is displayed. So what if we want to break a line in a paragraph?
Examples are as follows:
<p>超文本标记语言(HTML)是一种标准化的用来创建Web页面和Web应用的标准化的标记语言。<br>
在级联样式表单(CSS)和JavaScript的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台</p>
The display effect is shown in the figure:
List
We often use lists in our life, such as shopping lists and to-do items. In HTML, we can create unordered lists, ordered lists, and description lists, and one list can be nested within another.
Usually, a list is composed of a parent element and a child element. The parent element is used to specify the type of the list to be created, and the child element is used to specify the type of list item to be created.
The elements of the three list types are as follows:
Prompt:
- ol: order list；
- ul: unorder list。
Ordered List Example
We use an ordered list when the order of the list cannot be swapped at will. For example:
<body>
<p>健身房基本锻炼步骤</p>
<ol>
<li>热身</li>
<li>无氧运动(包括俯卧撑、仰卧起坐、器械锻炼等)</li>
<li>有氧运动(包括慢跑、单车、游泳、登山机等)</li>
<li>拉伸、放松</li>
</ol>
</body>
The display effect is shown in the figure:
Example of an unordered list
If the order of the list is not important, we use an unordered list. For example:
<body>
<p>购物清单</p>
<ul>
<li>酸奶</li>
<li>苹果</li>
<li>鸡胸肉</li>
<li>白炽灯泡</li>
</ul>
</body>
The display effect is shown in the figure:
description list example
When we need to describe the association between names (terms) that appear in groups and their values, we use the description list. For example:
<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>
The display effect is shown in the figure:
Text formatting
A web page usually contains text information. For different text types, we can select appropriate HTML semantic elements to mark. For example, the em element is used for emphasizing part of the content, and the small element is used for annotations, signatures, and other types of text.
Commonly used elements are as follows:
In HTML5, more emphasis is placed on semantics. Therefore, when we choose which elements to use for text markup, we should focus on semantics, not style.
What does that mean? Don't use the i element to make a piece of text slanted, but the text has the semantics of the i element. If you simply want to tilt the text, you should write CSS to change it.
Examples are as follows:
<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>
The display effect is as shown in the figure: there are also elements used to mark the reference content in the
reference HTML—the q and blockquote elements:
- The q element is used for short quotations, such as quotations within sentences;
- The blockquote element represents a stand-alone quote, which is displayed on a new line by default.
Examples are as follows:
<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>
The display effect is as shown in the figure:
Among them, the cite attribute of the blockquote element specifies the reference source link.
Programming test (2):
Please edit and modify the HTML page directly in the Begin - End area. The specific requirements are:
Reference Code:
<!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>
The effect shows:
3. HTML form daily consumption bill form display web page
The task of this level is to write a daily consumption bill form display webpage. Through this level, you will learn how to use HTML to write a concise and clear form.
The display effect of this page is shown in the figure below:
Relevant knowledge
In daily life, financial statements, calendars, etc. are often displayed in tables. Typically, tabular data consists of rows and columns.
The most basic table
In an HTML table, a table (table) is composed of rows (tr), each row is composed of cells, and the cells have header cells (th) and data cells (td).
A basic form is as follows:
<body>
<table>
<!-- 第一行 -->
<tr>
<td>第一行第一个单元格数据</td>
<td>第一行第二个单元格数据</td>
</tr>
<!-- 第二行 -->
<tr>
<td>第二行第一个单元格数据</td>
<td>第二行第二个单元格数据</td>
</tr>
</table>
</body>
The display effect is as shown in the figure:
Tip:
- tr: table row；
- th: table head；
- td: table data.
Table with border
In the first example, the table has no border, which is less obvious. So, how do you set up a table with a border?
The display effect is as shown in the figure:
However, such a border style is not very good-looking, we can modify the border style by writing CSS. This example serves as an understanding and will be studied in later courses.
Examples are as follows:
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<title>HTML – 简单表格</title>
<style type="text/css">
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid #000;
}
</style>
</head>
<body>
<table border="1">
<!-- 第一行 -->
<tr>
<td>第一行第一个单元格数据</td>
<td>第一行第二个单元格数据</td>
</tr>
<!-- 第二行 -->
<tr>
<td>第二行第一个单元格数据</td>
<td>第二行第二个单元格数据</td>
</tr>
</table>
</body>
</html>
The display effect is as shown in the figure:
In the following examples, we have added the table border style by default.
Table with header
In general, we will specify the header information of the table, which can be defined by using the header cell.
Examples are as follows:
<body>
<table width="400">
<!-- 表标题 -->
<caption>通讯录</caption>
<!-- 表头 -->
<tr>
<th scope="col">姓名</th>
<th scope="col">电话</th>
<th scope="col">备注</th>
</tr>
<tr>
<td>李雯</td>
<td>18012311234</td>
<td>家人</td>
</tr>
<tr>
<td>王谦</td>
<td>17812311234</td>
<td>同事</td>
</tr>
<tr>
<td>周佳</td>
<td>17413511234</td>
<td>高中同学</td>
</tr>
</table>
</body>
The display effect is as follows:
| value | meaning |
|---|---|
| col | The cell is the header of the column |
| row | Specifies that the cell is the header of the row |
| colgroup | The cell is the header of the column group |
| rowgroup | The cell is the header of the row group |
The concepts of column groups and row groups will be covered and used in the section Tables whose cells span multiple rows or columns.
An example of a table with a clearer structure
is as follows:
<body>
<table width="400">
<caption>运动会跑步成绩</caption>
<thead>
<!-- 表格头部 -->
<tr>
<th scope="col">长度</th>
<th scope="col">李雯</th>
<th scope="col">王谦</th>
<th scope="col">周佳</th>
</tr>
</thead>
<tbody>
<!-- 表格主体 -->
<tr>
<th scope="row">100米</th>
<td>14s</td>
<td>16s</td>
<td>13s</td>
</tr>
<tr>
<th scope="row">200米</th>
<td>26s</td>
<td>23s</td>
<td>25s</td>
</tr>
<tr>
<th scope="row">400米</th>
<td>70s</td>
<td>73s</td>
<td>69s</td>
</tr>
</tbody>
<tfoot>
<!-- 表格尾部 -->
<tr>
<th scope="row">总用时</th>
<td>110s</td>
<td>112s</td>
<td>107s</td>
</tr>
</tfoot>
</table>
The display effect is as shown in the figure:
Tables whose cells span multiple rows or columns
We often see tables like this:
The cells in it span multiple rows or columns. How to achieve it in HTML?
The above form code is as follows:
<body>
<table>
<caption>彩排安排</caption>
<thead>
<!-- 表格头部 -->
<tr>
<th scope="rowgroup">时间</th>
<th scope="col">周一</th>
<th scope="col">周二</th>
<th scope="col">周三</th>
</tr>
</thead>
<tbody>
<!-- 表格主体 -->
<tr>
<th scope="row">上午8点</th>
<td>开场舞</td>
<td colspan="2">歌曲串烧</td>
</tr>
<tr>
<th scope="row">上午9点</th>
<td>小品</td>
<td>相声</td>
<td rowspan="2">大型魔术</td>
</tr>
<tr>
<th scope="row">上午10点</th>
<td>杂艺表演</td>
<td>乐队歌曲</td>
</tr>
</tbody>
</table>
</body>
In this example, in row 7 of the table header, scope="rowgroup" specifies that the cell is the header of the row group. In the table, the third and fourth columns of row 3 are merged cells. We set colspan="2" in row 18, indicating that the cell spans two columns; similarly, row 24 sets rowspan="2" Indicates that the cell spans two rows.
Therefore,
to set the cell to span multiple rows, just set the attribute rowspan="n";
to set the cell to span multiple columns, just set the attribute colspan="n".
n is the number of rows or columns the cell will span.
Programming test (3):
Please edit and modify the HTML page directly in the Begin - End area, the specific requirements are:
Reference Code:
<!DOCTYPE html>
<html>
<!--------- Begin-------->
<head>
<meta charset="utf-8">
<title>HTML表格</title>
<meta name="description" content="HTML表格知识讲解">
<meta name="keywords" content="HTML,表格, Table">
<style type="text/css">
table {
border-collapse: collapse;
}
caption {
font-weight: bold;
margin-bottom: .5em;
}
th,
td {
padding: .5em .75em;
border: 1px solid #000;
}
tfoot {
font-weight: bold;
}
</style>
</head>
<body>
<table width="400" border="1" style="margin:auto">
<caption>日常消费账单</caption>
<thead>
<!-- 表格头部 -->
<tr>
<th align="left" scope=co1>消费项目</th>
<th align="right" scope=co1>一月</th>
<th align="right" scope=co1>二月</th>
</tr>
</thead>
<tbody>
<!-- 表格主体 -->
<tr>
<th align="left" scope="row">食品烟酒</th>
<td align="right">￥1241.00</td>
<td align="right">￥1250.00</td>
</tr>
<tr>
<th align="left" scope="row">衣物</th>
<td align="right">￥330.00</td>
<td align="right">￥594.00</td>
</tr>
<tr>
<th align="left" scope="row">居住</th>
<td align="right">￥2100</td>
<td align="right">￥2100</td>
</tr>
<tr>
<th align="left" scope="row">生活用品及服务</th>
<td align="right">￥700.00</td>
<td align="right">￥650.00</td>
</tr>
<tr>
<th align="left" scope="row">医疗保健</th>
<td align="right">￥150.00</td>
<td align="right">￥50.00</td>
</tr>
<tr>
<th align="left" scope="row">教育、文化和娱乐</th>
<td align="right">￥1030.00</td>
<td align="right">￥1250.00</td>
</tr>
<tr>
<th align="left" scope="row">交通和通信</th>
<td align="right">￥230.00</td>
<td align="right">￥650.00</td>
</tr>
<tr>
<th align="left" scope="row">其他用品和服务</th>
<td align="right">￥130.40</td>
<td align="right">￥150.00</td>
</tr>
</tbody>
<tfoot>
<!-- 表格尾部 -->
<tr>
<th align="left" scope="row">总计</th>
<th align="right">￥5911</th>
<th align="right">￥6694</th>
</tr>
</tfoot>
</table>
</body>
<!--------- End-------->
</html>
The effect shows:
Summarize
Life is a kind of rhythm, there must be light and shadow, left and right, sunny and rainy, the fun lies in the twists and turns that change but not violent, slightly darker, brighter, darker and more interesting, and brighter brighter.
The above is the relevant basic knowledge about HTML text, I hope it will be helpful to everyone!
If you find it rewarding, please like it below!