文章速览：
HTML基础知识的学习+附加常用HTML标签
HTML中有序列表（＜ol＞＜li＞）和无序列表（＜ul＞＜li＞）以及定义列表的使用，以及利用无序列表制作网购按钮
HTML中图片的网页插入以及属性设置
HTML中＜a＞＜/a＞标签的四大功能 必看！必看！！必看！！！
HTML表单标签＜form＞＜/form＞登录窗口和单选框以及下拉栏的制作
首先看一下初学HTML的标准固定模板：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>注意： 对于上面的代码html标签里里面的 lang代表属性名，等号后面的是属性值，属性名不需要加双引号，属性值必须加双引号。 其中lang=“en”说明en代表的是语言是英文的。中文的是zh，德语是de，中文相间的是“en，zh，这是告诉搜索引擎爬虫，我们的网站是关于什么内容的” title标签里面写的是网页的名称，可自己进行修改
如果想让自己做的网页更加靠前一点 可以加上代码 <meta contect="服装" name="keywords"> 和 <meat contect="这是穿上就不想脱的衣服" name="description"> 其中，HTML是由一对对标签组成的 其中 html 标签是头标签 ，也叫做根标签 一个HTML文件只能有一个根标签 head里面写的是人看不到的东西，body里面写的是人能够看到的东西 如果想设置浏览器的特性的话，将代码写在head标签里面 如果想给用户看的信息，将代码写在body里面制作下面情形的网页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- <meta charset="jb2312"> --> <!-- 上面的会出现乱码，所以要用UTF-8 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>平齐网站</title> </head> <body> <h1 style="color: blue;">Let's Learn HTLM5 </h1> <h4>come on, baby </h4> <p style="font-size: 20px; color:darkorange"> 发挥您的美感与想象力，探索web的无限可能</p> <!-- 上面的意思是字号大小20像素 --> <p>期待与你的相遇</p> 我在这里<br>等你<br> <div style="width:200px; height:200px; background-color:orange"> </div> <a href="https://www.pinduoduo.com/">邀您参加</a> </body> </html>上面的 p 标签中style可以对字体进行设置，其中color是设置字体颜色，font-size是设置字号大小的
上面的 div 标签中 width表示的是宽度，height表示的高度，其中px代表的是像素的意思，background表示的是背景颜色 针对上面设置的块元素中，有可能会出现字体溢出块元素的问题，下面进行讨论并进行解决
如果在body标签中，设置的块元素中写的全部是一串英文字符的时候，会发先出现了字母的假溢出现象，这是因为计算机将这一串字符当作了一个连着的单词，所以不会换行
<body> <div style="width:200px; height:200px;background-color:orange"> <h1 style="color: blue; font-size: 22px;">efdvhdfdnsvfhdsvfbsdfvgsdhfvdsfvdsjfh</h1> </div> </body>此时就用到了空格，空格在HTML编译器中就是分隔符，将英文单词进行分隔开
<body> <div style="width:200px; height:200px;background-color:orange"> <h1 style="color: blue; font-size: 22px;">efd vhdfdn svfhds vfbs dfvg dhfvd sfvdsj fh</h1> </div> </body>如果想要添加多个空格怎么办？ 则需要使用空格符号： ；（注意：p后面的；不能省）
在网页中编写出下面的内容：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> h4{ color: blue; } div{ color: red; } </style> </head> <body> <h4>七步诗</h4> <div> 煮豆燃豆萁，<br> 豆在釜中泣。<br> 本是同根生，<br> 相煎何太急。<br> </div> </body> </html>设计下面的网址：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>平齐网站</title> <style> /* 去除所有文本的下划线 */ *{ text-decoration: none; } h1{ /* 文本居中 */ text-align: center; color: chartreuse; width: 400px; height: 300px; /* font-size: large; */ /* 边框 */ border: 1px solid red; /* 左右居中 */ /* margin: 10px auto; */ /* 字体 */ font-family: "楷体"; /* 属性值加双引号 */ /* 行高 */ line-height: 300px; /* 下划线 */ text-decoration: underline; } div{ text-align: center; width: 300px; /* font-weight: 200px; height: 400px; */ /* background: cornflowerblue; */ border: 1px solid yellow; /* 左右居中 */ /* margin: 10px auto; */ } span{ color: tomato; font-size: 30px; height: 200px; width: 300px; border: 1px solid red; } </style> </head> <body> <!-- align属性居中 --> <h1 align = "center";> 生活之所以美好，是因为不断地奋斗 </h1> <div> <!-- strong是加粗 --> <!-- em是斜体 --> <strong>生活的美好无处不在！！！</strong><br> <em>生活的美好无处不在！！！</em><br> 生活的美好无处不在！！！<br> 生活的美好无处不在！！！<br> 生活的美好无处不在！！！<br> </div> <!-- 文字不换行，滚动滑动 --> <nobr></nobr> <!-- del下划线 --> <!-- 告诉浏览器是空格 --> <del>生活真的是 那么美好的吗？</del> <br> <!-- sub是下标 --> H<sub>2</sub>O <br> <!-- sup是上标 --> x<sup>3</sup> <!-- span段内文字的设置 --> 其实生活真的是<span>很美好的</span>，真的哦 <h1 style="color: yellow;"><marquee>美好生活</marquee> </body> </html>注意： 上面的设置边框的属性为：border 一半使用的办法为 border: 1px solid red;（当然red可以改成其他颜色的边框）
使文本居中的属性为：text-align： center ;
使文本左右居中的属性为 margin 一般使用方法为：margin: 10px auto;（这里的10像素是可以更改的）
更改文本字体的属性为 font-family 可以设置楷体、宋体、行书等等，不过这都需要用双引号进行括起来 例如: font-family: “楷体”;
设置行高的属性为：line-height 使用方法：line-height: 300px;
下划线的属性为 text-decoration: underline;
在网页上显示下面的内容：
先写出HTML文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="C:\Users\a\Desktop\文件夹\HTML5\5.css" type="text/css" rel="stylesheet"> </head> <body> <h1 class="red">静夜思自编</h1> <p class="red">一二三四五六球</p> <p class="red">大地方多喝点但</p> <p >缩放的示分分割 </p> <p class="red">第三个人方式是</p> </body> </html> 再写出CSS文件 .red{ color: red; }说明：在HTML文件中，class相当于一个类，在使用 .red的时候，相当于调用red这个类，然后red这个类的块区域可以设置属性格式
当然，将上面的HTML文件与CSS文件写在一起也是可以完成的：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .red{ color: red; } </style> <link href="5.css" type="text/css" rel="stylesheet"> </head> <body> <h1 class="red">静夜思自编</h1> <p class="red">一二三四五六球</p> <p class="red">大地方多喝点但</p> <p >缩放的示分分割 </p> <p class="red">第三个人方式是</p> </body> </html>在网页中显示下面图片中的内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> span{ color:steelblue; } </style> </head> <body> <h1>青蒿素</h1> <p>本词条由<span>"科普中国"中国审核</span>完成</p> <p> 青蒿素是从复合花序<span>植物青花蒿</span>茎叶中提取出来的一种晶体，其分子式为C<sub>15</sub>H<sub>22</sub>O<sub>5</sub>,由中<br> 国<span>屠呦呦</span>在1971年发现 <span><sup>[1]</sup></span>。青蒿素是继红灭、<span>剋发</span>、<span>热负</span>之后的特效药 ，尤其是对<span>脑型疟疾</span>。<br> 具有高效的特点，曾被认为是世界上唯一的治疗的疟疾的疗效物。 </p> </body> </html>这个题目就体现出来了span标签的作用啦
在网页中显示下面图片的排版：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>小彪网站</title> <style> h2{ font-family: "微软雅黑"; color:sienna; } div{ color: skyblue; } span{ color: skyblue; text-decoration: underline; font-style:oblique; } nobr{ color: tomato; font-size: 22px; } </style> </head> <body> <img src="images/coffee.jpg" alt = "Web前端开发工程师" border = 1 hspace = "30" align = "left" /> <h2> Web前端开发工程师 </h2> <div><p>技术要求:</p></div> <p> 了解常用的一些Js框架，如jQuery、YUI等，掌握最基本的JavaScript计算方法编写﹔ 对目前互联网流行的网页制作方法(Web2.o)HTML+SS，以及各大浏览器兼容性有较多的了解﹔基本掌握前沿技术（HTML5+CSS3)。 <span>Web前端技术<span>你究竟掌握了多少... </p> <p> <time datetime = "2015-5-19-20"> <div>更新时间：2019年05月19日20点（已有<nobr>323</nobr>人点赞）</div> </time> </p> <hr/> <p style="color: sienna; font-size: 22px;"> 相关技术文章<nobr>8</nobr>篇 </p> </body> </html>补充：
