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

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

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

跳转到下一个"

链接点"

（给出一个描点）

z1"

链接点（跳转到的地方）

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

URL#name"

link.html#z1"

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

window_name）

target="

Window_Name"

window.html"

window_name"

开一个新窗口!

5、标尺线

hr>

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

hrstyle="

color:

#FF0000;

size:

20px;

width:

500px;

height:

10px"

6、标题字体

h#>

/h#>

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

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

7、行的控制

段（可以看作是空行）<

p>

你好吗？

很好。

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

换行<

br>

不换行<

nobr>

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

/nobr>

8、列表

无序列表<

ul>

li>

/li>

/ul>

看看这个标记的作用！

·

有序列表<

ol>

/ol>

1看看这个标记的作用！

2看看这个标记的作用！

9、表格的基本语法

table>

/table>

-定义table表格

tr>

-定义表格－行

th>

-定义表格－头

td>

-定义表格－列

例子：

带边框的表格：

tableborder>

A1<

/th>

A2<

A3<

/tr>

A<

/td>

B<

C<

不带边框的表格：

table>

跨多列的表元<

thcolspan=#>

thcolspan=3>

你好<

跨多行的表元<

throwspan=#>

throwspan=2>

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

宽度和高度：

width:

#px;

（#为可变换的数值。

）

#%;

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

height:

浮动属性：

float:

left;

float:

right;

（left,向左浮动）

（right,向右浮动）

边距属性：

Margin：

0px;

Margin-left：

Margin-right：

Margin-top：

Margin-bottom：

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

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

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

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

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

padding：

padding-left：

padding-right：

padding-top：

padding-bottom：

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

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

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

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

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

字体样式属性：

#ffffff;

font-size:

12px;

font-weight:

bold;

line-height:

（color,为字体颜色属性）

（size,为字体大小属性）

（weight:

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

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

text-align:

center;

right;

（center,为字体居中对齐）

（left,为字体向左对齐）

（right,为字体向右对齐）

链接样式属性：

a:

link

visited

hover（a:

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

（a:

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

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

1、text-decoration:

none;

2、text-decoration:

underline;

3、display:

block;

4、background:

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

5、background-color:

“1”为不使用下划线

“2”为使用下划线

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

注：

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

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

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

背景属性：

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:

6、background-position:

7、background-position:

8、background-position:

top;

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

“2”背景图片横向铺满

“3”背景图片枞向铺满

“4”背景图片底部对齐

“5”背景图片居中对齐

“6”背景图片左边对齐

“7”背景图片右边对齐

“8”背景图片顶部对齐

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

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

列表属性：

（有序布局样式）

（无序布局样式）

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:

padding:

list-style:

HTMLdiv+css

（一）

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

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

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

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

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

行内样式:

pfont-size:

10px;

bgcolor:

red;

行内样式<

/p>

在这段代码中 

font-size:

10pxbgcolor:

red 

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

metahttp-equiv="

Content-Type"

content="

text/html;

charset=gb2312"

这是头部<

styletype="

text/css"

p{

}

/style>

这是嵌入式<

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

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

linkrel="

stylesheet"

href="

xxxx.css"

type="

link表示连接 

rel="

表示连接的性质为样式表 

href="

表示连接外部的css文件名和地址.

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

标签

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

布局标签---<

div>

/div>

标题标签---<

Hx>

/Hx>

（X为要显示字符的大小可以有1--6种选择） 

段落--<

列表---<

超级连接--<

a>

请注意这些标签都是成对出现的.

行内元素和块元素:

行内元素:

span>

img>

块元素:

行内元素和块元素的区别:

块级元素从上到下一个接一个排列 

行内元素在一行中水平布置.

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

几个常用标签的用法:

aheref="

"

这是XX的连接<

实现效果点击"

这是XX的连接"

自动连接到XX.href是要连接的地址 

imgsrc"

c:

\1.jpg"

borde=0px;

实现效果插入一张在C:

\下名为1.jpg的图片边框为0像素

tableborder=1px;

表格<

手机<

笔记本<

输出一个表格.（ps大家可以去试试）

font 

face="

姚体"

size="

2px"

color="

red"

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

css选择器

选择器的类型:

1.类选择器 

2.标签选择器 

3.ID选择器 

4.符合选择器 

5.通用选择器 

6.伪选择器

1.类选择器

style>

h1{

25px

在以后所有的<

h1>

标签全部应用上面这个样式

2.标签选择器

P{color:

blue;

18px;

.special{color:

24px;

class选择器与标记选择器1<

pclass=“special”>

clas选择器与标记选择器2<

!

---class="

xxx"

是定义了一个类别名名字可以任意---->

在css下面的两个<

标签全部应用css的样式.

3.ID选择器

pid=“special”>

#special{color:

ID为special的全部应用上面css的样式. 

ID选择器和类选择器的区别就是ID选择器有唯一性 

整个HTML代码中ID名只能是唯一的.

复合选择器--- 

交集选择器

指定了.special类别的段落文本<

h3class=“special”>

指定了.special类别的标题<

/h3>

p.special{color:

H3{color:

yellow;

30px}

交集选择器,即是p.special 

意思为p标签下所有的类型为special属性设置成上面的css样式

并集选择器 

示例文字h1<

h2class=“special”>

示例文字h2<

h3>

示例文字h3<

h4id=“one”>

/h4>

h1,h2,h3{color:

purple;

h2.special,#one{text-decoration:

并集选择器,,即是可以连续选择多个标签中间用,号隔开

后代选择器

.speciali{color:

red}

#oneli{padding-left:

5px}

td.top.top1strong{font-size:

16px}

Pspan{color:

格式为以上的格式 

P标签下的span标签

还有一个通用选择器*{color:

red} 

和伪选择器 

link{color:

#FF0000}/*未被访问的链接红色*/ 

visited{color:

#00FF00}/*已被访问过的链接绿色*/ 

hover{color:

#FFCC00}/*鼠标悬浮在上的链接橙色*/ 

active{color:

#0000FF}/*鼠标点中激活链接蓝色*/ 

注:

伪选择器只应用在超连接上. 

其实这些知道就可以,用的最多的就是交集并集和后代选择器.