html基础知识,标签的应用7月2日 - 第七期PHP学习作业

首页 > 博客列表 > html基础知识,标签的应用7月2日

博主信息

博文 7

粉丝 0

访问量 5136

专题推荐

更多>

实例

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>演示文档</title>

</head>

<body>

</body>

</html>

2.实例演示无序列表的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<ul>
		<li>产品编码</li>
		<li>产品名称</li>
		<li>产品类型</li>
		<li>产品价格</li>
	</ul>
</body>
</html>

3. 实例演示表格的用法以及行列合并的应用

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

	<table border="1px" align="center" cellpadding="5" cellspacing="0" width="400">
		<caption>商品展示</caption>
		<thead>
			<tr bgcolor="#ccc" >
				
				<th>编码</th>
				<th>名称</th>
				<th>型号</th>
				<th>数量</th>
				<th>价格</th>
				<th>型号</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				
				<td width="50">001</td>
				<td width="100">苹果</td>
				<td width="100">6s</td>
				<td width="50">4</td>
				<td width="100">6000元</td>
				<td rowspan="5">手机</td>
			</tr>
			<tr>
				
				<td>002</td>
				<td>三星</td>
				<td>s1</td>
				<td>4</td>
				<td>4000</td>
				
			</tr>
            <tr>
				<td>003</td>
				<td>华为</td>
				<td>mate10</td>
				<td>4</td>
				<td>4000</td>
			</tr>
            <tr>
				<td>004</td>
				<td>小米</td>
				<td>红米4</td>
				<td>5</td>
				<td>2000</td>
			</tr>
			 <tr>
				<td colspan="3" align="center">合计:</td>
				
				
				<td>2000</td>
				<td>15000</td>
			</tr>



		</tbody>

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

4. 实例演示表单以及常用控件元素的使用(必须掌握)

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Css学习</title>

</head>
<body>
<form action="" method="get" name="register">
    <p>
        <label for="uername">用户名:</label>
        <input type="text" id="uername" name="uername" placeholder="不超过8个字符" autofocus>
    </p>
    <p>
        <label for="password">密码:</label>
        <input type="password" id="password" placeholder="6到12个字母或者数字">
    </p>
    <p>
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email" placeholder="example@mail.com" required>    
    </p>
    <p>
        <label for="age">年龄:</label>
        <input type="number" id="age" name="age" min="16" max="70">
    </p>
    <p>
        <label for="birthday">生日:</label>
        <input type="date" id="birthday" name="birthdat" size="1">
    </p>
    <p>
        <label for="course">课程:</label>
        <select name="course" id="course">
            <optgroup label="前段:">
            <option value="1">HTML5</option>
            <option value="2">CSS3</option>
            <option value="3" selected>JavaScript</option>
            </optgroup>
            <optgroup label="后段:">
            <option value="4">PHP</option>
            <option value="5">MySql</option>
            <option value="6">ThinkPHP</option>
            </optgroup>
        </select>
    </p>
    <p>
        <label for="game">爱好:</label>
        <input type="checkbox" name="hobby[]" id="game" value="game">
        <label for="game">打游戏</label>
        <input type="checkbox" name="hobby[]" id="programme" value="programme">
        <label for="programme">撸代码</label>
        <input type="checkbox" name="hobby[]" id="moive" value="moive" checked>
        <label for="moive">看片</label>
    </p>
    <p>
        <label for="male">性别:</label>
        <input type="radio" name="sex" id="male"><lable for="male">男</lable>
        <input type="radio" name="sex" id="female"><lable for="female">女</lable>
        <input type="radio" name="sex" id="secret" checked><lable for="secret">保密</lable>
    </p>
    <p>

        <label for="comment">简介:</label>
        <textarea name="comment" id="comment" cols="30" rows="10" maxlength="30" placeholder="不超过30个字"></textarea>
    </p>

    <p>
        <input type="submit" name="submit" value="提交">
        <input type="reset" name="reset" value="重置">
        <button type="submit">提交1</button>
        <button type="button">Ajax</button>//异步提交
    </p>
</form>
</body>
</html>

5.a标签主义事项,主义target的参数,容易忘记,"_self"."_blank"."_parent"."_top"

img标签<img scr="\img\001.img" alt="图片说明文字" width="300px" title="图片名称">

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<a href="http://www.cn" target="_self">hph中文网</a>
	<a href="http://www.cn" target="_blank">hph中文网</a>
	<a href="http://www.cn" target="_parent">hph中文网</a>
	<a href="http://www.cn" target="_top">hph中文网</a>
	<img src="img\001.jpg" alt="图片说明" title="图片名称">	
</body>
</html>

批改状态：合格

老师批语：作业写得相当棒, 你不会是上一届的复读生吧

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

选择器的使用

2019-07-05 08:30:01