文章速览：
HTML中有序列表（＜ol＞＜li＞）和无序列表（＜ul＞＜li＞）以及定义列表的使用，以及利用无序列表制作网购按钮
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>
点击我进入HTML标签处
常用的HTML标签(时时更新中：)
<p></p> :段落标签，能够自动换行，单独的成为一段
<h1></h1>——<h6></h6> :标题标签，由1~6标题字号逐渐减小
注意：一个页面中只能有一个h1
<h4>标题标签相比普通字体，是加粗的。
生成h1——h6标签的快捷方式：h${}*6 {}里面写内容，如果不写内容就删除{}
<stong></stong>:加粗字体标签
<em></em>:斜体字体标签
<stong>
<em></em> ：既加粗又斜体标签（即两个标签进行了嵌套）
</stong>
<em>
<stong></stong>：既加粗又斜体标签（即两个标签进行了嵌套）
</em>
<del></del>:中划线标签
常用展示方法：<del>￥50</del>
当然也可以设置字体的格式：<del style="color:#999">￥50</del>
<address></address>:地址标签（自动换行，而且字体斜体）
等价于：
<p>
<em></em> 标签
</p>
<br>：换行标签
<div></div>:分块标签（自动换行），更加结构化
此时举例：
<strong style="color: #f40;">a</strong>
<em style="color: #f40;">b</em>
<del style="color: #f40;">c</del>
上面三行代码可以进行替换：（上面的颜色为淘宝红）
<div style="color: #f40;">
<strong >a</strong>
<em>b</em>
<del>c</del>
</div>
<span></span>:分块标签（不自动换行），更加结构化 道理同上
<nobr></nobr>:取消文本换行标签
<sup></sup>:上标标签
<sub></sub>:下标标签
<hr>:水平线标签
<a href="这里写网址">邀您参加</a>：超链接标签
<marquee></marquee> :字幕滚动标签
补充：
928
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
