HTML基本的格式
<!DOCTYPE html> <!-- 声明文档。定义html -->
<html lang="en"> <!-- 元素是页面的根元素 -->
<head> <!-- 元素包含文档的元数据 --><meta charset="UTF-8"> <!-- 定义网页编码格式 --><title>第一个项目</title> <!-- 元素描述了文档的标题-->
</head>
<body><!--元素包含了页面可以看见的内容。定义文档主体。--><p>这个p是段落。可以把很多文字放到里面去。比如这是一段文字。</p><p>这是另一个段落。</p><h1>这是h1标题</h1><!-- 通过<h1>-<h6>标签来定义 --><h2>这是h2标题</h2><h3>这是h3标题</h3><h4>这是h4标题</h4><h5>这是h5标题</h5><h6>这是h6标题</h6><hr><!--定义水平线--><p>这是一个段落。插入图片</p><a href="www.baidu.com">这是跳转到的百度链接</a> <!--<a>标签来定义。在 href 属性中指定链接的地址。--><br><!--换行--><img src="images/one.jpg" alt="" width="500" height="500"> <!--图像是通过标签 <img> 来定义的。 --><img src="images/two.jpg" alt="" width="500" height="500"><hr>
<!--文本格式化的标签--><b>这是一句话。定义粗体</b><em>这是一句话。定义着重文字</em><i>这是一句话。定义斜体</i><small>这是一句话。定义小字号</small><strong>这是一句话。定义加重语气</strong><p>插入<sub>这是一句话</sub>定义下标字</p><p>插入<sup>这是一句话</sup>定义上标字</p><ins>这是一句话。定义插入字</ins><del>这是一句话。定义删除字</del>
<!-- 计算机输出标签 --><hr><p>这是计算机输出标签</p><code >#定义计算机代码print("hello world!")</code><br><kbd>定义键盘码</kbd><br><samp>定义计算机代码样本</samp><br><var>定义变量</var><pre>定义预格式文本</pre><p><b>注释：</b>这些标签常用于显示计算机/编程代码。</p>
<!-- HTML 引文 引用 标签定义 --><hr><abbr title="">定义缩写</abbr><address>定义地址</address><p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p><blockquote>定义长的引用</blockquote><q>定义短的引用</q><br><cite>定义引用、引证</cite><br><dfn>定义一个定义项目</dfn>
</body>
</html>
页面的展示：
头文件标签的使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>这是一个标题</title><base href="www.baidu.com"> <!--定义页面链接标签的默认链接地址--><link rel="stylesheet" href="lesson01.html"><!--定义一个文档和外部资源之间的联系--><meta name="lizhe" content="web开发"><!-- 定义HTML文档中的元数据--><script></script><!--定义客户端的脚本语言--><style></style> <!--定义HTML文档的样式文件-->
</head>
<body>
</body>
</html>
HTML图片的运用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>img</title>
</head>
<body><b>来自本地文件夹的图片</b><p>这是一张图片</p><img src="images/three.jpg" alt="view" width="300" height="200"><p>这是一张动图</p><img src="images/haha.gif" alt="do" width="300" height="200"><hr><p>来自网站的图片</p><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603976446&di=919d66677c39ad3198f97c54cc1d1982&imgtype=jpg&er=1&src=http%3A%2F%2Fi1.hdslb.com%2Fbfs%2Farchive%2F213205624b29002ace7d11f2c546016400c10750.png" alt="" width="300" height="100"><p>这是一个微笑 <img src="images/smile.jpg" align="bottom" alt="smile" width="70" height="70"> 这是一个微笑</p><p>这是一个微笑 <img src="images/smile.jpg" align="middle" alt="smile" width="70" height="70"> 这是一个微笑</p><p>这是一个微笑 <img src="images/smile.jpg" align="top" alt="smile" width="70" height="70"> 这是一个微笑</p><p>注意:在HTML 4中 align 属性已废弃 HTML5已不支持该属性 可以使用 CSS 代替。</p><p>创建图片链接<a href="www.baidu.com"><img border="5" src="images/smile.jpg" alt="smile" width="50" height="50" align="middle"></a></p><hr><p>map的使用</p><img src="images/four.jpg" alt="pepple" width="400" height="400" usemap="#view"><map name="view"><area shape="rect" coords="0,0,100,100" href="images/smile.jpg" alt="01"><area shape="circle" coords="300,300,100" href="images/smile.jpg" alt="02"><area shape="circle" coords="300,100,10" href="images/smile.jpg" alt="03"></map></body>
</html>
表格和列表
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>table and list</title>
</head>
<body><h3 style="color:green">下面开始建立一个表格</h3><table border="1" cellpadding="10" cellspacing="10"> <!-- border代表边框的粗细。为0时就没有边框了。cellpadding设置表格内的边距--><!--cellspacing设置单元格间距 --><caption><b>学生基本信息</b></caption> <!--添加表头信息--><!-- --><tr><th>姓名</th><th>年龄</th><th>体重(kg)</th></tr><tr><td>小明</td><td>20</td><td>67</td></tr><tr><td>大白</td><td>23</td><td>75</td></tr><tr><td>李白</td><td>28</td><td>80</td></tr></table><h3 style="color:green">跨行或跨列的表格</h3><table border="1"><tr><th>职业</th><th>收入</th><th colspan="3">手机号两个到三个联系方式</th></tr><tr><td>老师</td><td>5000</td><td>182222</td><td>182222</td><td>182222</td></tr><tr><td>医生</td><td>7000</td><td>19999</td><td>19999</td><td>-</td></tr></table><br><table border="1"><tr><th>姓名</th><td>小黑</td></tr><tr><th rowspan="3">电话号</th><td>182222</td></tr><tr><td>189999</td></tr><tr><td>133333</td></tr></table>
<h3 style="color:green">表格内的标签</h3><table border="1"><tr><td><p>这是一个段落</p><p>另一个段落</p></td><td><p>这个段落中还有一个表格</p><table border="1"><tr><td>姓名</td><td>qq/微信/电话</td></tr><tr><td>baby</td><td>我不加你哈哈</td></tr></table></td><td>How are you！</td></tr><tr><td><p>这里面还有一个列表</p><ul><li>red</li><li>blue</li><li>black</li></ul></td><td><img src="images/smile.jpg" alt="" width="50" height="50"><p>这是一张图片</p></td><td><p>这是一个链接</p><a href="www.baidu.com">百度一下吧</a></td></tr></table><h3 style="color:blue">下面是列表的使用</h3><b>无序列表：</b><ul><li>apple</li><li>banana</li><li>pear</li></ul><b>有序列表：</b><ol><li>apple</li><li>banana</li><li>pear</li></ol><ol type="A"> <!-- 根据type属性来设置排序列表的类型。--><li>apple</li><li>banana</li><li>pear</li></ol><ul style="list-style-type:circle"><li>apple</li><li>banana</li><li>pear</li></ul><h4>嵌套列表：</h4><ul><li>Coffee</li><li>Tea<ul><li>Black tea</li><li>Green tea</li></ul></li><li>Milk</li></ul><h4>嵌套列表：</h4><ul><li>Coffee</li><li>Tea<ul><li>Black tea</li><li>Green tea<ul><li>China</li><li>Africa</li></ul></li></ul></li><li>Milk</li></ul><h4>一个自定义列表</h4><!--dt为自定义列表项目 定义自定列表项的描述--><dl><dt>fruit</dt><dd>- apple</dd><dd>- banana</dd><dt>food</dt><dd>- dumping</dd><dd>- hamburger</dd></dl>
</body>
</html>
网页示例：
