学习网址：【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili
1.安装编译器
- Sublime Text：Sublime Text - Text Editing, Done Right
- HBuilder X：HBuilderX-高效极客技巧
2. 整体框架
通常一个HTLM网页文件包含3个部分：标记头区，内容区<body>?，网页区<html>?。
1.<p> 元素:
<p>这是第一个段落。</p>
这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p> 以及一个结束标签 </p>.
元素内容是: 这是第一个段落。
2.<body> 元素:
<body>
<p>这是第一个段落。</p>
</body>
<body> 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。
元素内容是另一个 HTML 元素（p 元素）。
3.<html> 元素：
<html>
<body>
<p>这是第一个段落。</p>
</body>
</html>
<html> 元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 <html> ，以及一个结束标签 </html>.
元素内容是另一个 HTML 元素（body 元素）。
3.常用标签
1.标题标签
?h1~h6 大小依次递减，尽量减少使用h1标签，请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。搜索引擎使用标题为您的网页的结构和内容编制索引。因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</body>
</html>
?2.段落标签
?段落是通过 <p> 标签定义的，注意：浏览器会自动地在段落的前后添加空行。（</p> 是块级元素）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>这是一个段落1</p>
<p>这是一个段落2</p>
</body>
</html>
?3.换行标签
<br> 标签插入一个简单的换行符。<br> 标签是一个空标签，意味着它没有结束标签。
提示：在写地址信息或者写诗词时 <br> 标签非常有用。
注释：?请使用 <br> 标签来输入空行，而不是分割段落。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
Hello<br>World
</body>
</html>
4.水平线标签?
?<hr> 标签定义 HTML 页面中的主题变化（比如话题的转移），并显示为一条水平线。
<hr> 元素被用来分隔 HTML 页面中的内容（或者定义一个变化）。
常用属性：color 颜色? ?size 粗细? ? ?width? 长度（百分比? 或? px）? ?align? 对齐方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<hr>
<hr color="red" size="3" width="50%" align="left">
</body>
</html>
5.列表?
1.有序列表 ：
有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。列表项使用数字来标记。type可以改变样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ol type="1">
<li>周杰伦</li>
<li>林俊杰</li>
<li>陈奕迅</li>
</ol>
</body>
</html>
?
2.无序列表：
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表使用 <ul> 标签，type可以改变样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul type="circle">
<li>周杰伦</li>
<li>林俊杰</li>
<li>陈奕迅</li>
</ul>
</body>
</html>
6.div和span?
1.div?
div 元素是用于分组 HTML 元素的块级元素。大多数网站可以使用 <div> 或者 <table> 元素来创建多列。默认占全部的宽度，有多少内容高度占多少，可以设置div的宽（width）高（height），通过align设置内容的对齐方式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="width:500px;height:100px;" align="center">这是一个div</div>
1111
</body>
</html>
2.span?
<span> 用于对文档中的行内元素进行组合。<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。提示：被 <span> 元素包含的文本，您可以使用 CSS 对它定义样式，或者使用 JavaScript 对它进行操作。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<span>这是一个span</span>
1111
</body>
</html>
?7.格式化标签
?1.font
<font> 标签规定文本的字体 face、字体尺寸 size、字体颜色 color。
提示：HTML5 不支持 <font> 标签。请用 CSS 代替。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<font color="lightsalmon" size="5" face="楷体">你好</font>
</body>
</html>
2.pre
<pre> 标签可定义预格式化的文本。被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<pre>
hello
world
</pre>
</body>
</html>
3. 文本标签
?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p><b>以后</b>的<strong>你</strong>会<i>感谢</i>现在<u>努力</u><del>mi</del>的自己</p>
H<sub>2</sub>O
</body>
</html>
?8.a标签
?超链接标签，用于连接到一个新的URL。
常用属性：href：需要跳转的地址（必须属性）
? ? ? ? ? ? ? ? ? target:窗口打开的方式? ? ? ? ? _self:当前窗口（默认）? ? ? ? ? ?_blank:在空白的窗口
作为锚点：a标签的name属性值? ?<a name="top"></a>
? ? ? ? ? ? ? ? ? 其他的id属性值? <div id="top"></div>
? ? ? ? ? ? ? ? ? 锚点的使用? <a href="#top"></a>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<a name="test">Hello<br>World</a>
<a href="https://www.baidu.com" target='_blank'>百度</a>
<h2 id="bjdah">北京冬奥会</h2>
<a href="#">回到顶部</a>
<a href="#bjdah">北京冬奥会</a>
<a href="#test">hello world</a>
</body>
</html>
9.图片?
? img标签：向网页中嵌入一张图标
常用属性：srg：需要引入的图片的地址（必须属性）
? ? ? ? ? ? ? ? ? alt：当图片破损或不存在时，显示的文本
? ? ? ? ? ? ? ? ? title ：当鼠标悬停在图片上时显示的文本
? ? ? ? ? ? ? ? ? width：图片宽度
? ? ? ? ? ? ? ? ?height：图片高度
? ? ? ? ? ? ? ? ?border：图片边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<img src="img/国家体育馆.jpg" width="500" height="400" border="2" title="国家体育馆"alt="图片"/>
</body>
</html>
10.表格
?表格标签：table 表格
? ? ? ? ? ? ? ? ? ?tr? ? ? ?行
? ? ? ? ? ? ? ? ? ?td? ? ? 标准单元格
? ? ? ? ? ? ? ? ? ?th? ? ? ?表头
table的属性：width? 表格的宽度
? ? ? ? ? ? ? ? ? ? ? ?border? ?边框
? ? ? ? ? ? ? ? ? ? ? ?align? ? ?对齐方式
? ? ? ? ? ? ? ? ? ? ? ?style="border-collapse: collapse? ?合并表格边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table width="400px" align="center" border="1" style="border-collapse: collapse;">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr align="center" bgcolor="bisque">
<td>1</td>
<td>张三</td>
<td>18</td>
</tr>
<tr align="center" bgcolor="bisque">
<td>2</td>
<td>李四</td>
<td>19</td>
</tr>
</table>
</body>
</html>