javaweb_day01 学习笔记 —— html、css

1. html

• 浏览器解析执行

• 作用： 显示数据

• 结构：（不区分大小写）
  

2. 常用标签

2.1 < br>换行 < p>段落

2.2 < h > 设置标题

2.3 < img > 图片

2.4 < a >超级链接

2.5 < table >

• < tr >： 行
• < td > ：表格单元
• < th > ： 表头
• rowspan：跨行
• colspan： 跨列
  
  

2.6 列表

• 自定义列表 ：

  • dl : 创建一个列表
  • dt : 列表标题
  • dd : 列表内容

• 有序列表 ：

  • ol : 创建一个列表
  • li ： 列表内容

• 无序列表 ：

  • ul : 创建一个列表
  • li ： 列表内容

  list-style ：设置没有符号（小圆点等）

3. 表单< form>

• action：表单提交之后的后台处理程序的名称 。

• method：表单常用提交方式 ：get、post
  只有method="post"时是post请求,其余都是get请求。

  get、 post 区别：
  get请求：数据在url上传递，不安全，数据传递大小 1kb 4kb
  post请求：数据通过体部传递，安全，可提交的数据量大。

• 格式：
  < form action=" " method=" " >

• 表单里的常用组件：

  • < input type=“text / password / radio / checkbox / button / submit / reset / file / hidden / email”>
    • hidden必须有name和value
    • 其他的必须有name
    • radio尽量要有默认值
  • < textarea>
  • < select>下拉列表
    < option value=“1001” >北京市

4. css: 层叠样式表

• 作用：美化页面（网站）

4.1 使用css的三种方式

（1）内嵌式 < p style=” ” >
（2）style标签对 < style> p{ } < /style>
（3）引入外部的文件*.css
p{
color:blue;
}
< link rel=“stylesheet” href=“css/test1.css”>

4.2 选择器的定义及使用

1. 元素选择器
   格式：
   选择器的名称是html的标签名{
   样式的集合;
   color : red ;
   font-size : 12px ;
   }
   使用：匹配html 的元素

2. 类选择器（可重复使用）
   格式：
   . 类名{
   }
   使用：< p class=”类名”>

3. id选择器（不能重复使用，只能使用一次）
   格式：
   #id名{
   }
   使用：< p id=”id名”>

4. 后代选择器（子孙选择器）
   格式：
   .div1 p{
   font-size:12px;
   color:#0000ff;
   }
   后代选择器（子孙选择器） 子代的p和孙代的p都可使用

5. 子选择器
   格式：
   .div1 > p{
   font-size:12px;
   color:#0000ff;
   }

6. 分组选择器
   格式：
   .div3,p,#p1{
   font-size:12px;
   color:#0000ff;
   }

7. 兄弟选择器（要有共同父容器）
   div + p （只影响一个p）
   div ~ p (影响所有p)

4.3 盒子模型(内边距 外边距)

内容+内边距+边框+外边距

• padding: 50px;
  内边距上、下、左、右都是50px
• padding: 10px 20px ;
  内边距 上下10 左右20px
• padding: 10px 20px 30px 40px;
  内边距 顺序：顺时针 上 、 右 、下 、 左
• padding: 10px 20px 30px;
  内边距 顺序： 上 、 左右 、 下

4.4 块级元素和行内元素

• 块级元素：
  特点：独立一行，可以设置宽高，内外边距的上下左右边距
  eg: < div>、 < p> 、 < li> 显示在下一行

• 行内元素：
  特点：可以在一行显示多个元素内容，宽高对行内元素不起作用，外边距的上下不起作用。
  eg: < a> 、 < span> 、（比较特殊的两个< input> < img>，可以设置宽高）

4.5 文本样式

line-height：值和容器高度相同时，则居中对齐

4.6 背景

4.6.1 背景颜色

4.6.2 背景图片

4.7 边框

border: 1px solid blue;

4.8 浮动

• 文档流：按顺序显示组件
• 脱离文档流（浮动）：飘起来

float: right / left;

• 设置为浮动后，组件可能被覆盖，但文字内容不会被覆盖。
• 块级元素和行内元素都变为块级元素 。

clear: both; 清除浮动

4.9 定位

4.9.1 绝对定位 absolute

• 相对于父容器的，如果没有，则父容器是body
• 可以作为定位的父容器的条件：
  • 必须有position属性，并且值为absolute、relative、fixed其中一个
• 如果两个容器绝对定位的属性值相同，那么后一个会覆盖前一个，包括文字
• 绝对定位的组件会随着窗口的滚动移动。

4.9.2 z-index属性

控制两个容器的上下位置，谁的值大，则谁在上面

4.9.3 相对定位 relative

• 相对于文档流中自身的相对定位
• 保留组件文档流的位置

4.9.4 视口定位 fixed

• 相对于视口的定位
• 不随着窗口的滚动而移动

4.10 高度塌陷

两个容器中，内部容器的margin-top失效。

• 解决方案：
  • 在外层容器中添加文字
  • 在外层容器中添加border
  • overflow
  • 将margin-top替换为padding-top

4.11 自适应

用%方式设置大小