博客列表 >常用的HTML5标签 - PHP培训九期线上班

常用的HTML5标签 - PHP培训九期线上班

海涛
海涛原创
2019年10月30日 13:04:44687浏览

1. 描述HTML与HTTP是什么,他们之间有什么联系?

HTML是一种语言,超文本编辑语言;HTTP是一种协议,超文本传输协议。我们可以使用http协议去访问服务器上用html写的html文件,然后浏览器对html 文件进行渲染和展示。

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

导航我们一般使用无序列表<ul>进行制作,链接使用<a href=""></a>,图片作为链接元素是把图片<img>放到<a href=""><img></a>中,并设置alt属性。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航</title>
</head>
<body>
<ul>
    <li><a href="https://php.cn"><img src="https://www.php.cn/static/images/logo.png" alt="https://php.cn"></a></li>
    <li><a href="https://www.php.cn/course/type/3.html" target="_blank">入门课程</a></li>
    <li><a href="https://www.php.cn/course.html" target="_blank">高级课程</a></li>
    <li><a href="https://www.php.cn/xiazai/" target="_blank">资料下载</a></li>
</ul>
</body>
</html>

运行实例 »

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

导航.jpg  

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

表格使用<table></table>,表格标题使用<caption></caption>,表格头部使用<thead></thead>,表格底部使用<tfoot></tfoot>,行和列的合并使用colspan和rowspan属性:

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>精选商品信息表</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="5" width="500">
    <caption><h3>精选商品信息表</h3></caption>
    <thead>
        <tr bgcolor="aqua">
            <th>编号</th>
            <th>名称</th>
            <th>单价</th>
            <th>数量</th>
            <th>金额</th>
            <th>总计</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>iphone 11 pro</td>
            <td>9299</td>
            <td>1</td>
            <td>9299</td>
            <td rowspan="3">16897</td>

        </tr>
        <tr>
            <td>2</td>
            <td>华为 mate 30</td>
            <td>4999</td>
            <td>1</td>
            <td>4999</td>
        </tr>
        <tr>
            <td>3</td>
            <td>小米 9 pro</td>
            <td>2599</td>
            <td>1</td>
            <td>2599</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <td colspan="3" align="center">合计</td>
            <td>3</td>
            <td>16897</td>
            <td></td>
        </tr>
    </tfoot>
</table>
</body>
</html>

运行实例 »

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



商品列表2.jpg

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

表单使用<form>,两个关键属性action:表单要提交到的地址;method:表单提交的类型。

表单控件一般使用<input>,根据type属性决定控件的类型:text:文本框、password:密码框、email:邮箱地址、number:数字、file:文件上传、submit:提交按钮等等;

下拉列表使用<select name="..."><option value="...">...

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新用户注册</title>
</head>
<body>
<h3>新用户注册</h3>

<form action="register.php" method="post">
    <p>
        <label for="username"></label>
        账号:<input type="text" id="username" name="username" value="admin">
    </p>
    <p>
        <label for="password"></label>
        密码:<input type="password" id="password" name="password" placeholder="最少6位">
    </p>
    <p>
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email" placeholder="test@test.com">
    </p>
    <p>
        <label for="age">年龄:</label>
        <input type="number" id="age" name="age" min="16" max="80">
    </p>
    <p>
        <label for="male">性别:</label>
        <input type="radio" name="gender" id="male" ><label for="male">男生</label></input>
        <input type="radio" name="gender" id="female" checked><label for="female">女生</label></input>
    </p>
    
    <p>
        <label for="course">感兴趣的领域:</label>
        <select name="course" id="course">
            <optgroup label="前端">
                <option value="html5">html5</option>
                <option value="js">JS</option>
            </optgroup>
            <optgroup label="后端">
                <option value="html5">php</option>
                <option value="java">java</option>
            </optgroup>

        </select>
    </p>
    
    <p>
        <label for="">兴趣爱好:</label>
        <input type="checkbox" name="hobby[]" id="game" value="game"><label for="game">玩游戏</label></input>
        <input type="checkbox" name="hobby[]" id="song" value="song"><label for="song">唱歌</label></input>
    </p>
    
    <p>
        <label for="">头像上传:</label>
        <input type="file" name="photo" id="photo"></input>
    </p>
    
    <p>
        <button>提交</button>
    </p>

</form>


</body>
</html>

运行实例 »

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

用户注册1.jpg

用户注册2.jpg

用户注册3.jpg

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

内联框架多用于设计后台:

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商城管理后台</title>
</head>
<body>

<ul>
    <li><a href="demo6.html" target="content">商品管理</a></li>
    <li><a href="demo7.html" target="content">订单管理</a></li>
    <li><a href="demo8.html" target="content">系统设置</a></li>
</ul>

<iframe srcdoc="<h2>商城管理后台</h2>" frameborder="1" name="content" width="500" height="500"></iframe>
</body>
</html>

运行实例 »

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

管理后台.jpg

6. 总结: 为什么推荐使用语义化的标签?

a. 语义化标签可以使内容结构化,能够获取更好的用户体验;

b. 使用语义化标签的网站更容易被搜索引擎识别,有助于爬虫抓取更多的有效信息,爬虫依赖于标签来确定上下文和各个关键字的权重;

c. 语义化标签使代码的可读性增强,易于维护,便于团队开发和维护;

d. 语义化标签使代码方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议