HTML,CSS初识_将文件hello.html更名为introduction.html。-CSDN博客

本文链接：https://blog.csdn.net/cynical999/article/details/79155346

HTML

一阶段我们利用javase技术写了一个C/S架构的项目，那么现在的网站都是采用B/S架构的，如淘宝、京东、腾讯……

如何去编写一个B/S结构的网页？做一个B/S架构的网页需要用到那些技术？

1、什么是HTML?

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

超文本标记语言

超文本：文本、声音、视频、图片……

标记：html都是利用标签来实现效果的

2、如何使用HTML?

第一个HTML

之前在javase阶段，我们都是新建的java project,那么二阶段我们需要新建web project

2.1新建web项目

在项目区右击-----new------web project----输入项目名

在WebRoot下新建一个folder文件，取名html,用于存放所有的html文件

选中webroot右击-------new--------folder------html

2.2新建一个Hello.html文件

选中html文件右击------new-----html----将文件名改为Hello.html

html文件打开方式

选中html文件右击------open with---- MyEclipse HTMLEditor

分析：html文件大体分为如下几个部分

<html></html>----所有的网页内容都卸载这一对标签中

<head></head>----由于存储网页中的一些配置文件，如标题、css样式连接…..

<title></title>---网页的标题

<body></body>-----用于编写在网页中显示的代码

2.3运行html文件

选中html文件右击------properties

3、html标签使用

3.1系统样图

3.2标签的说明与使用

a.标题标签

h1-h6，数字越大字体越小，而且每个标签都独占一行

b.居中标签

标题如何居中？------使用居中标签

c.横线标签

<hr/>

横线的颜色如何解决？

使用标签的color属性-----<hr/ color=”red”>

html中颜色如何表示？

(1)英文单词有限 ----一般使用在测试上

(2)16进制颜色表示法

2.1 使用神器(取色软件 ps)

#C179CC---》前缀加上#

2.2 自己调色

以火狐浏览器为例

按住F12

d.表格标签

回想数据库中创建表格语句-----Createtable 表名

那么html中也有一个<table></table>标签表示表格

一张二维表分为行和列------<tr></tr>表示行

<td></td>表示列

需求：创建一个2行2列的表格

表格的边框如何显示？边框颜色如何变化？

一阶段学习了对象，对象拥有属性和方法

在html中每一个标签也是一个对象，也有属性和方法

此处的边框、颜色就需要用到表格的属性-----border\bordercolor

可以利用width 和height 属性改变每个单元格大小

表格中的字体如何居中对其？？

利用属性align="center"

表格合并行合并列

rowspan:合并行-------rowspan = “2”

colspan:合并列-------colspan = “2”

注意：合并之后需要将对应的行或者列删除

设置字体与单元格之间距离以及单元格与单元格之间距离

e.图片标签

f.超链接

第一个界面完成，如何实现界面的跳转？------使用超链接标签<a></a>

语法：<ahref="连接的目标位置">连接的文字或图片</a>

当开发中，如果连接的目标地址还没有时，或动态指定，需要将href设置成#，日后再添加

运行后发现超链接，默认的打开方式，是目标页覆盖当前的窗口

超链接中的target属性

target: 默认是_self 在当前窗口中显示新页面

_blank 新开一个窗口，显示新页面

iframe的name名称，在指定的区域内显示

有时在浏览网页发现点击左边的导航栏，内容会在右边的区域显示

这是如何做到的？-------------将a标签与iframe标签连接使用

iframe标签用于指定一块内容显示的区域，并给其提供一个name属性，用于和a标签连接

a标签将target值设置成iframe的name值就可以实现效果了

g.段落文字标签

对于系统中的英雄介绍如何解决？------使用段落文字标签

段落标签<p></p>---能将段落分开，但是不能换行,文字都是到浏览器无法显示时才会自动换行

如何换行？-------使用换行标签<br/>

如何让局部文字凸显出来？

字体标签<font></font>-----color、size属性

加粗标签<b></b>、<strong></strong>

斜体标签<i></i>

h.列表标签

无序列表ul

浏览器解析ul标签时，默认加上小黑点

有序列表ol

有序列表默认排序是1，2，3

列表标签拥有一个type属性，可以更改排序方式

无序列表type值可以是：disc ---实心圆

circle ---空心圆

none ---不显示任何的项目符号

有序列表type值可以是：1，2，3…..

a,b,c…..

I,II,III…..

i.input标签

input标签根据type属性的不同赋值，表示不同的组建

type的值

text------文本输入框

password-----密码输入框

button-------按钮

可以利用value属性给按钮赋值

radio------单选按钮

可以利用name属性实现单选---设置name属性的值相同

checked=”checked”----设置默认选中

checkbox-----复选框

file------上传文件

j.下拉列表标签

使用<select></select>标签

其中用<option></option>设置选择项

添加属性selected="selected"可以设置默认选项

k.文本域标签

利用属性rows="" cols=" "设置文本域大小

3.3 form表单

最后一个页面是交友信息，当我们填完信息点击提交按钮时，数据需要提交到服务端，然后服务端接收数据-------》处理数据-----》调用数据

数据如何提交？------使用表单

CSS

对于之前用html写的一个系统，虽然能够实现一些功能，但是界面比较丑陋，不够美观。

那么如何画出美观的界面呢？-------使用css样式修饰

1、什么是CSS样式

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

2、 HTML与CSS之间的关系

css是用来修饰html，使得整个网页更加的美观

html--------好比是一个简装房，能够进行简单的修饰

css---------好比是精装房，使得房子更加美观

3、如何使用CSS样式

3.1 CSS语法

css样式的语法：

选择器{

属性1:值1;

属性2:值2;

……….

}

什么是选择器？？

为什么需要选择器？

告诉那些html需要使用样式

3.2 CSS位置

CSS样式写在什么地方？

方式一：内部样式

在head区定义如下标签，然后将样式写在标签内部

需求：利用样式将下面这句话定义成红色、加粗、斜体

好看的皮囊千篇一律

有趣的灵魂百里挑一

a、标签选择器，对页面所有标签有用div

b、id选择器，只是针对特定的一个元素

使用id选择器时，需要在选择器前加#------(#id名)

c、类选择器

使用类选择器时，需要在选择器前加.-------（.类名）

使用内部样式的使用场景：

a.测试的时候使用，等测试成功后，必须移到外部样式中

b.如果只是该页面中特有的样式，可以写到html文件中，但是不推荐

方式二：外部样式

内部样式的不足，没有彻底的将样式分离出来，仍然存在在html文件

1.外部创建css文件，将样式编写在文件中

2.在需要使用css样式的html文件中，引入css文件

现在html和css彻底相分离，推荐使用(企业中都使用外部样式)

方式三：行内样式

使用标签中的style属性定义样式，不推荐(内容与显示依然耦合在一起)，少用

3.3 优先级

1、选择器的优先级

如果在一个样式中同时存在标签选择器、id选择器、类选择器，那么这几个选择器的优先级如何？

通过测试发现：id选择器 > 类选择器 >标签选择器

3、样式位置的优先级

行内样式 > 内部样式 > 外部样式表

4、系统样图

5、盒子模型

如果需要画这么一个界面，首先将界面分割，分割成上中下三个部分。

如何分割？-------------使用div

5.1 div标签

什么是div?

div是一个容器，块级容器，可以承载其他标签

如何知道该div占据多大的空间？

1、添加背景色

2、添加边框

结论：块级元素默认的宽度是一行，高度是只要能容纳下内部的内容即可

也可以自定义宽和高

能否利用div将网页分为上中下三个部分？-------能

5.2盒子模型

网页中，将每个元素都看成是一个盒子(高度的抽象)，那么一个网页中元素的布局就是盒子的布局。

网页中充满了大量的盒子，盒子与盒子之间的位置关系，构成了整个的网页布局

--------------》经典的布局方式 div+css 将来的网页基本上都用div布局

什么是盒子模型？

现实生活中的盒子，买一个液晶电脑，物流寄过来

程序中的盒子

margin:表示的是盒子与盒子之间的距离------外边距

padding表示的是盒子中内容与盒子之间的距离----内边距

5.3 完成网页

分析：将网页分为四个部分top、head、body、foot

top部分

清除网页默认边距

写完后发现div的上方和左边都有一定的空隙，为什么？

不同浏览器显示盒子的时候，会有默认边距，为了显示统一，得先清除默认边距

如何清除默认边距？

*代表所有,此样式可以将该页面中所有的标签的默认边距清除

设置div自动居中

如何让div在网页的中间？------ center标签？----no

使用margin样式

语法：margin: 上下距离左右距离

如margin: 50px300px;表示上下边距30px左右边距300px

margin: 0px auto;表示上下边距为0，左右自适应

浮动

编写top时发现，两个div不能显示在同一行，如何解决？

使用float浮动

左浮------left

右浮------right

伪类

需求：网页上显示文字，当鼠标放到字上，字的颜色、大小变化

滑动门

#div{width: 700px;height: 30px;background-color: #DCDCDC;}

li{

/**去除列表前的符号 */

list-style-type: none;

}

#menu lispan{

width:80px;height: 25px;

float:left;

margin-left: 20px;

font-weight: bold;

line-height: 30px;

margin-top: 5px;

text-align: center;

}

#menu li:HOVER{

background-color: white;

color:lawngreen;

size:30px

}

#menu li:hover span {

background-color: aliceblue;

}

</style>

</head>

<body>

</ul>

</div>

</body>

移动效果

网页中的图片滑动效果如何实现？

想实现该效果，首先需要去了解一个方法translate()-----CSS3

在CSS3中可以使用translate()方法将元素沿着水平方向和垂直方向移动

规则

translateX(x):元素仅沿着水平方向移动

translateY(y):元素仅在垂直方向移动

translate(x,y):水平与垂直方向同时移动

#img{

width:400px;

height: 600px;

}

#div{

width:400px;

border: 1pxsolid red;

}

/** 让图片水平移动*/

/* div:HOVER{

transform:translateX(60px);

}*/

/** 让图片垂直移动 */

/* div:HOVER{

transform:translateY(60px);

}*/

/** 让图片垂直与水平都移动 */

div:HOVER{

transform: translate(60px,60px);

}

</style>

</head>

<body>

</body>

动画

动画的两步走

1.定义动画，使用@keyframes

2.使用动画使用animation调用@keyframes

animation:name duration timing-function delay iteration-count direction;

name:动画的名称

duration：规定完成动画所花费的时间

timing-function：

linear 规定以相同速度开始至结束的过渡效果

ease 规定慢速开始，然后变快，然后慢速结束的过渡效果

ease-in 规定以慢速开始的过渡效果

ease-out 规定以慢速结束的过渡效果

ease-in-out 规定以慢速开始和结束的过渡效果

iteration-count：规定动画应该播放的次数

infinite 无限循环

n:次数

direction：normal 默认值。动画应该正常播放。

alternate 动画应该轮流反向播放。

需求：实现一个div框的移动

<styletype="text/css">

@keyframesmyFirst{

0% {}

25%{color:blue;}

50%{color:yellow;}

100%{transform:translateX(100px);}

}

div {

animation: myFirst 3s ease-in-out 1s infinite alternate;

width:50px;

height: 50px;

border: 1pxsolid red;

}

</style>

</head>

<body>

</body>

实现图片的移动

@keyframesmyFirst{

0% {}

25%{}

50%{}

100%{transform:translateX(200px);}

}

#img {

width:400px;

height: 600px;

}

#div {

animation: myFirst 3s ease-in-out 1s infinite alternate;

width:400px;

border: 1pxsolid red;

}

</style>

</head>

<body>

</div>

</body>

截取背景图

对于一张大图，如何截取其中的一部分

使用background-position属性

使得图片旋转

@keyframes myFirst{

0% {}

25% {}

50% {}

100% {transform:rotate(360deg);}

}

#title-pic {

animation: myFirst 3s ease-in-out 1s 2 alternate;

width:780px;

height:340px;

float:left;

background-image: url("../img/spr.png");

background-position: -15px -310px;

margin-top: 150px;

}

</style>

</head>

<body>

</body>

HTML,CSS初识

HTML

1、什么是HTML?

2、如何使用HTML?

2.1新建web项目

2.2新建一个Hello.html文件

2.3运行html文件

3、html标签使用

3.1系统样图

3.2标签的说明与使用

a.标题标签

b.居中标签

c.横线标签

d.表格标签

e.图片标签

f.超链接

g.段落文字标签

h.列表标签

i.input标签

j.下拉列表标签

k.文本域标签

3.3 form表单

CSS

1、 什么是CSS样式

2、 HTML与CSS之间的关系

3、如何使用CSS样式

3.1 CSS语法

3.2 CSS位置

方式一：内部样式

方式二：外部样式

方式三：行内样式

3.3 优先级

4、系统样图

5、盒子模型

5.1 div标签

5.2盒子模型

5.3 完成网页

清除网页默认边距

设置div自动居中

浮动

伪类

滑动门

移动效果

动画

截取背景图

1、什么是CSS样式