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

前言：

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+'/'

例子：<!--This is a cat-->

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>

5.HTML图像

图像由<img>标签定义。<img>是空标签，即只包含属性，没有闭合标签

（1）源属性（src）

src的值是图像的URL地址

语法：<img src="url">

（2）替换文本属性（alt）

当文本无法加载图片时，会显示替换文本

（3）属性： 

 6.HTML表格

表格由<table>标签来定义，<tr>是行定义，<td>是列定义

 （1）表格和边框属性 :border

 （2）表格的表头：<th>（会显示粗体居中的文本）

 （3）跨行和跨列：rowspan\colspan,一般用在<td>标签中

7.表单 

 表单由<form>标签来定义。

 基本语法：<form action="url（服务器地址） methon="get|post" name="表单名称"></form> 

 1.表单元素：

一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮

 

 2.文本框：

文本域通过 <input type="text" >标签来设定，当用户要在表单中键入字 母、数字等内容时，就会用到文本域

3. 密码框：

密码字段通过标签<input type="password">来定义

4.提交按钮 

提交按钮由标签<input type="submit" value="按钮名称">来定义

8.H5新标签

<div>容器元素，也是页面中见到最多的元素

网页布局布局