当前位置：首页 > news >正文

HTML网页设计

news 文章来源：https://blog.csdn.net/m0_61482505/article/details/130071346 2024/11/20 6:28:36

HTML网页设计

- HTML网页设计
- - 1、常用的单标签
  - 2、常用的双标签
  - 3、列表标签
  - 4、超链接标签
  - 5、图像和动画标签
  - 6、Html5中音频的插入
  - 7、定时刷新或跳转
  - 8、表格
  - 9、HTML表单标签与表单设计

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>

HTML网页设计

HTML网页设计

1、常用的单标签

2、常用的双标签

3、列表标签

4、超链接标签

5、图像和动画标签

6、Html5中音频的插入

7、定时刷新或跳转

8、表格

9、HTML表单标签与表单设计

相关文章：