网页前端（HTML）

1，HTML 编辑器推荐

HBuilder X：HBuilderX-高效极客技巧 (dcloud.io)

下载完成后，会有文件夹，直接打开可显示如下内容

2，HTML基础

2.1HTML 标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。

实例

<h1>这是一个标题</h1>

<h2>这是一个标题</h2>

<h3>这是一个标题</h3>

 

2.2HTML 段落

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

实例

<p>这是一个段落。</p>

<p>这是另外一个段落。</p>

HTML 注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

注释写法如下:

实例

<!-- 这是一个注释 -->

HTML 折行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br> 标签：

实例

<p>这个<br>段落<br>演示了分行的效果</p>

2.3HTML 链接

HTML 链接是通过标签 <a> 来定义的。

实例

<a href="https://www.runoob.com">这是一个链接</a>

HTML 超链接（链接）

HTML使用标签 <a>来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签<a> 中使用了href属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。

访问过的链接显示为紫色并带有下划线。

点击链接时，链接显示为红色并带有下划线。

HTML 链接 - target 属性

使用 target 属性，你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档：

实例

<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a

直接打开新窗口

HTML 链接- id 属性

id 属性可用于创建一个 HTML 文档书签。

提示: 书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。

实例

在HTML文档中插入ID:

<a id="tips">有用的提示部分</a>

在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：

<a href="#tips">访问有用的提示部分</a>

或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：

<a href="https://www.runoob.com/html/html-links.html#tips">
访问有用的提示部分</a>

HTML 图像

HTML 图像是通过标签 <img> 来定义的.

实例

<img src="/images/logo.png" width="258" height="39" />

3，HTML 元素

HTML 文档由 HTML 元素定义

元素语法

HTML 元素以开始标签起始

HTML 元素以结束标签终止

元素的内容是开始标签与结束标签之间的内容

某些 HTML 元素具有空内容（empty content）

空元素在开始标签中进行关闭（以开始标签的结束而结束）

大多数 HTML 元素可拥有属性

4，HTML 属性

属性是 HTML 元素提供的附加信息。

HTML 属性

HTML 元素可以设置属性

属性可以在元素中添加附加信息

属性一般描述于开始标签

属性总是以名称/值对的形式出现，比如：name="value"

属性实例

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：

<a href="http://www.runoob.com">这是一个链接</a>

5，HTML 文本格式化

HTML 文本格式化

加粗文本

斜体文本

电脑自动输出

这是 下标 和 上标

HTML 表格

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

6，HTML无序列表

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

无序列表使用 <ul> 标签

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

---

HTML 有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

列表项使用数字来标记。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>