(一)概述
HTML是将内容和内容显示形式结合在一起的语言,它对于内容显示形式的控制,主要是通过标签(元素)的属性,由于它对“内容显示形式”存在着很多的弊端,所以之后就出现了CSS,CSS就相当于HTML标签的属性。
(二)文本与段落标记
<font>标签
属性face:设置字体,且字体必须在浏览器中安装相应的字体后才可以正确浏览。<font face="华文彩云"></font>属性size:设置字号。从1—7的整数代表字体大小的绝对字号;从-4—+4的整数,相对于3号字号放大和缩小。<font size="5">Hello</font>;<font size="+4">Hello</font>
属性color:设置颜色。<font color="#ff0000">Hello</font>
<b>,<strong>标签
加粗。<b>加粗的文字</b> <string>加粗的文字</string><i>,<em>,<cite>标签
斜体。<i>斜体文字</i>;<em>斜体文字</em>;<cite>斜体文字</cite>
<sup>,<sub>标签
上标,superscript,<sup>上标的内容</sup>;下标,subscript,<sub>下标的内容</sub>
<big>,<small>标签
增大文本字号:<big>大字号内容,在定义的字号大小的基础上增加一级,可以使用多个该标签</big>;缩小文本字号:<small>小字号内容,比普通文字小一级,再加一个标签就会又小一级,依次类推</small>
<u>标签
在文字下方添加下划线。<u>下划线的内容</u><p>,<br>,<nobr>标签
划分段落:<p>段内内容</p>,该段和下段会有空行隔开;强制换行:行内容<br>,连续多个标签可实现多次换行;强制不换行:<nobr>不换行的内容</nobr>,网页如果某一行的文本过长,浏览器会自动对这段文字进行换行处理,但是,可以使用<nobr>标签实现禁止自动换行,此行内容过多时,会出现水平滚动条<hr>标签
插入一条水平分割线属性width:水平线的宽度:<hr width="宽度">,宽度可以为百分比(相对浏览器,会随着浏览器的大小而改变)
属性size:水平线的高度:<hr size="高度">,高度只能为像素
属性color:水平线的颜色:<hr color="颜色">
属性align:水平线的对齐方式,默认为居中对齐:<hr align="对齐方式">,center,left,right
<h1>……<h6>标签
标题字,headline,<h1>一级标题</h1>,<h6>六级标题</h6>,可使用align属性
<pre>标签
原样显示输入内容,包括输入的某些特殊的字符,<pre>原样输出内容</pre>插入特殊字符
在html文档中,连续的多个空白字符(空格、制表符、回车、换行等),浏览器显示时将只解析为一个空格字符。想在html文档中插入特殊字符,我们可以用字符引用和实体引用。 标题字,headline,<h1>一级标题</h1>,<h6>六级标题</h6>,可使用align属性
<pre>标签
原样显示输入内容,包括输入的某些特殊的字符,<pre>原样输出内容</pre>
(三)input标签
文字字段text
<input name="控件名称,区别页面中其他控件" type="text" value="文本框的默认取值" size="确定文本框在页面中显示的长度" maxlength="文本框中最多可以输入的字符数" />
注意:加入size属性后,其大小最小为1,最大值将取决于浏览器的宽度
密码域password
<input name="控件名称,区别页面中其他的控件" type="password" value="默认值,以*显示" size="控件在页面中显示的长度,义字符为单位" maxlength="控件最多可以输入的字符数" />注意:密码域仅仅将控件中的内容以*显示,他不能保证数据传送中的安全
单选按钮radio
<input name="控件名称,相同名称的控件为同一组" type="radio" value="单选按钮的取值,传送的数据值" checked="checked" />注意:一组单选中只能出现一个checked;传送数据的时候,只传送被选中的数据
复选框checkbox
<input name="复选框名称,区别页面中其他的控件" type="checkbox" value="复选框的取值,要传送的数据值" checked="checked" />注意:复选框可以拥有自己的名称,并不需要属于哪一个组
普通按钮button
普通按钮一般情况下要配置脚本来进行表单处理,“处理程序”就是脚本编写的函数<input type="submit" name="按钮名称" value="按钮的取值:显示在按钮上" οnclick="处理程序" />
提交按钮submit
提交按钮是一种特殊的按钮,单击该类按钮可以实现表单内容的提交
<input type="submit" name="按钮名称" value="按钮的取值:在按钮上显示" />
重置按钮reset
重置按钮用来清除用户在页面中输入的信息,相当于重新打开该网页时显示的内容
<input type="reset" name="按钮名称" value="按钮的取值:在按钮上显示">
图像域image
可以使用一副图像作为按钮,这样做可以创建任何外观的按钮<input type="image" name="图像域名称" src="图像路径" />
隐藏域hidden
传送一些对用户不可见的数据,隐藏域包含的那些要提交处理的数据,并不显示在浏览器中<input type="隐藏域名城" type="hidden" value="隐藏域的取值" />
文件域file
文件域在上传文件时常常用到,它用于查找硬盘中的文件路径,然后通过表单将选中的文件上传,在上传图像时也常常用到<input type="file" name="文件域名称" size="控件的长度" maxlength="最长字符数" />
下拉菜单
<select name="下拉菜单名称"><option value="上海:传送的值,可以为别的" selected="selected">上海</option>
<option value="北京">北京</option>
<option value="深圳">深圳</option>
</select>
列表项
<select name="列表项名称" size="显示的列表数" multiple="multiple"><option value="黄色:传送的值,可以为别的" selected="selected">黄色</option>
<option value="红色">红色</option>
<option value="蓝色">蓝色</option>
</select>
文本域标记textarea
多行输入文本的时候,需要使用textarea标签<textarea name="文本域名称" cols="列数" rows="行数"></textarea>
文本域和计算机的内存一样大,文本域的大小不受浏览器窗口的显示。如果文本框超出了浏览器窗口的大小,这时会出现滚动条来帮助用户看到整个文本域
id标记
<id=元素的标示名>id用来表示页面的惟一元素
例子:
<span style="font-size:18px;"><html>
<head><title>Hello World</title></head>
<body>
<form name="form1" method="post" action="">
<table width="500" border="0" align ="center" cellpadding="0" cellspacing="2">
<tr>
<td width="143" height="25">姓名:</td>
<!--单行文本-->
<td width="351"><input type="text" name="name" id="name" size="20"></td>
</tr>
<tr>
<td height="25">年龄:</td>
<td>
<!--下拉菜单-->
<select name="age" id="age">
<option value="5" selected="selected">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
</td>
</tr>
<tr>
<td height="25">性别:</td>
<td>
<!--单选框-->
<input name="radiobutton" type="radio" value ="男" checked="checked">
男
<input name="radiobutton" type="radio" value ="女">
女
</td>
</tr>
<tr>
<td height="25">家庭住址:</td>
<!--单行文本-->
<td><input name="textfield" id="1" type="text" size="40"></td>
</tr>
<tr>
<td height="25">联系电话:</td>
<!--单行文本-->
<td><input name="textfield" id="2" type="text" size="15"></td>
</tr>
<tr>
<td height="25">您对我们的玩具是否满意</td>
<!--复选框-->
<td>
<input type="checkbox" name="checkbox" id="3" value="非常满意" checked="checked">
非常满意
<input type="checkbox" name="checkbox" id="4" value="一般">
一般
<input type="checkbox" name="checkbox" id="5" value="非常差">
非常差
</td>
</tr>
<tr>
<td height="25">意见:</td>
<!--多行文本输入-->
<td><textarea name="textarea" cols="40" rows="6"></textarea></td>
</tr>
<tr>
<td height="25" colspan="2" align="center">
<!--提交按钮-->
<input type="submit" name="submit" id="7" value="提交">
<!--重置按钮-->
<input type="reset" name="reset" id="8" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html> </span>
<span style="font-size:18px;"><span style="background-color: rgb(255, 255, 255); font-family: System;">
</span></span>
<span style="font-size:18px;"><html>
<head><title>Hello World</title></head>
<body>
<form name="form1" method="post" action="">
<table width="500" border="0" align ="center" cellpadding="0" cellspacing="2">
<tr>
<td width="143" height="25">姓名:</td>
<!--单行文本-->
<td width="351"><input type="text" name="name" id="name" size="20"></td>
</tr>
<tr>
<td height="25">年龄:</td>
<td>
<!--下拉菜单-->
<select name="age" id="age">
<option value="5" selected="selected">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
</td>
</tr>
<tr>
<td height="25">性别:</td>
<td>
<!--单选框-->
<input name="radiobutton" type="radio" value ="男" checked="checked">
男
<input name="radiobutton" type="radio" value ="女">
女
</td>
</tr>
<tr>
<td height="25">家庭住址:</td>
<!--单行文本-->
<td><input name="textfield" id="1" type="text" size="40"></td>
</tr>
<tr>
<td height="25">联系电话:</td>
<!--单行文本-->
<td><input name="textfield" id="2" type="text" size="15"></td>
</tr>
<tr>
<td height="25">您对我们的玩具是否满意</td>
<!--复选框-->
<td>
<input type="checkbox" name="checkbox" id="3" value="非常满意" checked="checked">
非常满意
<input type="checkbox" name="checkbox" id="4" value="一般">
一般
<input type="checkbox" name="checkbox" id="5" value="非常差">
非常差
</td>
</tr>
<tr>
<td height="25">意见:</td>
<!--多行文本输入-->
<td><textarea name="textarea" cols="40" rows="6"></textarea></td>
</tr>
<tr>
<td height="25" colspan="2" align="center">
<!--提交按钮-->
<input type="submit" name="submit" id="7" value="提交">
<!--重置按钮-->
<input type="reset" name="reset" id="8" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html> </span>
<span style="font-size:18px;"><span style="background-color: rgb(255, 255, 255); font-family: System;">
</span></span>
(四)列表
有序列表
依赖顺序来表示重要的程度,列表中的项目有先后顺序,一般采用数字或字母作为序号
<ol>标签
<ol type="序号类型" start="编号的起始值,只能为整数">
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
type的取值:1(数字:1、2、3…),a(小写英文字母:a、b、c…),A(大写英文字母:A、B、C…),i(小写罗马数字:i、ii、iii、v…),I(大写罗马数字:I、II、III、IV…);默认(不写)为1
start的取值:只能为整数,表示序号类型从第几个编号开始。
无序列表
无须列表没有序号<ul>标签
<ul type="序号类型">
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
type的取值:Disc(黑色实心圆点),circle(空心圆环),square(正方形);默认(不写)为Disc
<dir>,<menu>标签
没有type属性,其他的和ul标签一样,只需把ul变成dir或menu就行了
<dl>标签
<dl>
<dt>HTML</dt> <dd>HTML的意思就是……</dd>
<dt>CSS</dt> <dd>CSS的意思就是……</dd>
</dl>
定义列表由两部分组成:定义要解释的名称和定义该名词具体的解释;d为definition,t为term,d为description
例子:
<span style="font-size:18px;">ul:中的li标签本身就具备了缩进.
<!--ul:可也可以让程序有上列表下级的关系.而且可以在前面加上原点.或者方框之类的;-->
<ul type="disc">
<li>哈哈哈哈</li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">嘻嘻哈哈</span></li>
<li>哈哈哈哈</li>
</ul>
示例<dl>:
<!--
注释文字
dl:定义列表的范围
dt:定义上层项目条目
dd:定义下层项目条目.而且dd具备缩进功能的效果.
-->
<dl>
<dt>游戏名称</dt>
<dd>星际争霸</dd>
<dd>星际争霸</dd>
<dd>星际争霸</dd>
<dd>星际争霸</dd>
<dt>部门名称</dt>
<dd>培训部</dd>
<dd>培训部</dd>
<dd>培训部</dd>
<dd>培训部</dd>
</dl> </span>