超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。
这是一个系列,会持续更新
1.标题
HTML5共有6个级别的标题,h1定义最大标题,h6定义最小标题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
2.注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--这是一个 注释-->
</body>
</html>
3.段落
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>这是一个段落</p>
<p>这是另一个段落</p>
</body>
</html>
4.文本格式化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<b>粗体</b>
<em>着重文字</em>
<i>斜体</i>
<small>小号字</small>
<strong>加重语气</strong>
<sub>下标字</sub>
<sup>上标字</sup>
<ins>插入字</ins>
<del>删除字</del>
</body>
</html>
5.链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
</body>
</html>
6.换行、分割线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>第一行<br>第二行</p>
<p>分割线</p><hr>
<p>分割线</p>
</body>
</html>
7.头部信息
<head> 元素包含了所有的头部标签元素。在
<head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>,
<meta>, <link>,
<script>, <noscript>, and <base>.
<head>定义了文档的信息
<title>定义了文档的标题
<base>定义了页面链接标签的默认链接地址
<link>定义了一个文档和外部资源之间的关系
<meta>定义了HTML文档中的元数据
<script>定义了客户端的脚本文件
<style>定义了HTML文档的样式文件
8.插入图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>插入的图片</p>
<img src="加油.gif" alt="come on!">
</body>
</html>
9.表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
height: 5cm;
width: 10cm;
text-align: center;
color: blue;
border-color: aquamarine;
}
</style><!--设置表格大小,文字位置,颜色-->
</head>
<body>
<table border="1">
<caption>student data</caption><!--表格名称-->
<tr><th>name</th><th>age</th></tr><!--表头-->
<tr><td>tom</td><td>18</td></tr>
</table>
</body>
</html>
align可以设置位置,left:居左;right:居右;center:居中
height:高度;width:宽度
在stytle中可以设置相关属性。