HTML
1.概念:
HTML(英文Hyper Text Markup Language的缩写)中文译为“超文本标记语言”,主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。
HTML提供了许多标记,如段落标记、标题标记、超链接标记、图片标记等,网页中需要定义什么内容,就用相应的HTML标记描述即可。
2.格式:
!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
标题:
<h1>--从大到小--</h6>
段落:
<p></p> 空格 <span></span>
插入图片及控制宽和高: alt - 图片显示有误时的提示
<img src="kebi.jpg" width="100" height="100" alt="test"/>
换行 <br/>
无序号实心黑点列表:
<ul>
<li>内容</li>
<li>内容</li>
</ul>
<ul type="circle"> 空心圆点。
<ul type="square">空心正方形圆点。
有数字序号列表:
<ol>
<li>内容</li>
<li>内容</li>
</ol>
<ol type="A">大写ABC排序。
<ol type="a">小写abc排序。
<ol type="I">小写abc排序。
有序列表:
自定义列表以 <dl> 标签开始。
每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
效果:
Coffee
Black hot drink
Milk
White cold drink
超链接:可以链接到外面网站,也可以链接到内部其他页面。
target=_self 默认到本页,target=_blank 新的一页。
掌握 1.使用<a></a>标签创建。
2. 使用图像做链接。
<a href="https://www.hao123.com/"><img src="img/李白.bmp"/></a>
3.跳转到内部链接。
<a href="http://www.baidu.com/" target="_blank">跳转标题!</a>
<a href="html/list.html" target="_blank">跳转标题!</a>
4. "../" 代表回跳到上一级页面。
设置图片的链接:用<a>标签将图片链接包裹,然后使用在<a> 标签里写跳转到的链接。
4.设置锚点。
锚链接:<a href=”#abc”></a> 跳到锚点的位置 “#” 锚链接
锚点<a name =”abc”></a>
<a href=”#”></a>默认到达顶部。
抛锚到同一个项目中另一个文件。
<a href="html/list.html#xx">定位到另一个页面的尾部</a>
在尾部设置一个a标签并写上名字 name=xx。
表格: th 是头部 tr表示行 td表示列 建表快捷方式ta
border 单元格的边框
cellspacing 单元格间距
cellpadding 单元格内边距 内容与单元格的间距
<table border="1" cellspacing="" cellpadding="">
<caption>用户信息表格</caption>
<thead>
<tr><th>Header</th></tr>
</thead>
<tbody>
<tr><td>Data</td></tr>
</tbody>
<tfoot>
<tr><td>Data</td></tr>
</tfoot>
</table>
colspan是横向合并;rowspan是纵向合并。
表单案例:
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
表单:form
子标签: input 通过type属性表示不同的表单控件 type= text password checkbox radio
注意: type可以为button,submit,reset button与form无关
submit与form有关,会提交到后台(讲后台再说) reset:清除表单内容
块级标签与行级标签:
块级标签:带换行的标签: h1~h6,p,ol,ul,dl
行级标签: 不带换行的标签: img,span,a,input
-->
<form action="StudentServlet" method="post" >
用户名:<input type="text" /><br/>
密码:<input type="password" /><br/>
<!--默认radio各自为一组,要自定义性别为同一组: name="sex"(同名)-->
性别:<input type="radio" name="sex" value="man"/>男
<input type="radio" name="sex" value="woman"/>女<br/>
爱好:<input type="checkbox"/>吃
<input type="checkbox"/>喝
<input type="checkbox"/>玩<br/>
省份:<select>
<option>湖南</option>
<option>湖北</option>
<option>广东</option>
<option>广西</option>
</select><br />
基本信息:<textarea rows="10" cols="30"></textarea><br />
<input type="button" value="普通按钮" />
<input type="submit" value="提交按钮" />
<input type="reset" value="重置" />
</form>
</body>
</html>
HTML 表单用于收集用户输入。
<form> 元素定义 HTML 表单:
<form> .
form elements
</form>
HTML 表单包含表单元素。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
HTML框架
frameset 被div取代 使用frameset必须要去掉body标签 cols 左右分
frameset 不能包在body中
<frameset rows="*,50%">
<frameset cols="25%,*">
<frame src="Itemc.html" noresize="noresize"/>//避免边框移动。
<frame src="Itemb.html" noresize="noresize"/>
</frameset>
<frame src="Itema.html" noresize="noresize"/>
<浏览器无法展示时提示。
<noframes>
<body>浏览器无法处理框架</body>
<noframes>
<frameset rows="*,25%">
<frameset cols="25%,*">
<frame src="a.html" />
<frame src="b.html" />
</frameset>
<frame src="c.html" />
</frameset>
制作导航框架:
在需要展示的页面定义“name”,菜单栏目指向展示画面,”target=展示页面name”。
HTML内联框架:
例子:
<iframe src="b1.html" width="500" height="500" name="Iteme"></iframe>
<a href="http://www.baidu.com" target="Iteme">跳转到百度</a>
target =" "
正规的表格:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--正规表格-->
<table border="1" cellspacing="" cellpadding="" width="50%" height="600px">
<!--表格名字-->
<caption>宿舍电费表</caption>
<!--表头-->
<thead>
<tr>
<th>宿舍号</th>
<th>电费</th>
</tr>
</thead>
<!--主体-->
<tbody>
<tr>
<td>601</td>
<td>800</td>
</tr>
<tr>
<td>602</td>
<td>1000</td>
</tr>
<tr>
<td>603</td>
<td>1200</td>
</tr>
</tbody>
<!--表尾-->
<tfoot>
<tr>
<th>总计:</th>
<th>3000</th>
</tr>
</tfoot>
</table>
</body>
</html>
rows
<frameset cols="30%,40%,*">
<frame src="Item1.html" noresize="noresize" frameborder="0"/>
<frame src="Item2.html" noresize="noresize" frameborder="0"/>
<frame src="Item3.html" frameborder="0"/>
</frameset>
内联框架 在页面里显示小窗口
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<iframe src="index.html" width="300px" height="250px" name="head" ></iframe>
<!--需求: 在小窗口中显示百度页面,类似frameset操作即可 -->
<a href="http://www.baidu.com" target="head">链接到百度</a>
</body>
</html>
<html>
<body>
<iframe src="/i/eg_landscape.jpg"></iframe>
<p>一些老的浏览器不支持 iframe。</p>
<p>如果得不到支持,iframe 是不可见的。</p>
</body>
</html>
iframe src=""
< img/ >
范围标签
<div></div>
<span></span>
ToCharArray
指定的链接 href=“” target = “xxx” 指定到页面打开的位置 以name接收
例子: 然后再加上内容
<frameset rows="25%,*,25%">
<frame src="head.html" />
<frameset cols="20%,*">
<frame src="menu.html" />
<!--类似锚点的设置,其他链接通过target属性连接到此处-->
<frame src="content.html" name="content" />
</frameset>
<frame src="foot.html" />
</frameset>