黑马程序员-HTML补充和CSS

 

 

----------- android培训、java培训、java学习型技术博客、期待与您交流！ ------------ 

 

HTML  (url编码)

String str = “你好”；
String s = URLEncoder.encode(str,"UTF-8");
System.out.println(s);

String s1 = URLDecoder.decode(s,"UTF-8");

System.out.println("s1="+s1);

url的编码和解码

 

 

 

HTML（base标签）

<meta name="keywords" content="变形金刚" />

<meta http-equiv="refresh"

content="3;url=http://www.sina.com.cn" />
//过三秒后自动跳到指定网页，若没有指定跳转页面

，则当前页面每隔指定秒数就刷新。

 

 

 

 HTML （其他标签）

<link>标签会链接相关的资源，比如css文件
rel    描述目标文档与当前文档的关系
type   文档类型
media  制定目标文档在哪种设备上起作用
eg:<link rel="stylesheet" type="text/css"

media="screen,print" href="a.css" />

<b> </b>  加粗

<i> </i>  斜体

<u> </u> 下划线

x² 下角标
x₃ 上角标

<strong> </strong> 加粗

保留代码区格式
<pre>  </pre>

<marquee behavior="alternate" direction="down">

</marquee>

alternate 来回
scroll    穿过去
slide     落下去不动了 - -、

 

<p> </p> 段落标签（段落间有空行）
<br/>    另起一行
<div>   </div>    封装后的数据会另起一行
<span> </span>   封装的是一行中的某一部分

 

XML是对数据信息的描述，HTML是数据显示的描述
XML代码规定的更为严格。如：标签不结束被视为错误
XML规范可以被更多的应用程序所解释，将成为一种通

用的数据交换语言
各个服务器、框架都将XML作为配置文件

 

 

CSS (和html结合的方式 一、二)

css将网页的内容和显示样式进行分离，提高了显示功

能。

<div style="color:#FF0099;background-

color:#CCFFCC">

style封装的是css的属性，键和值用冒号链接，键与

键之间用；隔开。

<style type = "tet/css"> type指定文本内容
div{
 background-color:#000000;}
</style>
style样式标签

div上加载自己的样式，会覆盖css指定的样式

 

 

CSS （和html结合的方式  三、四）

为了提高代码的复用性，可以将css单独封装成一个文

件

@charset "uft-8"
/* CSS Document */

div{
 background-color:#33FF00;
 color:#FF3300;
 }

 

只要在html中引入css样式即可关联
@import url(div.css)

为了简化，可以新建一个css文件，导入需要的样式，

而之后要用样式的html文件，只需导入这一个合并的

css文件即可。
eg:
1.css

@import url(div.css)
@import url(span.css)
@import url(p.css)

 

<link rel="stylesheet" type="text/css"

href="div.css" />
也可以实现css的样式

样式优先级：
由上到下，由外到内，优先级由低到高。
（谁后加载谁有效）

 

 

CSS（基本选择器）

div{
 background-color:#000000;
 color:#FFFFFF;
 }

div.haha
{
 ...
 }
(类选择器)

<div class="haha">
class 可以自定义类别

span 区也可以定义类
类选择器也可以对不同标签，相同类名进行设置

.haha
{
 }

 

id和class区别？
id选择器，不仅可以给css使用，也可以给javascript

使用，所以尽量保证id页面唯一。

若既有标签选择器，类选择器，还有id选择器，优先

级为id > 类选择器（class）> 标签选择器（比如div

）

 

 

 

CSS 扩展选择器

b{
 background-color:#00FF99;
 }
这样，所有加粗的字体都会有背景色。

span b{
 ...
 }
这样，只有span区域的b标签修饰的字符才会应用设置

。

 

.haha,#kk,p b{
 
 }
组合选择器，对多个不同选择器进行相同样式的设定

 

 

 

CSS(伪元素选择器)

<a href="http://www.a.com"> 这是我的网站 </a>

超链接默认蓝色+下划线

 

 

<style type="text/css">

a:link{
 background-color:#FFFF99;
 color:#339900;
 text-decoration:none;(取消下划线)
 }（链接未点击状态）

a:visited{
 background-color:#FFFFFF;
 color:#000000;
 font-size:10px;
 }（被访问后的状态）

a:hover{
 background-color:#0066FF;
 color:#FFFFFF;
 font-size:24px;
 }（光标移动到超链接上的状态 未点击）

a:active{
 background-color:#000000;
 color:#FF0000;
 }（点击超链接时的状态）

顺序：L  V  H  A
（LV 哈哈  ^_^）

a:link,a:visited{
 ...(组合选择器，可以让点之前和点之后效

果一致)
 }

 

p:first-line   段落的第一行文本

p:first-letter 段落中的第一个字母

：focus    具有焦点的元素，IE6浏览器不支持，在

FireFox中可以看到效果。

input:focus{
 background-color:#00CCFF;
 }

 

 

CSS(CSS示例)

 

<style type="text/css">
ul{
 list-style:none;  (清空样式)
 list-style-image:url(h.bmp);
 }

table{
 border:#0099FF 1px dashed; (虚框线)
 width:60px;

 border-collapse:collapse;
 
 border-bottom:#FF3300 3px solid;
 (三条都是虚线，一条是实线。)
 }

table td{
 border:#FF0000 1px solid; (实线)
 padding:10px 20px 30px 60px;
        (上右下左)
 
}

input{
 border:#0066FF 1px solid;

 (border:none;则没有框
 border-bottom:#000000 1px solid;
 有下划线)

 
 }

 

</style>

 

<table>

</table>

 

 none :默认值，无装饰
 blink：闪烁
 underline：下划线
 line-through：贯穿线
 overline：上划线

href默认值为 underline
strike，s，del，默认值是line-through

 

 

 

 

----------- android培训、java培训、java学习型技术博客、期待与您交流！ ------------