html基础

HTML CSS

---

1.HTML写结构

HTML : 标签分类:

      基本标签 网页结构  head title meta link body

  文本标签 a p h1~h6 label span strong b i em del
  格式标签 br hr
  容器标签 div
  列表标签 ol ul li
  图片标签 img
  表单元素 input

块元素: h1~h6 div p ul ol li 可以设置宽高 不与其他元素共行 独占一行显示

行内元素: a span b strong em i 宽高由内容多少决定,不能手动设置,可以共行显示

行内块元素: img input 可以设置宽高 可以共行

---

2.CSS 设置样式 外观

CSS
引入方式:
行内 style属性

文档内嵌 在头部通过

选择器 (匹配标签应用样式)

标签选择器 img{} 类选择器 .leiming{}
后代选择器 div img{}

交集选择器 div.box{} 通配符选择器 *{}

伪类选择器(针对超链接不同状态设置样式) :link :visited :hover :active

CSS 属性:
-----样式外观

文本属性:
color:red;(文本颜色) font-size:16px;(字体大小)

text-align:center;(水平方向对齐方式)

line-height:30px;(一般用来设置垂直居中,行高=容器高度)

背景属性: background-color:red;(背景颜色)

background-image:url(../image/1.jpg);

background-size:cover;(背景图片大小尺寸)

background-repeat:no-repeat;(背景图片是否重复进行平铺)

background-attachment:fixed;(固定背景图片不跟随网页滚动)

基本设置: width:200px; height:200px;(设置宽高)
margin:0px;(元素与元素之间的间距--外边距)

 padding:0px;(元素内容与边框之间的距离--内边距)

其他设置: border :none;(取消边框) outline:none;(取消轮廓线)
------元素布局

布局设置: float:left;(浮动)
position:relative(absolute); top:100px; left:100px;

兼容问题:

1.行内块元素 水平方向的间隙 : 设置父元素 font-size:0;

2.行内块元素 垂直方向上对不齐: vertical-align:bottom;

网页布局模式
Div + CSS