前端基础-HTML5-1

Posted 2021-04-04 python运维技术

准备了一周，这周开工了，我们从基本的html说起，这部分内容我不会像html教程一样一个一个标签的讲解， 那样的话就HTML就写到明年了，所以这部分只说最有用的，把这部分快速的过一遍，主要精力还是集中放到后面的内容，那既然要介绍HTML5,我们先从基本概念开始，什么是HTML5？

HTML5 是下一代 HTML 标准。

HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

说白点html5就是html4的升级版，增加了很多特性，在移动设备上支持多媒体，html5出来的时候都很多人对它抱有很大希望的，很多人希望用它来媲美原生app的功能，不够到现在好像发展的比较慢，移动端还是原生app的天下，好了，html5背景知识就介绍到这里，接下来进入正式的内容学习部分。

html5比较有用的就是列表和表格了，用的也比较频繁，所以这篇我们主要介绍列表，表格，我们先看列表，列表分有序列表和无序列表，有序列表就是带数字标号的，例如，1,2,3等， 无序列表前面就是一个小黑点，不带数字，无序列表对应的标签是<ul></ul> ， 有序列表的标签是<ol></ol>,列表项用<li></li>来定义，我们来通过例子来看看，比如我们后续要学到Django, 那Django作为一个web框架有什么优势呢？我们要一一列出来，下面我们分别用无序列表和有序列表表示，代码如下：

<p><h1>Django 优势</h1></p>

<p><strong>有序列表</strong></p>

<ul>

  <li>自助管理后台</li>

<li>虽然 Django自带ORM</li>

<li>URL design</li>

       <li>Django 的 App 理念很好。</li>

        <li>Django 的错误提示做详细了。</li>

</ul>

<p><strong>无序列表</strong></p>

<ol>

<li>自助管理后台</li>

<li>虽然 Django自带ORM</li>

<li>URL design</li>

       <li>Django 的 App 理念很好。</li>

        <li>Django 的错误提示做详细了。</li>

浏览器打开如下：

除了展示内容，另一个最多的用途就是一般能看到的后台左侧菜单， 通过单击左侧的每个菜单进入不同的页面内容，简单代码如下：

<ul>

 <li><h3>我的网站</h3>

 <ul>

 <li><h3>一级菜单</h3>

  <ul>

  <li><h3>二级菜单</h3>

  </li>

  <li><h3>二级菜单</h3></li>

  <li><h3>二级菜单</h3></li>

  <li><h3>二级菜单</h3></li>

  </ul>

</li>

</ul>

</li>

</ul>

这个就可以生成类似左侧菜单的效果，当然因为没有css和js，我们这个看起来非常普通：

以上就是列表的的介绍了，接下来说说表格，这个在日后用途非常的多，一般前端展示数据用表格用的最多，我们来看一个列子，就拿我们将要学习的内容制作一个表格，截图如下：

这就是一个表格典型应用，当然我为了简单，图标都统一用了一个，实现以上内容代码如下：

<table border="2">

<thead>

<th>学习内容</th>

<th>图标</th>

<th>预计时长</th>

</thead>

<tr>

<td>Python</td>

<td><img alt=""></td>

<td>30小时</td>

</tr>

<tr>

<td>前端知识</td>

<td><img alt=""></td>

<td>20小时</td>

</tr>

<tr>

<td>Django</td>

<td><img alt=""></td>

<td>40小时</td>

</tr>

</table>

其中<thead>内容是表头，<tr>是行，<td>每一列，同时为了显示图片，我在<td>中用了<img>标签，这样一张图片就方到<td>中了，

关于Html列表和表格的内容就到这里，下篇说下比较重要的表单。