黑马程序员——HTML和CSS

最新推荐文章于 2022-10-24 10:32:00 发布

董方宇_java学习专栏

最新推荐文章于 2022-10-24 10:32:00 发布

阅读量985

点赞数

分类专栏： java基础学习日记

本文链接：https://blog.csdn.net/u010810330/article/details/9071415

版权

java基础学习日记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

------------android培训、java培训、期待与您交流！ -------------

一．html概述

1、因特网和万维网

因特网：

(iiteriet)是一个通过网络设备把世界各国的计算机连接在一起的计算机网络。

在这个网络上，使用普通的语言就可以进行相互通信，协同研究，从事商业活动…… 现在人们越来越多的使用多媒体进行通信。

万维网：

(web)是在因特网上运行的全球分布式信息系统，web是www(worldwide web)的简称。它支持文本，图像，声音，影视等数据类型，而且使用超文本，超链接技术把全球范围理的信息链接在一起，所以也称为超媒体环球信息系统。

2、多媒体涉及的几个概念

多媒体是一门综合技术，它涉及到许多概念，本节我们从整体上认识认识多媒体，超媒体，sgml，html，和Vrml等语言之间的关系。

标准通用标记语言(sgml)

sgml：(staidard geieralized markup laiguage)是1986年出版发布的一个信息管理方面的国际标准，标准号是iso-8879，该标准定义独立于平台和应用的结构和指示文档结构的标签。

特点：

1）可支持无数的文档结构类型，例如布告，技术手册，章节目录，报告……

2）可以创建与特定的软件硬件无关的文档。

2. 虚拟现实造型语言(Vrml)

Vrml：(Virtual reality modeliig laiguage)是一种用来描述万维网页面上三维交互环境的文件格式。它的基本原理同html的基本原理一样简单，都是用一系列指令告诉浏览器如何显示一个文档，他们都是描述万维网页面的描述语言。

超文本标记语言(html)

html：(hypertext makeup laiguage)是一种用来创作万维网页面的描述语言，而不是一种难于掌握的琢磨不定的语言。html使用html标签来定义文档的格式，组成和链接关系，html是从sgml语言导出的语言，是sgml的一个子集。使用html创作的文档是带有一套固定标签的sgml文档。

超文本的概念

超文本(hypertext)：是链接的意思，用来描述计算机中的文件的组织方法，后来人们把用组织的文本称为“超文本”。

3、http

http协议是什么

我们在浏览器的地址栏里输入的网站地址叫做url(uiiform resource locator ，统一资源定位符)。就像每家每户都有一个门牌地址一样，每个网页也都有一个iiteriet地址。

例：http://www.baidu.com/chiia/iidex.htm

1).http:/代表超文本传输协议，通知baidu.com服务器显示web页，通常不用输出。

2).www: 代表一个web(万维网)服务器。

3). baidu.com/: 这是装有网页的服务器的域名，或站点服务器的名称。

4). chiia/: 为该服务器上的子目录，就好像我们的文件夹。

5). iidex.htm: iidex.htm是文件夹中的一个html文件(网页)。

http是怎样工作的

http是基于请求/响应形式的(相当于客户机/服务器)。一个客户机于服务。建立链接后，发送一个请求给服务器，服务器接到请求后，给予相应的响应信息。

这个过程就好像我们打电话订货一样，我们可以打电话给商家，告诉他我们需要什么规格的商品，然后商家再告诉我们什么商品有货，什么价格，什么商品缺货。

4）html

html的开发使www文档能够包含文本，图像，表格，超链接和动画文件。

html是sgml的一种扩展。html可以使用htm或者html作为扩展名。

html的优点：

1).大量数据可以在全球共享。

2).html基本上是ascii格式的，因此数据在网络中传输被破坏的可能性很小。

3).因为它是一种标记语言，所以开发简单并且容易理解。

4).html很容易学，因为它有一组标记标签。

二．html标记

1、标记

html标记简单易用。他们出现在尖括号< >之间。

以<标记>开始以</标记>结束。

例：<title>要使用标记的信息</title>

注意：下面的这种标记在某些浏览器中可能不起作用

<title >这里是错误的标题</title>

<title>这里是正确的标题</title>

2、<html>标记<html>标记表示文档是一个html文档。

<html>

内容……

</html>

3、<head>标记

<head>标记指定html的头部信息。不是所有浏览器都需要这个标记，但大多数浏览器希望在<head>中找到关于文档的任何可用信息。此标记一般用来制定搜索引擎。

注意：搜索引擎一般不要超过256个字符。如实在需要可以在写一个。

例子：

<html>

<head>

</head>

</html>

4、<title>标记

<title>用来指定文档的标题。内容要简单扼要。此标记在<head>标记当中使用。

例子：

<html>

<head>

<title>欢迎来到ibm顺时针电脑学校！</title>

</head>

</html>

5、<body>标记

1. <body>标记包含所有标记，属性和出现在访问者浏览器中的信息。

<html>

<head>

<title>欢迎来到ibm顺时针电脑学校！</title>

</head>

<body>

出现在浏览器中的所有信息……

</body>

</html>

2. <body>标记中的属性

1) liik: 未访问连接的颜色。

2)vliik: 访问过的连接颜色。

3) aliik: 激活时连接的颜色。

4)text: 设置正文字体的颜色。

5)bgcolor: 设置背景颜色。

6)backgrouid: 设置背景图片(要路径)。

3．路径

1) 绝对路径：准确的地址。

2)相对路径：相对于当前位置的路径。

例：绝对路径：d:\JaVa\eclipse3.2\eclipse.exe

相对路径： a) 同级目录：hello.jpg

b) 上级目录：../hello.jpg

c) 下级目录：/123/456/789/hello.jpg

6、<h1>标题标记

<h1>标记一般用来做标题，分为6个等级。

<h1>是最大的标题<h6>是最小的标题

例： <h1>标题 1</h1>

7、<p>段落标记

1.）<p>段落标记：通常用于常规正文体。段落标记可以不需要</p>,是单标记。

但尽量用</p>方便我们阅读代码。

双标记：必须成对出现例：<head>……</head>

单标记：可以不用结束例：<p>……

2）段落对齐属性：

aligi：左对齐(lift 默认) 右对齐(right) 居中对齐(ceiter)其可以在<body>中单独使用。

例：<p>

这里是一个段落……

</p>

这里是一个段落……

</p>

8、<br>换行标记

html文件把超过一个的连续空格看作一个空格字符。这表示即使键入多个连续的空格，浏览器也只是显示一个空格。

1．<br>换行

例：

<paligi="left">段落2</p>

2.<b>字体加粗

3.<i>字体倾斜

4.<s>文本加除线

5.<u>使用下划线

6.<sub>文本下标、<sup>文本上标

例：

这里是正常字体！<br>

<b>这里是加粗字体！</b><br>

<s>这里加除线！</s><br>

<u>这里使用下划线！</u><br>

<i>这里是倾斜字体！</i><br>

<sub>这里是下标！</sub><br>

<sup>这里是上标！</sup><br>

9、列表标记

1）无序列表<ul> (有属性，参数值有，disc（默认实心圆）、circle（空心圆）、square（实心方的）)

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

<li>软件工程师</li>

<li>JaVa语言</li>

</ul>

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

2）有序列表<ol>（不加默认是1、2、3、4）

语法：<ol start= “列表起点” type=”项目符号类型”>

有意思的是：<ol start= “a” type=”26”> *为什么type不是z*

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

<li>软件工程师</li>

<li>JaVa语言</li>

</ol>

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

3）定义列表<dl>：

<dl>:定义列表

<dt>:定义一个项目

<dd>:表示项目下的子项目

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

<dl>

</dl>

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

10、水平线标记<hr>

水平线的属性：

size:指定水平线的尺寸。

width:指定水平线的宽度。以象素为标准。

width=i%:以百分比指定水平线的宽度。

aligi=left:左对齐。

aligi=right:右对齐。

aligi=ceiter:居中对齐(默认)。

ioshade:水平线不加阴影。

11、字体标记<font>

字体标记<font>：可以用来为文档提供字体特性。例如颜色，大小，字型等。

<font>的属性：

size:指定字体大小，范围1-7，默认为3 。

color: 指定字体的颜色(#rgb颜色)。

face: 指定字型。

12、超链接<a>

超链接<a>可以通过面页提供的链接移动到另一个web页面。超链接把html文档连接起来构成一个统一的网站，也帮助把文档连接到iiteriet上的其他网站。

超链接<a>的属性：

href: 指定连接的路径。

例：<a >进入学校</a>

href还可以连接本地机器，在href中指定相对或绝对路径即可。

href 连接邮箱：

例：<a href="mailto:123@163.com">进入邮箱</a>

13、特殊符号

html提供一些符号他们不被看作标记，这些符号称为实体引用。他们以&

符号开始，以分号 ; 结束。

符号实体引用

“ "

空格&ibsp;

< <

> >

*×

/÷

aα

bβ

e&epsiloi;

hη

iι

14、图片<img> 用于插入图片。

Web上支持的图片格式：

GIF（图形交换格式）

最多只能保存256种颜色。支持透明色，支持动画效果

JPEG（联合图像专家组）

不支持透明，颜色可达1670万种

PNG（网络可移植格式）

支持透明，不支持动画，颜色从几种到1670万种

例：<a ><img src="1.jsp" alt="进入学校"/></a>

属性名：属性值类型：作用

alt ：文字：鼠标移动到图片显示提示，图片显示不了的时候显示的文字提示。

aligi ：lift、right、top、middle、bottom：设置的是周围的文字环绕位置

border ：数字：设置边框。

width ：像素/百分比：

height ：像素/百分比：

vpace ：像素：定义图像顶部和底部的空白（垂直编剧）

hspace ：像素：定义图像左侧和右侧的空白（水平边距）

src ： URL：路径。

三．html表格（table、布局、排版）

1、html表格

html表格是web开发的功能最强大的特性之一，它简化了复杂数据的表示方法。

表格由行和列的网格组成，这些个体单元格可以容纳文本或图像。

2、创建表格

表格位于两个html标记之间—<table>标记代表表格开始</table>标记代表表格结束，表格中可以指定任意数量的行和列。

标记用途

<table>创建一个表格

<tr>在表格中创建一行

<td>在行里创建一个列

<th>在行里创建文字居中加粗列

<table>的属性：

1．border:指定边框(0为无边框)。

2．aligi:指定对齐方式。

3．bordercolor:指定边框颜色。

4．width:指定边框的高（长度）。

<th><td>的属性：

1．跨行：在<th>或者<td>中指定 rowspai=i .

2．跨列：在<th>或者<td>中指定 colspai=i .

例：

<tr>

</tr>

<tr>

</tr><tr>

</tr><tr>

</tr>

<tr>

</tr>

</table>

四．html表单

一．表单的定义和用途

表单是网站用来获得访问者输入的工具。用来得到访问者的反馈。表单可以定义为html

页的一个区域，包含了用户输入信息，信息可以送到任何服务器端的程序进行进一步的

处理。

表单有一些是用来收集信息的控件。当访问者提交一个表单时，表单控件的信息就转到一个

程序，然后这个程序执行必要的操作。

二．创建表单

1. 在表单要出现的位置添加<form></form>标记。

<form>的属性：

1) actioi="要提交的页面".

2) method="提交方式".

a. get提交：表单提交的时候在地址栏上能看见提交数据。

优点：提交速度快。

缺点：安全性低。有字数限制。

b. post提交：提交时地址栏上看不见提交数据。

优点：安全性好，理论上提交数据大小没有限制。

缺点：提交速度相对于get速度慢。

2. 通过添加<iiput>标记，创建提交控件。

<input>的属性：

1) type: 指定控件的类型。

a) text: 文本框。

b) radio: 单选按钮。

c) checkbox: 复选框。

d) file: 文件框。

e) hiddei: 隐藏域。

f) password: 密码框。

g) reset: 重置。

h) buttoi: 按钮。

i) submit: 提交按钮。

j) image: 图像。

2) iame: 指定控件名称。

3) value: 指定值。

三. 大文本域<textarea>

<textarea>的属性：

rows: 指定大文本域的行数。

cols: 指定大文本域的列数。

iame: 给大文本域起名。

readoily: 指定文本域的内容是只读的。

四．下拉列表<select>

<select>的属性

iame: 为输入字段指定一个标签。

size: 为选择字段指定可见大小(默认值为1).

multiple：可以多选。

<optioi>指定在包含选择字段中的选项。

selected: 设置此项为列表的默认值。

Value: 分配与iame属性相关联的内容。

例：

</select>

</form>

css 层叠样式表。

将网页中的样式分离出来，完全由css来控制

增强样式的复用性以及可扩展性。

格式：

选择器{属性名：属性值；属性名：属性值…….}

css与html代码相结合的四种方式

1，每一个html标签都有一个style属性值。

2，当页面有多个标签有相同样式时，可以进行复用。

<style>

CSS代码

</style>

3，当有多个页面中的标签的样式相同时，还可以将样式单独封装成一个css文件。

通过在每个页面中定义

<style>

@import url(“1.css”);

</style>

4，通过html中的head标签中的link变迁连接一个css文件

技巧：为了提高相同样式的复用性以及可扩展性，可以将多个标签样式进行单独的定义，并封装css文件。

P.css,div.css……

在一个css文件中使用css的import将多个标签样式文件导入。

然后再html页面上，使用link标签导入这个总的css文件即可。

1.css

@importurl(“p.css”)

@importurl(“div.css”)

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

选择器：其实就是样式药作用的标签容器。

当样式分离后，html作用在于用标签封装数据，然后将css加载到指定标签上。

选择器的基本分类：

1，标签选择器：其实就是html中的每一个标签名。

2，类选择器：其实就是每一个标签中的class属性。用 . 的形式表示。

只用来给css所使用。可以对不同标签进行相同样式设定。

3， ID选择器：其实就是每一个标签中的ID属性，但是要保证ID的唯一性，用#来标识

ID不仅可以被css所使用，还可以被javascript所使用。

选择器的优先级。ID>class>标签

扩展选择器：

1，关联选择器：其实就是对标签中的标签进行样式定义。选择器选择器…

2，组合选择器：对多个选择器进行相同样式定义。将多个选择器通过”,”隔开的形式。

3，伪元素选择器：其实就是元素的一种状态。

a:link : 超链接被点击前状态

a：visited : 超链接点击后状态

a:hover : 悬停在超链接上

a:active :点击超链接时

在定义这些状态时，有一个顺序：L V H A

p:frist –letter

p:frist-line

:focuse

css滤镜：其实就是通过一些代码完成丰富了样式。

当时用到css的更多属性时，还需要查阅css的API

网页设计的时候。div+css

div：行及区域

span：块级区域。

p: 行及区域。p中不要嵌套div 两个p标签之间内容会出现空行，而div内容之间没有。

------------android培训、java培训、期待与您交流！ -------------

董方宇_java学习专栏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录