静态网页设计

静态网页设计

HTML :超文本标记语言 是用于描述网页内容结构的语言。

使用HTML 可以:

发布包含标题,文本,表格,列表,图片的在线文档。

通过单击超链接进行网页间的跳转。

设计表单将用户输入的内容提交给服务器进行处理。

可以嵌入声音,视频等多媒体内容。

HTTP :超文本传输协议 是互联网上应用最为广泛的一种网络协议,它规范了通过网络请求与接收HTML 页面的方法。

“http://www.w3.org/TR/html4/strict.dtd”>

严格的DTD ,遵循这种DTD ,表明页面中不会使用废弃的元素和属性,也不会使用框架。

松散的DTD ,遵循这种DTD ,表明页面中可能会使用废弃的元素和属性,但不会使用框架。

框架DTD ,遵循这种DTD ,表明页面中可能会使用废弃元素和属性,以及框架。 HTML 文档结构

HTML 元素是由单个或一对标签定义的包含范围。一个标签就是左右分别有一个小于号的字符串。开始标签是指不以斜杠/开头的标签,其内是一串允许的属性/值对。结束标签则是以一个斜杠/开头的。

一个标准的HTML 文件应该以开始标签开是文档,中间包含与等元素,其中部分中可以定义页面的标题,简介,编码格式等内容,部分为在浏览器中显示的页面正文。

通过元素可以指定页面的标题,标题会出现在浏览起的标题栏中。文档的内容是通过元素来指定的,放置文档的内容。可以使用符号包含注释内容。

字符引用和实体引用都是以一个和号&开始并以一个分号;结束。(“ ") (&&)(>)(  )(©)(®)

基本元素介绍

页面信息元素

指定页面的文本编码格式;

http-equiv=”content-Type ”content=”text/html”charset=UTF-8”> 页面显示5秒钟后浏览器跳转到www.google.com 页面:

浏览器可以缓存本页面直至2011年2月23日18点,超过此事件后浏览器必须重新从服务器上取得此网页上内容:

Name :描述网页内容,供搜索引擎收录,需要与content 属性配合使用,常见的设置如下:

设置本网页的关键字,多个关键字用英文逗号分割,为网页提供合适的关键词有利于提高网页在搜索引擎中的排名:

设置本网页的概述,告诉搜索引擎本网页的主要内容:

设置本网页的作者,可以是个人或公司名称:

段落元素

段落元素用来表示一段文本,该元素会自动进行换行。其中,align 属性用于设置文字对齐方式,可选值有“left ”, “center ”, “right ”默认为左对齐。

左对齐段落

居中段落

靠右对齐段落

换行元素

换行元素用于同一段落内文字的换行显示,该元素没有属性,也不包含内容。 标题元素

--

文字修饰元素文字变粗体文字加下划线文字变斜体。

文字加下划线

文字变斜体

文字变粗体

文字修饰元素可用于修饰文字的颜色,大小和字体。

元素常用属性如下:

Color :设置文字的颜色。

Size :设置文字的大小。

Face :设置文字的字体。

文字

原样显示元素



原样显示元素用于原样显示文本,包括其中的换行符与连续的空格。 分割线元素

分割线元素用于显示分割线,可以通过属性设置分割线的外观。Color:设置分割线的颜色。Noshade :设置是否显示阴影。Width :设置线的宽度。Align :分割线的对齐方式,center 居中,left 居左,right 居右。 Size :线的粗细。

color=”red ”noshade=”noshade ”width=”400px ”align=”right ”size=”1”/>超链接,图片及其他常用元素超链接的基本用法超链接的HTML 元素为,通过元素的href 属性指定跳转的地址。

跳转

图片元素图片格式简绍:BMP 格式,GIF 格式,JPEG 格式,PNG 格式。图片元素的基本用法图片元素为,通过src 属性指定图片地址就可以将图片显示在页面上。 

图片元素常用的属性Width/height:图片的高度和宽度。Border :图片边框的宽度。Alt :图片无法加载时,用于替换图片内容的文字。Align :图片与文字的对齐方式。Top 上对齐,middle 居中对齐,bottom 下对齐, Right 右对齐,left 左对齐。

“1”alt=“图片服务器故障”/>

其他常用元素内嵌元素元素常用来修饰行内的文字,图像等内容,元素并不影响元素的显示,需要配合样式表使用。块级元素



上标下标

滚动字幕

元素用来滚动显示文字或图片,通过设置属性可以控制滚动方向和速度。

元素常用属性

Width/height:设置字幕的宽度和高度。

Direction :设置字幕的滚动方向,left,right,up,down.

Scrollamount:设置字幕的滚动速度,值越大滚动速度越快。

Bgcolor :设置字幕的背景色。

height=”100”bgcolor=”gray ”direction=”up ”scrollamount=”20”>

表格,列表与边框

表格的组成

表格元素

标题表身表注放置单元行普通单元格

表头
标题单元格 .

表格的属性

Border 属性表示表格边框的宽度,默认值为0.

Width 属性和height 属性

Align 属性设置表格的对齐方式left ,right ,center 。默认为left 。

Bgcolor 属性与background 属性

Bgcolor 属性表示表格的背景色,background 表示表格的背景图像。 Cellspacing 属性与cellpadding 属性

Cellspacing 属性控制相邻单元格之间的间距,cellpadding 属性控制单元格内部文字与边框的边距。

Tr 的属性

Height 属性用于设置单元行的高度。

Bgcolor 属性用于设置单元行的背景色。

Align 属性与valign 属性align 用于设置本单元行中的单元格的水平对齐方式,left ,right ,center 。Valign 属性设置本单元行所有单元格的垂直对齐方式,top,middle,botton.

Td/th元素的属性

Width 属性用于设置单元格的宽度。

Align 属性与valign 属性,当单元格的设置冲突时,优先使用单元格的设置。 Bgcolor 属性用于设置单元格的背景色,会覆盖表格或单元行的设置。

Colspan 属性用于合并同一行中的单元格,属性值为合并的数量,最小为2. Rowspan 属性用于合并同一列中的单元格,属性值为合并的数量,最小为2. 表格嵌套

列表元素

列表分为有序列表和无序列表

有序列表

有序列表使用

  1. 元素,列表项目使用
  2. 元素,有序列表会为每一个列表项进行自动编号。Type=“1”用阿拉伯数字表示条目type=“a ”用小写字母表示条目type=“A ”用大写字母表示条目type=“i ”用小写罗马数字表示条目type=“I ”用大写罗马数字表示条目。

    无序列表

    无序列表使用

    • 元素,列表元素使用
    • 元素。

      Type=“circle ”用空心圆点表示条目。Type=“disc ”用实心圆点表示条目。Type=“square ”用方形表示条目。

      HTML 表单

      表单的作用与提交方式

      表单元素为,表单中可以包含多项表单元素。Action 属性用于设置表单的提交方式。Method 属性用于设置表单中数据的提交方法。

      表单中的输入域

      1. 提交按钮

      提交按钮的type 属性为submit ,通过value 属性指定按钮上的文字。 表单需要有提交按钮才能提交表单中的数据。

静态网页设计

HTML :超文本标记语言 是用于描述网页内容结构的语言。

使用HTML 可以:

发布包含标题,文本,表格,列表,图片的在线文档。

通过单击超链接进行网页间的跳转。

设计表单将用户输入的内容提交给服务器进行处理。

可以嵌入声音,视频等多媒体内容。

HTTP :超文本传输协议 是互联网上应用最为广泛的一种网络协议,它规范了通过网络请求与接收HTML 页面的方法。

“http://www.w3.org/TR/html4/strict.dtd”>

严格的DTD ,遵循这种DTD ,表明页面中不会使用废弃的元素和属性,也不会使用框架。

松散的DTD ,遵循这种DTD ,表明页面中可能会使用废弃的元素和属性,但不会使用框架。

框架DTD ,遵循这种DTD ,表明页面中可能会使用废弃元素和属性,以及框架。 HTML 文档结构

HTML 元素是由单个或一对标签定义的包含范围。一个标签就是左右分别有一个小于号的字符串。开始标签是指不以斜杠/开头的标签,其内是一串允许的属性/值对。结束标签则是以一个斜杠/开头的。

一个标准的HTML 文件应该以开始标签开是文档,中间包含与等元素,其中部分中可以定义页面的标题,简介,编码格式等内容,部分为在浏览器中显示的页面正文。

通过元素可以指定页面的标题,标题会出现在浏览起的标题栏中。文档的内容是通过元素来指定的,放置文档的内容。可以使用符号包含注释内容。

字符引用和实体引用都是以一个和号&开始并以一个分号;结束。(“ ") (&&)(>)(  )(©)(®)

基本元素介绍

页面信息元素

指定页面的文本编码格式;

http-equiv=”content-Type ”content=”text/html”charset=UTF-8”> 页面显示5秒钟后浏览器跳转到www.google.com 页面:

浏览器可以缓存本页面直至2011年2月23日18点,超过此事件后浏览器必须重新从服务器上取得此网页上内容:

Name :描述网页内容,供搜索引擎收录,需要与content 属性配合使用,常见的设置如下:

设置本网页的关键字,多个关键字用英文逗号分割,为网页提供合适的关键词有利于提高网页在搜索引擎中的排名:

设置本网页的概述,告诉搜索引擎本网页的主要内容:

设置本网页的作者,可以是个人或公司名称:

段落元素

段落元素用来表示一段文本,该元素会自动进行换行。其中,align 属性用于设置文字对齐方式,可选值有“left ”, “center ”, “right ”默认为左对齐。

左对齐段落

居中段落

靠右对齐段落

换行元素

换行元素用于同一段落内文字的换行显示,该元素没有属性,也不包含内容。 标题元素

--

文字修饰元素文字变粗体文字加下划线文字变斜体。

文字加下划线

文字变斜体

文字变粗体

文字修饰元素可用于修饰文字的颜色,大小和字体。

元素常用属性如下:

Color :设置文字的颜色。

Size :设置文字的大小。

Face :设置文字的字体。

文字

原样显示元素



原样显示元素用于原样显示文本,包括其中的换行符与连续的空格。 分割线元素

分割线元素用于显示分割线,可以通过属性设置分割线的外观。Color:设置分割线的颜色。Noshade :设置是否显示阴影。Width :设置线的宽度。Align :分割线的对齐方式,center 居中,left 居左,right 居右。 Size :线的粗细。

color=”red ”noshade=”noshade ”width=”400px ”align=”right ”size=”1”/>超链接,图片及其他常用元素超链接的基本用法超链接的HTML 元素为,通过元素的href 属性指定跳转的地址。

跳转

图片元素图片格式简绍:BMP 格式,GIF 格式,JPEG 格式,PNG 格式。图片元素的基本用法图片元素为,通过src 属性指定图片地址就可以将图片显示在页面上。 

图片元素常用的属性Width/height:图片的高度和宽度。Border :图片边框的宽度。Alt :图片无法加载时,用于替换图片内容的文字。Align :图片与文字的对齐方式。Top 上对齐,middle 居中对齐,bottom 下对齐, Right 右对齐,left 左对齐。

“1”alt=“图片服务器故障”/>

其他常用元素内嵌元素元素常用来修饰行内的文字,图像等内容,元素并不影响元素的显示,需要配合样式表使用。块级元素



上标下标

滚动字幕

元素用来滚动显示文字或图片,通过设置属性可以控制滚动方向和速度。

元素常用属性

Width/height:设置字幕的宽度和高度。

Direction :设置字幕的滚动方向,left,right,up,down.

Scrollamount:设置字幕的滚动速度,值越大滚动速度越快。

Bgcolor :设置字幕的背景色。

height=”100”bgcolor=”gray ”direction=”up ”scrollamount=”20”>

表格,列表与边框

表格的组成

表格元素

标题表身表注放置单元行普通单元格

表头
标题单元格 .

表格的属性

Border 属性表示表格边框的宽度,默认值为0.

Width 属性和height 属性

Align 属性设置表格的对齐方式left ,right ,center 。默认为left 。

Bgcolor 属性与background 属性

Bgcolor 属性表示表格的背景色,background 表示表格的背景图像。 Cellspacing 属性与cellpadding 属性

Cellspacing 属性控制相邻单元格之间的间距,cellpadding 属性控制单元格内部文字与边框的边距。

Tr 的属性

Height 属性用于设置单元行的高度。

Bgcolor 属性用于设置单元行的背景色。

Align 属性与valign 属性align 用于设置本单元行中的单元格的水平对齐方式,left ,right ,center 。Valign 属性设置本单元行所有单元格的垂直对齐方式,top,middle,botton.

Td/th元素的属性

Width 属性用于设置单元格的宽度。

Align 属性与valign 属性,当单元格的设置冲突时,优先使用单元格的设置。 Bgcolor 属性用于设置单元格的背景色,会覆盖表格或单元行的设置。

Colspan 属性用于合并同一行中的单元格,属性值为合并的数量,最小为2. Rowspan 属性用于合并同一列中的单元格,属性值为合并的数量,最小为2. 表格嵌套

列表元素

列表分为有序列表和无序列表

有序列表

有序列表使用

  1. 元素,列表项目使用
  2. 元素,有序列表会为每一个列表项进行自动编号。Type=“1”用阿拉伯数字表示条目type=“a ”用小写字母表示条目type=“A ”用大写字母表示条目type=“i ”用小写罗马数字表示条目type=“I ”用大写罗马数字表示条目。

    无序列表

    无序列表使用

    • 元素,列表元素使用
    • 元素。

      Type=“circle ”用空心圆点表示条目。Type=“disc ”用实心圆点表示条目。Type=“square ”用方形表示条目。

      HTML 表单

      表单的作用与提交方式

      表单元素为,表单中可以包含多项表单元素。Action 属性用于设置表单的提交方式。Method 属性用于设置表单中数据的提交方法。

      表单中的输入域

      1. 提交按钮

      提交按钮的type 属性为submit ,通过value 属性指定按钮上的文字。 表单需要有提交按钮才能提交表单中的数据。


相关文章

  • 怎么识别网页是真静态还是伪静态?
  • 什么是静态页面呢? HTML格式的网页通常被称为"静态网页",早期的网站一般都是由静态网页制作的.静态网页有五个特点:静态网页每个网页都有一个固定的URL,且网页URL以.htm..html..shtml等常见形式为后缀 ...查看


  • 静态工作点
  • 静态工作点 所谓静态工作点就是输入信号为零时,电路处于直流工作状态,这些直流电流.电压的数值在三极管特性曲线上表示为一个确定的点,设置静态工作点的目的就是要保证在被放大的交流信号加入电路时,不论是正半周还是负半周都能满足发射结正向偏置,集电 ...查看


  • 静态混合器
  • 静态混合器_(NXPowerLite) 1.概念 静态混合器是一种新型先进的化工单元设备,自70年代开始应用后,迅速在国内外各个领域得到推广应用.众所周知,对于二股流体的混合,一般用搅拌的方法.这是一种动态的混合设备,设备中有运动部件.而静 ...查看


  • 网站建设基础知识
  • 学习网站制作基础知识 一. 基础 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 网站制作流程 相信很多朋友第一次接触到网 ...查看


  • 静态网页设计 1
  • 摘要:互联网技术发展越来越迅猛,其应用技术也越来越广泛,因此互联网技术所依托的技术平台之一――网站开发也越来越重要,其中尤其包括网站前端开发技术之CSS样式的应用. 关键词:互联网:网站前端开发:CSS样式 中图分类号:TP37 文献标识码 ...查看


  • 也用PHP来实现网页静态发布的两种方法
  • 也用PHP来实现网页静态发布的两种方法 如今很多网站都是静态发布的,PHP当然也可以方便的实现静态发布喽,具体的实现方法很多,下面我就说说我会的两种方法. 方法一:ob_get_contents() 这是一种很方便的方法,也是很常用的方法, ...查看


  • 单级放大电路静态参数
  • 实验一 单级放大电路静态参数的测试 (验证性实验) 一.实验目的 1. 熟悉模拟电子技术实验箱的结构,学习电子线路的搭接方法. 2. 学习测量和调整放大电路的静态工作点,观察静态工作点设置对输出波形的影响. 二.实验仪器 1. 信号源挂件 ...查看


  • 学生毕业展览策划书
  • 12121 主办单位: 展览日期: 策展人 : 序文 此次艺术院举办毕业生作品展主要是为了给我们学生一个展示自己作品的舞台和机会,是学生自己在学校里学习四年的成果的一个展示,是献给母校献给广大师生的一次视觉盛宴. 毕业作品展分为动态展和静态 ...查看


  • 静态爆破施工方案
  • 红沙坡村(K11+920-K12+500)段路基石方 静态爆破专项施工方案 一.工程概况 本工程为老320国道(大板桥段)升级改造工程.是连接主城.昆明经济技术产业区和空港经济区的一条快速路.我标段施工的(K11+920-K12+500)段 ...查看


  • 电工电子综合实践报告
  • 电工电子技术综合实践报告 课程名称: 题目名称: 晶体管放大电路 班 级: 级 机械设计制造及其自动化 专业 姓 名: 学 号: 评定成绩: 提交日期 : 指导教师: 班 目 录 1绪论 .......................... ...查看


热门内容