本文围绕网页开发展开，介绍了HTML和CSS相关知识。阐述了HTML是用于网页浏览器显示内容的超文本标记语言，说明了静态与动态网页的区别，还介绍了HTML标签如表格、图片、表单等，以及CSS的概念、引入方式和选择器等，帮助理解网页开发基础。
18.css是什么
18.1什么是css
CSS是层叠样式表（Cascading Style Sheets）用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。
18.2 CSS的引入方式通过四种方式
1.style属性方式：
利用标签中style属性来改变每个标签的显示样式。
例：
<p style="background-color:#FF0000; color:#FFFFFF">
p标签段落内容。
</p>
该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。
2.style标签方式：（内嵌方式）
在head标签中加入style标签，对多个标签进行统一修改。
<head>
<style type=”text/css”>
p { color:#FF0000;}
</style>
</head>
该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。
3.导入方式：
前提是已经存在一个定义好的CSS文件。网页的一部分样式需要用到，那么就用到这种方式。
例：
<style type="text/css">
@import url(css_3.css);
div { color:#FF0000;}
</style>
注：url括号后面必须要用分号结束。如果导入进来的样式与本页面定义的样式重复，以本页定义样式为准。
4.链接方式：
通过head标签中link标签来实现，前提也是先要有一个已定好的CSS文件。
例：
<link rel="stylesheet" type="text/css" href="css_3.css" />
注：可以通过多个link标签链接进来多个CSS文件。重复样式以最后链接进来的CSS样式为准。
样式优先级：
由上到下，由外到内。优先级由低到高。
18.3 css的选择器
class选择器：
在标签中定义class属性并赋值。通过标签名.class值 对该标签进行样式设置。
例：
相同标签设置不同样式的时候，用class进行区分。
p.pclass_1 {color:#FF0000;}
p.pclass_2 {color:#0000FF;}
<p class=”pclass_1”>P标签样式</p>
<p class=”pclass_2”>P标签样式</p>
不同标签进行相同设置的时候，用class进行统一定义。
.classname {color:#00FF00;}
<p class=”classname”>P标签样式</p>
<div class=”classname”>DIV标签样式</div>
id选择器：
与class选择器类似，但格式不同，选择器的名称为：#id值。
例：
#pid { color:#0000FF;}
<p id=”pid”>P标签样式</p>
注：多个标签同样可以定义相同的id值，但是对于JavaScript对标签元素的获取就会出错。所以形成习惯，确保id值的唯一性对于以后的数据库设计也很有好处。
扩展选择器：
关联选择器
标签是可以嵌套的，要让相同标签中的不同标签显示不同样式，就可以用此选择器。
例：
p { color:#00FF00;}
p b { color:#FF000;}
<p>P标签<b>刘德华</b>段落样式</p>
<p>P标签段落</p>
组合选择器
对多个不同选择器进行相同样式设置的时候应用此选择器。
p,div { color:#FF0000;}
<p>P标签显示段落。</p>
<div>DIV标签显示段落</div>
注：多个不同选择器要用逗号分隔开。
伪元素选择器
其实就在html中预先定义好的一些选择器。称为伪元素。（CSS的术语）
格式：标签名：伪元素。类名 标签名。类名：伪元素。都可以。
a:link 超链接未点击状态。
a:visited 被访问后的状态。
a:hover 光标移到超链接上的状态（未点击）。
a:active 点击超链接时的状态。
使用顺序 L – V – H - A
p:first-line 段落的第一行文本。
p:first-letter 段落中的第一个字母。
:focus 具有焦点的元素。IE浏览器不支持，在FireFox中可以看到效果。
看显示效果的时候注意，浏览器的缓冲的问题。
a:link {color:blue; text-decoration: none; font-size:12px}
a:visited {color:gray; text-decoration: none; font-size:8px}
a:hover {color:red; text-decoration: underline; font-size:20px}
a:active {color:green; text-decoration: none; font-size:30px}
17.form表单元素
17.6 input标签1
input输入框,输入框有以下类型。
text 单行文本输入框
password 密码输入框
checkbox 复选框
radio 单选框
submit 提交按钮
reset 重置按钮
image 图片提交按钮
button 普通按钮
hidden 隐藏控件
file 文件选择控件
17.6.1通用属性1
通用属性:
name name名 定义input元素的名称
value 任何字符 控件初始显示的文字内容（数据）
size 整数 定义输入字段的宽度
maxlength 整数 规定输入字段中的字符的最大长度 ，针对输入框，按钮无意义。
readonly readonly 指定控件处于只读状态 ,针对输入框，按钮无意义。
disabled disabled input 元素加载时禁用此元素
type 特定字符串 input 元素的类型。
17.5 按钮标签2
提交按钮 提示：将表单提交到action指定的程序文件进行处理。
重置按钮 提示：将表单中填写的所有数据恢复到打开表单时的数据。
普通按钮 提示：定义可点击的按钮，但没有任何行为，一般配合JS使用
图片按钮 <input type=“image”src=“图片URL” /> 提示：图片按钮一般与JS配合使用。
也可以使用标签
Click me!
type : submit,reset,button
17.4 select下拉框3
：下拉框。
17.3 textarea多行文本框4
<textarea name="" rows="3" cols="5">
默认值
17.2 label标签 5
label标签用来显示文本，label标签主要使用for属性和input标签绑定，绑定后点击label标签就相当于点击了input标签。
显式的绑定：
for属性于哪一个表单项元素绑定。
17.1 fieldset标签 6
标记 fieldset 元素可将表单内的相关元素分组。 fieldset元素没有必需的或唯一的属性。 legend元素为fieldset元素定义标题。 属性：align取值：left、center、right16.图片标签
图标标签：网页中显示一张图片。
属性：
src :图片的地址
border:图片的边框
width/height:宽高，默认为图片的元素高度。
alt:图片未加载成功，显示的文本。
title:图片提示。
align:对齐方式，left,right,bottom,top,center
其中left和right用来设置图片在水平方向上的对齐方式，这两个属性值比较特殊，因为图片浮动游离于文字之外，文字环绕图片周围（文字在图片旁自动换行，三面包围图片）。左、右对齐能让文字环绕图片周围
注意:我们在网页中，只是指定了图片的路径，源代码的大小不会受影响。
15.表格标签 讲内容！
14.4 table标签属性：1
width %或pixels 规定表格的宽度
height % | pixels 规定表格的高度
align Left|center|right 规定表格相对周围元素的对齐方式
bgcolor 颜色值 规定表格的背景颜色
border pixels 规定表格边框的宽度
bordercolor 颜色值 定义表格整体的框线色
background URI 指定表格的背景图案，URI指向图像文件的位置
cellpading 长度值 属性用来指定表格 各单元格之间的空隙 。
cellspacing 长度值 属性用来指定单元格内容与单元格边界之间的空白距离的大小
14.3 tr标签属性 2
align left,right,center 定义表格行的内容水平对齐方式。
valign top,middle,bottom 定义表格行的内容垂直对齐方式。
bgcolor 颜色值 定义某一行行的颜色。
14.2 td,th标签属性3
表格标题单元格：加粗居中显示 表格数据单元格 属性 width % | pixels 规定表格单元格的宽度。 height % | pixels 规定表格单元格的高度。不支持。请使用 CSS 代替。 align left | center | right 规定单元格内容的水平排列方式 valign top | middle | bottom 规定单元格内容的垂直排列方式 bgcolor 颜色值 规定单元格的背景颜色。不支持。请使用 CSS 代替。 background URI 定义单元格的背景图案 rowspan 正整数 设置当前单元格的在垂直方向上合并单元格的个数。 colspan 正整数 设置当前单元格的在水平方向上合并单元格的个数。14.1 caption标签4
caption align=“left或center或right”>内容 定义表格标题
注意：caption为table的子元素，且只能在table元素内，应该出现在紧随table开始标签之后，而一个table只能有一个caption
14.什么是标签 讲内容
13.7文字标签1
普通标签：对标签中的内容进行修饰。
<b：标签中的文本加粗显示。
i> : 标签中的文本以斜体显示。
u>：标签中的文本出现下划线。
sub>:标签中的文本下浮显示。
<sup:标签中的文本上浮显示。
<font:标签中的文本的 字体(face)、大小(size)、颜色(color)。该标签需要通过属性来设置。
<body>标记的常见属性
text : 内容中的文本颜色
bgcolor:背景样式
background:背景图片
13.6.颜色标签2
网页中提供的三种方式来代表颜色的值
1.通过英语单词，比如red,yellow,green,gray，blue… 这种方式简单。
2.10进制表示：RGB, R=Red G=Green B=Blue，所有的颜色都可以用红、绿、蓝(RGB)这三种颜色波长的不同强度组合而得,这个是一个关于物理和美术的问题。
十进制的基数：0、1、2、3、4、5、6、7、8、9
rgb(0-255,0-255,0-255) ,比如红色rgb(255,0,0); 这种方式不推荐使用,某些浏览器识别不好。
3.16进制表示：
十六进制的基数：0、1、2、3、4、5、6、7、8、9、A(10)、B(11)、C(12)、D(13)、E(14)、F(15)
表示方式#000000,每两位代表一个颜色，比如红色：#FF0000 ，绿色:#00FF00 , 蓝色:#0000FF;
13.5排版标签3
：用来创建一个段落，该元素自动在其前后创建空行。 常用属性align：定义文本的对齐方式，属性可取值：left、center、right
:产生换行，不需要结束标记
：一条水平线 align：对齐方式，可选值为 center、left、right size：线条粗细，取值为数字，单位为像素 width：线条宽度，取值为数字，单位为像素 color：线条颜色 noshade：规定水平线的颜色呈现为纯色，而不是有阴影的颜色。
：预排版标记将保留文本中的空白(连续的空白)和换行符的信息：h1~h6标题标签，属性align：对齐方式 left、center、right。
13.4行内标签&块标签4
两个标签主要用于以后CSS中使用。
13.3字符实体5
要在网页中显示以下：
HTML字符实体（特殊符号）
我今天去图书城，买了一本书，书名叫<DIV&CSS网页排版实例>，
书的价格是：¥98.20
©清华出版社 版权所有
字符实体:实现原理，html代码中不写特殊符号，而是使用一个字符实体来表示(使用另外的东西来表示一个符号.)
" " 英文空格
" " 中文空格
< < 小于
> > 大于
& &
这些符号目前输入法都有，我们只需要记住和html有冲突的符号即可。
13.2列表标签6
在HTML，列表标签大量使用，网页中随处可见。
符号列表标签
type属性：disc(实心圆点)、circle(空心圆圈)、square(实心方块)
- 内容
- 内容
序列列表标签
- 内容
- 内容
dl用来创建定义列表
-
定义术语
- 定义说明
- 定义说明
13.1跑马灯标签7
<marquee 属性=“属性值”>标签内容
属性参考文档：其他元素跑马灯.
13.什么是标签 要注意怎么介绍
1.标签是由都是由<标签名>组成。比如
2.标签的结束标签为开始标签名前面加一个"/",比如：的结束标签为 ,的结束标签为。。。 一对标签统一格式为<标签名>内容</标签名>
3.html中有空标签(单标签)，空标签没有结束标签,可以不写，但是规范一般在标签名后面加上一个" /",
。
4.标签都有相关属性，属性用于对标签的内容进行描述。你好 格式为：<标签名 属性名=”属性值“ 属性名=”属性值“>内容</标签名>
5.标签必须正确的嵌套。
标签允许嵌套,但不允许交叉嵌套
4.标签都有相关属性，属性用于对标签的内容进行描述。你好 格式为：<标签名 属性名=”属性值“ 属性名=”属性值“>内容</标签名>
3.html中有空标签(单标签)，空标签没有结束标签,可以不写，但是规范一般在标签名后面加上一个" /",
。
2.标签的结束标签为开始标签名前面加一个"/",比如：的结束标签为 ,的结束标签为。。。 一对标签统一格式为<标签名>内容</标签名>
1.标签是由都是由<标签名>组成。比如
12.解释 超链接
12.0解释：什么是超级链接？
超级链接简单来讲，就是指按内容链接。
链接的内容可以是另一个网页，还可以是一个图片，一个电子邮件地址，一个下载文件，甚至是一个另外的应用程序(迅雷，qq客户)。
12.1解释：标签 内容。
标签 内容
属性：
href： 链接的目标URL。
name：锚点名，以便它能够被其他链接所定位。
target:打开网页的目标
_blank在新窗口中打开目标网页
_self在当前窗口中打开目标网页,缺省值
_top整个浏览器窗口
_parent多框架结构中父窗口
12.2解释：什么是URL?
URL(Uniform Resource Locator) 统一资源定位符：互联网上的每个文件都有一个唯一的地址，这种地址称为URL。
URL(Uniform Resource Locator) 统一资源定位符：互联网上的每个文件都有一个唯一的地址，这种地址称为URL。
http://baike.baidu.com/view/245485.html
URL地址由4部分组成
第1部分：为协议：http://、ftp://等
第2部分：为站点地址：可以是域名baike.baidu.com或IP地址
第3部分：为页面在站点中的目录：view
第4部分：为文件名称，例如245485.html
各部分之间用“/”符号隔开。
地址分类：
绝对URL:绝对URL显示文件的完整路径。http://jd.com，http://qq.com，一般以协议开始。
相对URL:以本身所在的文件夹的位置为参考点，描述目标文件夹的位置
10.解释：网页用来做什么？
我们在浏览器当中所看到的任何一页面都是&网页 我们在任何一个浏览器当中右键查看网页源代码都可以打开 一堆源代码 这就是我们这个html html 简单点说就是用来做网页的。写好的html 作为源代码。 联网后被浏览器翻译解析成内容不同的页面
网页就是用来做数据的显示！怎么显示呢？ 写标签！ 然后标签写到哪里啊？ 写到一个我们后缀名叫做.html或者.htm 的文件当中。 xml 是用来做什么？ xml 就是用来做数据的传输和存储的
9.解释：主流技术概念html ？
鲁解释：
简单点说就是用来做网页的。写好的html 作为源代码。被浏览器翻译解析成内容不同的页面。html的主要内容就是标签, 它的标签是按照html规范来写的，我们学过xml ,xml 里面的标签是我们自定义的，但是我们为了防止xml里的标签乱写我们是不是用了一个scanma约束啊 html这种语言它是用于&网页浏览器显示内容&里的！为网页浏览器设计的&一种超文本标记语言。
超文本：为文字添加一个能导航到其他地方的链接就是超文本。“超"等于相当于"超链接"。
标记：为文本的内容提供不同显示及排版。比如:“网 页 ©2014 Baidu”。
8.解释：这个时候网页我们应该怎么认识呢？
鲁解释：我们在浏览器当中所看到的任何一页面都是&网页 我们在任何一个浏览器当中右键查看网页源代码都可以打开 一堆源代码 这就是我们这个html html 简单点说就是用来做网页的。写好的html 作为源代码。 联网后被浏览器翻译解析成内容不同的页面
7.解释：javaweb要点核心！
鲁解释：整个网页的基础在哪里？理所当然在我们这个java项目上面！然后呢 再加上我们的这个网页 那么整个呢我们就可以称之为javaweb!
6.解释：一个标准的HTML由什么组成？
鲁解释：答&一个标准的HTML至少由三对标签组成：
3.HTML页面的开始标签和结束标签 ，为页面的开始，为页面的结束。该标签在页面中只能出现一次，其他的标签都应该写在标签中，否则可能导致显示不正确。
2.头标签 ，主要用于显示网页的标题和描述html内容的显示。
1.主体标签 ，编写网页中可以见的内容部分。
5.解释：什么是静态网页与动态网页:
鲁解释:静态网页是:我们写好的html内容在浏览器中显示出来的效果始终都一样，不管是进行多少访问，如果想内容改变那么必须修改源代码。
鲁解释:动态网页&页面的内容是由服务器端程序控制输出，比如不同的人使用相同的网站，但是显示的当前用户是不一样的。
两者区别是&静态就是我们写什么就显示什么，而动态页面&是通过程序的！控制输出内容。
4.思考:相同的网站地址http://www.jd.om，点击更换后显示发生了改变。
鲁解释：跳转到了不同的页面。
3.解释：HTML是什么?
超文本：为文字添加一个能导航到其他地方的链接就是超文本。“超"等于相当于"超链接"。
标记：为文本的内容提供不同显示及排版。比如:“网 页 ©2014 Baidu”。
HTML（HyperText Markup Language 是&超文本标记语言):这种语言用于用在&网页浏览器显示内容&里的！为网页浏览器设计的&一种标记语言。
2.解释：网页(WEB)&又是什么？
鲁解释：网站中的&任何一页面！通常是HTML格式的&文件。网页是一个文件！他存放在世界某个角落的&某一部计算机中！而这部计算机必须是与互联网相连的！。
1.解释：JAVAWEB是什么 : 基于网页(WEB)的&Java项目.
鲁解释：网页！是网站中的&任何一个页面！通常是HTML格式的！文件！ 网页是一个文件！它存放在电脑中某个角落！某一部计算机中！同时这部计算机必须是与互联网相连接的。
鲁解释：javaweb！是基于web网页！开发的&java项目
鲁解释：你现在会那些技术！那它能够来做那些事情！那大家一定要非常清楚！OK ！
扫一扫
2207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
