程序博客网 > 呼吸阀计算软件

6.30(HTML)

来源：互联网 发布：呼吸阀计算软件 编辑：程序博客网 时间：2024/05/01 23:48

1. 五种标签练习

 

 

 

 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

 

</head>

<body>

 

<!--分组选择，并且可以有默认选项-->

<select>

<optgroup label="语言">

<option>java</option>

<option selected="selected">ios</option>

<option>c++</option>

</optgroup>

 

<optgroup label="水果">

<option>苹果</option>

<option>梨子</option>

<option>橘子</option>

</optgroup>

 

 

</select>

 

<fieldset>

<legend>health inf</legend>

height:<input type="text">

weigth:<input type="text">

 

</fieldset>

 

<input type="button" value="I AM BUTTON">

<button>button</button>

<input type="reset">

<input type="submit">

 

 

</body>

 

</html>

 

 

（2）内联嵌套（frameset代替了body）

 

 

 

1. 内联嵌套：index3.html中嵌套3.2index.html, 3.2index.html

中嵌套3.3index.html, 3.3index.html

中嵌套3.4index.html

 

index3.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

 

<!--

 <frameset rows="20%,80%">

    <frame src="3.2index.html"></frame>

     <frame src="3.3index.html"></frame>

  

  

</frameset>

-->

 

 

 

<iframe src="3.2index.html " width="800px" height="800px"></iframe>

 

</html>

 

 

 

3.2index.html

 

 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body bgcolor="red">

 

<iframe src="3.3index.html " width="500px" height="500px"></iframe>

 

</body>

 

</html>

 

 

3.3index.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

 

<body bgcolor="yellow">

 

 

<iframe src="3.4index.html " width="100px" height="100px"></iframe>

</body>

</html>

 

3.4index.html

 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

 

<body bgcolor="yellow">

</body>

</html>

 

（3）嵌套：页面分割（2：8）

 

. 页面框架分割

 

 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

 

 

 <frameset rows="20%,80%">

    <frame src="3.2index.html"></frame>

     <frame src="3.3index.html"></frame>

  

  

</frameset>

 

 

（3）特殊格式

 

 

（4）CSS样式嵌入

 

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
<style type="text/css">

body{

background-image:url(4.bmp);
background-repeat: repeat-x;
background-position:left (0px,0px);
background-attachment: fixed;
background-size: (500px,500px);


}

h1{

 font-size: 18px;
 color: blue;

 

}


#hh{


 color: yellow;
}

#pp{

 color:green;
}

.p1{

 color: blue;
}


   div h1{

    color: gray;
   }

   .kk{

    color: white;
   }


   [title=tt]
  
   {


color:white;

   }


 

</style>
</head>


<body>


  <!--id通过#号,class通过.-->
  <!--id不可以重名 class可以重名-->
  <h1>hello world!</h1>
  <h1 style="collor:yellow">hahahahaha</h1>
  <!---->
  <h1 id="hh">hahahahaha</h1>
  <p id="pp" class="1">喝水！！！！！！！！</p>
  <p class="p1">喝水！！！！！！！！</p>

     

  <h1>hello world!</h1>
  <!--派生可以改变父类的样式-->
  <div>
  <h1>hello world!</h1>
  </div>

  <p class="kk">喝水lalalala！！！！！！！！</p>


<link rel="stylesheet" type="text/css" href="index6.css">
  <p>cdsafdsfadsfdsafds</p>


  <p title="tt">IE3</p>


</body>

</html>

 

派生：

div h1{

 

   color: gray;

   }

 

 

<h1>hello world!</h1>

<!--派生可以改变父类的样式-->

<div>

<h1>hello world!</h1>

</div>

 

CSS外联样式

 

 

Index6.css

 

p {height:50px; border:1px solid #000; backgroundcolor:#fff; margin-top:50px;

 

margin-bottom:30px;}

 

 

 

index.html

 

 

<body>

 

 

<!--id通过#号,class通过.-->

<!--id不可以重名 class可以重名-->

<h1>hello world!</h1>

<h1 style="collor:yellow">hahahahaha</h1>

<!---->

<h1 id="hh">hahahahaha</h1>

<p id="pp" class="1">喝水！！！！！！！！</p>

<p class="p1">喝水！！！！！！！！</p>

 

      

 

<h1>hello world!</h1>

<!--派生可以改变父类的样式-->

<div>

<h1>hello world!</h1>

</div>

 

<p class="kk">喝水lalalala！！！！！！！！</p>

 

 

<link rel="stylesheet" type="text/css" href="index6.css">

<p>cdsafdsfadsfdsafds</p>

 

 

</body>

 

</html>

 

（5）CSS背景样式

 

（6）

 

 

body{

 

background-image:url(4.bmp);

background-repeat: repeat-x;

background-position:(0px,0px);<!—可以将图片全部显示à

background-attachment: fixed;

 

 

（7）

 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
 <style type="text/css">

 body{

   text-transform: uppercase;

 }


 h1{
  color: red;
  direction: rtl;
  text-align: left;
  text-decoration: line-through;
  unicode-bidi:


   text-transform:capitalize;
   text-indent: 2em;
   word-spacing: 5px;
  

 }

 </head>

</style>
 <body>
 fgfdgfdgfdsgfd


 <h1>fsfdsfdsfdsfdsdfdsfdsfdsfds</h1>
 </body>

</html>

 

 

 

 

 

 

 

 

0 0
呼吸阀计算软件 呼吸阀计算软件
原创粉丝点击
热门IT博客
网络最红女主播是谁网络最红女主播是谁
java中常用的包java中常用的包
源代码公开的软件
人体工学椅 知乎
长沙优化行政审批
手机数据库软件
淘宝大学吧
java培训教学视频
可牛影像软件下载
淘宝改会员名字怎么改
湖南卫视网络直播app
淘宝客服培训内容
店铺推广淘宝客亏死了
路由器中的端口转发
olay明星产品 知乎
小猪cms微信o2o系统
数据库维护招聘
推推棒淘宝店零食
js混淆
spark书籍推荐 知乎
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 裙子的款式 冬季短裙子 森系裙子 秋装裙子批发 淑女屋裙子 酒红色裙子配什么外套 t恤配什么裙子 夏季的裙子 韩版裙子 连衣裙 夏季女装裙子 冬裙子韩版连衣裙 红色裙子配什么袜子 裙子搭配裤子 墨绿色裙子配什么颜色鞋子 酒红色裙子配什么鞋子 搭配裙子的鞋子 毛料裙子 平底鞋搭配裙子 打底裤裙子 薄荷绿裙子 浅绿色裙子配什么鞋子 皮衣配裙子 藏青色裙子 雪纺蕾丝裙子 粉色裙子配什么外套 红色裙子图片 儿童裙子连衣裙 灰裙子配什么上衣 配裙子的鞋 豹纹裙子搭配 搭配裙子的外套 欧美风裙子 女士裙子尺码对照表 钩针编织儿童裙子 召唤红警 末世红警 红警无敌 红警之家 红警帝国 红警快捷键 红警索马里

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里