Web开发快速入门————HTML

欢迎来到HTML的世界

HTML（超文本标记语言）是构建网页的基础。它允许我们在网页上展示文本、图片、视频和其他类型的内容，并通过超链接将它们连接起来。无论是想成为一名前端开发者，还是希望简单了解HTML的基础知识，本篇博客将为你提供一个快速入门HTML的指南。

什么是HTML

HTML是HyperText Markup Language（超文本标记语言）的缩写，是一种用于创建和组织网页内容的标记语言。简单的说，HTML就是构建一套标记符号和语法规则，将文字、图像、声音等元素按照一定的标准要求排放，形成一定的标题,段落和列表等单元。

HTML开发工具推荐

1.文本编辑器

HTML文件可以直接使用文本编辑器（记事本）进行编写。编写完成后，将文本的扩展名改为.html，就可以成为HTML文件，打开文件会跳转到浏览器进行浏览。

2.vscode

相较于文本编辑器，在vscode上编辑会更加方便，vscode可以自动换行，省去了我们代码排版的时间，提高了代码的可读性。

下面演示怎么在vscode上创建一个HTML文件

1.打开vscode点击文件

2.打开事先创建好的名为HTML的文件夹

3.新建文件，写上后缀.html,就可以开始编辑了

HTML基本结构

HTML文档的基本结构如下：

<!DOCTYPE html>
<html>
<head>
    <title>网页标题</title>
</head>
<body>
    <!-- 在这里编写网页内容 -->
</body>
</html>

让我们来逐步了解每个部分的作用：

<!DOCTYPE html>：这是HTML5文档类型声明，告诉浏览器我们正在使用HTML5版本的语法。
<html>：HTML文档的根元素，其中包含了整个HTML文档的内容。<html></html>标签对向浏览器标明lHTML文件开始和结束的位置。HTML文档中所有的内容都应该在这两个标签之间。
<head>：这个部分包含了一些元数据，比如标题（<title>标签用于定义网页标题，会显示在浏览器的标签页上）、引入外部样式表和脚本等。
<body>：这个部分包含了网页的可见内容，比如段落、图片、链接等。

1.头部标签<head>

定义在文档的头部，所有头部元素的容器，用于描述文档的属性信息。

包含于<head>标签中的元素，可以指定网页的标题，声明使用的脚本语言，引入外部样式表，以及提供网页的元素信息。

2.标题标签<title>

<title>元素用于定义文档的标题。浏览器将<title>元素的内容放置在浏览器窗口的标题栏上。当网页加入到用户的链接列表收藏夹或书签列表时，标题将成为该文档链接的默认名称。对于搜索引擎而言，<title>元素是一个非常重要的标签，网页的访问主要通过搜索引擎的引导，除非已经知道网址或名称。所以设置一个好的<title>元素非常重要,既要考虑到搜索引擎又要筛选网页中若干重要的关键字。

使用<title>标签设置网页标题

<!DOCTYPE html>
<html>
    <head>
        <title>title设置网页标题</title>
    </head>
    <body>
        请看网页标题栏设置的效果
    </body>
</html>

3.元信息标签<meta>

1.设置关键字和网页说明来帮助主页被各大搜索引擎搜索到。

2.定义页面语言的编码方式，使浏览器可以通过相应的方式正确解读网页中的语言。

3.自动刷新并跳转到新的页面。

4.通过设置网页到期时间控制页面缓冲，使浏览器获取新页面。

一个HTML页面中可以包含多个<meta>元素。这个标签包含在head元素中其中的内容定义与文档相关联的名称值对。

如

<meta name =参数名 content=参数值>
<meta http-equiv=参数名 content=参数值>

当涉及<meta>标签的属性时，以下是一些常用的属性及其用途：

1. charset属性

用途：指定HTML文档的字符编码，确保浏览器正确解释文档中的字符，避免出现乱码问题。

示例：

<meta charset="UTF-8">

2. name和content属性

用途：用于提供各种元数据信息,需要注意的是description网页描述为自然语言而不是罗列的关键词
示例：

<meta name="keywords" content="HTML, CSS, JavaScript, Web开发">
<meta name="description" content="这是一个介绍HTML网页。">
<meta name="author" content="Super 易">

3. http-equiv和content属性

用途：用于模拟HTTP头部字段，常用于设置网页的缓存、刷新和重定向等功能。
示例：

 <meta http-equiv="refresh" content="5;url=https://example.com/">
 <meta http-equiv="cache-control" content="no-cache">

4. viewport属性

用途：用于控制移动设备上网页的视窗设置，实现响应式设计和适配不同屏幕尺寸的设备。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

5. http-equiv属性和refresh指令

用途：用于自动刷新页面，指定一段时间后自动跳转到指定URL。
示例：

<meta http-equiv="refresh" content="10;URL=https://example.com/">

6. http-equiv属性和cache-control指令

用途：用于设置缓存策略，控制网页在浏览器中的缓存行为。
示例：

<meta http-equiv="cache-control" content="no-cache">

7. robots属性

用途：向搜索引擎指示网页是否被索引以及是否遵循链接，控制搜索引擎爬虫的行为。
示例：

<meta name="robots" content="index,follow">

8. referrer属性

用途：控制请求头中的Referrer-Policy字段，指定浏览器在请求中发送哪些referrer信息。
示例：

<meta name="referrer" content="origin-when-cross-origin">

9. theme-color属性

用途：指定移动设备上浏览器的主题颜色，用于设置浏览器的外观。
示例：

<meta name="referrer" content="origin-when-cross-origin">

这里列出的是一些常用的<meta>标签属性，它们可以在HTML文档的<head>部分使用，以提供有关网页的元数据信息、控制浏览器行为和移动设备上的一些设置。在实际应用中，我们可以根据需要选择适当的属性来优化网页的显示效果和用户体验。

4.主体标签<body>

在HTML中，<body>标签表示网页的主体内容，是一个容纳网页实际显示内容的部分。<body>标签没有特定的属性，但可以包含许多其他标签和属性来定义和组织网页的可见内容。下面是一些常见在<body>标签中使用的标签和属性：

1. 背景属性：

background：设置网页的背景图片。 Background属性的取值为URL地址。互联网上的每个文件都有一个唯一的URL，因此可以通过background属性值制指定的URL地址找到将被设置为网页背景的图片。

bgproperties :是控制body元素背景的一个属性。当属性值为fixed时，它将背景图片冻结在浏览窗口，背景图不会随着其他窗口内容而滚动，即形成水印效果。这个效果必须跟background属性扩展一起使用才有效。如果background属性值为空字符串背景图片就会随着网页其他内容滚动而滚动。空字符串为该属性的默认值如果不设置属性值默认为空字符串。

bgcolor：设置网页的背景颜色。颜色的属性值有三种设置方法。

1: 颜色名称。规定颜色值为颜色名称的颜色。如bgcolor="orange"。

2:十六进制。如bgcolor="#CCFFCC"。

3:rgb值。如bgcolor="rgb(250,0,0)"。

 <body background="background.jpg"bgproperties="fixed">
 <body bgcolor="#f0f0f0">

示例：

2. 文字属性：

- text：设置网页文本的颜色。
- link：设置链接文本的颜色。
- alink：设置活动链接文本（鼠标点击时）的颜色。
- vlink：设置已访问链接文本的颜色。

示例：

<body text="#333333" link="#0000FF" alink="#FF0000" vlink="#660066">

3. 文本样式：

<h1> - <h6>：设置不同级别的标题文本，从大到小依次排列。align属性规定文本的排列方式取值为left,center,right,justify。

<strong>或<b>：加粗文本。

<em>或<i>：斜体文本。

<sup>或<sub>:上下标文本。包含在sup元素或sup元素中的内容将会以文本流中字符高度的一半来显示。字体和字号都是一样的。

<u>:下划线标签。

<pre>:预格式化文本，背包围在<pre>元素中的文本会保留空格和换行符，文本呈现等宽字体

<hr>:水平线标签，可以通过size设置水平线高度，<width>设置水平线宽度，<align>设置排列方式，<color>设置颜色

示例：

<body>
<h1> align ="center"这是一个标题,居中显示。</h1>
<p>这是一个段落，
<strong>加粗文本</strong>，
<em>斜体文本</em>。
<sup>上标文本</sup>，
<sub>下标文本</sub>，
<u>下划线文本</u>
</p>
</body>

4. 链接：

- <a>：创建超链接，可以使用`href`属性指定链接的URL。
- target：设置链接在何处打开，常用值有`_blank`（在新标签页中打开链接）和`_self`（在当前标签页中打开链接）等。

示例：

 <body>
    <p>查看我们的<a href="https://www.example.com" target="_blank">网站</a>。</p>
 </body>

5. 列表：

- <ul>：无序列表。
- <ol>：有序列表。
- <li>：列表项。

示例：

   <body>
      <h3>水果：</h3>
      <ul>
         <li>苹果</li>
         <li>香蕉</li>
         <li>梨子</li>
      </ul>
   </body>

6. 图片：

- <img>：插入图片，可以使用`src`属性指定图片的URL，`alt`属性为图片添加替代文本（当图片无法加载时显示）。

示例：

<body>
      <img src="image.jpg" alt="美丽的风景">
</body>

7.边距属性margin

-<topmargin>:设置到页面顶端的距离

-<leftmargin>：设置到页面左边的距离

-<rightmargin>：设置到页面右端的距离

-<bottommargin>：设置到页面底边的距离

示例：

<body topmargin="value" leftmargin="value" rightmargin="value" bottom="value">

距离的单位有两种：

1.百分比：定义了相对的距离，即基于父对象总高度或者总宽度的百分比距离

2.长度值：定义了绝对距离，即一个固定的距离，单位可以是px

8.注释标签

用于在HTML文档中对代码进行注释和说明

示例;

<!--注释内容-->

9.段落控制标签

<p>定义段落，自动换行。

<br>换行。br是一个空的HTML元素，没有结束标签，两个<br>的换行效果等于一个<p>的换行效果

<blockquote>插入换行和外边距

10.列表标签

<ol>有序列表使用<li>标签定义各列表项的值，通过<ol>标签中的type属性，设置列表项目符号类型

type属性值对应的项目符号
1	阿拉伯数字
a	小写英文字母
A	大写英文字母
i	小写罗马数字
I	大写罗马数字

<ul>无序列表，与有序列表相似

type属性值对应的项目符号
disc	实心圆
circle	空心圆
square	实心方块

<dl>定义列表标签使用<dt>规定要定义的项目，使用<dd>标签对项目进行解释

示例

<ol type="value">
   <li>列表项</li>
</ol>
<ul type="value">
   <li>列表项</li>
</ul>
<dl>
  <dt>项目1</dt>
  <dd>项目1解释</dd>
</dl>

5.超链接标签

1.路径

路径路径有两种。一个是绝对路径一个是相对路径。这里只介绍相对路径，相对路径。

使用方法：

1.如果在链接中源端点和目标端点位于同一目录下，则链接路径中只需指明目标端点的文件名称。

2.如果在链接中源端点和目标端点在不同目录下。就需要将目录的相对关系也表示出来。

3.如果链接指向的文件位于当前目录的子级目录中可以直接输入目录名称和文件名。

4.如果链接指向的文件没有位于当前目录的子级目录中则用“..”前目录的子级目录中则用“..”来表示当前位置的父级目录。利用多个该符号可以表示更高的父级目录。从而构建出目录的相对位置。

"./":当前目录

"../":代表上一层目录

”/":根目录

2.超链接标签<a>

1.<href>属性：用于指定超链接的URL。 href属性的值可以是任何有效文档的相对或绝对URL地址。

示例

<a href="URL">链接资源名称</a>

<id>属性：用于设置跳转标签,设置锚点

示例：

<h2 id="section1">第一部分</h2>
<p>这是第一部分的内容。</p>

<h2 id="section2">第二部分</h2>
<p>这是第二部分的内容。</p>

<a href="#section1">跳转到第一部分</a>
<a href="#section2">跳转到第二部分</a>

3.E-mail超链接

创建电子邮件超链接可以通过使用mailto: URI 方案来实现。当点击链接时，会自动打开用户默认的邮件客户端，并在新邮件中预填写收件人地址。

使用？来连接后续参数，其中参数CC指定抄送邮件地址。 BCC指定秘密抄送邮件地址。 Subject指定邮件标题，body指定正文内容，参数和参数之间通过&链接

以下是创建电子邮件超链接的示例：

<a href="mailto:[email protected]?subject=询问信息&[email protected]&[email protected]">发送邮件给我们</a>

6.多媒体标签

1.图像标签<img>

<img>标签是HTML中用于插入图像（图片）的元素。它允许在网页中显示图像，可以是JPEG、PNG、GIF等格式的图像文件。

src属性:指定图像文件的路径

alt属性:提供图像的替代文本，用于在图像无法加载时显示或为辅助技术提供信息。这是一个重要的可访问性实践，因为替代文本可以帮助屏幕阅读器用户了解图像内容。

width：指定图像的宽度。

height：指定图像的高度。

title：提供鼠标悬停在图像上时显示的文本。

border: 设置图片边框的宽度。

vspace: 指定图像与其他元素垂直方向的间距。

hspace:指定水平方向上图像与其他元素之间距离的像素数。

align: 指定图像与文本的对齐方式，其属性值分别为left，right，top middle and bottom。

示例：

<img src="image.jpg" broder="5" alt="一个图像" width="300" height="200" title="这是一个美丽的图像">

另外图片也可以作为超链接，点击后跳转到相关URL地址。方法，是将img元素置于超链接a元素之间。

<a href="https://www.example.com">
  <img src="image.jpg" alt="一个图像">
</a>

图像映射：

图像映射是将不同的链接关联到图像的特定区域。这意味着可以将一个图像分成多个不同的可点击区域，每个区域都可以链接到不同的URL。这在创建交互性丰富的图像时非常有用，比如地图、导航菜单等。

图像映射通常使用<map>和<area>标签来实现。下面是一个基本的图像映射的示例：

<!DOCTYPE html>
<html>
<head>
    <title>Image Map Example</title>
</head>
<body>
    <img src="your-image.jpg" alt="Image Map Example" usemap="#imagemap">
    
    <map name="imagemap">
        <area shape="rect" coords="0,0,100,100" href="link1.html" alt="Link 1">
        <area shape="circle" coords="150,150,50" href="link2.html" alt="Link 2">
        <area shape="poly" coords="250,50,300,100,200,100" href="link3.html" alt="Link 3">
    </map>
</body>
</html>

在上面的示例中：

<img>元素显示了您要创建映射的图像，通过src属性指定图像的URL。
<map>元素定义了映射区域，通过name属性指定一个唯一的名称，然后<area>元素定义了实际的可点击区域。
<area>元素的shape属性指定了区域的形状，可以是"rect"（矩形）、"circle"（圆形）或"poly"（多边形）。
coords属性定义了区域的坐标，具体的值根据不同形状而有所不同。
href属性指定了点击区域后要链接到的URL。
alt属性提供了鼠标悬停时的文本提示。

2.播放音频和视频

要在网页上播放音频和视频，可以使用 <audio>和 <video> 标签。这些标签允许嵌入音频和视频内容，同时还可以为播放器添加控制、样式和其他交互元素。下面是使用这些标签的基本示例：

播放音频：

<!DOCTYPE html>
<html>
<head>
    <title>Audio Example</title>
</head>
<body>
    <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>
</body>
</html>

<audio>标签用于嵌入音频，

controls属性会在播放器中显示控制按钮，让用户可以播放、暂停和调整音量。

<source> 标签用于指定音频文件的URL和文件类型。

播放视频：

<!DOCTYPE html>
<html>
<head>
    <title>Video Example</title>
</head>
<body>
    <video controls width="640" height="360">
        <source src="video.mp4" type="video/mp4">
        Your browser does not support the video element.
    </video>
</body>
</html>

<video> 标签用于嵌入视频，同样使用了 controls 属性以及 <source> 标签来指定视频文件的URL和类型。还可以通过设置 width 和 height 属性来定义视频播放器的宽度和高度。

不同的浏览器支持不同的音频和视频格式，可能需要提供多个 <source> 元素，以便在不同的浏览器上播放适当格式的媒体。

7.表格

在HTML中，表格是一种用于显示和组织数据的常见元素。表格由 <table> 元素定义，其内部使用 <tr> 元素表示表格行，而每行中的数据单元由 <td> 元素表示。

以下是一个三行三列的HTML表格示例：

<!DOCTYPE html>
<html>
<head>
    <title>Table Example</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
        <tr>
            <td>Data 1,1</td>
            <td>Data 1,2</td>
            <td>Data 1,3</td>
        </tr>
        <tr>
            <td>Data 2,1</td>
            <td>Data 2,2</td>
            <td>Data 2,3</td>
        </tr>
    </table>
</body>
</html>

<table> 标签定义了一个表格。
<tr> 标签定义了表格的行。每一行由一个或多个 <td> 元素组成，表示数据单元。
<th> 标签用于定义表格的表头单元格。表头通常会在表格顶部显示，用于描述每列的内容。
border 属性用于指定表格边框的宽度。您可以将其设置为 0 来移除边框，或设置其他值来调整边框的宽度。
<caption>：用于为表格添加标题。
<colgroup> 和 <col>：用于定义列的组合和样式。
<thead>、<tbody> 和 <tfoot>：用于将表头、正文和页脚部分分组。
<th> 和 <td> 可以包含更多内容，包括文本、图像、链接等。
rowspan和colspan:用于合并单元格，通过rowspan属性规定单元格可跨的行数,通过colspan属性规定单元格可跨列的是列数

<td属性="合并的行数或者是列数">

cellspacing 和cellpadding：table元素中的cellspacing属性规定单元格之间的空间。 Cell padding属性规定单元边沿与单元内容之间的空间。

<table border="1" cellspacing="10">

width和height:设定表格宽度和高度值。

<table width="100" height="100">

bgcolor:设定表格的背景颜色。
align和valign:align设定表格水平对齐方式,valign设定表格垂直对齐方式

frame和rules：frame属性用来设置外边框的可见性。 rules属性用来设置内边框的可见性。

frame属性值列表
属性值	说明
void	不显示外边框
above	显示上部外边框
below	显示下部外边框
hsides	显示上部和下部外边框
vsides	显示左侧和右侧外边框
lhs	显示左侧外边框。
rhs	显示右侧外边框。
box	显示所有外边框。

rules属性值列表
属性值	说明
none	不显示内边框。
groups	示行组和列组之间的内边框。
rows	显示位于行之间的内边框。
cols	显示位于列之间的内边框。
all	显示所有的内页框。

7.创建表单

表单元素可以用来创建用户输入的交互式部分

1.表单标签<from>

创建HTML表单并向服务器传输，用户输入的表单数据。

<form action=URL method="post or get">

action 属性指定了在提交表单时要处理数据的URL。method 属性定义了发送表单数据的HTTP方法，可以是 "post" 或 "get"。

2.输入标签<input>

通过input元素设置其中的type属性为bottom，可以定义一个提交按钮。点击按钮后。将会把表单内数据提交至from元素中action属性所设置的URL地址进行处理。

<input type ="button" value="提交"/>

如果将type属性设置为reset可以定义一个重置按钮。

<input type ="reset" value="重置"/>

设置属性为radio，可以定义一个单选按钮。

<input type="radio"  name="" value="" checked=""/>

设置type属性为checkbox，可以定义一个复选框。

<input type="checkbox"  name="" value="" />
<input type="checkbox"  name="" value="" />

设置属性为text，可以定义一个文本框。如果为password可以定义一个密码输入框。

用户名：<input type="text" name="user"/><br>
密&nbsp;码:<input type="password" name="password"/>

另外注意 required 属性用于指定字段是否为必填项。

3.列表标签<select>

<select>元素创建下拉列表。

单选下拉列表示例

<select>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
</select>

多选下拉列表示例：

<select multiple>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
</select>

4.文本域标签<textarea>

<textarea>元素可以定义多行文本输入区域。

<!DOCTYPE html>
<html>
<head>
    <title>例子</title>
</head>
<body>
    <form>
        <label for="comments">留言</label>
        <textarea  name="comments" rows="4" cols="50"></textarea><br>
        <input type="提交" value="提交">
    </form>
</body>
</html>

总结

这篇博客中介绍了HTML的基础知识。通过学习上述的知识可以创建一个静态的网页。 HTML的学习在于动手，学完上述的知识，你就可以尝试去写一个静态的网页来巩固一下所学的知识。无论你是刚刚起步还是已经具备一定的经验，学习HTML都是一个不断探索的过程希望这些笔记能够在你的学习之路上提供帮助和指引。如果有任何问题想法或者需要进一步的帮助，都欢迎随时联系我。感谢你的阅读。