前言：个人的学习习惯，学过的知识如果没有总结总觉得没有掌握，刚好周末回顾总结下基础知识。
第一部分：HTML初始
1.什么是HTML？
HTML指的是超文本标记语言(Hyper Text Markup Language)，是由一套标记标签组成的标记语言，用于描述、构造网页。
2.HTML元素？
HTML元素指从开始标签到结束标签的所有代码，开始标签称为开放标签，结束标签称为闭合标签。
元素语法：
1>以开始标签起始，以结束标签终止，大多数可以用于属性。
2>空元素在开始标签中进行关闭。
3>HTML元素之间可以进行嵌套，网页就是由嵌套的元素所组成。
4>HTML元素不区分大小写，但是标准中推荐使用小写。
???<!-- 开始标签和结束标签都有 --> ???<p>HTML元素的基本语法，用于开始标签和结束标签的双标签</p> ???<!-- 用于属性的标签 --> ???<a href="http://www.baidu.com"></a> ???<!-- 空元素在开始标签就结束 --> ???<br/>
第二部分：HTML基本元素
1.标题标签(h*)
HTML中标题是通过<h1> - <h6>标签进行定义的，h1到h6标题依次从大到小。
特点：标题标签在HTML中属于块级元素，会单独的占据一行。
???<!-- 标题标签时块元素，会独占一行 --> ???<h1>This is a heading</h1> ???<h2>This is a heading</h2> ???<h3>This is a heading</h3>
注意：
标题是语义化标签，正确用法只用于标题，不要仅仅为了产生粗体或大号文本而使用。
2.水平线标签(hr)
<hr/>标签在HTML页面中创建水平线，可用于分隔内容。
???<!-- hr水平线标签用于分隔内容 --> ???<p>This is a paragraph</p> ???<hr /> ???<p>This is a paragraph</p> ???<hr /> ???<p>This is a paragraph</p>
3.段落标签(p)
段落可以把HTML文档分割为若干段落，通过<p>标签定义。
p段落也是块级元素，会独占一行，浏览器会在段落的前后添加空行。
???<!-- p段落标签也是块级元素，会独占一行 --> ???<p>This is a paragraph</p> ???<p>This is another paragraph</p>
4.换行标签(<br/>)
在段落内部，不产生新段落的情况下进行换行，使用<br/>
???<!-- br在段落内对内容进行换行 --> ???<p>This is<br />a para<br />graph with line breaks</p>
注意：当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或/空行都会被当做一个空格。
5.超链接(a)
HTML使用超链接与网络上的另一个文档相连，点击链接可以从一个页面跳到另一个页面。
超链接可以是一个字、或一组词，也可以是一副图像，点击可以跳转新页面也可以跳转到当前页面的其他部分。
举例：跳转至新页面/跳转当前页面某部分
???<!-- 跳转到新页面，百度首页 --> ???<a href="http://www.baidu.com">百度</a> ???<br> ???<!-- a标签有id属性 --> ???<a id=‘top‘>顶部</a> ???<br/> ???回到顶部 ???<br/> ???回到顶部 ???<br/> ???<!-- href属性通过#top,可以定位到同页面id为top的a标签 --> ???<a href="#top">回到顶部</a>
超链接为图像：
???<a href="index2.html"> ???????<img border="0" src="/img/logo.gif" /> ???</a>
举例：不同页面间锚定位
先创建index2.html文件
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<meta name="viewport" content="width=device-width, initial-scale=1.0"> ???<meta http-equiv="X-UA-Compatible" content="ie=edge"> ???<title>Document</title></head><body> ???<a id="index2">index2页面上的锚点</a></body></html>
跨页面的锚点跳转：点击a超链接跳转至index2页面。
<body> ???<a href="index2.html#index2">跳转至index2.html</a></body>
a标签实现发短信、打电话、发邮件、定位等功能
???<div id="my"> ???????<!-- 实现打电话 --> ???????<a href="tel:xxxxxxxxx">xxxxxxxxxxxx</a> ???????<!-- 实现发邮件功能 --> ???????<a href="mailto:c1586@qq.com?subject=TestObject">c6088@qq.com</a> ???????<!-- 实现发短信功能 --> ???????<a href="sms:10086?body=message_body">给 10086 发短信</a> ???????<!-- 实现定位功能 --> ???????<a href="geopoint:116.281469,39.866035">我的位置</a> ???</div>
a标签的target属性：
target属性定义被链接的文档在何处显示。
取值：_blank在--新窗口打开，_self--在当前窗口打开，_top--(跳出框架)。
注意：请始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.w3school.com.cn/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.w3school.com.cn/html/"。
6.图像标签(<img>)
通过使用HTML中的<img>标签在文档中显示图像，<img>是空标签，只包含属性没有闭合标签，使用src属性显示图像。
???<div id="testImg"> ???????<!-- src表示图像的存储路径，alt表示昂src图片找不到时的提示信息 --> ???????<img src="./img/cat.jpg" alt="当前图片丢失"> ???</div>
注意：假如 HTML 文件包含十个图像，为了正确显示这个页面，需要加载 11 个文件，也就意味着需要发送11个请求，增加了服务器的压力，所以要‘慎用图片‘。
图像映射：<map><area></area></map>
我们经常会给图片绑定超链接，方便用户欣赏大图或者跳转页面。HTML有个图像映射的功能，可以在一张大图的不同区域绑定链接，让用户可以有更新奇的体验。
示例：详细参照--http://www.w3school.com.cn/tags/tag_map.asp
<body> ???<!-- img中需要使用usemap属性关联映射map元素 --> ???<img src="./img/bigDog.jpg" usemap="#umap" alt="猫和狗" /> ???<!-- map元素中需要设置id表示，以便img标签引用 --> ???<map id="umap" name="umap"> ???????<!-- area表示在img图像中这是不同的区域。 --> ???????<!-- shape表示区域的形状，coords表示区域的坐标位置，href表示该区域的跳转的资源,可以是图片也可以是页面 --> ???????<area shape="rect" coords="220,180,420,400" href="./img/smlDog1.jpg" ???????????alt="狗1" target="_blank" /> ???????<area shape="circle" coords="685,340,130" href="./img/smlDog2.jpg" ???????????alt="狗2" target="_blank" /> ???</map></body>
7.表格及其子元素
表格由table标签定义，行由<tr>定义，单元格由<td>定义。主要用来格式化显示数据。
表格边框、标题、内外边距：border/cellpadding/cellspacing
<body> ???<!-- border为表格及单元格都添加了边框，通过cellpadding可以设置单元格的内边距，cellspacing设置单元格的外边距 --> ???<table border="1" cellpadding=‘10‘ cellspacing=‘10‘> ???????<!-- th表示表格表头 --> ???????<tr> ???????????<th>语文</th> ???????????<th>数学</th> ???????</tr> ???????<tr> ???????????<td>100</td> ???????????<td>96</td> ???????</tr> ???????<tr> ???????????<td>87</td> ???????????<td>100</td> ???????</tr> ???</table></body>
跨行、跨列：rowspan/colspan
<!-- colspan表示合并多列 --> ???<table border="1"> ???????<tr> ???????????<th>姓名</th> ???????????<th colspan="2">电话</th> ???????</tr> ???????<tr> ???????????<td>Bill Gates</td> ???????????<td>555 77 854</td> ???????????<td>555 77 855</td> ???????</tr> ???</table> ???<!-- rowspan表示合并多行 --> ???<table border="1"> ???????<tr> ???????????<th>姓名</th> ???????????<td>Bill Gates</td> ???????</tr> ???????<tr> ???????????<th rowspan="2">电话</th> ???????????<td>555 77 854</td> ???????</tr> ???????<tr> ???????????<td>555 77 855</td> ???????</tr> ???</table>
8.html中的列表
HTML支持有序、无序、自定义列表，主要用来显示列表格式的数据。
无序列表：
???<!-- 默认样式是大黑点，可以使用type属性设置样式 ???????type取值：square/disc/circle等 ???--> ???<ul type=‘disc‘> ???????<li>篮球</li> ???????<li>羽毛球</li> ???????<li>游泳</li> ???????<li>跑步</li> ???</ul>
有序列表：
???<!-- 默认样式是数字，可以使用type设置样式 ???????type: A/a/I/i ???--> ???<ol type="A"> ???????<li>苹果</li> ???????<li>香蕉</li> ???????<li>柠檬</li> ???????<li>桔子</li> ???</ol>
自定义列表：
???<h2>一个定义列表：</h2> ???<dl> ???????<dt>计算机</dt> ???????<dd>用来计算的仪器 ... ...</dd> ???????<dt>显示器</dt> ???????<dd>以视觉方式显示信息的装置 ... ...</dd> ???</dl>
注意：ul/ol直接子元素只能是li标签，li标签中可以嵌套其他元素标签。
HTML--基础标签(1)
原文地址：https://www.cnblogs.com/diweikang/p/9060761.html