HTML
目录:
-
HTML基础
-
列表、表格与框架
-
表单
一、HTML基础
1.1 HTML的基本结构
<html> <head> <title></title> </head> <body> </body> </html>
1.2 排版信息
<!--标题标签--> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> <!--段落标签--> <p>太阳当空照</p> <!--换行标签--> <p>太阳当空照<br/>花儿对我笑</p> <!--水平线标签--> <hr/> <!--字体样式标签--> <strong>加粗</strong> <em>斜体</em> <!--注释和特殊符号--> 注释:<!--只会在代码中显示--> 特殊符号: 、空格;>、>;<、<; ©、版权符号 <!--图片相关标签--> <img src="img/tu.jpg" alt="图像替代文本" title="鼠标提示文字"width="100px" height="100px" align="absmiddle"/> <!--图片和文本的对齐方式--> <!--a标签--> 基本:<a href="" target="_blank">文本内容</a> <!--href代表路径--> 锚链接:<a name="mao">乙位置</a> <a href="#mao">跳到乙位置</a> 锚链接跨页面:href属性上加文件路径在加上锚的名称 功能连接:邮箱:<a href="mailto:1403948905@qq.com">QQ邮箱</a> QQ:tencent://message/?v=1&uin=22841758 & site=www.hda.com & amp; Menu=yes
二、列表、表格与框架
2.1 列表
<!--基本写法--> <!--type是类型:disc实体圆心、square视图方心、circle空心圆--> <ul type="circle"> <li>○苹果</li> <li>○香蕉</li> </ul> <!--无序列表--><!--可以无限嵌套--> <ul> <li>苹果 <ul> <li>甜的 <ul> <li>很甜</li> <li>一般</li> </ul> </li> <li>不甜的</li> </ul> </li> <li>香蕉</li> </ul> <!--有序列表--><!--type:1数字符号、A/a大小写字母符号、I/i大小写罗马数符号--> <ol> <li>苹果</li> <li>香蕉</li> </ol> <!--定义列表--> <dl> <dt>所属专业</dt> <dd>计算机软件工程</dd> </dl>
2.2表格
<!--基本写法,可以互相嵌套--><!--width宽、height高、cellpadding间距、cellspading填充、border边框--><!--对齐方式:align水平对齐、valign垂直对齐--> <table width="" height="" cellpadding="" cellspacing="" border=""> <tr> <td colspan="2">一</td> <!--跨列--> <td>二</td> </tr> <tr> <td rowspan="2">一</td> <!--跨行--> <td>二</td> </tr> </table>
2.3框架
<frameset cols=*30%,50%* frameborder="0"> <frame src="" name=""> <frame src="" name=""> <frame src="" name=""> </frameset> <!-- cols纵向分割、rows水平分割 --> <!-- Src为每个框架显示的路径 --> <!-- frameset不能输入在body里面-> <!-- iframe内联式框架--> <iframe src="path" name="mainFrame" frameborder="x" scrolling="yes/no" noresize="noresize" width="x" height="y"></iframe> <!--iframe必须是对签 --><!--scroling是否出现滚动条、noresze是否允许调整框架大小 frame中设置 -->
2.3表单
<!--基本写法 --><!--method提交方式、action提交目标--> <form method="post" action="result.html"> <p>名字:<input name="name" type="text"></p> <p>密码:<input name="pass" type="password"></p> <p> <input name="submit" type="button" value="提交"> <input name="reset" type="reset" value="重填"> </p> </form> <!--表单元素属性:name:指定元素名称、value:元素初始值-、size:初始宽度 、maxlength输出的最大字符串、checked指定按钮是否被选中 --> <!-- input --> <!--文本框-->:text:<input name="yi" id="yi" type="text"> mame:对服务器相应的数据,id: 机器识别 <!--密码框-->:password:<input name="pass" id="er" type="password"> <!--单选框-->:radio:<input name="gen" type="radio" value="男" checked="checked" >男 <input name="gen" type="radio" value="女">女 <!--复选框-->:checkbox:<input type="checkbox" name="interest" value="sports">运动 <input type="checkbox" name="interest" value="sports" checked="checked">聊天 <input type="checkbox" name="interest" value="sports">玩游戏 <!--重置按钮-->:<input type="reset" name="butReset" value="reset按钮"> <!--提交按钮-->:<input type="button" name="butResult" value="提交"/> <!--文件域--><!--注意:在from标签加上enctype="multipart/from-data"提交方式post--> <input type="file" name="files"/>浏览 <input type="submit" name=upload value="上传"/> 上传 <!--隐藏域--> <input type="hidden" value="666" name="userid"/> <!--列表框--> <select name="year" size="1"> <!--size显示的行数,selected默认行数--> <opention value="0" selected="selected">0</opention> <opention value="1">1</opention> <opention value="2">2</opention> </select> <!--扩展列表框--> <select name="year" size="1"> <!--size显示的行数,selected默认行数--> <optgroup lable="一线城市"> <opention value="0" selected="selected">0</opention> <opention value="1">1</opention> <opention value="2">2</opention> </optgroup> </select> <!--多行文本域--> <textarea name="text" rows="10" cols="10">文本内容</textarea> <!--表单高级应用--> <!--只读和禁用-->:redonly="redonly"只读;disabled="disabled"禁用; <!--必填-->:requried="required" <!--表单语义化--><!--对搜索引擎友好--> <fieldest id=""> <p>名字:<input name="name" type="text"></p> <p>密码:<input name="pass" type="password"></p> <input type="button" name="butResult" value="提交"/> </fieldest>
.