虚拟目录的使用:
第一种方法:域名映射根目录,www是根目录,www下的目录是项目目录.
第二种,www下的目录直接映射到域名.如www\html就是域名html.io
第二部分,html基础知识
html是超文本标签语言
http超文本传输协议:http是80端口,https403端口
作业1:
实例
<!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>