当前位置：首页 > news >正文

HTML网页制作知识总结（简单易学）

news 2025/6/6 9:18:35

前言：

1.第一个前端程序（基本模板）

1.HTML文件的创建：文件后缀名以.html结尾

2.在编写代码过程中，<>必须是英文状态的。

2.前端常见开发者工具

1.建议使用VSCode（后面所述的快捷键适用于VSCode）

1.vs快速生成浏览器文件.html的快捷方式

！+回车（enter）

2.VSCode常用快捷键

（1）代码格式化：Shift+Alt+F

（2）向上或者向下移动一行：Alt+ Up或者Alt+Down

（3）快速复制一行代码：Shift+Alt+ Up或者Shift+Alt+Down

（4）快速查找：Ctrl+F

（5）快速替换：Ctrl+H

3.HTML基本框架

说明：

（1）html标签：

定义 HTML 文档，这个元素我们浏览器看到后就明白这是个HTML 文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点。

（2）head标签：

用于定义文档的头部。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

（3）body标签：

body 元素定义文档的主体。 body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）它会直接在页面中显示出来，也就是用户可以直观看到的内容

（3）title标签：

  可定义文档的标题。它显示在浏览器窗口的标题栏或状态栏上。它是标签中唯一必须要求包含的东西，就是说写head一定要写title

（4）meta标签：
  用来描述一个HTML网页文档的属性，关键词等。

  例如： charset="utf-8" 是说当前使用的是 utf-8 编码格式，在开发中我们经常会看到 utf-8或是 gbk ，这些都是编码格式，通常使用 utf-8 。

一、HTML基础

1.基本的HTML标签

（1）标题标签:<h1>~<h6> (h1>h2>....>h6)

生成h1-h6的快捷键：h$*6

（2）段落标签：<p>

（3）换行：<br>

（4）水平线：<hr>

注意：hr可以通过color、width、size来控制颜色，宽和高度

（5）无序表：<ul>

（6）有序表：<ol>

注意：无论是有序表还是无序表，都要与<li>标签配合使用。ul和ol代表行，li代表列

2.HTML文本格式化标签

标签	描述
<b>或者<strong>	定义粗体文字、文本以加粗形式呈现
<em>	标记重点强调的文本，以斜体形式呈现
<del>	定义删除字
<pre>	定义预格式文本

3.注释

vs快捷键：Ctrl+'/'

例子：

4.链接

（1）语法：<a href="链接地址" target="xxxxxx">链接文本</a>

（2）Target属性

属性值	描述
_blank	在新窗口中打开被链接文档
_self	默认，在相同的框架中打开被链接文档
_parent	在父框架中集中打开被链接文档
_top	在整个窗口中打开被链接文档

（3）name属性

命名锚点的语法：

<a name="锚点"》锚点（显示在页面的文本）</a>

例如：锚点链接：

首先，创建一个书签，即在文档中对锚点进行命名：
<a name="tips">基本注意事项-有用的提示</a>

然后，在同一个文档中创建指向该锚点的链接：

<a href="#tips">有用的提示</a>