网页设计教程，HTML5基础入门步骤
HTML是网页设计的基础，所有网页都是用HTML写的，非常简单，不需要编程基础，新手也能快速学会，学会了可以自己做简单的网页、个人网站、博客，还能兼职接单做网页。今天给大家分享HTML5基础入门教程，从环境搭建到写第一个网页，一步步教你，看完就能上手。
一、HTML基本介绍
HTML是HyperText Markup Language的缩写，也就是超文本标记语言，是用来构建网页的标记语言，不是编程语言，非常简单，用标签来标记网页的各个部分，比如标题、段落、图片、链接等，浏览器读取HTML代码，渲染成我们看到的网页。
什么是HTML5？
HTML5是最新的HTML版本，新增了很多功能，比如语义化标签、多媒体标签、画布、本地存储等，现在所有的网站都用HTML5，兼容性好，功能强大。
学习HTML能做什么？
– 做简单的静态网页、个人网站、博客。
– 配合CSS和JavaScript可以做复杂的网站、小程序、APP页面。
– 看懂网页代码，修改网页内容，做简单的网站维护。
– 兼职接单做简单的网页，一个简单的静态页面几百块钱，收入不错。
– 是学习前端开发、网页设计的基础，学会HTML才能学CSS、JavaScript。
二、前期准备
1. 编辑器选择
写HTML代码需要用代码编辑器，推荐这几个，都是免费的：
– VS Code：微软出的，免费，功能强大，插件多，有代码提示、语法高亮、自动补全功能，适合新手，最推荐。
– Sublime Text：轻量，启动快，也很好用。
– 记事本：电脑自带的记事本也能写，但是没有代码提示，不推荐新手用。
新手直接用VS Code就行，去官网下载安装，免费的，安装的时候记得勾选“添加到PATH”，还有右键打开选项，方便使用。
VS Code推荐安装几个插件：
– Chinese (Simplified) Language Pack：汉化插件，把界面变成中文，适合英文不好的新手。
– Live Server：实时预览网页，写代码的时候浏览器实时刷新，不用每次手动刷新。
– Auto Rename Tag：自动重命名标签，改开头标签的时候结尾标签自动改，很方便。
– Prettier：代码格式化，一键格式化代码，整齐好看。
2. 浏览器选择
用Chrome浏览器或者Edge浏览器，开发者工具很好用，调试网页很方便，兼容性也最好，不要用IE浏览器，很多新功能不支持。
3. 基础概念
– HTML标签：HTML是由标签组成的，标签用尖括号括起来，比如`
`是段落标签，`
`是标题标签，大部分标签都是成对出现的，有开头标签和结尾标签，结尾标签多一个/，比如`
内容
`，也有少数单标签，比如``图片标签，`
`换行标签。
– HTML属性：标签可以有属性，用来描述标签的额外信息，比如`
`，src和alt就是属性，属性写在开头标签里，属性名=“属性值”。
– HTML结构：一个完整的HTML页面有固定的结构，由``、`
三、HTML基本结构
一个最简单的HTML页面结构是这样的，所有HTML页面都要遵循这个结构：
“`html
网页内容，标题、段落、图片、链接等都写在这里
“`
我们来逐行解释：
1. ``：文档声明，告诉浏览器这是HTML5文档，必须写在最开头。
2. ``：根标签，所有内容都写在这个标签里，lang属性说明网页的语言是中文。
3. ``：头部标签，用来放网页的元信息，不会显示在网页内容里，比如编码、标题、引入CSS和JavaScript文件等。
– ``：设置网页的编码为UTF-8，避免中文乱码，必须写，不然中文会显示成乱码。
– ``：适配移动端，让网页在手机上显示正常，做响应式网站必须加。
– `
4. ``：身体标签，网页的所有可见内容都写在这里，比如标题、段落、图片、链接、视频等，用户看到的内容都在这里。
你可以把这段代码复制下来，保存成`.html`后缀的文件，比如`index.html`，用浏览器打开，就能看到一个空白的网页，标题是“网页标题”，这就是最简单的网页了。
四、常用HTML标签，记住这些就够用了
HTML的标签有很多，常用的就20多个，记住这些就能写大部分网页了：
1. 标题标签 h1~h6
用来定义标题，h1是最大的标题，h6是最小的，一个页面最好只有一个h1标签，用来放页面的主标题，有利于SEO。
“`html
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
“`
2. 段落标签 p
用来定义段落，每个段落会自动换行，段与段之间有间距。
“`html
这是一个段落，HTML是网页设计的基础，非常简单，新手也能学会。
这是另一个段落，段落之间会自动换行，有间距。
“`
3. 换行标签 br
单标签，用来强制换行，在段落里想要换行的地方加一个`
`就行。
“`html
这是第一行
这是第二行
“`
4. 水平线标签 hr
单标签，插入一条水平线，用来分隔内容。
“`html
上面的内容
下面的内容
“`
5. 文本格式化标签
用来给文本加样式：
– ``或者``：加粗
– ``或者``：斜体
– ``：下划线
– ``：删除线
“`html
这是加粗的文字，这是斜体的文字，这是下划线，这是删除线
“`
6. 图片标签 img
单标签，用来插入图片，有两个必填属性：
– src：图片的地址，可以是本地路径，也可以是网络URL。
– alt：图片的描述，图片加载失败的时候显示，还有利于SEO，屏幕阅读器会读这个内容。
– width/height：设置图片的宽高，可以只设一个，另一个会自动按比例缩放。
“`html
“`
7. 链接标签 a
用来定义超链接，点击可以跳转到其他页面或者网站：
– href：跳转的地址，可以是本地网页，也可以是网络URL。
– target：跳转方式，`_blank`是在新标签页打开，`_self`是在当前标签页打开，默认是_self。
– title：鼠标悬停在链接上显示的文字。
“`html
点击跳转到我的网站
跳转到本地的关于页面
“`
还可以做锚点链接，跳转到当前页面的某个位置，给要跳转到的标签加个id，然后链接的href写#id就行：
“`html
第一部分
很长的内容…
点击跳转到第一部分
“`
8. 列表标签
分为有序列表、无序列表和自定义列表：
#### 无序列表 ul，列表项用 li，每个列表项前面有个圆点：
“`html
- 列表项1
- 列表项2
- 列表项3
“`
#### 有序列表 ol，列表项用 li，每个列表项前面有数字：
“`html
- 第一步
- 第二步
- 第三步
“`
#### 自定义列表 dl，dt是标题，dd是描述：
“`html
- HTML
- 超文本标记语言，用来构建网页结构
- CSS
- 层叠样式表，用来美化网页样式
“`
9. 表格标签 table
用来做表格：
– `
| `：定义单元格 – ` | `：定义表头单元格，会加粗居中 – ` `：表头部分 – ` |
|---|
| 姓名 | 年龄 | 职业 |
|---|---|---|
| 张三 | 25 | 程序员 |
| 李四 | 28 | 设计师 |
“`
border属性设置边框宽度，现在一般用CSS来美化表格，不用border属性。
10. 表单标签 form
用来做表单，比如登录、注册、提交信息的表单：
– `
“`
11. 语义化标签（HTML5新增）
HTML5新增的语义化标签，让页面结构更清晰，有利于SEO，屏幕阅读器也能更好的识别：
– `
– `