黑马程序员技术交流社区

标题: 【石家庄校区】JavaWeb学习之路-2 [打印本页]

作者: htb52110 时间: 2017-11-20 22:31
标题: 【石家庄校区】JavaWeb学习之路-2
本帖最后由 htb52110 于 2017-11-20 23:38 编辑

第二天
1.[HTML框架标签]
框架标签:<frameset >,标签与body标签是冲突,有frameset就可以没有body.
* 属性:
* rows
* cols
使用<frame>标签，frame代表切分的每个部分.
在frame中可以添加name的属性,可以在链接里进行跳转.

2.常用标签
<div> <span> <a> <i> <ul>

3.<table>标签有缺点:不能轻易的挪动位置,不灵活
4.[HTML的块标签]
块级元素和行内元素
div 块级元素：独占一行，可以修改高度和宽度
span 行内元素：不独占一样，不可以修改高度和宽度
块级元素:<DIV></DIV> 可以修改高度和宽度块级元素转行内元素添加属性:display:inline;
行内元素<span></span>不可以修改高度和宽度行内元素转块级元素添加属性:display:block;
行内块级元素:

5.div和table的区别
div比较灵活,解析速度较快
6.CSS

Html相当于网站的骨架!CSS对骨架进行美化!

主要用途:
任何网站都会使用CSS去每美化页面
如何使用CSS:
知道CSS的基本语法
7.[CSS的基本语法]

8.[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" />

外部引用方式:多个HTML页面引用相同的样式
页面内部引用方式:同一个HTMl中多个标签使用相同的样式
行内样式:只有某个标签自己使用
9.[CSS的选择器]
选择器:能够找到元素的标记
基本的选择器:
  元素选择器：
div{
border:1px solid blue;
width:40px;
height:45px;
}
  ID选择器:
#d1{
border:2px solid red;
}
  类选择器：
.divClass{
border:2px solid yellow;
}
选择器的优先级是: ID选择>类选择器>标签选择器
10.[CSS的浮动]

为了让某些标签(块级元素,div,li)横向显示
如何使用浮动:                      float:left,right
清除浮动的方式:
      1.在浮动的元素后面添加       <div clear:left/rigth/both></div>
2.在浮动的元素的父元素添加一个样式 clearfix

11.CSS中的继承问题:
在CSS中宽度可以继承,高度不可以继承
注意:浮动以后的元素是不会继承宽度的.

12*在CSS中让DIV的位置居中的代码样式`margin:0,auto;`

13*像素的百分比和px的计算
calc(50% - 4px)[注意在减号两边会有空格,不然会出错!]
14.[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>
  并列选择器:
选择器,选择器{
}

15.[css的样式]
背景

文本

16.[css中的盒子模型]

内边距

边框:border
外边距:margin

盒子的宽度计算方式=padding-left+padding-right+border-left+border-right+content;
17.[css中的定位]
position属性设置定位：
* relative:相对定位
* absolute:绝对定位
使用另外两个属性:left,top
使用定位的时候:子绝父相(里边的是绝对定位,外边的是相对定位)[绝对定位:默认是body;相对定位默认是父标签]
fixed制作广告的时候使用

18.伪类
:link;                   未访问的链接
:visited;                以访问的链接
:hover;                鼠标移动到链接上
:active;             选定的链接

19.补充
浮动
      为什么要使用浮动？为了让某些标签(块级元素，div，li)横着显示
      如何使用浮动? float:left
      如何清除浮动? 两种
            1.在浮动的元素后面添加<div style="clear:both">  不建议使用
            2.给浮动的元素的父元素添加一个样式 clearfix
            <div class="clearfix">
                     <div  class="w-500 h-100 bg-red f-left"></div>
                     <div  class="w-500 h-100 bg-gray f-left"></div>
                     <div  class="w-500 h-100 bg-hotpink f-left"></div>
            </div>
CSS中的继承问题
      在CSS中宽度是可以继承，高度不可以继承
      注意：浮动以后的元素是不会继承宽度的

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2