HTML的常用基础语法即网页制作技巧.docx

《HTML的常用基础语法即网页制作技巧.docx》由会员分享，可在线阅读，更多相关《HTML的常用基础语法即网页制作技巧.docx（12页珍藏版）》请在冰豆网上搜索。

HTML的常用基础语法即网页制作技巧

HTML的常用基础语法

1、HTML文件结构

...

...

...

Html的页面都以开始，然后以结束。

所有内容都在...里实现。

写在...之间，包括等。

其中是作为外部css样式链接结构来书写。

2、基本链接的样式

基本语法...

这是一个链接的例子。

3、在本页面做一个链接描点

如：

跳转到下一个"链接点"（给出一个描点）

链接点（跳转到的地方）

3、跳转到另一个页面的某个地方（描点）

...

...

如：

跳转到下一个"链接点"

链接点（跳转到的地方）

4、点开链接时候打开一个新的（浏览器）窗口（属性：

window_name）

如：

开一个新窗口!

5、标尺线

这里可以给它做样式的定义，如：

#FF0000;size:

20px;width:

500px;height:

10px">

6、标题字体

...#=1,2,3,4,5,6

（自己在页面里操作一下就可以发现不一样的效果）

7、行的控制

段（可以看作是空行）

你好吗？

很好。

你好吗？

很好。

------------------------------------------------------------------------------

换行

你好吗？

很好。

你好吗？

很好。

------------------------------------------------------------------------------

不换行

请改变您浏览器窗口的宽度，使之小于这一行的宽度，看看这个标记的作用！

8、列表

无序列表

• ...

• 看看这个标记的作用！

• 看看这个标记的作用！

·看看这个标记的作用！

·看看这个标记的作用！

有序列表

1. ...

• 看看这个标记的作用！

• 看看这个标记的作用！

1看看这个标记的作用！

2看看这个标记的作用！

9、表格的基本语法

-定义表格－行

-定义表格－头

-定义表格－列

例子：

带边框的表格：

A1A2A3

ABC

不带边框的表格：

跨多列的表元

你好

A1A2A3

ABC

跨多行的表元

你好

A1A2A3

ABC

常用的CSS样式表2.0属性及注释

宽度和高度：

width:

#px;（#为可变换的数值。

）

width:

#%;（PX为像素，%为百分比。

）

height:

#px;（#为可变换的数值。

）

浮动属性：

float:

left;float:

right;（left,向左浮动）

（right,向右浮动）

边距属性：

Margin：

0px;

Margin-left：

0px;

Margin-right：

0px;

Margin-top：

0px;

Margin-bottom：

0px;（0,为上下左右的边距都为“0”）

（left,为单独设置左边距的像素大小）

（right,为单独设置右边距的像素大小）

（top,为单独设置头部边距的像素大小）

（bottom,为单独设置底部边距的像素大小）间距属性：

padding：

0px;

padding-left：

0px;

padding-right：

0px;

padding-top：

0px;

padding-bottom：

0px;（0,为上下左右的间距都为“0”）

（left,为单独设置左边间隔距离的像素大小）

（right,为单独设置右边间隔距离的像素大小）

（top,为单独设置头部间隔距离的像素大小）

（bottom,为单独设置底部间隔距离的像素大小）

字体样式属性：

color:

#ffffff;                              font-size:

12px;                             

font-weight:

bold;                           

line-height:

20px;（color,为字体颜色属性）

（size,为字体大小属性）

（weight:

bold，为设置字体粗体的属性）

（line-height,为设置字体之间垂直的属性）

text-align:

center;                         

text-align:

left;                            

text-align:

right;（center,为字体居中对齐）

（left,为字体向左对齐）

（right,为字体向右对齐）

链接样式属性：

a:

link

a:

visited

a:

hover（a:

link,为链接点击前的样式属性）

（a:

visited,为链接点击后的样式属性））

（a:

hover,为链接鼠标移动上面时的链接属性）

1、text-decoration:

none;

2、text-decoration:

underline;

3、display:

block;

4、background:

url（images/1.jpg）no-repeat;

5、background-color:

#ffffff;“1”为不使用下划线

“2”为使用下划线

“3”为链接部分使用块状样式，此时需要设置宽度和高度的尺寸了。

注：

样式属性里可以尝试添加其他的属性来对比一下，这样会得出一些不一样的效果，比如给连接样式添加背景颜色效果，背景图片

效果，粗体的效果等，这些都是需要自己在练习中多做多去验证来得出自己想要的效果，只有这样才可以加深自己在使用过程中的熟

练程度，从而进一步把尝试转变为自己的知识。

背景属性：

background-color:

#ffffff;

background-color:

transparent;

background:

url（images/1.jpg）;

background-attachment:

fixed;（设置背景的颜色）

（设置背景为透明的背景）

（设置背景使用图片的样式）

（背景为水印处理，页面滚动的时候不变换）

1、background-repeat:

no-repeat;

2、background-repeat:

repeat-x;

3、background-repeat:

repeat-y;

4、background-position:

bottom;

5、background-position:

center;

6、background-position:

left;

7、background-position:

right;

8、background-position:

top;“1”背景图片只显示一个

“2”背景图片横向铺满

“3”背景图片枞向铺满

“4”背景图片底部对齐

“5”背景图片居中对齐

“6”背景图片左边对齐

“7”背景图片右边对齐

“8”背景图片顶部对齐

注：

背景属性里还有其他的样式属性，这里列出的是比较常用的，不过所有的使用都是在实践过程中来灵活的运用。

必须要多做练习尝试运用。

列表属性：

• ...

1. ...

1、ol{list-style-type:

decimal}

2、ol{list-style-type:

lower-roman}

3、ol{list-style-type:

upper-roman}

4、ol{list-style-type:

lower-alpha}

5、ol{list-style-type:

upper-alpha}“1”阿拉伯数字

“2”小写罗马数字

“3”大写罗马数字

“4”小写英文字母

“5”大写英文字母

注：

ul和ol为单独存在，所以在设置时候需要对它的边距和间距单独的重新设置，如下：

margin:

0px;

padding:

0px;

list-style:

none;

HTMLdiv+css

（一）

2div+css是前台开发技术中的很重要的技术,至于起源发展不多说,大家可以XX一下.css的特点可以分为以下四点:

（1）缩减代码,提高速度 

（2）CSS可以结构化HTML代码（3）简单修改缩短时间（4）表现和内容分离.

CSS样式表在HTML中有三种体现形式分别是:

行内样式嵌入式导入式（目前为止用嵌入式和导入式比较流行）

行内样式:

10px; bgcolor:

red;>行内样式

在这段代码中 font-size:

10pxbgcolor:

red 分别是给这段文字设置大小和颜色的这些代码和HMTL代码混写在一起这种写法叫做行内样式,缺点不太利于我们的分辨和以后的修改.

p{

 font-size:

10px; 

bgcolor:

red;

}

这是嵌入式

这种在head定义的样式表我们叫做嵌入式样式表也可以叫做内部样式表.

 -------------------------------------------------------------

这是嵌入式

link表示连接 rel="stylesheet"表示连接的性质为样式表 href="xxxx.css"表示连接外部的css文件名和地址.

---------------------------------------------------------------------

标签

首先来认识几个常用的标签:

布局标签---

 行内元素和块元素:

 行内元素:

 块元素: