【HTML5】HTML5基础语法汇总HTML
超⽂本标记语⾔（Hyper Text Markup Language，简称HTML）是⼀种构建⽹页的标准标记语⾔。
那么“超⽂本”和“标记语⾔”是什么意思呢？
超⽂本：可以展⽰动画、图⽚、⾳视频等多媒体的内容，还可以进⾏⽂本之间的跳转。
标记语⾔：HTML全部是由标记标签组成的。这些标签⽤来描述⽹页的结构特点。
HTML与CSS、JavaScript组合使⽤，可以⽤来完成⼀个⽹页、⽹页应⽤程序、移动应⽤程序界⾯的开发。
三者的协作关系和各⾃的职能是什么呢？
HTML是构建⼀个⽹页的基础，CSS会让⽹页变得更好看，JavaScript会让⽹页实现更多的交互⾏为。CSS和JavaScript可以嵌⼊在HTML合适的位置中。
因此，HTML是⽹页开发最基础的知识了，它是构建⼀个⽹页的基础，也是⽹页的⾻架。
基本开发⽅式
选择⼀款⽂本编辑器（甚⾄记事本都可以），编辑HTML代码，保存为.html⽂件。
原本使⽤过：
现在基本使⽤或者：
可以借助⽂本编辑器运⾏，也可以在浏览器中到⽂件运⾏。
HTML最基本的样例
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>HelloWorld</title>
</head>
<body>
<h1>HelloWorld</h1>
</body>
</html>
HelloWorld的运⾏结果：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type"content="text/html"charset="utf-8"/> <title>基本元素</title>
</head>
<body>
<!--使⽤<h1></h1>到<h6></h6>标题来输出⽂本-->
<h1>Sam</h1>
<h2>Sam</h2>
<h3>Sam</h3>
<h4>Sam</h4>
<h5>Sam</h5>
<h6>Sam</h6>
<!--输出⼀条⽔平线-->
<hr/>
<!--使⽤三个<span>定义段⽂本-->
<span>Sam</span><span>Sam</span><span>Sam</span>
<!--输出换⾏-->
<br/>
<!--使⽤三个<div>定义三节-->
<div>Sam</div><div>Sam</div><div>Sam</div>
<!--使⽤三个<p>定义单个段落-->
<p>Sam<p>Sam<p>Sam
</body>
</html>
上⾯这段代码是⾮常简单的，运⾏结果：
HTML语法
HTML⾻架标签
<!DOCTYPE HTML>：告诉浏览器我们的HTML版本是HTML5，然后浏览器就按照HTML5的规则进⾏解析。
<html> </html>：HTML标签中的根结点标签。
<head> </head>：HTML标签中的头标签，是对页⾯进⾏的⼀系列配置。⽐如使⽤的编码格式、⽹页的标题，等等。这⾥⾯编辑的内容都不会展⽰到⽹页的内容区域。
<body> </body>：HTML标签中的内容标签，⽹页上展⽰的内容都是由body标签完成的。
上⾯的HTML标签⾥经常有这些标签
<meta>：提供对界⾯进⾏配置的⼀些元素的信息，位于head标签⾥。
<meta charset="utf-8">：表⽰使⽤UTF-8的编码格式。如果没有特殊要求都使⽤这个。
<title> </title>：整个⽂档的标题标签，代表⽹页标题要展⽰的内容。
HTML标题标签
text align center<h1> </h1>：⽂档标题标签，⼤⼩最⼤，往下依次递减。
<h2> </h2>：……
<h3> </h3>：……
<h4> </h4>：……
<h5> </h5>：……
<h6> </h6>：⽂档标题标签，⼤⼩最⼩，往上依次递增。
HTML段落标签
<p> </p>：⼆者之间添加段落内容即可。
HTML换⾏标签和分割线标签
<br/>：换⾏标签。
<hr/>：分割线标签。
HTML格式化标签
<b>：字体加粗。
<strong>：字体加粗，加强语义。
<i>：字体倾斜。
<em>：字体倾斜，加强语义。
<s>：删除线。
<del>：删除线，加强语义。
<u>：下划线。
<ins>：下划线，加强语义。
<q>：加双引号。
<sub>：下标。
<sup>：上标。
HTML的div和span标签
- `<div>`：被div包裹住的内容会以分块的形式纵向排列在⽹页上，可与CSS结合。
- `<span>`：对⾏内元素进⾏组合，横向排列在⽹页上，可与CSS结合。
HTML图⽚
<img>：图⽚标签。
src：显⽰图⽚属性。
width：显⽰图⽚宽度的属性。
height：显⽰图⽚⾼度的属性。
alt：当图⽚⽆法显⽰的时候，代替图⽚的⽂字的属性。
title：⿏标停留在图⽚上时，显⽰的⽂字的属性。
注意路径选择：
绝对路径：可以选择PC或者服务器的⼀个⽂件或者⼀个⽹络路径（⽹路连接）。
相对路径：
图⽚和img.html在同⼀⽂件夹下：<img src="pic.jpg" />
图⽚在img.html所在⽂件夹的⽗⽂件夹下：<img src="../pic.jpg" />
../可以多次使⽤：../../../pic.jpg
图⽚在img.html所在⽂件夹的⼦⽂件夹下：<img src="folder/pic.jpg" /> HTML列表
<ul>：⽆序列表。
<ol>：有序列表。
<li>：有序、⽆序列表的项。
<dl>：描述列表。
<dt>：描述列表的项。
<dd>：描述列表项的内容。
可配置⽆序列表的标识：
disc：原点标识（默认效果）。
circle：空⼼圆标识。
square：⽅块标识。
none：不显⽰标识。
可配置有序列表的标识：
1：按照阿拉伯数字排序（默认）。
A：按照⼤写字母排序。
a：按照⼩写字母排序。
I：按照⼤写罗马字母排序。
i：按照⼩写罗马字母排序。
start属性可以配置列表开始的序号。
HTML表格
<table>：定义⼀个表格。
<tr>：定义⼀个⾏。
<td>：定义表格的元素。
<th>：定义表格的头。
<caption>：设置表格标题。
属性：
width：表格宽度。
height：表格⾼度。
border：表格边框。
cellspacing：单元格和单元格之间的距离。
cellpadding：单元格内容和边框之间的距离。
align：表格在⽹页中的位置。
注意：
<table>、<tr>、<td>、<th>嵌套顺序不能颠倒<caption>必须在<table>⾥使⽤
HTML超链接

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