HTML

什么是HTML

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言,而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 提供了从大到小6级标题,分别是:<h1> ~ <h6>

  • HTML 标签是由尖括号包围的关键词,比如 <html>
  • HTML 标签通常是成对出现的,比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签

标题

标题(Heading)是通过 <h1>-<h6> 等标签进行定义的。

<h1> 定义最大的标题。<h6> 定义最小的标题。

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

注释

开始括号之后(左边的括号)需要紧跟一个叹号,结束括号之前(右边的括号)不需要。

<!-- This is a comment -->

文本格式

段落是通过 <p> 标签定义的。

<p>This is a paragraph</p>
<p>This is another paragraph</p>

如果您希望在不产生一个新段落的情况下进行换行(新行),请使用
标签:

<p>This is<br />a para<br />graph with line breaks</p>

如果你想在网页中展示一首诗或一些特别格式的文本,那么请使用pre标签。

<pre>hello
          world</pre>

一些文本格式化标签:

  • <b>定义粗体文本
  • <i>定义斜体文本
  • <em>定义着重文字
  • <strong>定义加重语气
  • <del>定义删除文字
  • <ins>定义插入字
  • <sub>定义下标字
  • <sup>定义上标字

超链接

我们通过使用 <a> 标签在 HTML 中创建链接。

有两种使用 <a> 标签的方式:

  1. 通过使用 href 属性 - 创建指向另一个文档的链接
<a href="url">Link text</a>
  1. 通过使用 name 属性 - 创建文档内的书签
<a href="#tips">提示</a>

图片及文件路径img

<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">
  1. src属性为要显示图片文件的位置 URL,即图片文件的路径
  2. alt属性当获取图片出现问题时显示的文字(占位符)

为获取图片文件,我们需要指定该文件位于何处,这称为文件路径。文件路径有相对路径和绝对路径两种

  • 图片文件与当前文档在同一目录中 <img src="picture.jpg">
  • 图片文件在当前目录下的images目录中 <img src="./images/picture.jpg">
  • 图片文件在上一级目录中<img src="../picture.jpg">

表格Table

表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格的表头使用 标签进行定义。

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

浏览器显示如下:
Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

列表List

HTML 支持有序、无序和定义列表

无序列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

无序列表始于 <ul> 标签。每个列表项始于 <li>。

<ul>
<li>Hello</li>
<li>World</li>
</ul>

在浏览器显示如下:

  • Hello
  • world

有序列表

同样,有序列表也是一列项目,列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

<ol>
<li>Hello</li>
<li>World</li>
</ol>

在浏览器显示如下:
1.Hello
2.World

定义列表

自定义列表不仅仅是一列项目,而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>Hello</dt>
<dd>Hello world</dd>
<dt>World</dt>
<dd>Hello World</dd>
</dl>

浏览器显示如下:
Hello
Hello world
World
Hello World

表单

HTML 表单用于搜集不同类型的用户输入。
<form> 元素

HTML 表单用于收集用户输入。

<form> 元素定义 HTML 表单

<input> 元素

<input> 元素是最重要的表单元素。

<input> 元素有很多形态,根据不同的 type 属性。

HTML 的元素可以以称为区块 或 内联的方式进行显示。

区块元素

区块元素在浏览器显示时,通常会以新行来开始(和结束)。如:<h1>, <pre>, <ul>, <<table>,<<div> 等。

<h2>区块元素</h2>
<div>Hello</div>
<div>World</div>
<p>单独一行</p>

内联元素

内联元素在显示时通常不会以新行开始。

例子:<b>, <<td>, <<a>, <<img>,<<span>, <<input>, <<td>, <<a>, <<img>

特殊字符

在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。

<p>有点&nbsp;&nbsp;&nbsp;</p>
<pre>
  &lt;h1&gt;一级标题&lt;/h1&gt;
<pre>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值