您的位置：首页 > Web前端 > HTML

HTML基础（三）

2016-04-07 21:14 651 查看

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于 <ul> 标签。每个列表项始于 <li>。
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
<html>
<body>
<ul>
<li>Dog<br/>and<br/>Person</li>
<li><img src="bw.jpg" alt="bw"></li>
<li>Pig<br/>and<br/>Person</li>
</ul>
</body>
</html>


有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
<html>
<body>
<ol>
<li>This is <br/>a big mouse</li>
<li><img src="bw.jpg" alt="bw"  href="http:www.baidu.com">Black Widow</li>
<li><a href="http:www.baidu.com" target="_blank"><img src="bw.jpg" alt="bw"  href="http:www.baidu.com"></a></li>
</ol>
</body>
</html>


自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
<html>
<body>
<dl><!-- 自定义列表开始标签 -->
<dt>Program</dt><!-- 类目 -->
<dd>JAVA PHP C#</dd><!-- 内容 -->

<dt>Animal</dt>
<dd>Bird Bull Taiger</dd>
</dl>
</body>
</html>


不同类型的无序列表
<html>
<body>
<ul>
<li>BULL</li>
<li>NASA</li>
<li>IBM</li>
</ul>
<ul type="disc">
<li>BULL</li>
<li>NASA</li>
<li>IBM</li>
</ul>

<ul type="circle">
<li>BULL</li>
<li>NASA</li>
<li>IBM</li>
</ul>

<ul type="square">
<li>BULL</li>
<li>NASA</li>
<li>IBM</li>
</ul>
</body>
</html>
不同类型的有序列表
<html>
<body>
<ol ><!-- 如果给出的类型无法识别，则按默认1,2,3显示 -->
<li>GOOGLE</li>
<li>MICRO</li>
<li>APPLE</li>
</ol>
<ol  type="A">
<li>GOOGLE</li>
<li>MICRO</li>
<li>APPLE</li>
</ol>
<ol type="a">
<li>GOOGLE</li>
<li>MICRO</li>
<li>APPLE</li>
</ol>
<ol type="I"><!-- 大写罗马数字 -->
<li>GOOGLE</li>
<li>MICRO</li>
<li>APPLE</li>
</ol>
<ol type="i"> <!-- 小写罗马数字 -->
<li>GOOGLE</li>
<li>MICRO</li>
<li>APPLE</li>
</ol>
</body>
</html>


列表嵌套

<html>
<body>
<ul>Big
<ol>small
<li>A</li>
<li>B</li>
<li>C</li>
</ol>
</ul>
<ul>Big
<dl>small
<dt>A</dt>
<dd>abc ABC 123</dd>
</dl>
</ul>
<ul>Big
<ul>small
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</ul>
</body>
</html>


HTML 块元素

大多数 HTML 元素被定义为块级元素或内联元素。
编者注：“块级元素”译为 block level element，“内联元素”译为 inline element。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子：<h1>, <p>, <ul>, <table>

HTML 内联元素

内联元素在显示时通常不会以新行开始。
例子：<b>, <td>, <a>, <img>

HTML <div> 元素

HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table>
元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

HTML <span> 元素

HTML <span> 元素是内联元素，可用作文本的容器。
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

简单的div布局

<!DOCTYPE html>
<html>
<head>
<style>
#big{
width: 1000px;
background: gray;
}
#head{
height: 100px;
background: pink;
}
#left{
height: 400px;
width: 400px;
float: left;
}
#right{
height: 400px;
width: 600px;
background: url(bw.jpg);
float: right;
}
#foot{
height: 50px;
background: blue;
clear: both;
text-align: center;
}
</style>
</head>
<body>
<div id="big">
<div id="head">我是头</div>
<div id="left">我是左边
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
<li>Yellow</li>
</ul>
</div>
<div id="right">我是右边</div>
<div id="foot">我是脚</div>
</div>
</body>
</html>

HTML 布局 - 使用表格

使用 HTML <table> 标签是创建布局的一种简单的方式。
可以使用 <div> 或者 <table> 元素来创建多列。CSS
用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。
提示：即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！
<html>
<body>
<!-- 设置表格总宽度和边框厚度 -->
<table width="500" border="1">
<tr><!--第一行 -->
<!-- 设置横跨两列 -->
<td colspan="2" bgcolor="red">
<h>Hello World</h>
</td>
</tr>
<tr valign="top"><!--第二行 -->
<!--设置背景色，宽度及文字靠上 -->
<td style="background:blue;width:99px;text-align:top">
<!--主标题加粗 -->
<b>Menu</b><br/>
GOOGLE<br/>
Apple<br/>
Microsoft
</td>
<td style="background:pink; width:400px;height:200px;text-align:top">
Just try
</td>
</tr>

<tr ><!--第三行 -->
<!--设置内容居中显示，横跨两列 -->
<td align="center"  colspan="2">Bye!</td>
</tr>
</table>
</body>
</html>

表单

表单是一个包含表单元素的区域。
表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。
表单使用表单标签（<form>）定义。

输入

多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

文本域（Text Fields）

当用户要在表单中键入字母、数字等内容时，就会用到文本域。
表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。

单选按钮（Radio Buttons）

当用户从若干给定的的选择中选取其一时，就会用到单选框。

复选框（Checkboxes）

当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。

表单的动作属性（Action）和确认按钮

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
<html><!--  -->
<body>
<!-- 设置表单提交地址 -->
<form action="001.html">

Chinese name:
<!-- 文本框，类型为text，赋值给chName -->
<input type="text" name="chName"/>
<br/>
<br/>
English name:
<input type="text" name="enName"/>
<br/>
<br/>
<!-- 单选框类型 元素名称sex  选项之一为male -->
<input type="radio" name="sex" value="male"/>Male
<br/>
<input type="radio" name="sex" value="female"/>Female
<br/>
<br/>
<!-- 多选框  选项之一名字为 football -->
<input type="checkbox" name="football"/> I love Football
<br/>
<input type="checkbox" name="basketball"/> I love Basketball
<br/>
<input type="checkbox" name="pingpang"/> I love Pingpang
</form>
<br/>
<br/>
<form name="input"action="002.html" method="get">
Username:
<!-- text类型，赋值给user -->
<input type="text" name="user"/>
<!-- submit 提交类型  按钮显示文字Go -->
<input type="submit" value="Go">
</form>
<br/>
<br/>
<form action="003.html">
<!-- 下拉菜单，name为组件名称 id为标示 -->
<select name="cars" id="car">
<!-- 各个选项 value是选项元素名称 -->
<option value="Volvo">Volvo</option>
<option value="Benz">Benz</option>
<option value="BMW">BMW</option>
<!-- 默认显示最上面的，如果加上selected即将次选项作为默认显示 -->
<option value="Farrari" selected="selected">Farrari</option>
</select>	<br/>
<br/>
<!-- 文本框 cols可见宽度 rows 可见行数 -->
<textarea name="" id="" cols="30" rows="10">
This is a textarea
</textarea>
<br/>
<br/>
<!-- 创建一个显示Hello的按钮 -->
<input type="button" value="Hello">
<br/>
<br/>
<!-- 自定义文字段 ，控件组 -->
<fieldset>
<!-- 标题，说明 -->
<legend>Sum</legend>
A: <input type="text"/>
B: <input type="text"/>
</fieldset>

</form>
</body>
</html><!--  -->
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  列表 div 表单
相关文章推荐
新的分享
章节导航