小试牛刀，学习如何规范的写好HTML文档和如何牢记HTML元素-前端第九期线上班 - 作业

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Home > List of blog posts > 小试牛刀，学习如何规范的写好HTML文档和如何牢记HTML元素-前端第九期线上班

Blogger Information

Blog 13

fans 2

comment 0

visits 10831

Special Recommendation

More>

Related recommendations

认识HTNL5文档结构

HTML5在音频、视频、动画、应用、页面效果和开发效率等方面给网页结构带来了巨大的变化，HTML5 扩展的新技术可以使文档结构更加清晰明确。同事HTML5增加了很多结构元素，减少了复杂性，几方便浏览者访问，也提高了开发人员的开发效率。

HTML5文档以<!DOCTYPE html>开头，这是一个文档类型申明，它必须位于HTML5文档的第一行，它可以用来告诉浏览器当前HTML文档类型。

<html>标签是HTML5文档的根标签，紧跟在<!DOCTYPE html>下面。

<head>标签是所有头部元素的容器，它内部包含的元素有脚本、样式表、元信息等。

<title>标签位于head标签内，它定义了文档的标题，也就是我们平常用浏览器浏览网页时显示在浏览器标签栏中和显示在搜索引擎结果中的页面标题，所以这个标签很重要，平时在写HTML5文档的时候切忌要记得写上这个标签。

<body>标签定义文档的主体和供用户浏览的所有内容，例如文本、图片、视频、音频、超链接、表格、列表等这些标签都应该包含在body标签中

HTML5元素分类

1.结构元素

结构元素主要负责页面上的上下文结构的定义，它可以确保HTML文档的完整性，例如：

section：该元素可用于页面中某个区域的章节表述；

header：表示页面主体的头部；

footer：表示页面的底部，也就是页脚，通常会在这里标出网站的一些相关信息，例如关于我们和版权申明以及联系信息等；

nav：这个专门用于菜单导航；

article：用于表示一篇文章的主体内容，一般为文字集中显示的区域；

2.块级元素

块级元素主要完成页面区域的划分，确保内容有效的分隔，例如aside：用以表达标记、贴士、侧栏、摘要、、插入引用等作为补充主体的内容。

3.行内语义元素

行内语义元素主要完成页面中具体内容的引用和表述，是丰富内容展示的基础，，例如：video、audio、time。

HTML5实践

简单的了解部分HTML5 的小知识后，我们可以尝试使用HTML5的部分元素实践一下，看看它们都有什么作用。

我们先用HTML5的列表元素来完成一个导航效果

首先代码是这样的：

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页导航</title>
</head>
<body>
    <header>
        <nav id="header_nav">
                <div class="logo lf"><img src="https://www.php.cn/static/images/logo.png" alt=""></div>
                <ui class="nav_list lf">
                    <li> <a href="">首页</a> </li>
                    <li> <a href="">JS特效</a> </li>
                    <li> <a href="">网站源码</a> </li>
                    <li> <a href="">后台模板</a> </li>
                    <li> <a href="">学习资源</a> </li>
                    <li> <a href="">在线工具箱</a> </li>
                    <li> <a href="">手册下载</a> </li>
                    <li> <a href="">工具下载</a> </li>
                    <li> <a href="">类库下载</a> </li>
                </ui>
                <article class="user gf">
    
                    <img src="https://img.php.cn/upload/avatar/000/114/928/5c77c807bf5f3250.png" alt="Continue"width="40px" >
                </article>

        </nav>
    </header>

    <main>
        <ol>
            <li>有序列表</li>
            <li>有序列表</li>
            <li>有序列表</li>
            <li>有序列表</li>
            <li>有序列表</li>
            <li>有序列表</li>
            <li>有序列表</li>
            <li>有序列表</li>
            <li>有序列表</li>
            <li>有序列表</li>
        </ol>
    </main>

    <footer>
<dl>
    <dt> <a href=""> 关于我们</a></dt>
    <dd><a href="">客服</a></dd>
    <dd><a href="">合作</a></dd>
    <dd><a href="">工作机会</a></dd>
    <dd><a href="">新浪微博</a></dd>
    <dd><a href="">微信公众号</a></dd>
    <dd><a href="">小程序</a></dd>
</dl>
        
    </footer>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

再就是手写代码：

接下来再看看注册表单效果

还是先看代码：

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录/注册</title>
</head>
<body>
<div  >
<form action="login.php" method="POST" name="registeForm" >
    <div style="margin-top: 20px;">
    <label for="username" >用户名</label>
    <input type="text" id="username" name="username" value="" placeholder="请输入用户名/邮箱/手机号" required >
    </div>
    <div style="margin-top: 20px;">
    <label for="password" ">设置密码</label>
    <input type="password" id="password" name="password" value="" min="6" max="20" placeholder="请输入6-12位数字或字母" required >
</div>
<div style="margin-top: 20px;">
    <label for="ConfirmPsd">确认密码</label>
    <input type="password" id="ConfirmPsd" name="ConfirmPsd" value="" min="6" max="20"  placeholder="请再次输入密码" required >
</div>
<div style="margin-top: 20px;">
    <label for="VctCode" >验证码</label>
    <input type="number" id="VctCode" name="VctCode" value="" placeholder="请输入验证码" >
    <button ">获取验证码</button>
</div>
<div >
    <input type="submit" value="注册">
</div>
<div >
        <span>性别：
        <input type="radio" id="male" name="male" value="" ><label for="male">男</label>
        <input type="radio" id="female" name="male" value="" ><label for="female">女</label>
        <input type="radio" id="secret" name="male" value="" ><label for="secret">保密</label>
    </span>
    <span >

        爱好：<input type="checkbox" id="learning" valu=""><label for="learning">学习
            <input type="checkbox" id="game" valu=""><label for="game">打游戏
            <input type="checkbox" id="tourism" valu=""><label for="tourism">旅游
    </span>
    </div>
    <p>
        <label for="upload">上传文件：</label>
        <input type="file" id="upload" name="upload">
    </p>
    <p>
    <label for="">正在学习：</label>
    <select name="" id="">
        <option value="">HTML</option>
        <option value="">CSS</option>
        <option value="">Javascript</option>
        <option value="">PHP</option>
    </select>
</p>

<label for="">选择城市：</label>
<select name="" id="">
    <optgroup label="上海">
        <option value="" selected>松江</option>
        <option value="">黄埔</option>
        <option value="">松江</option>
        <option value="">卢湾</option>
        <option value="">徐汇</option>
        <option value="">长宁</option>
        <option value="">虹口</option>
        <option value="">杨浦</option>
        <option value="">嘉定</option>
        <option value="">浦东新区</option>
    </optgroup>
    <optgroup label="北京">
            <option value="">东城</option>
            <option value="">西城</option>
            <option value="">松朝阳江</option>
            <option value="">丰台</option>
            <option value="">石景山</option>
            <option value="">海淀</option>
            <option value="">通州</option>

        </optgroup>
    </select>

    
</form>

  </div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果截图：

手写代码：

接下来是商品信息效果：

代码部分：

实例

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>登录/注册</title>
 </head>
 <body>
 <table border="1" cellspacing="0" cellpadding=20px>
<thead>
    <caption>主要商品价格检测表</caption>
</thead>
<tbody>
<tr bgcolor="#ff742d" >
    <th colspan="2">项目</th>
    <th>单位</th>
    <th>零售价格</th>
    
    <th>零售价格</th>
</tr>
<tr  align="center">
    <td rowspan="4" width="20px" >粮食类</td>
    <td width="100px" >小麦</td>
    <td width="100px">元/公斤</td>
    <td width="100px">2.55</td>
    <td width="100px">2.55</td>
</tr>
<tr  align="center">
    <td>玉米</td>
    <td>元/公斤</td>
    <td>2.22</td>
    <td>2.33</td>
    
</tr>
<tr  align="center">
    <td>面粉</td>
    <td>元/公斤</td>
    <td>4.00</td>
    <td>3.75</td>
    
</tr>
<tr  align="center">
    <td>大米</td>
    <td>元/公斤</td>
    <td>6.00</td>
    <td>6.00</td>

</tr>
<tr align="center">
    <td>食用油</td>
    <td>菜籽油</td>
    <td>元/公升</td>
    <td>11.00</td>
    <td>9.00</td>
</tr>
<tr  align="center">
     <td rowspan="8">蔬菜</td>
    <td>芹菜</td>
    <td>元/公斤</td>
    <td>6.00</td>
    <td>8.00</td>
    
</tr>
<tr  align="center">
    
    <td>大白菜</td>
    <td>元/公斤</td>
    <td>3.00</td>
    <td>4.00</td>    
</tr>
<tr  align="center">
    <td>黄瓜</td>
    <td>元/公斤</td>
    <td>6.00</td>
    <td>5.00</td>   
</tr>
<tr  align="center">
    <td>皮牙子</td>
    <td>元/公斤</td>
    <td>5.00</td>
    <td>5.00</td>
   
</tr>
<tr  align="center">
    <td>茄子</td>
    <td>元/公斤</td>
    <td>6.00</td>
    <td>10.00</td>   
</tr>
<tr  align="center">
    <td>土豆</td>
    <td>元/公斤</td>
    <td>5.00</td>
    <td>5.00</td>    
</tr>
<tr  align="center">
    <td>西红柿</td>
    <td>元/公斤</td>
    <td>4.50</td>
    <td>7.00</td>
    
</tr>
<tr  align="center">
    <td>胡萝卜</td>
    <td>元/公斤</td>
    <td>5.00</td>
    <td>12.00</td>    
</tr>
<tr  align="center">
    <td rowspan="5">肉蛋禽</td>
    <td>猪肉</td>
    <td>元/公斤</td>
    <td>27.00</td>
    <td>25.00</td>   
</tr>
<tr  align="center">
    <td>羊肉</td>
    <td>元/公斤</td>
    <td>65.00</td>
    <td>65.00</td>    
</tr>
<tr  align="center">
    <td>牛肉</td>
    <td>元/公斤</td>
    <td>65.00</td>
    <td>65.00</td>  
</tr>
<tr  align="center">
    <td>鸡肉</td>
    <td>元/公斤</td>
    <td>22.00</td>
    <td>20.00</td>   
</tr>
<tr  align="center">
    <td>鸡蛋</td>
    <td>元/公斤</td>
    <td>22.00</td>
    <td>20.00</td>    
</tr>
</tbody>
<tfoot>
    <td colspan="5" align="center">本监测价格当日有效，以上价格仅供参考</td>
</tfoot>

 </table>
 </body>
 </html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

运行效果：

手写代码：

最后是后台管理系统效果：

上代码：

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理系统</title>
</head>
<body>
    <ul style="float: left;margin-right: 50px;">
        <li> <a href="form.html" target="content">登录注册</a> </li>
        <li> <a href="table.html" target="content">商品信息</a></li>
        <li> <a href="nav.html" target="content">导航菜单</a></li>
    </ul>
    <iframe srcdoc="<h1>欢迎登录网站后台管理系统！</h1>" frameborder="1" name="content" width="800" height="800"></iframe>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果：

手写代码：

总结：

标签语义化的好处：

1. HTML结构清晰

2.代码可读性较好

3.无障碍阅读

4. 搜索引擎可以根据标签的语言确定上下文和权重问题

5. 移动设备能够更完美的展现网页（对css支持较弱的设备）

6. 便于团队维护和开发

Correction status：qualified

Teacher's comments：代码手写一遍, 感觉如何, 效果是不是超过键盘打10遍

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

准备开发环境与编辑器的安装及使用-前端第九期线上班

2019-10-29 13:33:03

About us Disclaimer Sitemap: php.cn：Public welfare online PHP training，Help PHP learners grow quickly！

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

认识HTNL5文档结构

HTML5元素分类

HTML5实践

实例

实例

实例

实例