下午创建了一个HTML文件夹、用VS Code打开文件夹、然后练习了下HTML的基本用法、文件夹有个全是图片的img文件夹和一个.html文件、通过本地服务器链接.html文件。PHP常见的几个设计。
一、内容大致如下
<head>
<title> 标题搁这呢 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8"/>
<meta name="keywords" content="HTML"/>
<meta name="description" content="HTML Exe "/>
<style>
body{
margin:50px;
padding:50px;
background: whitesmoke;
color:yellowgreen;
}
</style>
<body>
在下边
</body>
</head>
二、如下内容全在上边的body中<body></body>
1、图片加载 img文件下的名为4.png的图片
<img src="./img/cat.jpg" height="200" alt="这是一个图片" border="5">
2、链接 _blank新窗口打开、_self当前页面跳转打开
<a href="http://www.baidu.com" target="_blank">这是一个链接</a>
3、表格 rowspan合并多少行； colspan合并多少列
<table border="1" width ="500">
<tr><th>编号</th><th>姓名</th><th>年龄</th><th>性别</th></tr>
<tr align="left"><td>0</td><td>孙零</td><td>25</td><td align="center" rowspan="6">男</td></tr>
<tr align="center"><td>1</td><td>张三</td><td>20</td></tr>
<tr align="right"><td>2</td><td>李四</td><td>22</td></tr>
<tr align="center"><td>3</td><td>王五</td><td>28</td></tr>
<tr align="left"><td>4</td><td>陈六</td><td>33</td></tr>
<tr align="center"><td>5</td><td>赵七</td><td>23</td></tr>
</table>
4、表单设计常用的六种方式
<form action="" method="post">
<!--1.单行文本输入框-->
Text: <input type="text" name="name"/><br/>
<!--2。密码框-->
Password:<input type="password" name="pwd"><br/>
<!--3.单选按钮-->
Radio: <input type="radio" name="sex">男
<input type="radio" name="sex">女<br/>
<!--4.下拉列表-->
Select: <select name="sel">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select><br/>
CheckBox: <!--5.复选框-->
<input type="checkbox" name="hobby[]" value="Reading Book">看书
<input type="checkbox" name="hobby[]" value="Surf on net">上网
<input type="checkbox" name="hobby[]" value="Play Game">游戏
<input type="checkbox" name="hobby[]" value="Sporting">健身
<input type="checkbox" name="hobby[]" value="Swimming">游泳<br/>
Textarea: <!--6.多行文本框--><br/>
<textarea name="introduce" id="" cols="60" rows="5"></textarea><br/>
<input type="submit" name="sub" id="提交"/>
<input type="reset" name="reset" id="重置"/>
</form>