一、HTML简介
超文本标签语言，即网页的源码。而浏览器就是翻译解释HTML源码的工具。
二、HTML Head部分
<1>Head的作用
用于描述网页的一些关键信息。比如网页的配置、设置、关键字等等。这些信息大多在浏览器是看不到的，但是对网页的解析至关重要。
<2>meta标签
①用于描述网页的各种信息。网页编码格式UTF-8:万国码，兼容各种语言的编码，最常用！
②设置网页的关键字，有助于搜索引擎的搜索。name="keywords" 表示网页的关键字；content=" " 表示关键字的详细信息，多个关键字用英文逗号分隔；
③设置网页的描述信息，搜索引擎搜索时标题下面的一段文字。name="description" 表示网页的描述信息；content=" " 表示描述信息的详细内容。
<3>link标签
链接网页的小图标。rel="icon" 表示当前link的作用是链接网页图标；href="img/icon.jpg"中 href表示图标的地址。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords" content="杰瑞教育,H5周末班,网页开发" />
<meta name="description" content="这是我在杰瑞教育开发的第一个网页！" />
<title>这是我的第一个网页</title>
<link rel="icon" href="img/icon.jpg" />
</head>
<body>
浩哥真帅！
</body>
</html>
三、HTML标签的分类
1、块级标签：显示为块状，独占一行，自动换行。
2、行级标签：在一行中，从左往右依次排列，不会自动换行。
【块级标签与行级标签的区别】
1.块级标签：默认宽度100%（占满一行）；
块级标签自动换行（独占一行，右边不能有任何东西）；
块级标签可以使用CSS设置高度、宽度！
2.行级标签：默认宽度由内容撑开（内容多宽、宽度就占多宽）；
行级标签不会自动换行（一行当中从左往右依次排开）；
行级标签的高度宽度不能设置！
（一） 基于布局的块级标签
<1> h标签
标题标签，显示为黑体加粗，共分为6种：h1~h6: h1最大，h6最小。
<2> hr标签
表示一条水平线 <hr />
<h1>这是h1标签</h1>
<h2>这是h2标签</h2>
<h3>这是h3标签</h3>
<h4>这是h4标签</h4>
<h5>这是h5标签</h5>
<h6>这是h6标签</h6>
<hr/>
<3> P标签
表示段落标签。相当于我们文章中的一段文字。
<br/> 换行符。【注意】在代码中，直接回车换行，浏览器并不认识。必须使用<br/>告诉浏览器这里要断行。
<4> pre标签
预格式标签。会保留代码中的空格、回车等符号，直接在浏览器显示。pre标签常用于在网页中显示代码，保留代码格式。
<pre>
if(entity != null){
tring result = EntityUtils.toString(entity,"UTF-8");//HttpEntity转为字符串类型
jsonObject = JSONObject.fromObject(result);//字符串类型转为JSON类型
}
</pre>
<5> blockquote 块引用标签
表明一段话是从其他网站引用的。其重要属性：cite=" " 表示这段话的引用来源，常放一个网站地址。但是浏览器显示并没有任何区别。
<6> 无序列表 ul
无序列表用<ul>表示，列表中的每一个列表项用<li>表示。
<ul>
<li>这是无序列表第一项</li>
<li>这是无序列表第二项</li>
<li>这是无序列表第三项</li>
<li>这是无序列表第四项</li>
</ul>
<7> 有序列表ol
有序列表用<ol>标签，标签中的每个列表项用<li>表示。
<ol>
<li>这是有序列表第一项</li>
<li>这是有序列表第二项</li>
<li>这是有序列表第三项</li>
<li>这是有序列表第四项</li>
</ol>
<8> 定义列表dl
定义列表<dl>,里面有一个标题<dt>,有多个描述项<dd>。<dt>顶格 <dd>自动缩进。
<dl>
<dt>这是dl列表的标题</dt>
<dd>这是dl列表的描述项1</dd>
<dd>这是dl列表的描述项2</dd>
<dd>这是dl列表的描述项</dd>
</dl>
<9> 图片组合标签<figure>
①图片<img/>后续讲解；②图片标题：<figcaption> </figcaption>
<figure>
<img src="img/icon.jpg"/>
<figcaption>图片的描述标题</figcaption>
</figure>
<10> 分区标签<div> (最常用的标签)
div标签需要配合使用CSS，现在并没有什么用；
div标签没有任何特殊的作用，仅仅起到一个包裹内容的作用 常用于网页中划分区块；
div标签可以包裹任何内容，需配合CSS一起使用。
<div style=" width:500px; height:100px; background:greenyellow ;">
这是div里面的文字！
<p>1234567890</p>
</div>
（二）基本的行级标签
<1> span（文本）标签
span标签特点：类似块级div
①只是包裹作用，没有其他任何作用；
②作用于div类似，需要配合CSS使用，只不过div是块级标签，span是行级标签。
浩哥真<span style="color: red;font-size: 48px;">帅</span>！！！
<br/> <br/> <br/>
<2> em（强调）/strong（强调）、i（倾斜）/b（加粗）
① em和i都能倾斜。strong和b都能加粗！但是i和b仅仅只是倾斜和加粗，而strong和em多了强调的语义。
② em和strong都表示强调，但是strong强调的级别更高。
【注意】
1.强调的目的：让搜索引擎知道网页重点强调的内容!便于搜索引擎显示。
2.strong和em都可以多层嵌套，表示强调程度的递增
<em>这是em标签</em><br/>
<strong>strong标签</strong><br/>
<b>b 标签</b><br/>
<i>i 标签</i><br/>
<u>这是 u标签</u><br/><br/>
<3> 引用标签
q标签（quote）：表示短引用。
cite属性：用于声明引用的来源。
<blockquote>用于引用一段内容</blockquote> <q>用于引用一句话</q> <cite>常用于引用作品名、书画名等</cite>
相同点：三个引用标签，都用cite属性表示引用来源
不同点：①引用内容不同。blockquote->一段话; q->一句话 ; cite->作品名。
②显示默认效果不同。blockquote->默认整段向右缩进;q->默认加引号; cite->默认倾斜。
<q cite="http://www.jianghaozhenshuai.com">我是q标签引用</q><br/>
<blockquote cite="">我是blockquote的引用</blockquote><br/>
<cite cite="">这是cite标签引用！</cite><br/><br/>
<4> 字体大小
small：将字体缩小一号； big：将字体放大一号。
【注意】 ①small和big可多层嵌套，直到字体到达最大最小为止；②已淘汰，不建议使用。
<5> img 图片标签
① src属性：表示图片的路径 [图片路径的合法方式]
相对路径： src=>“source”
① 图片与当前文档在同一层文件夹：直接写图片名；
② 图片在当前文档的下一层文件夹：文件夹名/图片名；
③ 图片在当前文档的上一层文件夹：../图片名（../表示后退一层）；
【注意】图片必须包含在项目里，不能访问项目外的图片。
②height：图片高度 width:图片宽度
③title：图片的标题 即鼠标指上后看到的提示文字。
④alt：图片无法加载时显示的文字。
⑤align：图片周围的文字相对于图片如何对齐。可选值： top、 center、 bottom
<img src="img/icon.jpg" style width="200px" height="200px"></img>
<img src="https://www.baidu.com/img/bd_logo1.png"></img>
<img src="file：///E:/bd_logo1.jpg"></img><br/><br /> <img src="bd_logo1.png" />
<img src="img/icon.jpg" title="考拉" />
<img src="../icon.jpg" />
<img src="../img/bd_logo1.png"/><br/><br /> <img src="../bd_logo1.png" alt="图片无法加载显示"/> <br />
<img src="../icon.jpg" align="top"/> 123456 <br /> <br />
<6> 超链接 a
①href属性：表示超链接需要跳转的页面。
a.可以写网络地址；
b.可以打开本地文件：采用相对路径确定文件地址，与img标签确定方式相同。
② title属性：鼠标指上后显示的文字。
③ target属性：设置新页面打开后的窗口位置 。可选值：_self自身页面打开（默认） _blank新窗口打开。
【超链接的特殊应用】
1.功能性链接
mailto:// 点击链接给指定邮箱发送邮件
tencent：//message/?uin=1257943317 点击与指定QQ聊天
ftp：//使用ftp协议进行文件的上传下载。
2、锚链接
本页面锚链接
① 在页面的指定位置设置一个锚点，用name属性表示锚点的名字；
② 将超链接的href属性，设置为#加锚点名字。
页面间锚链接
① 在新页面的指定位置设置一个锚点，用name属性表示锚点的名字；
② 将超链接的href属性，设置为“新页面地址#加锚点名字”。
<a href="http://www.baidu.com" target="_blank">这是一个超链接01</a><br/>
<a href="01-HTML-Head部分.html" target="_bank">这是一个超链接02</a><blr />
<a href="../text000.html" title="测试网站" target="_blank">外链接</a><br/>
<a href="mailto：//15269599302@163.com" title="我的邮件" target="_blank">点击给指定邮件发送邮件</a> <a name="#center"></a>
<div style="background-color: greenyellow;height:800px ;"></div>
<a href="#top">点击返回顶部！</a>
<a href="#center">点击跳到中间!</a> <a href="../text000.html#one" target="_blank">点击新页面第一部分</a>
<a href="../text000.html#two" target="_blank">点击新页面第二部分</a>
<a href="../text000.html#three" target="_blank" >点击新页面第三部分</a>
四、W3C规范
1、W3C：万维网联盟，负责制定和维护Web行业开发标准。
2、要求的规范：
① 两个分离： 内容与表现分离（HTML与CSS分离） ；内容与行为分离（HTML与JavaScript分离开）；
② HTML语言要遵循语义化！
③ 关于代码书写的规范：
HTML中的标签与属性必须要小写；
HTML中的标签必须闭合 <p></p> <img/>；
属性值必须用引号引起来 <img src="属性值"/>；
HTML标签必须正确嵌套。（不能交叉、块级标签可以包裹行级，行级标签不能包裹块级）
五、HTML表格
表格用Table表示，表格中的每一行用tr表示，一行中的每一列用td表示； th表示的是表头，表头中的文字默认加粗居中；th要放在tr中，相当于替换掉td。
<1> table常用属性
1、boder：给表格加边框，并且给整个table加外边框，当增大boder的值时，td上的值不变化，只有最外层大边框变宽
2、cellspaceing:单元格 与单元格之间的距离。
cellspaceing="0":单元格 与单元格之间没有距离。但是边框线的宽度依然是两条线的宽度。
【注意】表格边框合并的CSS写法：style="border-collapse: collapse；"
这条css与cellspaceing="0"的区别：
后者仅是将单元格之间的属性调整为0，实际上单元格之间依然还是两条线；
前者是将表格相邻的两条边框合并处理，只有一条线存在。（一旦边框合并，cellspacing失效）
3、cellpadding="20" ：单元格中的文字与单元格边框的距离。
4、 height：表格的高度 width：表格的宽度
使用表格宽高属性设置大小： <table height="400" width="500"></table>
使用CSS样式设置大小： <table style="height:400px;width:500px;"></table>
5、align：设置表格在浏览器中位置。不建议使用了。可选值：left center right
6、bgcolor:背景色； bordercolor:边框颜色； background：背景图。当背景色跟背景图同时存在时，背景图会覆盖背景色。
<2> tr与td常用属性
1、width、 height；
2、bgcolor="red"：单元格背景颜色；
3、align：设置单元格中的文字，水平对齐方式；left、center、right
valign：设置单元格中的文字，垂直对齐方式；top、middle、bottom
4、nowrap="nowrap"：当单元格文字过多时，设置单元格文字不断行显示，但是，会把表格的宽度增大！
<3> 表格的跨行与跨列
1、跨列：在td上使用属性colspan="n"进行跨列
2、跨行：在td上使用属性rowspan="n"进行跨行
参考代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML表格</title>
</head>
<body>
<table style="width: 500px;height: 100px;border-collapse: collapse;" border="1" bordercolor="red" bgcolor="aquamarine" align="center">
<tr bgcolor="pink">
<th nowrap="nowrap">标题一</th>
<th>标题二</th>
<th>标题三</th>
</tr>
<tr style="color: red;" >
<td rowspan="2">1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td colspan="2">2-2</td>
</table>
</body>
</html>
六、后记
这是小女第一次发微博，写此后记纪念一下。通过这两堂课跟HTML的接触，我发现自己还是很喜欢她的，只是我没有与生俱来的编码天分，一切还在摸索阶段，希望可以通过后天的勤奋努力称为编码界中的佼佼者。加油↖(^ω^)↗