HTML5⼊门（⼀）——基本标签表格
⼀、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.⾏级标签：默认宽度由内容撑开（内容多宽、宽度就占多宽）；
⾏级标签不会⾃动换⾏（⼀⾏当中从左往右依次排开）；
html ul标签⾏级标签的⾼度宽度不能设置！
（⼀）基于布局的块级标签
<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 = String(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 >
这是div⾥⾯的⽂字！
<p>1234567890</p>
</div>
（⼆）基本的⾏级标签
<1> span（⽂本）标签
span标签特点：类似块级div
①只是包裹作⽤，没有其他任何作⽤；
②作⽤于div类似，需要配合CSS使⽤，只不过div是块级标签，span是⾏级标签。
浩哥真<span >帅</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="www.jianghaozhenshuai">我是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="www.baidu/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="www.baidu" 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：//152********@163" title="我的邮件" target="_blank">点击给指定邮件发送邮件</a>
<a name="#center"></a>
<div ></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写法：
这条css与cellspaceing="0"的区别：
后者仅是将单元格之间的属性调整为0，实际上单元格之间依然还是两条线；
前者是将表格相邻的两条边框合并处理，只有⼀条线存在。（⼀旦边框合并，cellspacing失效）
3、cellpadding="20" ：单元格中的⽂字与单元格边框的距离。
4、 height：表格的⾼度 width：表格的宽度
使⽤表格宽⾼属性设置⼤⼩： <table height="400" width="500"></table>
使⽤CSS样式设置⼤⼩： <table ></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   border="1" bordercolor="red" bgcolor="aquamarine" align="center">
<tr bgcolor="pink">
<th nowrap="nowrap">标题⼀</th>
<th>标题⼆</th>
<th>标题三</th>
</tr>
<tr >
<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的接触，我发现⾃⼰还是很喜欢
她的，只是我没有与⽣俱来的编码天分，⼀切还在摸索阶段，希望可以通过后天的勤奋努⼒称为编码界中的佼佼者。加油↖(^ω^)↗

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。