文章目录
前言
提示：本文适合刚入门前端的同学进行学习和实践，学习计算机相关一定要动手，只有动手敲代码才能进步
一、html的基本语法
基本每个网页都必须有下面的骨架代码
代码如下（示例）：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
下面是相关代码的解释
<!--文档类型声明，告诉浏览器用哪种HTML版本来显示网页,注意不能放进html标签中-->
<!DOCTYPE html>
<!--html是根标签，后面跟着是属性：lang表示网站申明语言，en代表英语，zh-CN表示中文-->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head><!--头标签，用来显示标题-->
<meta charset="utf-8" /> <!--字符设置为utf-8,又叫万国码，防止在不同的电脑中出现乱码-->
<title>2022新的开始</title> <!--网页标题，一般显示在浏览器的上方-->
</head>
<!--网页主体-->
<body>
我们都会实现自己的梦想
</body>
</html>
在浏览器中打开的效果：
可以看到最上面显示的是网页的标题，下面的框框显示的是网页的内容。
二、html的标签和属性
1.分区div/span
div类似于一个大盒子，自己独占一行，而span是小盒子，一行可以有多个span
上图的一行就是一个div，然后一行有4个span
2.标题h1~h6
标题一共有六级，数字越小越重要，字体越大
代码如下（示例）：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>我是标题</h1>
<h2>我是标题</h2>
<h3>我是标题</h3>
<h4>我是标题</h4>
<h5>我是标题</h5>
<h6>我是标题</h6>
</body>
</html>
3.段落p
作用就是将一大段话强制划分成多个段落
未分段前的效果：
代码如下（示例）：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
厚朴，落叶乔木，因叶大而浓荫，因花大而美丽，因药用价值而名贵。它的种子红彤彤的，也很漂亮，常被鸟儿们叼来叼去，成为它们喜欢的食物。
有个人，知道厚朴的药用价值，所以就想种植厚朴发财。为此，他来到野外，找到野生的厚朴树。在果实成熟期，他选择健壮的母树，挑选出籽粒饱满、无病虫害的种子，在肥沃的土地上种下。之后，他信心满怀地等待种子发芽、出土、长大。
然而，种下的种子几乎全军覆没，绝大多数没有成活，甚至根本就没有发芽。
他疑惑：那些被鸟吃进肚子里，然后又排泄出来的种子，没人管没人问都能发芽成活，我选择的是最优良的种子，进行的是最精心的管理，怎么就不发芽呢？
</body>
</html>
显示结果：
分段后：
代码如下（示例）：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>厚朴，落叶乔木，因叶大而浓荫，因花大而美丽，因药用价值而名贵。它的种子红彤彤的，也很漂亮，常被鸟儿们叼来叼去，成为它们喜欢的食物。</p>
<p>
有个人，知道厚朴的药用价值，所以就想种植厚朴发财。为此，他来到野外，找到野生的厚朴树。在果实成熟期，他选择健壮的母树，挑选出籽粒饱满、无病虫害的种子，在肥沃的土地上种下。之后，他信心满怀地等待种子发芽、出土、长大。
</p>
<p>
然而，种下的种子几乎全军覆没，绝大多数没有成活，甚至根本就没有发芽。
</p>
<p>
他疑惑：那些被鸟吃进肚子里，然后又排泄出来的种子，没人管没人问都能发芽成活，我选择的是最优良的种子，进行的是最精心的管理，怎么就不发芽呢？
</p>
</body>
</html>
显示效果：
4.图像img
图像标签有很多属性，比较重要的是SRC，表示图像的存储路径
src的路径主要有两种：相对路径和绝对路径。
相对路径又分以下三种：
绝对路径是直接选取图片的属性中的路径，是相对于自己的电脑而言，故一般这种方式用的比较少。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<imag src="C:\Users\zyq\Desktop\PS\zyq\test.png"></imag>
</body>
</html>
5.列表ul/ol
列表主要有三种，第一种是无序列表ul, 第二种是有序列表ol，第三种是自定义列表dl;
(1)无序列表ul
<ul></ul>中只能嵌套li，直接在ul标签中输入其他标签或者文字的做法是不被允许的。
<li></li>之间相当于一个容器，可以容纳所有元素。
(2)有序列表ol
<ol>标签中的type属性值为排序的序列号，不添加type属性时，有序列表默认从数字1开始排序。
常用的type属性值分别为是1，a，A，i，I
<ol reversed=“reversed”>中的reversed属性能够让有序列表中的序列倒序排列。
<ol start=“3”>中的start属性值为3，有序列表中的第一个序列号将从3开始排列。
(3)自定义列表dl
定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
6.链接a
链接主要有两种，一种是外部链接就是在网页间跳转，有两个重要的属性：
代码如下（示例）：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<a href="www.baidu.com" target="_blank">百度</a>
</body>
</html>
显示效果：
另一个是锚点链接，是在同一个页面跳转，从同一个页面的一个位置跳转到另一个位置。
注意href标签中不能用中文名，另外跳转的起点和终点至少是相隔一个页面，否者就会出现页面没有变化的结果。
7.表单form
表单的基本组成，由表单域，表单控件，提示信息三部分构成
1)基本语法
在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。
form的提交方式主要有两种，一种是get,另一种是post,两种方式的区别如下：
get在浏览器回退时是无害的，而post会再次提交请求。
get请求会被浏览器主动cache，而post不会，除非手动设置。
get请求只能进行url编码，而post支持多种编码方式。
get请求参数会被完整保留在浏览器历史记录里，而post中的参数不会被保留。
get比post更不安全，因为参数直接暴露在url上，所以不能用来传递敏感信息。
表单的相关属性：
2）表单控件
（1）input控件
input 是输入的意思, 主要用于收集用户输入的信息。另外要注意的是<input />标签是一个单标签。input控件主要由以下几个属性：
1.type属性设置不同的属性值用来指定不同的控件类型
type属性主要有以下几个属性值：
2.value 默认的文本值。有些表单想刚打开页面就默认显示几个文字，就可以通过这个value 来设置。
注意value和placeholder的区别，如果要作为文本框中的提示，最好用placeholder，value为文本框的默认值，如果没有输入，则默认按value处理。
3.name是用来区分不同的表单控件。后台通过name属性找到对应的表单控件。 name属性的属性值由我们自定义。
注意：单选按钮radio和复选框checkbox要有相同的name名
4.cheched表示默认选中状态。 较常见于 单选按钮和复选按钮。
（2）label控件
用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
绑定的方式有以下两种：
（3）select控件
如果有多个选项让用户选择，为了节约空间，我们可以使用select控件定义下拉列表。
在option 中定义selected =" selected "时，当前项即为默认选中项。
基本格式：
（4）textarea文本域控件
通过textarea控件可以轻松地创建多行文本输入框.
cols=“每行中的字符数” rows=“显示的行数” 我们实际开发不用
基本格式：
辨析：文本框和文本域
8.表格table
（1） 基本语法：
主要由table, tr, td.三个组成：
table相当于表格最外边的大方框，th是表头单元格，加租显示，tr是表示行，td是普通单元格，注意列是嵌套在行中间。
代码如下（示例）：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table align="center" border="1" cellpadding="0" cellspacing="0" width="400" height="200">
<thead>
<tr><th>学号</th><th>姓名</th><th>年龄</th><th>成绩</th></tr>
</thead>
<tbody>
<tr><td>123</td><td>小明</td><td>12</td><td>20</td></tr>
<tr><td>124</td><td>小白</td><td>11</td><td>80</td></tr>
<tr><td>125</td><td>小红</td><td>12</td><td>100</td></tr>
</tbody>
</table>
</body>
</html>
显示效果：
（2）表格的相关属性
不用深入了解，后面主要是通过CSS来设置表格的属性。
（3）表格的相关标签：
（4）合并单元格
colspan是跨列合并，rowspan是跨行合并
基本步骤如下：
代码如下（示例）：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table align="center" border="1" cellpadding="0" cellspacing="0" width="400" height="200">
<thead>
<tr><th>学号</th><th>姓名</th><th>年龄</th><th>成绩</th></tr>
</thead>
<tbody>
<tr><td></td><td></td><td colspan="2"></td></tr>
<tr><td rowspan="2"></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</tbody>
</table>
</body>
</html>
显示如下：
9.框架iframe
10.特殊字符
三、注意点
1.尽可能少的使用无语义的标签div和span；
2.在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
3.不要使用纯样式标签，如：b、font、u等，改用css设置。
4.需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
5.使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
6.表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
7.每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for来让说明文本和相对应的input关联起来。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
