今天首先讲了最基础的知识。如HTML的标签,HTML标签最外层标签包括head头标签,与body标签。在head中可写CSS样式和JS脚本。 在编码中UTF-8码支持中文(此为最权威,支持中文数量最多的编码方式) 具体样式如下:
<!Doctype html> 声明 <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <input type="password" id="password" name="password" maxlength="10" /> <br/> 此处在body的内部写了一个input类型password(passwod为文本单对外显示为点)。 id与name为前后台交互使用的,并不影响显示。 </body> </html>id:唯一标识身份证。 接下来介绍了超链接一的格式如下
<a href="目标路径" target="显示的位置">超链接的对象(例如一串字符一张图)</a>Target的常用属性如下: _blank 在新窗口中打开 _self 在自己当前的窗口打开 _parent 在父标签打开 同时介绍了一些常用的格式:
<h1></h1>题头 数字可以从1到6,h1最大h6最小。 <b></b>黑体 <i></i>斜体 <sub></sub>斜向下表示 <sup></sup>斜向上表示 <u></u>下划线 <br/>换行 <p></p>定义段落 <div align=”midddle”><div>字体居中 同样可用font设置字体格式,如下。 <font size="5">文字</font>Table的创建也尤为重要
<table border="1" cellspacing="0" cellpadding="0" width="300px" height="100px" align="center" style="text-align: center;">Border为边框 cellspacing和cellpadding为与边框的间距。 Width和height为标的宽与高, style(css属性)此处可设置表格中文字样式 Align 可设置表格的位置。
<tr style="color: purple"> 此处设置行的内容 <th>name</th> 设置列的内,(th表示为标题td表示为内容区别为挺好加粗而td未加粗) <th>number</th> <th>age</th> <th>charecter</th> <th>sex oreitation</th> </tr> <tr> <td>unkown</td> <td>unkown</td> <td>unkown</td> <td>6</td> <td>maid</td> </tr> </table>有序列表为 order list
<ol type=”控制排序方式,如数字、字母”start=”控制开始位置(为数字位置)” > <li> </li> </ol>无序列表 unorder list 去别为 type 选择为square,circle等图形。 ol 与ul可相互嵌套。
Frameset <frameset rows="20%,*" /> <frame src="top.html" name="top" noresize="noresize"/> <frameset cols="20%,*"/> <frame src="left.html" name="left" noresize="noresize" /> <frame src="right.html" name="right"/> </frameset> <!--应用场景,一般应用在管理系统中 像淘宝电商网站,采用的布局都是div,配合css进行布局 -->是对界面个是的设置同时iframe也可实现界面格式的设置。 区别:(1)iframe在body中写frameset不能再body中写。 (2)iframe嵌入body中,实现一块区域刷新,frameset页面布局整体框架。 通过今天学的知识完成了如下的一个页面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <center> </table> <font size=5> 微博验证 </font></br> <table border="0" cellspacing="" cellpadding="" style="text-align: right;"> <tr> <td>注册邮箱:</td> <td align="left"><input type="text" name="@" id="@" value="" /></td> </tr> <tr> <td></td> <td align="middle">你可以<a href="">使用账号</a>或<u>手机号注册</u></td> </tr> <tr> <td>创建密码:</td> <td align="left"><input type="password" name="" id="" value="" /></td> </tr> <tr> <td>真实姓名:</td> <td align="left"><input type="text" name="" id="" value="" /></td> </tr><tr> <td >性别:</td> <td align="left"><input type="radio" name="sex" id="sex" value="0" />male <input type="radio"name="sex" id="sex" value="1"/>female</br></td> </tr> <tr> <td>生日:</td> <td align="left"> <select name="bir"> <option value="0" selected="selected">2014</option> </select> <select name="moth"> <option value="0" >1</option> <option value="1" selected="selected">2</option> <option value="2" >3</option> <option value="3" >4</option> <option value="4" >5</option> <option value="5" >6</option> <option value="6" >7</option> <option value="7" >8</option> <option value="8" >9</option> <option value="9" >10</option> <option value="10">11</option> <option value="11">12</option> </select> <select name="day"> <option value="0">1</option> </select> </td> </tr> <tr> <td>我现在:</td> <td align="left"><select name="now"> <option value="0">在上学</option> <option value="1">就业</option> <option value="2">退休</option> </select></td> </tr> <tr> <td></td> <td align="left"><img src="img/验证码.png"></td> </tr> <tr> <td>验证码:</td> <td align="left"><input type="text" name="yanzheng" id="yanzheng"></td> </tr> <tr> <td></td> <td align="left"> <a href=""><img src="img/按钮.png"width=""></a></td> </tr> </table> </center> </body> </html>效果如下