java day17第十七课 HTML和CSS
HTML和CSS
1、Html就是超文本标记语言的简写，是最基础的网页语言
2、Html是通过标签来定义的语言，代码都是由标签组成。
3、Html代码不用区分大小写
4、Html代码由<html>开始</html>结束。里面由头部分<head></head>和体部分<body></body>两部分组成。
5、头部分是给Html页面增加一些辅助或者属性信息，它里面的内容会最先加载
6、体部分是真正存放页面数据的地方。
多数标签都是由开始标签和结束标签，其中有个别变迁因为只有单一功能，或者没有要修饰的内容可以在标签内结束。
想要对被标签修饰的 内容进行更丰富的操作，就用刀了标签中的属性，通过对属性值的改变，增加了更多的效果选择。
属性与属性值之间用"="连接，属性值可以用双引号或者不用引号，一般都会用双引号，或公司规范书写规范
格式：<标签名 属性名="属性值">数据内容<／标签名>
<标签名 属性名="属性值" />
操作思想：
为了操作数据，都需要对数据进行不同标签的封装，通过标签中的属性对封装的数据进行操作。标签就相当于一个容器。对同期中的数据进行操作，就是在不断的改变容器的属性值
常见标签：
其他标签
<base>
href 属性：指定网页左右的超链接的目录，可以是本地目录，也可以是网络目录。注意值的结尾处已定窑用/表示目录，只作用于相对路径的超链接文本。target 属性：指定打开超链接的方式。如：_blank表示所有的超链接都用新窗口打开显示
<meta>
name属性：网页的描述信息，当取keywords时，content属性的内容就作为搜索引擎的关键字进行搜索
http-equiv 属性：模拟HTTP协议的响应头
如：<meta http-equiv="refresh" content="2" url="http://www.baidu.com">
表示2秒刷新一次此页面
<link>
rel 属性：描述目标文档与当前文档的关系
type 属性：文档类型
media：指定目标文档在哪个地方起作用
如：
<link rel="stylesheet" type="text/css" href="a.css">
<marquee>
direction属性 left down up right
behavior 属性 scroll alternate slide
<pre>可以将文本内容按在代码区的样子显示在页面上</pre>
Css介绍
CSS是层叠样式表（Cascading Style Sheets）用来定义网页的显示效果，可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性。并增强了网页的显示效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。
那么CSS和html是如何在网页代码中相结合的呢？
通过四种方式：
1、style属性方式
style属性方式：
利用标签中style属性来改变每个标签的显示样式。
例：<p style="background-color:#ff0000;color:#ffffff">p标签显示内容</p>
2、style标签方式（内嵌方式）
在head标签里加入style标签，对多个标签进行统一修改。
该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活
<head>
<meta charset="UTF-8">
<title>CSSdemo</title>
<style type="text/css">
p {color: aqua;}
</style>
</head>
<body>
<p>这是显示head标签里面设置style标签的效果</p>
</body>
3、导入方式
前提是已经存在一个定义好的CSS文件，网页的一部分样式需要用到，name就用刀这种方式。例：
<head>
<meta charset="UTF-8">
<title>CSSdemo</title>
<style type="text/css">
@import url(div.css);
</style>
</head>
<body>
<div></div>
</body>
注：url括号后面必须要用分号结束，如果导入进来的样式与本页面定义的样式重复，以本页定义样式为准。
4、链接方式
通过head标签中的link标签来实现，前提也是先要有一个已定义好的css文件例：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSSdemo</title>
<link rel="stylesheet" href="div.css" type="text/css"/>
</head>
<body>
<div></div>
</body>
</html>
注：可以通过多个link标签链接进来多个css文件，重复样式以最后链接进来的css样式为准。
5、样式优先级
自上到下，由外到内，优先级由低到高。
标签选择器<类选择器<id选择器<style属性
6、总结CSS代码格式
选择器名称 ｛属性名：属性值；属性名：属性值；......；｝
属性与属性之间用分号隔开
属性与属性值之间用冒号连接
如果一个属性有多个值的话，name多个值用空格隔开。
7 、选择器
就是指定css要作用的标签，哪个标签的名称就是选择器。意为：选择哪个容器。选择器有三种：
a、html标签名选择器。使用的就是html的标签名。
b、class选择器。其实使用的标签中的class属性。
c、id选择器。其实使用的是标签中的id属性。
每一个标签都定义了class属性和id属性，用语对标签进行标识，方便对标签进行操作。在定义中，多个标签的class属性值可以相通，而id值要唯一，因为JavaScript中经常用。
8、class选择器
在标签中定义class属性并赋值，通过标签名.class值，对该标签进行样式设置。
例：
在相同标签设置不同样式的时候，用class进行区分。
p.pclass1{color:red;}
p.pclass2{color:yellow;}
<p class="p.pclass1">样式1</p>
<p class="p.pclass2">样式2</p>
不同标签进行相同设置的时候，用class进行统一定义。
.classname{color:blue;}
<p class="classname">p样式</p>
<div class="classname">div样式</div>
9、id选择器
与class选择器蕾丝，但格式不同，选择器的名称为#id值。
例：
#pid {color:red;}
<p id="pid">id设置样式</p>
注：多个标签同样可以定义相同的id值，但是对于JavaScript对标签元素的获取酒会出错，所以形成习惯，确保id值的唯一性对于以后的数据库设计也会有好处。
