- A+
所属分类：Web前端
html的基础
html(超文本标记语言)，运行在浏览器端的静态解释型语言，
JavaWeb基本概述
html的基本标签
html
html是解释语言，浏览器容错的，可以有错误，编译器会自己解释
网页上看到的内容都是写在里面的
基本标签
<!-- 1. html页面中由一对标签组成：<html></html> <html>:开始标签 </html>:结束标签 2.<title>网页的标题页</title> 3.可以在<meta charset="字符集">设置编码方式（写在<head>...</head>之间） 4.<br/>:换行（开始标签和结束标签是同一个标签时/写在后面，表示单标签） 5.<p>...</p>：表示段落标签（自动换行，且间距变大） 6.<img src="...">：插入图片（路径是于当前html同文件的存放图片文件名图片名字） 该图片大小 在后面加 width="..."height="..."(宽、高) alt:图片的提示 7.路径问题：相对路径（如上）；绝对路径：就是它的路径 8.<h1>...</h1>:最多六个标题 9.列表 -ol:有序列表 type:显示类型：A,a,1,I,i（默认1） start:从多少开始 -ul:无序列表 type：dis,circle,square 10.字体设置：<u></u>:下划线 <b></b>：加粗 <i></i>?：斜体 11.下标：sub 上标：sup 12.<span>...</span>：可以对其中的字进行特殊的修饰 13.超链接:<a></a> href:链接的路径 target：_self本窗口 _blank在一个新窗口打开 _parent在父窗口打开 _top在顶层窗口打开 14.<div>...</div>:层(先了解) --> html实体
代码实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"><!--字符集的设置--> <title>这是我的第一个网页</title> </head> <body> hello world!<br/>你好，世界 <p>这里是一个段落</p> <p>这里是第二个个段落</p> <img src="photo太原市徽.jpg" alt="JavaWeb-html的基础" width="80"height="73" alt="这是一张图片"/> <h1>标题一</h1> 武林高手排行榜 <ol type = "I" start="3"> <li>扫地僧</li> <li>萧远山</li> <li>慕容复</li> <li>虚竹</li> <li>阿紫</li> </ol> 武林大会人员名单 <ul type="square"> <li>乔峰</li> <li>阿朱</li> <li>马夫人</li> <li>白世镜</li> </ul> <u>你</u>喜欢吃<b>包子</b>还是<i>饺子</i>?<br> 氧气化学是H<sub>2</sub>O<br> X的平方是X<sup>2</sup><br> <span>特殊修饰...</span> <a href="http://www.baidu.com" target="_blank">百度一下</a> </body> </html> 代码效果
html的table（表格）标签
基本标签
<!-- 17.表格：table 一个表格 <table></table> 行 tr 列 td(th:表头) 一些属性（已经淘汰） border：表格边框的设置 width：表格宽度 cellspacing:单元格间距 cellpadding：单元格填充 tr中的属性 ：align => left/right/center(左对齐，右对齐，居中) rowspan:行合并 colspan:列合并 --> 代码实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格标签的学习</title> </head> <body> <table border="1" width="600" cellspacing="0" cellpadding="4"> 表格的设置 <tr align="center"> <th>姓名</th> <th>门派</th> <th>成名绝技</th> <th>功力值</th> </tr> <tr align="center"> <td>乔峰</td> <td>丐帮</td> <td>少林长拳</td> <td>5000</td> </tr> <tr align="center"> <td>虚竹</td> <td>灵鹫宫</td> <td>北冥神功</td> <td>10000</td> </tr> <tr align="center"> <td>扫地僧</td> <td>少林</td> <td>七十二项绝技</td> <td>未知</td> </tr> </table> 第二个表格 <hr> <table border="1" width="600" cellspacing="0" cellpadding="4"> <tr align="center"> <th>名称</th> <th>单价</th> <th>数量</th> <th>小计</th> <th>操作</th> </tr> <tr align="center"> <td>苹果</td> <td rowspan="2">5</td> 合并列 <td>20</td> <td>100</td> <td><img src="photo/R-C.jpg" alt="JavaWeb-html的基础" width="24" height="24"></td> 添加图片 </tr> <tr align="center"> <td>菠萝</td> <td>15</td> <td>60</td> <td><img src="photo/R-C.jpg" alt="JavaWeb-html的基础" width="24" height="24"></td> </tr> <tr align="center"> <td>西瓜</td> <td>3</td> <td>30</td> <td>120</td> <td><img src="photo/R-C.jpg" alt="JavaWeb-html的基础" width="24" height="24"></td> </tr> <tr align="center"> <td>总计</td> <td colspan="4">280</td> 合并行 </tr> </table> </body> </html> 代码效果
html的表单标签
表单：是一个容器，承载要发送给服务器的数据
文本框输入的内容就是value的值
基本标签
<!-- 18.表单 form 19.<input type="text"/>:表示文本框，其中name属性是必须要写的，否则这个文本框的数据是不会发送给服务器的 <input type="password">:表示密码框 <input type="radio">：表示单选按钮，name属性值保持一直（保证互斥），checked默认选项 <input type="checkbox">：表示复选框，name属性建议保持一致（服务器获取的是一个数组） select：表示下拉列表，每一个选项是option，value是属性发送给服务器的值，selected是默认选项 textarea：表示多行文本框，value值就是开始结束标签之间的内容 <input type="submit" value="..."/>:表示提交按钮 <input type="reset" value="..."/>:表示重置按钮 <input type="button" value="..."/>:表示普通按钮 --> 代码实例
<!--Demo03的代码--> <!DOCTYPE html> <html lang="en"> <!--表单--> <head> <meta charset="UTF-8"> <title>表单标签的学习</title> </head> <body> <form action="Demo04.html" method="post"> 昵称：<input type="text" name="nickName"/><br> 密码：<input type="password" name="Pwd"/><br> 性别：<input type="radio" name="gender" value="male"/>男 <input type="radio" name="gender" value="female" checked/>女<br> 爱好：<input type="checkbox" name="hobby" value="basketball"/>篮球 <input type="checkbox" name="hobby" value="football"/>足球 <input type="checkbox" name="hobby" value="earth"/>地球<br> 星座：<select name="star"> <option value="白羊">白羊座</option> <option value="金牛" selected>金牛座</option> <option value="双子">双子座</option> <option value="天蝎">天蝎座</option> <option value="天秤">天秤座</option> <option value="射手">射手座</option> <option value="双鱼">双鱼座</option> <option value="摩羯">摩羯座</option> <option value="巨蟹">巨蟹座</option> <option value="水瓶">水瓶座</option> <option value="狮子">狮子座</option> <option value="处女">处女座</option> </select><br> 备注：<textarea name="remark" rows="4" cols="40"></textarea><br> <input type="submit" value="注 册"/> <input type="reset" value="重 置"/> <input type="button" value="普通按钮"/> </form> </body> </html> <!--Demo04的代码--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单标签的学习</title> </head> <body> <h1><font color="red">注册成功</font></h1> </body> </html> 代码效果
html-frameset-iframe标签（已淘汰）
frameset标签
frameset：无body标签
<!-- 20.frameset:表示页面框架，已经淘汰，只了解，不用掌握 frame：表示框架中具体页面的应用 --> 
代码实例
<!DOCTYPE html> <html lang="en"> <!--frameset--> <head> <meta charset="UTF-8"> <title>Title</title> </head> <frameset rows="20%,*" frameborder="no"> frameborder="no"：去边框 <frame src="frames/top.html"/> <frameset cols="15%,*",> <frame src="frames/left.html"/> <frameset rows="80%",*> <frame src="frames/main.html "/> </frameset> </frameset> </frameset> </html> 代码效果
iframe标签
<!-- 21.iframe：在一个页面嵌入子页面 --> 代码实例：
<!DOCTYPE html> <html lang="en"> <!--iframe--> <head> <meta charset="UTF-8"> <title>iframe的测试</title> </head> <body> 这是Demo06页面的内容 <iframe src="frames/top.html"/> </body> </html> 代码效果：
小总结：
<!-- 总结： 1.html是解释型的标记语言：不区分大小写 2.html，head，tilt，mete，body，br，p，hr，div，table，form，u，i，b，sup，sub， ，span，ul，ol， li，tr，th，td，h1-h6，input，select，textarea，img 2-1.html，head，tilt，mete，body，br，ul，ol，h1-h6，a，img，p， ，div，span 2-2.table，tr，th，td 2-3.form(action="",method="post")，input type=”text,password,radio,checked,submit,button,reset“，select，textarea ... --> 
