JavaWeb-html的基础
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" 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" width="24" height="24"></td> 添加图片
</tr>
<tr align="center">
<td>菠萝</td>
<td>15</td>
<td>60</td>
<td><img src="photo/R-C.jpg" 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" 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
...
-->
