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

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

介子
介子原创
2019年10月30日 14:27:04586浏览
  1. 描述HTML与HTTP是什么,他们之间有什么联系?

    html 超文本标记语言  前端基础语言http 超文本传输协议   网络协议 联系 http 可以传输 html

    作业1.PNG

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

    一般用无序列表ul做导航 用图片做连接元素只要把<img> 放到链接之间就可以

    作业2.jpg

    实例

    <!DOCTYPE html>
     <html lang="en">
     <head>
     	<meta charset="UTF-8">
     	<title>导航</title>
     </head>
     <body>
         <div>
     	<ul>
     	    <li><a href="http://www.baidu.com"><img src="./1.png" alt="http://www.baidu.com"target='_blank'></a></li>
     	    <li><a href="http://www.baidu.com"><img src="./1.png" alt="http://www.baidu.com" target='_blank'></a></li>
     	    <li><a href="http://www.baidu.com"><img src="./1.png" alt="http://www.baidu.com" target='_blank'></a></li>
     	</ul>
        </div>
     </body>
     </html>

    运行实例 »

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

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

    表格<table> 表头<thead>表主体<tbody>表尾<tfoot>  行列合并用 colspan   和rowspan属性

    作业33.PNG

    实例

    <!DOCTYPE html>
     <html lang="en">
     <head>
     	<meta charset="UTF-8">
     	<title>作业三</title>
     </head>
     <body>
     	<table border="1" cellspacing="0" align="center">
     		<capion><h3>商品篮</h3></caption>
     		<thead>
     			<tr bgcolor="lightgreen">
     				<th>编号</th>
     				<th>名称</th>
     				<th>数量</th>
     				<th>单价</th>
     				<th>金额</th>
     			</tr>
     		</thead>
     		<tbody>
     			<tr>
     				<td>1</td>
     				<td>华为(2019)MateBookX Pro</td>
     				<td>8699</td>
     				<td>1</td>
     				<td>8699</td>
     			</tr>
     			<tr>
     				<td>2</td>
     				<td>苹果(2019)MacBook Pro</td>
     				<td>18199</td>
     				<td>2</td>
     				<td>36398</td>
     			</tr>
     			<tr>
     				<td>3</td>
     				<td>ThinkPad(2019)X1 extreme</td>
     				<td>13500</td>
     				<td>1</td>
     				<td>13500</td>
     			</tr>
     		</tbody>
     		<tfoot>
     			<tr>
     				<td colspan="3" align="center">总计:</td>
     				
     				<td>4</td>
     				<td>58597</td>
     			</tr>
     		</tfoot>
     	</table>
     </body>
     </html>

    运行实例 »

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

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

    用户注册表单空间包括 text password  email number select radio checkbox file button  submit 等

    作业4.jpg

    实例

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>表单</title>
    </head>
    <body>
    	<h3>用户注册</h3>
    	<form action="" method="POST">
    		<div>
    			<label for="username"><strong>账号:</strong></label>
    		    <input type="text" name="username" id='username' value= "jz">
    	    </div>
    		<div>
    		    <label for="password"><strong>密码:</strong></label>
    		    <input type="password" name="password" id="password" placeholder="不能少于六位">
    	    </div>
    	    <div>
    		    <label for="email"><strong>邮箱:</strong></label>
    		    <input type="email" id='email' name="email" placeholder="example@Emai.com">
    		</div>
    		<div>
    			<label for="age"><strong>年龄:</strong></label>
    			<input type="number" id='age' name="age" min="16" max="18">
    		</div>
    		<div>
    			<label for="coures"><strong>课程:</strong></label>
    			<select name="coures" id="coures">
    				<optgroup label="前端">
    				    <option value="0">html</option>
    				    <option value="1">css</option>
    				    <option value="2">js</option>
    				</optgroup>
    				<optgroup label="后端">
    					<option value="3" selected>php</option>
    					<option value="4">mysql</option>
    					<option value="5">laravel</option>
    				</optgroup>
    			</select>
    		</div>
    		<div>
    			<label for=""><strong>性别:</strong></label>
    			<input type="radio" name="sex" id='male' value="male"><label for="male"><strong>男生</strong></label>
    			<input type="radio" name="sex" id='female' value="female"><label for="female"><strong>女生</strong></label>
    			<input type="radio" name="sex" id='security' value="security" checked><label for="security">保密:</label>
    		</div>
    		<div>
    			<label for=""><strong>爱好</strong></label>
    			<input type="checkbox" name="hobby[]" id='game' value="game"><label for="game"><strong>打游戏</strong></label>
    			<input type="checkbox" name="hobby[]" id='video' value="video"><label for="video"><strong>看片</strong></label>
    		</div>
    		<div>
    			<label for="file"><strong>头像上传:</strong></label>
    			<input type="file" name='file' value="photo">
    		</div>
    		<div>
    			<button>提交</button>
    			<input type="reset" value="重置">
    		</div>
    	</form>
    </body>

    运行实例 »

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

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

    无序列表导航target填入内敛框架iframe name 属性值即可

    作业55.PNG

    实例

    <!DOCTYPE html> 
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	<ul>
    		<li><a href="http://www.baidu.com" target="content">商品列表</a></li>
    		<li><a href="http://www.jd.com" target="content">添加用户</a></li>
    		<li><a href="http://www.baidu.com" target="content">系统设置</a></li>
    	</ul>
    
    	<iframe srcdoc="<h2 style='color:red'>欢迎使用管理后台</h2>" frameborder="1" width="600" height="600" name='content'></iframe>
    </body>
    </html>

    运行实例 »

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

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

    66.PNG

    主要是语义化标签便于搜索引擎爬取,收录 ,利于seo优化

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