JavaWeb02-HTML篇笔记（一）

[size=16.0000pt]1.1 上次课的内容回顾：
HTML:
* HTML的概述：* HTML：Hyper Text Markup Language.* HTML就是由一组标签所组成的.
* HTML的字体标签:* <font>标签:* 属性：color,size,face
* HTML的排版标签:* h标签：标题标签.* p标签：段落标签.* b标签：加粗标签.* i标签：斜体标签.* u标签：下划线标签.* br标签：换行.* hr标签：水平线.
* HTML的图片标签:* img标签:* 属性:* src属性:图片的路径.* 相对路径:  ./ 代表当前目录   ../上一级目录   * width,height,alt.
* HTML的超链接标签:* a标签:* 属性：* href:链接的路径.* target:链接打开的方式. _self,_blank,_parent
* HTML的列表标签:* 无序列表:<ul>* 有序列表:<ol>
* HTML的表格标签：* table标签:* tr标签：表格的行.* td标签：表格的列.
* HTML的表单标签：（*****）* form标签：* action属性：表单提交的路径* method属性：表单的提交的方式.* GET和POST：* GET：地址栏上会显示提交的数据的信息,大小限制.* POST：地址栏不会显示提交的数据的信息,没有大小限制.* <input>* type=”text”:文本框* type=”password”:密码框.* type=”radio”:单选按钮.* type=”checkbox”:复选框.* type=”file”:文件上传.* type=”hidden”:隐藏字段.* type=”submit”：提交按钮.* type=”reset”:重置按钮.* type=”button”:普通按钮.* type=”image”:图片按钮.* <select>:下拉列表.* <textarea>:文本区
* HTML的框架标签:* <frameset>* <frame>

1.2 案例一：使用DIV+CSS方式重新布局网站的首页.1.2.1 需求：
网站首页的设计：采用DIV+CSS的方式完成.

之前使用的是表格的布局！！！表格的布局有缺陷！！！
1.2.2 分析：1.2.2.1 技术分析：

【HTML的块标签】
<div></div>                :默认一个div独占一行.
<span></span>        :默认在同一行.
【CSS的概述】
Ø 什么是CSS:* HTML相当于网站的骨架！CSS对骨架进行美化！
Ø CSS在那些地方使用：
任何网站都会使用CSS去美化页面！！！
Ø 如何使用CSS
知道CSS的语法.
【CSS的基本语法】
CSS的基本语法通常包含两个部分：一个是选择器，一个声明.
* 选择器{属性:属性值;属性:属性值...}【CSS的引入的方式】
Ø 行内样式：直接在HTML的元素上使用style属性设置CSS.
<h1 style="color:red;font-size:200px ;">标题</h1>
Ø 页面内样式：在HTML的<head>标签中使用<style>标签设置CSS.<style>h1{color:blue;font-size: 40px;}</style>
Ø 外部样式:单独定一个.css的文件.在HTML中引入该CSS文件.
<link href="../../css/demo1.css" rel="stylesheet" type="text/css" />
【CSS的选择器】
Ø 元素选择器：
div{border:1px solid blue;width:40px;height:45px;
}
Ø ID选择器:
#d1{border:2px solid red;
}
Ø 类选择器：
.divClass{border:2px solid yellow;
}
【CSS的浮动】
Ø 使用float属性可以完成DIV的浮动.float属性的取值:Ø 清除浮动效果：使用clear属性进行清除:Ø 案例：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>.divClass{border:1px solid blue;width:200px;height:220px;}#d1{float:left;}#d2{float:left;}#d3{float:left;}.clear{clear:both;}</style></head><body><div id="d1" class="divClass">DIV1</div><div id="d2" class="divClass">DIV2</div><div id="d3" class="divClass">DIV3</div><div class="clear"></div><div id="d4" class="divClass">DIV4</div></body>
</html>

1.2.2.2 步骤分析:
【步骤一】创建一个首页的HTML文件
【步骤二】创建一个整体的DIV元素.
【步骤三】创建每个部分的DIV元素.
【步骤四】为每个部分填充属于自己的那块内容.
1.2.3 代码实现:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>首页</title><style>#bodyDiv{border:1px solid blue;width:90%;}.logoDiv{border:1px solid blue;width:33%;float:left;height:50px;}.clear{clear:both;}#menuDiv{width:100%;height:50px;border:1px solid blue;background-color: black;}#imgDiv{width:100%;border:1px solid blue;}#menuDiv a{font-size: 20px;color: white;}.productClass{width:100%;border:1px solid blue;}.contentClass{width:100%;border:1px solid blue;}.contentClass font{font-size: 30px;color: black;}</style></head><body><!-- 整体的DIV --><div id="bodyDiv"><!-- logo的DIV --><div><div class="logoDiv"><img src="../img/logo2.png" height="48"></div><div class="logoDiv"><img src="../img/header.png" height="48"></div><div class="logoDiv"><a href="">登录</a><a href="">注册</a><a href="">购物车</a></div><div class="clear"></div></div>       <!-- Menu的DIV --><div id="menuDiv"><a href="">首页</a>  <a href="">电脑办公</a>  <a href="">手机数码</a>  <a href="">烟酒糖茶</a>  </div>       <!-- 图片滚动的DIV --><div id="imgDiv"><img src="../img/1.jpg" width="100%"></div>       <!-- 热门商品的DIV --><div class="productClass"><!-- 文字部分的DIV --><div class="contentClass"><font>热门商品</font><img src="../img/title2.jpg"></div><!-- 商品部分的DIV --><div style="width:100%;border:1px solid blue;"><div style="width:15%;height: 460px;border:1px solid blue;float:left;"><img src="../img/big01.jpg" width="100%" height="100%"></div><div style="width:84%;height: 460px;border:1px solid blue;float:left;"><div><div style="border:1px solid blue;width:48%;float:left;height:228px;"><img src="../img/middle01.jpg" width="100%" height="100%"></div><div style="border:1px solid blue;width:16%;float:left;height:228px;"><img src="../img/small03.jpg"></div><div style="border:1px solid blue;width:16%;float:left;height:228px;"><img src="../img/small03.jpg"></div><div style="border:1px solid blue;width:16%;float:left;height:228px;"><img src="../img/small03.jpg"></div></div><div><div style="border:1px solid blue;width:16%;float:left;height:228px;"><img src="../img/small03.jpg"></div><div style="border:1px solid blue;width:16%;float:left;height:228px;"><img src="../img/small03.jpg"></div><div style="border:1px solid blue;width:16%;float:left;height:228px;"><img src="../img/small03.jpg"></div><div style="border:1px solid blue;width:16%;float:left;height:228px;"><img src="../img/small03.jpg"></div><div style="border:1px solid blue;width:16%;float:left;height:228px;"><img src="../img/small03.jpg"></div><div style="border:1px solid blue;width:16%;float:left;height:228px;"><img src="../img/small03.jpg"></div></div></div></div></div>       <!-- 广告的DIV --><div style="width:100%;border:1px solid blue;"><img src="../img/ad.jpg" width="100%" height="80"></div>       <!-- 最新商品的DIV --><div class="productClass"><!-- 文字部分的DIV --><div class="contentClass"><font>最新商品</font><img src="../img/title2.jpg"></div><!-- 商品部分的DIV --><div style="width:100%;border:1px solid blue;"><div style="width:15%;height: 460px;border:1px solid blue;float:left;"><img src="../img/big01.jpg" width="100%" height="100%"></div><div style="width:84%;height: 460px;border:1px solid blue;float:left;"><div><div style="border:1px solid blue;width:48%;float:left;height:228px;"><img src="../img/middle01.jpg" width="100%" height="100%"></div><div style="border:1px solid blue;width:16%;float:left;height:228px;"><img src="../img/small03.jpg"></div><div style="border:1px solid blue;width:16%;float:left;height:228px;"><img src="../img/small03.jpg"></div><div style="border:1px solid blue;width:16%;float:left;height:228px;"><img src="../img/small03.jpg"></div></div><div><div style="border:1px solid blue;width:16%;float:left;height:228px;"><img src="../img/small03.jpg"></div><div style="border:1px solid blue;width:16%;float:left;height:228px;"><img src="../img/small03.jpg"></div><div style="border:1px solid blue;width:16%;float:left;height:228px;"><img src="../img/small03.jpg"></div><div style="border:1px solid blue;width:16%;float:left;height:228px;"><img src="../img/small03.jpg"></div><div style="border:1px solid blue;width:16%;float:left;height:228px;"><img src="../img/small03.jpg"></div><div style="border:1px solid blue;width:16%;float:left;height:228px;"><img src="../img/small03.jpg"></div></div></div></div></div>       <!-- 页脚的DIV --><div  style="width:100%;border:1px solid blue;"><img src="../img/footer.jpg" width="100%"></div>       <!-- 友情链接及版权的DIV --><div style="width:100%;border:1px solid blue;"><center>关于我们 联系我们 招贤纳士 法律声明 友情链接 支付方式 配送方式 服务声明 广告声明 <br/>
Copyright © 2005-2016 传智商城 版权所有</center></div>       </div></body>
</html>

1.2.4 总结：
【CSS的其他选择器】
Ø 属性选择器：
<style>
input[type="text"]{
background-color: red;
}
</style>
Ø 后代选择器:

div span 查找的是所有div中的所有的span元素.
h1 strong{color:red;
}<h1>This is <strong>very</strong> <strong>very</strong> important.</h1><h1>This is<strong>very</strong><em>really<strong>very</strong></em>important.</h1>
Ø 子元素选择器：
div > span找这个div中的第一层级的span元素.
h1 > strong{color:red;
}<h1>This is <strong>very</strong> <strong>very</strong> important.</h1><h1>This is<strong>very</strong><em>really<strong>very</strong></em>important.</h1>
Ø 并列选择器:
选择器,选择器{
}
【CSS的样式】
Ø 背景Ø 文本Ø 字体Ø 列表

转载于:https://blog.51cto.com/13517854/2108466

JavaWeb02-HTML篇笔记（一）相关推荐

菜鸟学Linux 第044篇笔记算法和私有CA
菜鸟学Linux 第044篇笔记算法和私有CA 证书吊销列表CRL(Certificate Revocation List ) 如何解决私钥丢失 PKI: Public Key Infrastruc ...
windows pxe 安装linux,菜鸟学Linux 第103篇笔记 pxe自动化安装linux
菜鸟学Linux 第103篇笔记 pxe自动化安装linux 内容总览 linux的系统安装 kickstart文件的组成部分 DHCP (Dynamic Host Configuration Pro ...
菜鸟学Linux 第050篇笔记 dhcp
菜鸟学Linux 第050篇笔记 dhcp DHCP (Dynamic Host Configuration Protocol) 早期bootp (boot protocol) lease Clien ...
菜鸟学Linux 第090篇笔记 corosync+drbd+mysql
菜鸟学Linux 第090篇笔记 corosync+drbd+mysql 内容总览上节回顾 DRBD (Distributed Replicated Block Device) 分布式复制块设备配 ...
菜鸟学Linux 第033篇笔记 bootloader,inittab
菜鸟学Linux 第033篇笔记 bootloader,inittab Linux 系统自启动流程 PC OS (Linux) POST-->BIOS(Boot Sequence)-->M ...
菜鸟学Linux 第052篇笔记 httpd-install and section2
菜鸟学Linux 第052篇笔记 httpd-install and section2 apache 17years NCSA, httpd A Patchey Server = Apache FS ...
Linux 日志 klogd,菜鸟学Linux 第038篇笔记日志系统 syslogd,klogd
菜鸟学Linux 第038篇笔记日志系统 syslogd,klogd Linux上的日志系统 syslog开源 syslog-ng 商业版日志系统 syslog syslog 服务 syslog ...
python采用pika库使用rabbitmq总结，多篇笔记和示例
这一段时间学习了下rabbitmq,在学习的过程中,发现国内关于python采用pika库使用rabbitmq的资料很少,官网有这方面的资料,不过是都英文的.于是笔者结合自己的理解,就这方面内容写了一 ...
菜鸟学Linux 第034篇笔记 vmlinuz, initrd, modules, script
菜鸟学Linux 第034篇笔记 vmlinuz, initrd, modules, script 内核两部分核心 /boot/vmlinuz-version 内核模块 /lib/modules/ ...
菜鸟学Linux 第031篇笔记 script,控制,while,function
菜鸟学Linux 第031篇笔记 script,控制,while,function 一.脚本需求: 说明:此脚本能于同一个repo文件中创建之个yum源的指向: 1.接受一个文件名作为参数,此文件存放 ...

JavaWeb02-HTML篇笔记（一）

JavaWeb02-HTML篇笔记（一）相关推荐

最新文章

热门文章