HTML&CSS

来源：互联网发布：linux 文件夹映射编辑：程序博客网时间：2024/06/07 00:15

html

软件的结构：

c/s(ClientServer)结构的软件。比如：QQ、飞车、飞信

c/s结构的软件的缺点：更新的时候需要用户下载更新包然后再安装，程序员则需要开发客户端和服务端，

c/s结构的软件的优点：减轻服务端的压力，而且可以大量保存数据在客户端。

B/S(BrowserServer)结构的软件；比如：微博、webQQ、web飞信、web迅雷

优点：软件版本升级的时候不需要用户下载更新包，直接更新服务器的程序即可。程序员则只需要开发服务端而已。

缺点：增加了服务端的压力，bs结构的软件不能保存大量的数据在用户机上。

网站的类别：

静态网站：静态网页中的数据都是写死的，如果需要修改网页的内容是需要直接修改网页的代码。是没有数据库提供数据给他的。

动态网站：动态网站的数据是来自于数据库的，背后是有一个后台程序管理页面中数据的。

html语言就是开发网页的基础语言：

html(超文本标记语言)：

标记：该门语言是由标签构成的，学习html不用怎么去理解，只需要记住标签的作用即可。

html语言的特点：

1、html语言是与平台无关的，任何平台只要安装了浏览器都可以运行；

2、html是不区分大小写的；

html语言的结构：

<html> html语言的根标签.

<head></head>网页的头信息

头信息的作用：

1、可以设置网页的标题；

2、可以通知浏览器使用指定的码表解释html页面

<body></body>网页的体部分

</html>

html的注释：

html常用的标签：

<h1>~<h6> 表示是一个标题

<p> 段落标签

<hr/> 水平线标签

<br/> 换行标签

<sub> 下标

<sup> 上标

<pre> 原样标签：原样标签会保留空格和换行符

<ol> <li> 有序的列表标签

<ul> <li> 无序的列表标签

项目列表标签(dl dt dd)

行内标签(span)

块标签<div> div标签的内容会独立占一行内容的

html标签的作用：用于描述一个网页的结构的。

如果需要操作数据的样式：通过标签的属性操作的。

标签的类型：

1、有开始标签和结束标签。 <p></p> 需要把网页中的数据内容封装到标签中

2、开始标签和结束标签都是在一个标签体内的。比如：<hr/> 功能单一，不需要封装数据到标签中。

为什么要学实体标签？

因为> < 等一些符号在html页面中是有着特殊含义，这些字符如果需要在页面中显示，这时候就应该使用实体标签。

常用的实体字符：

空格  

小于号 <

大于号 >

& &

" "

人民币 ¥

版权 ©

商标 ®

媒体标签：

hidden 设置音乐插件是否隐藏

src 用于指定音乐的路径

<marquee> 飘动标签

direction 指定飘动的方向

scrollamount 指定飘动的速度

loop 指定飘动的次数

<a>超链接标签：

<a>标签常用的属性：

href 用于指定连接的资源

target 设置打开新资源的目标 _Blank 在独立的窗口上打开新资源 _self 在当前窗口打开新资源

file：file协议（文件协议）这种协议主要是用于搜索本地机器的资源文件的，

格式：file:\\\f\a.jpg

a标签的原理：

1、a标签的href属性值如果是以http开头的，那么浏览器会马上启动http解析器去解析该网址，首先会在本地机器去找一个hosts文件，如果在hosts文件上该域名没有对应的主机，那么浏览器就去到对应的dns服务器去寻找该域名对应的主机号。如果找到了对应的主机，那么该请求就会发给对应的主机。

2、如果a标签的href属性值没有以任何协议开头，那么浏览器就会启动file协议解释器去解释该资源路径

3、如果a标签的href属性值并不是以http协议开头的，而是其他的一些协议，那么这时候浏览器就会去到我们本机的注册表中去查找是否有处理这种协议的应用程序，如果有，那么马上启动该应用程序处理该协议。

邮件的协议：mailTo

迅雷的协议：thunder

超链接标签的作用：

1、可以用于连接资源

2、锚点定位

(1) 首先要编写一个锚点。锚点的写法格式：<aname="锚点名字"> 数据 </a>

(2)使用a标签的 href属性连接到锚点处。 href="#锚点的名字"

<img>图片标签:

img标签常用的属性：

width 宽度

heigh 高度

alt 如果图片资源无法找到，那么就显示对应的文字对图片进行说明

热点图：

<table>表格标签：

表格使用到的标签：

<table> 表格

<tr> 行

<td> 单元格

<th> 表头默认的样式是居中，加粗

<caption> 表格的标题

表格常用的属性：

border 设置表格的边框

width 设置表格的宽度

height 设置表格的高度

colspan 设置单元格占据指定的列数

rowspan 设置单元格占据指定的行数

以前的浏览器一旦遇到了一个<table>的开始标签，就必须要等到遇到table标签的结束标签的时候，才会在网页中显示一个表格的内容。

后来一个表格就被分成三个部分

<thead> 表头可以没有存在thead

<tbody> 表体一个表格至少要存在一个tbody，也可以存在多个

<tfoot> 表尾可以不存在tfoot

一个浏览器只要遇到了一个网站的tbody标签，那么就可以显示当前页面的信息。

框架标签：

frameSet 一个frameSet可以把一个页面切割成多份，只能按照行或者列切割

frame 不能被切割的。frame是位于frameSet中。

注意：frameSet标签不能用于body标签体内容

iframe 在一个网页中分隔一部分的位置显示另外一个网页的信息

表单标签：表单标签的作用是用于提交数据给服务器的。表单标签的根标签是<form>标签

常用的属性：

action：该属性是用于指定提交数据的地址。

method：指定表单的提交方式

get：默认使用的提交方式提交的数据会显示在地址栏上

post：提交的数据不会显示在地址栏上

注意：表单项的数据如果需要提交到服务器上面，那么表单项必须要有name的属性值

Day03(0602)

html 在一个网页中负责的事情是一个页面的结构。

css（层叠样式表）在一个网页中主要负责了页面的数据样式。

编写css代码的方式：

第一种：在style标签中编写css代码。只能用于本页面中，复用性不强。

格式：

编写css的代码

</style>

例子：

color:#F00;

text-decoration:none;

}

第二种：可以引入外部的css文件推荐使用

方式一：使用link标签推荐使用

格式：

例子：<linkhref="1css.css" rel="stylesheet"/>

方式二：使用<style>引入

格式：

<styletype="text/css">

@import url("css的路径");

</style>

例子：<styletype="text/css">

@import url("1css.css");

</style>

第三种：直接在html标签使用style属性编写只能用于本标签中，复用性较差。不推荐使用

例子：<astyle="color:#0F0; text-decoration:none;" href="#">新闻标题2</a>

选择器：选择器的作用就是找到对应的数据进行样式化。

1、标签选择器：就是找到所有指定的标签进行样式化。

格式：

标签名{

样式一;样式2......

}

例子：

div{

color:#F06;

font-size:24px;

}

2、类选择器：使用类选择器首先要给html标签指定对应的class属性值

格式：

.class的属性值{

样式一;样式二....

}

例子：

.two{

background-color:#CCC;

color:#090;

font-size:36px;

}

类选择器要注意的事项：

1、html元素的class属性值一定不能以数字开头

2、类选择器的样式是要优先于标签选择器的样式

3、ID选择器：使用ID选择器首先要给html元素添加一个id的属性值

ID选择器的格式：

#id属性值{

样式一;样式二......

}

例子：

#one{

background-color:#000;

color:#6F0;

font-size:16px;

}

ID选择器要注意的事项：

1、ID选择器的样式优先级是最高，优先于类选择器与标签选择器。

2、ID选择器的属性值也是不能以数字开头的

3、ID的属性值在一个html页面中只能出现一次

4、交集选择器：就是对选择器1中的选择器2里面的数据进行样式化

选择器1 选择器2{

样式一;样式二......

}

例子：

.two span{

background-color:#600;

font-size:24px;

}

5、并集选择器：对指定的选择器进行统一的样式化

格式：

选择器1,选择器2..{

样式一;样式二...

}

例子：

span,a{

border-style:solid;

border-color:#936;

}

6、通用选择器

格式：

样式一,样式二...

}

例子：

text-decoration:line-through;

background-color:#330;

}

伪类选择器：伪类选择器就是对元素处于某种状态下进行样式化的

注意：

1、a:hover 必须被置于 a:link和a:visited之后

2、a:active 必须被置于a:hover 之后

例子：

a:link{color:#F00} /*没有被点击过-----红色//IE可以，谷歌不可以*/

a:visited{color:#0F0} /*已经被访问过的样式----绿色*/

a:hover{color:#00F;font-size:24px} /*鼠标经过的状态-----蓝*/

a:active{color:#FF0} /*点击并没有松开的时候*/

/*操作背景的属性*/

body{

/*background-color:#999; 设置背景颜色*/

background-image:url(a.jpg);/*添加图片*/

background-repeat:no-repeat;/*设置背景图片是否要重复*/

background-position:370px 100px;/*设置背景图片的位置，第一个参数是左上角的左边距，第二个参数是左上角的上边距*/

}

/*操作文本的样式*/

div{

color:#F00;

/*direction:rtl;右对齐，right 右 left 左*/

font-size:16px;

line-height:40px;

letter-spacing:10px;

text-align:center;

text-decoration:underline;

text-transform:uppercase;

}

操作表格的属性

table{

/*border-collapse:collapse;合并表格的边框*/

border-spacing:20px;/*设置单元格的边框与表格的边框距离*/

empty-cells:show;

table-layout:fixed;

}

操作边框的属性

/*div默认是没有边框的*/

div{

width:100px;

height:100px;

border-style:dotted solid double;/*设置边框的样式上右下左*/

border-color:#F00;

border-bottom-color:#0FF;

border-top-width:100px;

}

盒子模型：盒子模型就是把一个html边框比作成了一个盒子的边框，盒子模型主要是用于操作数据与边框之间的距离或者是边框与边框之间的距离

盒子模型主要是用于操作内边距(padding)与外边距(margin)

div{

border-style:solid;

width:100px;

height:100px;

/*内边距*/

padding-left:10px;

padding-top:20px;

}

.one{

margin-bottom:30px;

}

.two{

margin-left:700px;

}

css的定位：

相对定位：相对定位是相对于元素原本的位置进行移动的。

使用方式： position:relative;

绝对定位：绝对定位是相对于整个页面而言。

position:absolute;

top:200px;

left:380px;

固定定位：固定定位是相对于整个浏览器而言的

position:fixed;

top:380px;

left:900px;

阅读全文

0 0