<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>HTML基础</title> <!-- 引入CSS样式 计量单位:px(像素)、30%(百分比)、em(相对单位)。width:20px. background-color:Red背景颜色 color:文本颜色 border-style:solid:边框风格,实线 border-color:边框颜色 border-width:边框宽度(默认是0) 例如:sytle="border-color:Red;border-width:1px;border-style:dotted" display:元素是否显示,none(不显示)、block(显示为块级元素)、inline(显示为内联元素,元素前后没有换行符) cursor:鼠标在元素上时显示的光标图标,cursor(默认光标)、pointer(超链接上的手)、text(输入Bean)、wait(忙沙漏)、help(帮助) 还可以通过cursor:url(dinosau2.ani)使用ani、cur格式的自定义光标图片 LI不显示圆点:LIST-STYLE-TYPE:none --> <link type="text/css" rel="StyleSheet" href="css1.css" /> </head> <body bgcolor="yellow"> <!--post 提交--> <form action="register.aspx" method="post" enctype="multipart/form-data" <!--复合数据表单--> ><!--表单--> <center >a1</center> <!-- 转义字符 --> <p> <!-- 段落--> a2 a2 <br /><!--换行--> <<!--小于号 less than--> <br /> >cc<!--大于号 greate than--> </p> <b> <h1>h1</h1><!-- 标签 只有6个 --> </b> <h2>h2</h2> ..... <h6>h6</h6> <font color="red">红色</font> <br /> 这里是无法显示的图片 <br /> <img src="1.gif" alt="无法显示图片"/>;<!--图片--> <br /> <!-- 超链接 --> <a href="http://www.baidu.com" target="_blank">百度<img alt="无法显示图片" src="red" /></a> <br /> <a href="#baidu">跳转</a> <br /> 这里是有显示的图片 <br /> <!--图片 固定大小 --> <img alt="图"src="/images/http_imgload.cgi.jpeg" /> <a href="/images/http_imgload.cgi.jpeg">查看原图</a> <!--无序列表 unorder--> <ul> 无序列表 </ul> <li><!-- 有序列表 --> 有序列表 </li> <br /> 下面是Table <br /> <table border="1" style="text-align:center"]><!-- 表格 --> <tr style="text-align:center"]> <!--行--> <td><!-- 格子 -->姓名</td> <td>年龄</td> <td>性别</td> </tr> <tr style="text-align:center"]><td>tom</td> <td>19</td> <td>F</td></tr> <tr style="text-align:center"]><td>jim</td> <td>23</td> <td>F</td></tr> </table><br /> <input id="Text1" type="text" /><input type="submit" value="提交"/><br /> <input id="Text2" type="text" /><input type="button" value="注册"/><br /> <input id="Text3" type="text" /><input type="checkbox" checked="checked"/><br /><!--复选框--> <input type="file" /><br /><!--文件--> <input type="password" value="111111"/><br /><!--密码--> <input type="image" src="/images/http_imgload.cgi.jpeg"/><br /> <input type="radio" />单选按钮<br /><!--单选按钮--> <!--name 分组--> <input type="radio" name="gender"/>单选按钮组1<br /><!--单选按钮 组1--> <input type="radio" name="gender" />单选按钮组2<br /><!--单选按钮 组1--> <input type="radio" name="gender" checked="checked"/>单选按钮组3<br /><!--单选按钮 组1--> <!--size 长度,value 内容,maxlength 最大长度,readonly 值只读 只有一种值的属性可以省略属性--> <input type="text" size="30" value="123456" maxlength="5" readonly="readonly"/><br /> <!-- 单选: selected 表示选中了--> <select> <option>北京</option> <option selected="selected">湖南</option> <option>上海</option> </select><br /> <!--1 多选:size > 相当于 listBox value 值--> <select size="2"> <option value="2">北京</option> <option value="1" >湖南</option> <option value="3" >上海</option> </select><br /> <select name="country" size="10"> <optgroup label="a" > <option value="a1">a1</option> <option value="a2">a2</option> <option value="a3">a3</option> </optgroup> <optgroup label="b" > <option value="b1">b1</option> <option value="b2">b2</option> <option value="b3">b3</option> </optgroup> <optgroup label="c" > <option value="c1">c1</option> <option value="c2">c2</option> <option value="c3">c3</option> </optgroup> </select> <!--多行文本 cols 列 rows 行--> <textarea cols="100" rows="10" > 默认内容 asdf </textarea><br /> 姓名:<input type="text" /><br /> 婚否:<input type="checkbox" /> <hr /><!-- 横线--><br /> <!--label 修饰哪个控件 当用户点击label时会将光标置于被修饰的控件上--> <label for="name">姓名:</label><input id="name" type="text" /><br /> <label for="ma">婚否:</label><input id="ma" type="checkbox" /> <!--将一些控件框起来 相当于groupBox--> <fieldset> <legend>常用</legend> <input type="text" /><br /> <input type="text" /><br /> <input type="text" /><br /> </fieldset> <!-- div 层 独站一行(相当于 winform 中的 panel)将内容放到一个矩形的块中,会影响布局、显示 span 不影响布局、显示 --> c1<div> 你好,我好,大家好<input type="button" value="是不是?"/></div>c2 c3<span>你好!我好!大家好!<input type="button"value="是不是!" /></span>c4 c5<div> 你好,我好,大家好<input type="button" value="是不是?"/></div>c6 c7<br /><span>你好!我好!大家好!<input type="button"value="是不是!" /></span>c8 </form> </body> </html> |
HTML基础
最新推荐文章于 2022-07-27 18:33:48 发布