HTML语义化，块标签，form表单标签，table标签，iframe内联框架基础使用-第九期线上班20191030

1、HTML和HTTP是什么？它们有什么联系？

HTML是超文本标记语言（全称是Hypertext Markup Language）是一种通用编写超文本的标记语言。。

HTTP是超文本传输协议（全称是Hypertext Transfer Protocol），是一套客户端和服务端都必须遵守的请求规范和标准。

HTTP的设计最初目的提供一种发布和接收HTML页面的方法，通常客户端向服务端发起HTTP请求，  
服务器端最终以HTML的形式呈现在客户端。

2、制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素

实例

<nav>
    <ul>
        <li><a href="https://www.baidu.com/" target="_blank">百度搜索</a></li>
        <li><a href="https://www.sogou.com/" target="_blank">搜狗搜索</a></li>
        <li><a href="https://www.so.com/" target="_blank">360搜索</a></li>
        <li><a href="https://www.php.cn/" target="_blank"><img src="https://www.php.cn/static/images/logo.png" alt="php中文网"/></a></li>
    </ul>
</nav>

 

3、制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并

实例

<table border="1" cellspacing="0" cellpadding="5">
    <caption><h2>商品详细信息表</h2></caption>
    <thead>
    <tr bgcolor="#f08080">
        <th>订单编号</th>
        <th>商品名称</th>
        <th>数量</th>
        <th>价格</th>
        <th>满减优惠</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>001</td>
        <td>iPhone11 256g 5G全网通</td>
        <td>1</td>
        <td>9980.00</td>
        <td rowspan="4">已满5000<br/>减100元</td>
    </tr>
    <tr>
        <td>002</td>
        <td>iPhone11手机壳Q版磨砂耐摔</td>
        <td>1</td>
        <td>29.00</td>
    </tr>
    <tr>
        <td>003</td>
        <td>iPhone11手机链小猪佩奇M号</td>
        <td>1</td>
        <td>9.80</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="3">总计</td>
        <!--        <td></td>-->
        <!--        <td></td>-->
        <td>‭10,017.8‬0</td>
        <td>
            <button>立即购买</button>
        </td>
    </tr>
    </tfoot>
</table>

 

4、制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件

实例

<form action="" method="post">
    <h3>学员注册</h3>
    <ul>
        <li><label for="username">账号</label><input type="text" id="username" name="username" placeholder="请填写账名"
                                                   required></li>
        <li><label for="password">密码</label><input type="password" id="password" name="password"
                                                   placeholder="请输入6-12位密码"
                                                   required></li>
        <li><label for="phone">电话</label><input type="tel" id="phone" name="phone" placeholder="请输入13位手机号" required>
        </li>
        <li><label for="email">邮箱</label><input type="email" id="email" name="email" placeholder="example@mail.com"
                                                required></li>
        <li><label for="age">年龄</label><input type="number" id="age" name="age" min="18" max="60" required></li>
        <li><label for="male">性别</label><input type="radio" name="gender" id="male" required><label for="male">男</label><input
                type="radio" name="gender" id="female" required><label for="female">女</label></li>
        <li><label for="session">课程选择</label><select name="session" id="session" required>
            <optgroup label="前端开发">
                <option value="">HTML5</option>
                <option value="">CSS3</option>
                <option value="">Javascript</option>
            </optgroup>
            <optgroup label="后端开发">
                <option value="">PHP</option>
                <option value="">.net</option>
                <option value="">Java</option>
            </optgroup>
        </select>
        </li>
        <li><label for="">爱好</label><input type="checkbox" name="habits[]" id="gaming"><label for="gaming">电子游戏</label>
            <input type="checkbox" name="habits[]" id="programing"><label for="programing">编程</label>
            <input type="checkbox" name="habits[]" id="writing"><label for="writing">写作</label>
        </li>
        <li><label for="avatar">上传头像</label><input type="file" id="avatar"></li>
        <li>
            <button>注册</button>
            <button type="reset" value="重置">重置</button>
        </li>
    </ul>
</form>

 

5、制作一个网站后面, 要求使用<iframe>内联框架实现

实例

<ul>
    <li><a href="https://www.baidu.com/" target="content">新建用户</a></li>
    <li><a href="https://www.sogou.com/" target="content">删除用户</a></li>
    <li><a href="https://www.so.com/" target="content">添加文章</a></li>
</ul>
<iframe srcdoc="<h3>欢迎使用后台程序</h3>" frameborder="1" name="content" width="800" height="500"></iframe>

 

6、为什么使用语义化标签？

语义化标签是计算机看得懂的语言，在以往的WEB开发中，每个标签都使用<div>包裹，浏览器在解读HTML代码的时候并不会区分主次，一律按照内容来处理。HTML5新的语义化标签<nav> <article> <aside> <section>等，每个标签都是在告诉计算机该标签的内容，这样不仅便于搜索引擎的抓取，在即使没有加载css的情况下也能清晰的看出网页的结构，增强可读性。 语义化不仅是便于计算机处理，也让开发人员更容易看明白，加快了开发团队的效率和协调能力，在未来的开发中，语义化已经是高效开发团队必备的要求。

总结

1. 导航要用<nav>标签制作达到语义化效果，图片<img>外部可以用<a>标签包裹来添加超链接，点击图片的时候就可以跳转链接。

2. <table>中的<thead>和<tfoot>只可以出现一次，<tbody>不限制，这里需要注意的是rowspan合并行不会跨<tbody>或者<tfoot>,<thead>合并<td>单元格，也就是说在<tbody>中如果执行rowspan合并行操作，只会合并<tbody>中的<td>单元格。

3. 大部分的<form>表单都应该和<label>成对出现，并且每个<label>都应指向标签的id或者name，需要注意的<input>标签的radio是单选项，多个radio作为选项的时候name的值必须相同，复选框checkbox的name值最好以数组形式填写arr[]，因为多选会提交多个数值，这样方便后续的程序拆分调用。

4. 表单的required属性基本废弃，必填项还是需要用JS来处理。

5. <iframe>内联框架可以打开<a>标签指向的链接，<a>标签的target属性需要指向<iframe>标签的name属性。

6. <iframe>的src属性可以指向一个网页地址，来作为默认显示，如果只作为<a>标签指向的时候默认是空白，这个时候可以用srcdoc属性编写HTML来替代<iframe>标签的默认空白。