HTML网页设计
属性值一般用" "括起来,且必须使用英文双引号
<head></head>
是文档的头部信息,说明文档的基本情况,如文档的标题等,其内容不会显示在网页中。此标签对之间可使用<title></title> 、<script></script>
等描述HTML文档相关信息的标签对
<body></body>
标签中常用的属性:bgcolor:设置网页背景颜色;
text:设置文档中文本颜色
bacjground:设置网页的背景图片
<!-- 注释内容 --!>
1、常用的单标签
<br/> | 换行 |
---|---|
<hr/> | 制作水平线 |
<img src=""> | 图像和动画标签 |
<meta http-equiv="refresh"content="1"> | 页面一秒刷新一次 |
例:1、<hr size="5px" align="center" color="blue" width="80%">
align对齐属性,center居中,left左对齐(默认),right右对齐;color颜色属性;size字体大小属性,其属性值为5px;
2、常用的双标签
<b></b> | 黑体标签 |
---|---|
<i></i> | 斜体标签 |
<h#></h#> | #=1,2,3,4,5,6,定义了6级标题,字体大小递减 |
<p></p> | 段落标签:align属性指定对齐方式 |
<address></address> | 用来定义html文档或文章的拥有者的联系信息,可以包括手机电话、联系地址、电子邮箱、微信号等联系信息 |
<ol></ol> | 有序列表标签 |
<ul></ul> | 无序列表标签 |
<li></li> | 在<ul></ul>或<ol></ol> 标签内使用,形成列表项 |
<a href=""></a> | 超链接 |
3、列表标签
(1)有序列表标签<ol></ol>
格式如下:
<!---->>
<ol type="序号类型">
<li>……</li>
<li>……</li>
……
</ol>
属性type指定列表项前项目符号的样式,取值如下:“1”:编号为阿拉伯数字(默认);“a”:小写英文字母;“A”:大写英文字母;“i”:小写罗马数字;“I”:大写罗马数字;
(2)无序列表标签<ul></ul>
格式如下:
<!---->>
<ul type="序号类型">
<li>……</li>
<li>……</li>
……
</ol>
属性type指定列表前项目符号的样式,取值为:disc:实心圆点(默认);circle:空心圆点;square:实心方块;
4、超链接标签
格式:<a href="转向的网址或文档"target="目标框架值">超链接名称或图片</a>
属性href用于指定连接的目标(另一个网页的路径)。
属性target设置单击超链接时打开网页的目标框架,可以选择_blank(新建窗口),_parent(父框架),_self(在同一窗口中打开,是默认设置值)和_top(整页)等目标框架
5、图像和动画标签
格式:<img src="" height=""width=""border=""alt="">
属性src:指定图像的路径,分为绝对路径和相对路径;
绝对路径:
.
表示当前文件所在的目录
..
表示当前文件所在的上一级目录
文件名
表示当前文件所在目录文件,相当于./
文件名,./
可以省略
绝对路径
正确格式:http://ip:prot/工程名/资源路径
错误格式:盘符:/目录/文件名
属性height:图片高度;属性width:图片宽度;属性border:设置图像边框;属性alt(或title):当图片显示不出来是用需要替代的文本
图像和动画标签可以组合使用例如:
<a href="">
<img src=""width=""height=""alt="">
</a>
6、Html5中音频的插入
<audio src="地址",autoplay="autoplay",controls="controls",controls="controls",loop="loop">`音频`</audio>
autoplay:音频在就绪后马上播放;controls:显示控制面板(启动,中止等按钮);loop:循环播放
7、定时刷新或跳转
(1)定时刷新语法:<meta http-equiv="refresh"content="1"/>
该语句表示页面每隔一秒刷新一次,属性content的值代表间隔的时间。
(2)定时自动跳转语法:<meta http-equiv="refresh"content="3;url=http://www.sohu.com"/>
该语句表示页面3秒后自动跳转到搜狐页面
(1)和(2)一般放在<head>
标签中
8、表格
表格由行、列、单元格组成,可以很好地控制页面布局,固定文本或图像的输出,还可以任意进行背景和前景颜色的设置。
(基本语法)
<table>
<caption>列表标题</caption>
<tr><th>列名一</th><th>列名二</th></tr>
<tr><td>数据二</td><td>数据二</td></tr>
</table>
属性border设置单元格边框(0无1有);width:设置宽度;height:设置高度;align:在table
标签中表示设置表格相对于页面的对齐方式,在td
标签中表示单元格文本的对齐方式;valign:是<tr>
属性中单元格内容的对齐方式(top:顶端对齐;middle:中间对齐;bottom:底端对齐)
colspan:设置跨列;rowspan:设置跨行;cellpadding:设置单元格边框与内容之间的距离;bgcolor设置表格背景颜色,也可设为某行或某个单元格颜色;background:设置表格背景图像
注意特别注意:<tr>
一定放在<table>
中,<th>
和<td>
一定要放在<tr>
中
9、HTML表单标签与表单设计
基本语法form name="表单名称"method="提交方法"actoin="提交服务器的地址">……</form>
<input name="输入域名称"type="类域名"value="输入域的值">
<input>
主要有6个属性:type、name、size、value、maxlength、check。其中name和type是必选的两个属性。那么属性的值是响应程序(form标签中的action属性指定,只要发给服务器必须带上name标签)的变量名。type的格式和含义如下:
input type="text" 是文本输入框 | value设置默认显示内容 |
---|---|
input type="passwork" 是密码输入框 | value设置默认显示内容,Maxlength设置最多能输入几位密码 |
input type="radio" 是单选框 | name属性可以进行分组,checked=“checked”表示默认选中 |
input type="checkbox" 是复选框 | checked="checked"表示默认选中 |
input type="reset" 是重置按钮 | value属性修改按钮上的文本 |
input type="submit" 是提交按钮 | value属性修改按钮上的文本 |
input type="button" 是按钮 | value属性修改按钮上的文本 |
input type="file" 是文件上传域 | |
input type="hidden" 是隐藏域 | |
input type="select" 是下拉列表框 | option是下拉列表框中的选项,selected="selected"表示默认选中 |
input type="textarea" 表示多行文本输入框 | rows属性设置可以显示几行的高度,cols属性可以设置每行可以显示几个字符宽度 |
form和table标签可以联用,是表单更整洁
<form>
<table align="center">
……
</table>
</form>