WEB 基本网页开发技术

最新推荐文章于 2024-09-02 10:32:19 发布

xiaoxie_advent

最新推荐文章于 2024-09-02 10:32:19 发布

阅读量978

点赞数 1

分类专栏： WEB HTML 文章标签： HTML 编程

本文链接：https://blog.csdn.net/advent_java/article/details/17911911

版权

WEB 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

网页中的内容有：文字、图片、动画及各种美化后的结果并且在其中有各种按钮来实现它们之前的链接。

页面元素：HTML

页面美化：CSS

页面交互：JavaScript

页面数据：AJAX与服务器传递XML填充

HTML就相当于是页面的一个框架;JavaScript就相当于一个控制器操纵各个页面实现各种效果;CSS就如同是一个View美化一个页面;XML就相当于一个数据仓库传递相关数据;Ajax就相当于是一个后台监控程序与服务器进行通迅。

HTML:

超文本标记语言

XHTML:严谨而标准的HTML，并且还提供了更多的扩展，标准使得它更容易跨平台

常用的HTML编辑器：

EditPlus(韩国)，可以一边编辑一边浏览（ctrl+B）

UltraEdit

Dreamweaver

网页的扩展名：html(常用)、htm(很少用)

htm的产生是由于像DOS这样的旧的操作系统只支持扩展名为3个字符

文档类型声明：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

第一个页面内容：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=GB18030">
<title>这是网页的标题</title>
</head>

<body>
<p>这是网页的主体内容部分</p>
</body>
</html>

一个网页的基本结构如下：

<title>

网页的属性（为浏览器设置）

</title>

<body>

网页内容（为用户而写的）

</body>

网页的基本元素：

1，标签：

<html>打开标签，相应的</html>表示关闭标签

所有的标签都应该有打打开和关闭成对的出现，还有一种关闭是自关闭比如<hr/>、<br/>

常见的格式：<标签>内容</标签>，<标签/>

2，属性：

标签可以有属性，包含额外的信息，属性一般是出现在开放标签中它们的值总是在引号中

格式：<tag attribute="value">内容</tag>

3，元素：

构造网页的字符

在创建一个网页时如何指定一个网页的编码？

可以在HTML文件中设置MIME字符集信息，使用meta元素指定网页的编码

格式：<meta http-equiv="Content-Type" content="text/html;charset=?">

其中？常用的值是：utf-8,gbk,gb2312,iso-8859-1

如何在一个网页中写入相应的注释？

注释标签用于在HTML源码中插入注释，注释对浏览器来说是不会云解释的

格式：

HTML标签规定了WEB文档的逻辑结构，并且会控制文档的显示格式

<head>标签：

设置文档的标题：<title>标题</title>

设置文档的属性：<meta http-equiv="XXX" conten="xxxxxx">

查询表单标签：<isindex>

预设网页中的基准路径：<base>

<body>标签：

代表的是网页的正文

设置背景色属性：bgcolor

设置背景图片：background

设定背景图案属性：bgproperties 例如：<body bgproperties="fixed">

设置文本的颜色属性：<body text="">

设置超文本链接字的颜色：<body link="">

设置被选中的超文本链接的颜色：<body vlink="">

设置已链接过的链接文本的颜色：<body alink="">

文字标签：

标题文字标签：<h1>~<h6>

字体变化标签：<font>文字内容</font>

字体大小属性：<font size="?">文字内容</font>，这里?表示1～7

指定字型属性： <font face="字型名">文字内容</font>

文字颜色： <font color="?">文字内容</font>

显示小字标签：<small>文字</small>

显示大字体标签：<big>文字</big>

显示粗字体：<b>文字</b>

显示斜体字：<i>文字</i>

打印机字体标签：<tt>文字</tt

底线标签：<u>文字</u>

删除线标签：<strike>yygywrh</strike>

下标标签：<sub>文字</sub>

上标字标签：<sup>文字</sup>

文字闪烁标签：<blink>文字</bink>

字符实体：

在HTM当中有一些字符是有特别的含义，浏览器会把相应的字符转为相应的意义再输出，但有时候我们网页面中需要把它们直接输出而不要转义，这时就要使用字符实体。

一个字符实体由三部分组成：1，&符号;2，实体英文表示或是#加上实体编号;3，分号

注意：实体是区分大小写的

通常的情况下浏览器会把多余的空格去掉，如果把多个空格都要保留下来则需要使用实体 

段落标签：

1，换行标签：XHTML中一定要用<br/>

2，分段标签：<p>段内文本</p>

文字的对齐方向<p align = "#">文本</p>:这里的#表示的是左对齐（默认的对齐方式）

对齐方式还可以是center,right

3，分隔线标签：<hr>或<hr/>

分隔线的粗细：使用size属性<hr size=像素值>

分隔线的对齐方式：<hr align = "#">,#表示左对齐（默认），center(居中)，right(右对齐)

实心分隔线：<hr noshade>

4，向中对齐标签：<center></center>

5，原始样式显示标签：<pre></pre>

超链接：

在HTML当中使用<a>表示超链接

<a>可以指向任何一个文件源，一个HTML网页、图片、视频文件

<a href="url">链接显示的文本</a>

1，target属性：

表示链接到的内容在什么窗口下显示

<a href="test.html" target="_blank">test页</a>：表示在新窗口中显示test页面

2，title属性：

表示当鼠标停在链接上的时候显示的文字注释

<a href="test.html" target="_blank" title="欢迎">test页</a>

3，name属性：

表示可以跳转到一个文件的指定位置，使用name一定是设置一对一个是设置name的名称一个是设置href指向这个name

注意如果找不到name指定的部分则显示文件的开头

4，链接到E-mail地址：

图片标签：

可以在html中插入<img>标签在网页中插入一张图片，并且可以设置图片的属性

1，插入图片的属性src:

2，设定图形框：

3，设定图片的大小属性

4，设定图形上、下、左、右留空属性vspace,hspace

5，图形附注属性alt

6，预载图形属性lowsrc

7，热点usemap

</map>

8，矩形：必须使用四个数字，前两个数字是左上角的坐标，后两个数字是右下角坐标

9，圆形:必须使用3个字符，前两个数字为圆心的坐标，最后一个数字是半径的长度

10，多边形把图形中的每一个转拆点坐标依次填入

表格定义：

创建表格的标签是<table></table>在这其中使用<tr>分出每一行，<td>分出每一行中的各列

1，设定边框的宽度border

2，设定格线的宽度cellspacing：

3，设定表格中的内容与格线的距离cellpadding

4，调整表格的宽度width

5，调整表格的高度height

6，设定表格的背景颜色：

7，设定表格边框的颜色

8，表格的标题标签

对于表格的标题有一个位置属性

<caption align="#">这里的#默认是表示的上方top，bottom表示表格的下方

9，定义行<tr>

10，定义列<td>：靠左对齐 <th>:靠中对齐并用粗体显示

水平位置属性： align

#可以是left,center,right

垂直位置属性：valign

#号可以为：

top:向上对齐

middle:向中对齐

bottom:向下对齐

宽度属性：width

垂直合并：rowspan

横向合并：colspan

目录式清单：

<dir>

注意清单中的每个项目不可以超过20个字符也就是不可以超过10个中文字符

1，选项式清单：

<menu><li>项目1

<li>项目2

2，有序号的清单：

<ol><li>项目1

<li>项目2

关于序号的形式 type

#号可以是以下值：

A : 以大写字母A ii B ii C ii D...作为项目编号

a : 以小写字母作为项目编号

I : 以大写罗马数字作为编号

i : 以小写罗马数字作为编号

1：以阿拉伯数字作为编号

起始数字start

指定编号value

3，无序号的清单：

<ul><li>项目1

<li>项目2

项目符号形式:type

#号的取值可以是：

disc:实心圆点（默认值）

circle:空心圆点

square:实心方块

4，原始清单 plain：

5，清单排列方式 warp

垂直排列方式

水平排列 vert

6，定义式清单：

<dl>

<dt>项目1

<dd>项目说明1

<dt>项目2

<dd>项目说明2

<dt>项目3

<dd>项目说明3

</dl>

紧密排列compact

<dl compact>:这样子可以使用dt与dd的内容写在一行上

与网页交互：表单

一个表单有三个基本的组成部分：

表单标签，表单域，表单按钮

表单标签：

包住的部分说明是表单内容<form></form>

格式：<form action="url" method="get/post" enctype="mime" target="..."></form>

action:表明了处理表单的地址

method:表明表单提交的方式post,get方式

enctype：提交内容的方式,默认是：“application/x-www-form-urlencoded”

target:指明了提交的结果文档显示的位置

表单域：

主要是用来采集用户输入的内容

1，文本框：一种让用户自己输入内容的表单对象

type="text"表明是一种单行文本输入框

name:指定文本框的名称，程序中使用这个名字来采集数据因而应保证名称唯一

size:定义文本框的宽度

maxlength:定义最多输入的字符个数

value:定义文本框的初始值

2，多行文本框

一种让访问者自己输入内容的表单对象可以让访问者填写较长的内容

name:指定了多行文本框的名字

cols:指定了多行文本框的列数

rows:指定了多行文本框的行数

wrap:定义输入内容大于文本域时显示的言式

默认是：自动换行，在输入的内容超过右边界时会自动换行，在传给服务器时会把换行除掉

off：用来强制文本不进行换行内容长了后会向左滚动

virtual:与默认值一致

physical:会换行，当数据提交的时候换行也会提交

3，密码框：

对于密码框输入时会用星号显示不会直接显示字符

type="password"：表示现在是一个密码框

name:定义密码框的宽度

size:定义密码框的宽度

maxlength:定义最多输入的字符数

4，隐藏域：

用来提交一些不可见的信息

5，复选框：

复选框中以在待先中选中一项以上的选项，每一个复选框都是一个独立的元素，必须都有一个唯一的名称

6，单选控钮

一次只能选择其中的一种

type="radio"定义单选按钮

name:定义单选按钮的名称，单选按钮是以组为单为的，在同一组中的名称要一样

value:定义单选按钮的值，在同一组中它们的值要不相同

7，文件上传框

type="file":定义一个文件上传框

name:定义了文件上传框的名字

size:定义文件上传框的宽度

maxlength：定义最多输入的字符数

注意在使用文件域以前，要在表单标签中设置上传的类型enctype="multipart/form-data",表单的传送方式必须是post方式

8，下拉列表框：

可以使用在一个有限的空间里设置多种选项

<option value="value1" selected>text_value1</option>

<option value="value2">text_value2</option>

</select>

size:定义了下拉列表框中的行数

name:定义了下接列表框的名称

multiple:表示可以多选，如果不设置这个属性则表明只能是单选

value:定义选择项的值

selected:表示默认已经选择本选项

表单按钮：

表单中的按钮包括提交按钮、重置按钮、一般按钮

1，提交按欣扭：把输入的信息提交到服务男友

代码格式：<input type="submit" name=".." value="...">

type="submit"：定义提交按钮

name:定义提交按钮的名称

value:定义按钮的显示文字

2，复位按钮：

用来重置表单

代码格式：<input type="reset" name=".." value="..">

type="reset":定义复位按钮

name:定义复位按钮的名称

value:安义按钮的显示文字

3，一般按钮：

用来控制其它定义了处理脚本的处理工作

代码格式：<input type="button" name=".." value=".." οnclick="...">

type="button":定义一般按钮

name:定义一般按钮的名称

value:表示按钮上要显示的文字

onclick:可以是其他事件，通过指定脚本函数来定义按钮的行为