06HTML和CSS文档格式.docx

资源描述

06HTML和CSS文档格式.docx

《06HTML和CSS文档格式.docx》由会员分享，可在线阅读，更多相关《06HTML和CSS文档格式.docx（12页珍藏版）》请在冰豆网上搜索。

06HTML和CSS文档格式.docx

/li>

html_img.html"

发件箱<

html_list.html"

草稿箱<

html_table.html"

垃圾箱<

html_table_jianli.html"

漂流瓶<

/ul>

f）退出时,target属性的值应该设置为_top.

Top<

_top"

退出<

2.内嵌框架

a）iframe是内嵌框架,可以在页面内部嵌入一个框架,显示对应页面的信息;

body>

ifr"

html_img<

html_table<

html_table_jianli<

XX<

hr/>

iframewidth="

100%"

height="

300px"

/iframe>

/body>

3.表单标签

a）form标签称之为表单标签,主要作用是用于提交用户填写的信息

b）action属性表示表单提交的位置,是一个路径

c）method属性表示表单提交的方式,有两种方式:

i.get:

默认提交方式,特点是数据通过?

的形式跟在地址后面,会在地址栏显示,所以相对不安全,而且提交的数据量有限,但是很方便;

ii.post:

这种方式提交的数据不会显示在地址栏,相对安全,而且提交的数据量较大,一般表单提交都会选用post方式.

4.表单域标签

a）注意:

只有设置了name属性,提交时才会携带该数据;

b）input,最常用的表单域标签,通过type属性调整样式:

i.text:

单行文本输入框

ii.password:

密码输入框

iii.submit:

提交按钮

iv.radio:

单选按钮,同一组按钮name属性要一致,必须添加value属性,否则提交的值都是on;

可以通过checked属性进行默认选中

v.checkbox:

复选框,同一组name属性要一致,必须添加value属性,否则提交的值都是on;

vi.reset:

重置按钮

vii.button:

普通按钮,将来配合js一起使用

viii.image:

图片按钮,功能和submit一致

ix.hidden:

隐藏表单域,不会显示,但是可以提交

c）select,下拉列表

i.option标签用于定义每个选项

ii.可以通过selected属性进行默认选中

iii.通过multiple属性调整为多选

d）textarea,文本域

i.没有value属性

ii.可以通过rows和cols属性调整文本域大小

formaction="

method="

get"

tablewidth="

50%"

border="

1px"

align="

center"

--单行文本输入框-->

tr>

th>

用户名<

/th>

td>

inputtype="

text"

username"

placeholder="

请输入用户名"

/td>

/tr>

--密码输入框-->

密码<

password"

请输入密码"

--单选按钮-->

性别<

radio"

gender"

value="

男

女

-1"

checked/>

保密

--复选框-->

爱好<

checkbox"

hob"

吃饭

睡觉

打豆豆

--单选下拉列表-->

籍贯<

selectname="

loc"

optionvalue="

北京<

/option>

黑龙江<

selected>

山东<

内蒙<

/select>

--多选下拉列表-->

喜欢的编程语言<

lang"

multiplesize="

Java<

PHP<

Python<

Go<

--文本域-->

自我介绍<

textareaname="

introduce"

rows="

cols="

30"

200字以内"

/textarea>

--其他-->

特殊的<

hidden"

test"

哈哈哈哈"

color"

date"

time"

--各种按钮-->

thcolspan="

submit"

reset"

重置"

button"

按钮"

image"

src="

img/open.gif"

/table>

/form>

5.认识CSS

a）CSS:

CascadingStyleSheets（层叠样式表）,用于美化HTML页面,对HTML标签进行样式修饰.

b）定义CSS的方式:

i.内联方式:

在属性内通过style属性定义;

tdstyle="

background-color:

seagreen;

ii.内嵌方式:

在head标签中通过style标签定义样式;

styletype="

text/css"

.tdcolor{

background-color:

blue;

}

/style>

iii.外部样式:

在外部定义单独的css文件,在HTML中通过link标签进行引入

linkrel="

stylesheet"

type="

href="

css/test.css"

6.CSS选择器

a）元素选择器（标签选择器）:

用于选中某一种标签,用标签名选择

div{

border:

1pxbluedouble;

}

b）类选择器:

用于选中一类标签,在标签中用class来指定类名,在css中通过”.类名”来定义样式

.demo{

color:

lightblue;

font-size:

30px;

c）ID选择器:

用于定位某个元素（唯一）,在标签中通过id属性来定义,在css中通过#id名来定义样式

#test1{

background-color:

orange;

d）包含选择器:

用于定位某个标签内的元素

#test1span{

black;

white;

e）群组选择器:

（逗号）,同时选择多个

#test1,.demo{

text-align:

center;

f）通用选择器:

*,选中所有

font-family:

方正兰亭超细黑简体"

;

font-weight:

bold;

g）属性选择器:

[],根据属性选择元素

[class=demo1]{

brown;

7.盒子模型

a）padding:

表示边框距内容之间的距离,称之为内边距;

b）margin:

表示边框距外部的距离,称之为外边距.

8.制作导航条

a）通过ul可以制作导航条;

b）因为ul是垂直布局,所以需要通过float（浮动）来设置水平布局;

c）通过list-style-type属性可以设置列表前的符号样式,设置为none即可取消列表前的符号;

d）a标签不是块级元素,不能设置宽高等属性,需要设置display为block将a标签转换为块级元素后,宽高才会生效;

e）将line-height和height属性值设置一致,可以使内容垂直居中;

f）text-decoration设置为none,可以去除文本的装饰样式,即去除超链接的下划线;

g）隐藏元素可以通过两种方式实现:

i.display:

none,这种方式会隐藏元素,同时不占据空间;

ii.visibility:

hidden,这种方式也会隐藏元素,但是元素会仍然占据空间

h）:

hover可以设置鼠标悬浮时的效果;

i）:

active可以设置鼠标点击时的效果;

代码如下:

DOCTYPEhtml>

html>

head>

metacharset="

UTF-8"

title>

导航条<

/title>

padding:

0px;

margin:

font-size:

14px;

}

#nav{

width:

606px;

text-align:

0auto;

/*0表示垂直方向没有边距,auto表示水平方向自动分配*/

li{

list-style-type:

none;

display:

block;

100px;

height:

line-height:

background-color:

margin-right:

1px;

margin-top:

1px;

text-decoration:

color:

.li1{

float:

left;

hover{/*鼠标悬浮时的效果*/

active{/*鼠标点击时的效果*/

red;

.nav2{

/*隐藏元素*/

/*不占空间*/

/*visibility:

hidden;

占空间*/

li:

hoverul{

/*显示元素*/

/head>

ulid="

nav"

liclass="

li1"

首页<

前端<

ulclass="

nav2"

HTML<

CSS<

JavaScript<

后台<

Servlet<

数据库<

公司介绍<

联系我们<

/html>

展开阅读全文