一.何为HTML?
HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言,是一种用来编写超文本文档的标记语言。
HTML主要用一系列标签来给我们带来一个网页效果图.
我们通常所见到的文字，图形、动画、声音、表格、链接、影像等内容都是HTML在 web 浏览器上显示出来。(以上为个人理解)
二.开发工具
在开始编写HTML前我们需要先了解一下编辑器，我们今后会在编辑器中编写我们的HTML超链接文本，各位可以在自行浏览器搜索一下编辑器，我个人推荐使用VsCode软件进行编写（因为VsCode功能强大，加插件方便）.
各位使用其他编辑器也行，总之怎么好用怎么来.
三.HTML的基本骨架
实例:
<!DOCTYPE html> //声明HTMLl类型
<html lang="en"> //设置HTML的根原素（一般指默认语言）
<head> //head标签里包含 meta 标签 与 title 标签
<meta charset="UTF-8"> //将编码设置为 UTF-8（UTF-8为万国码）
<title>我的第一个网页</title> //设置网页标题
</head>
<body>
// 我们在浏览器中看到的所有内容都是在 body 标签中展示的.
我们以后所有的标签都在在浏览器内 body 标签中填写.
</body>
</html>
更多国家编码详细: HTML ISO 国家/地区代码参考手册
四.HTMl的基本标签
标签是HTML中使用频率最高的，可以实现许多操作。
标签分为单标签，双标签两种类型
单标签：有开始标签但是没有结束标签。
<meta>
双标签：有开始与结尾标签。
<body></body>
1. div 和 spain 标签
div 和 spain 标签，在CSS定义中属于一个行内元素，而div是块级元素，我们可能通俗地理解为 div 为大盒子，大盒子当然可以放一个小盒子了, span 就是小盒子。
被 div 和 spain 元素包含的文本，您可以使用 CSS 对它定义样式，或者使用 JavaScript 对它进行操作。
<body>
<div> 每个div都相当于一个大盒子，经常用于页面布局</div>
<div> 元素用来创建多列布局
<span>每个 spain 都相当于一个小盒子，经常用于页面布局
<span><span> 用于对文档中的行内元素进行组合。
</body>
2.标题标签和段落标签
实例:
<body>
<h1></h1> //最大
<h6></h6> //最小
<h3></h3> //标题标签,标明文章突显标题
<p></p> //段落标签，在网页中看到的长篇文章就是用p标签来显示的
</body>
2.文本格式化标签
实例:
<body>
<strong></strong> //加粗
<b></b> //加粗
<em></em> //倾斜
<i></i> //倾斜
<del></del> //删除
<ins></ins> //下划线
</body>
3.图片标签
实例:
<body>
<img src="dog.jpg"> //显示图片
</body>
4.路径标签
绝对路径
实例:
<body>
<img src="dog.jpg"> //一般在本地电脑上用
</body>
相对路径–同级
实例:
<body>
<!-- 绝对路径 -->
<img src="dog.jpg">
<!-- 相对路径 -->
<img src="./dog.jpg">
相对路径–下级
实例:
<body>
<img src="images/dog.jpg" >
</body>
4.音频标签
实例:
<body>
<!-- controls 播放控件 -->
<!-- autoplay 自动播放(部分浏览器不支持)-->
<!-- loop 循环播放 -->
<audio src="./music.mp3" controls autoplay loop ></audio>
</body>
5.视频标签
实例:
<body>
<!-- src 视频的路径 -->
<!-- controls 显示播放控件 -->
<!-- autoplay 自动播放 (谷歌浏览器中需要配合muted实现静音播放) -->
<!-- loop 循环播放 -->
<video src="./video.mp4" controls autoplay loop ></video>
</body>
6.链接标签
实例:
<body>
<a href="https://www.baidu.com/" target="_blank">跳转到百度</a>
<!-- -blank (在原有的网页基础上跳转到新网页) -->
<a href="./01-标题标签.html" target="_blank">点我</a> //点击跳转
7.表单标签
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox） 等等。
我们可以使用 <form> 标签来创建表单:
<body>
<form>
<input 元素>
</form>
</body>
输入元素
多数情况下被用到的表单标签是输入标签 input。
输入类型是由 type 属性定义。
接下来我们介绍几种常用的输入类型。
文本域（Text Fields）
文本域通过
<input type = "text">标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
实例:
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
注意:表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。
单选按钮（Radio Buttons）
<input type="radio"> 标签定义了表单的单选框选项
事例:
<form action="">
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女
</form>
复选框（Checkboxes）
<input type="checkbox">定义了复选框。
复选框可以选取一个或多个选项：
实例:
<form>
<input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
<input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
</form>
提交按钮(Submit)
<input type="submit">定义了提交按钮。
当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性action定义了服务端的文件名。
action属性会对接收到的用户输入数据进行相关的处理:
实例:
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="提交">
</form>
重置按钮(Reset)
实例:
<form>
<input type="submit" value="重置">
</form>
更多表单实例: 表单实例
本文章为个人翻看使用，借鉴了部分资料。
（来自一个大一学习编程的小菜鸟）
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
