学习地址：
【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili
1、前端格式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><!--此处为网站的名称--></title>
</head>
<body>
<!-- 此处为网站的内容设置
-->
</body>
</html>
2、常用标签
HTML页面是由标签组成，不同的不同标签游览器对其进行不同的样式和内容的渲染，我们只需要记住常见的标签即可，大致可以分为以下几类，标题、水平线、段落、换行、图片、表格、超链接、列表、div和span等。
2.1标签和水平线
2.1.1标签
h1~h6标签可定义标题，标题依次递减。
<!--
此处为网站的内容设置
-->
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
2.1.2水平线
hr标签在HTML页面创建一条水平线可以在视觉上将文档分割成各个部分，在HTML中，hr标签没有结束标签。
<hr color=" " size = " " width=" " align=" "/>
<!--
水平线标签
hr 单标签
常用属性
color 颜色
size 粗细
width 长度（百分比或 px）
-->
<hr>
<hr color="aqua" size = "3" width="50%" align="left"/>
2.2段落和换行
段落标签，会自动在其前后创建一些空白，游览器会自动添加这些空间。
<p>content</p>
<!--
段落标签
-->
<p>这是一个段落1</p>
<p>这是一个段落2</p>
2.3列表
列表分为有序列表和无序列表
<!--
列表
有序列表
<ol><li><li></ol>
无序列表
<ul><li><li></ul>
-->
<ul type="circle">
<li>周杰伦</li>
<li>林俊杰</li>
<li>陈奕迅</li>
</ul>
<ol type="i">
<li>周杰伦</li>
<li>林俊杰</li>
<li>陈奕迅</li>
</ol>
2.4div和span
2.4.1div
div是一个块级元素，通常与css配合使用，用于布局。
div标签可以把文档分成独立的不同的部分。它可以用作严格的组织工具，并且不使用任何形式与其相关联
<div>content</div>
<!--
div标签
块级元素
默认占全部的宽度，有多少内容占多少
可以设置div的宽（width）高（height）
通过align设置对齐方式
-->
<div style="width: 100px;height:100px" align="center">这是一个div</div> 
2.4.2span
span标签被用来组织文档中的行内元素，span没有固定的格式表现，当对他应用样式时，他才会产生视觉上的变化。
<span>content</span>
<!--
span标签
行内元素不会自动的换行，有多少东西占用多少空间
-->
<span>这是一个span</span>
2.5格式化标签
2.5.1font
对丁文本的字体，字体尺寸，字体颜色
<font color=" " size=" " face=" ">content</font>
<font color="aqua " size="5" face="楷体">你好</font><br>
2.5.2pre
规定与格式的文本，被包围在pre元素的文本通常会保留空格和换行符，二文本也会呈现为等宽的字体
<pre>content</pre>
<pre>
Hello World
</pre> 
2.5.3文本标签
b(组文本)、i(斜体文本)、u（下划线文本）、del（中划线文本）、sub（下标文本）、sup（上标文本）
<p>以后的你<b>会感谢</b><i>现在的</i><u>努力的自己</u><del>我</del></p>
<pre>
<font size="5" color="aqua">水的化学式是 H<sub>2</sub>O</font>
<font size="5" color="aqua">二的三次方可以表示为：2<sup>3</sup></font>
</pre> 
2.6a标签
a标签定义超链接，用于一张页面连接到另一张页面
a元素最重要的属性是href属性，他表示要链接的目标位置，同时没有href属性a标签内的内容与普通文本没有区别，也就失去了超链接的功能。
若是想要跳转到当前页面，那么href的值为#，被链接页面通常是在当前游览器窗口中，除非规定了另一个目标（target属性）
<a href ="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a> 
2.7图片
img元素
<img src=" ">
<!--
img标签
向网页中嵌入一张图片
常用属性
src:需要引入的图片地址（必须属性）
alt:当照片破损或者不存在时，显示文本的内容
title:当鼠标悬停在图片上时显示的文本
width:图片的宽度
height:图片的高度
border:图片边框
-->
<img src="../img/bd3.png">
2.8表格
table标签定义HTML表格
tr标签定义表格的行，tr元素包含一个或多个th或td元素
td标签定义HTML表格中的标准单元格
th定义表格内的表头单元格，th元素内部的文本通常会呈现为居中的粗体文本，而td元素内的文本通常是左对齐的普通文本。table就相当于是一个表格的外框，tr为行，td为一个一个单元格，th为有标题作用的单元格，th中的内容同时有加粗的效果。
<table width=" " align=" " border=" " style=" ">
<!--
table 表格
tr 行
td 标准单元格
<th> 表头（字体剧中，加粗效果）
table的属性
width 表格的宽度
border 边框
align 对齐方式
style="border-collapse: collapse;"合并表格边框
-->
<table width="400px" align="center" border="1" style="border-collapse: collapse;">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>19</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>20</td>
</tr>
</table>
1838
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
