在浏览器中会把,多个换行,或是多个空格当做一个空格来处理
1.html:
h1-----标题标签
只有h1-----h6;
h1 -- 一级标题标签
h2 -- 二级标题标签
以此类推到h6
*h1在一个页面当中只可以用一次
p------段落标签
会自带默认的行距,空白部分;
br ----换行标签
a-----超链接
<a href="链接地址"></a>
<img src="" /> 图片标签
src(图片源)
div---- 一个容器,一个盒子,一张白纸
strong (加粗)加重说明
b (加粗)
em (倾斜)加重说明
i (倾斜)
span (空标签)
单标签
br
img
<标签名 />
双标签
h2 p a
起始的标签 结束的标签
<标签名> </结束标签>
2属性:
href 超链接地址
title 文本提示(提示文字)
alt 文本替换
width 宽度
height 高度
src 图片源
border 边框
style 样式
私有属性:
href
width
height
alt
src
公有属性:
title
style
(写法)
属性名=" 属性值"
3.css:
样式名:样式值;
需要写在style里
width:300px; 宽度
height:300px 高度
border: 边框
border-width: 边框的宽度
border-style: 边框的线性
border-color: 边框的颜色
background: 背景
background-color:背景颜色
background-image: 背景图
background-repeat: 背景图平铺
-----no-repeat 不平铺
-----repeat-x x轴平铺
-----repeat-y y轴平铺
background-position: 背景图定位
x y;
(背景图缩写)background:图片路径 平铺 背景图定位;
color: 文本颜色
text-align: center; 文本水平居中
right
left
line-height: 文本的垂直居中(文字纵向居中)行高
写高度
font-size (文字大小)
font-style:italic (文字倾斜)
normal---不倾斜
font-weight:bold (文字加粗)
normal---不加粗
font-family: (字体)
英文
中文
unicode
white-space:nowrap; (文字不换行)
overflow:hidden; (溢出隐藏)
text-overflow:ellipsis; (省略号)*缺一不可,而且要设置宽度
text-decoration:none; (取消下划线)
underline (下划线)
overline (上划线)
line-through(中划线)
text-indent (文本缩进)
单位
px
em
%
写在标签里面的叫做‘行内样式’
拿到style标签里的叫做‘内联样式,内部样式’
border的缩写:
border:边框的宽度 边框的线性 边框的颜色;
线性有:
solid 实线
dashed 虚线
dotted 点画线
颜色:
写英文:
red
green
blue
十六进制:
#3385ff
#0 f 0
如果三对不一样的话不可以缩写
rgb:
rgb(0-255,0-255,0-255)
4.引入图片的地址分为两种:
绝对路径:
file:///C|/Users/Administrator/Desktop/什么文件
相对路径:
../images/淘宝-用背景别用border.png
路径不要出现中文
5.文档构成:
<!doctype html>
document type html
文档 类型 html
过渡型 严格型
head 文档头
<meta charset="utf-8">
unicode编码
utf-8 国际编码
gb2312/gbk 中国编码
<meta name="author" content="作者" /> 作者
<meta name="copyright" content="版权" /> 版权
<meta name="description" content="描述" /> 描述
<meta name="keywords" content="关键字"/> 关键字
<title>标题</title> 标题
5.XHTML:
文档必须要有文档头
所有的标签都要用小写英文来写
html需要用双引号(英文)
img标签必须有alt属性
双标签必须要闭合标签
单标签需要合理闭合
6.字体继承:
颜色
字体大小
文字加粗
倾斜
字体
双下划线
行高
* a标签不可以继承颜色;
strong和b不会继承加粗
em和i不会继承倾斜
7选择器:
标签选择器
div h2 p span
class选择器(类选择器)
calss="起的小名,名字"
。
ID选择器
id="大名"
#
通配符选择器
*
嵌套选择器
div空格 p
群组选择器
div逗号p
* class可以起很多个
id 只可以有一个
* < p < class < id <行间
0 10 100 1000
8.标签特性
行标签:
1,不可以设置宽高
2,并到一行
3,会受到换行或是空格影响
4,宽度是内容的宽度,根据内容来撑起
块标签:
1,可以设置宽高
2,独占一行
3,不会受到换行与空格的影响
4,不设置宽度,宽度就是父级的宽度
行内块:
1,可以设置宽高
2,会并到一排
3,会受到空格与换行影响
块标签:
h1---h6
p
div
行标签:
a
strong
b
em
i
span
行内块:
img
行,块,行内块的转换
display:block 转换成块
display:inline 转换成行
display:inline-block 转换成行内块
块标签可以包任何标签
p标签只可以包行内
行标签只能包行标签(*不可以包自己)
a可以包任何标签
什么都可以包这个img
9.语义化:
像说话一样写代码;
有语义化:
h1-h6
p
img
a
strong
em
无语义化:
div
span
b
i
10.列表:
有序列表<ol>
<li></li>
<li></li>
</ol>
无序列表
<ul>
<li></li>
<li></li>
</ul>
描述列表
<dl>
<dt></dt>
<dd></dd>
</dl>
list-style:none; 清除列表自带样式
*第一个电脑自带的不方便使用,需要自己写。
*需要把自带的默认样式清除掉,自己写。
11.盒模型:
width
height
border
padding
***
margin不算盒子
12.padding与margin
padding (内边距)
:边框到内容的距离
margin (外边距)
一个盒子到另一个盒子的距离
关于padding:
padding: 5px; 上下左右
padding:100px 50px 上下 左右
padding:20px 60px 100px; 上 左右 下
padding:20px 60px 80px 120px; 上 右 下 左
padding-top:50px; 每一个方向,只给一个单独的值
padding-left:50px;
padding-right:50px;
padding-bottom:50px;
*** 给了padding就要用宽高来减去这个padding 的距离
如果没有设置宽高就不需要减掉;
*** 行标签只可以给左右的padding
关于margin:
margin:5px; 上下左右
margin:100px 50px 上下 左右
margin:20px 60px 100px; 上 左右 下
margin:20px 60px 80px 120px; 上 右 下 左
*** 行标签只可以给左右的margin
*** 写代码之前必须清除默认的样式
*{
margin:0;
padding:0;
}
margin的BUG:
***拖拽父级(塌陷)
解决的办法如下所述:
overflow:hidden;
border:1px solid #000;
padding-top:50px;(推荐)
***margin合并
解决的办法如下所述:
给单一方向加上你想要的距离(取最大值)
margin负值:
left or right 不能设置宽
top or bottom 不能设置高
*padding不可以给负值
小图片的格式:
jpg 占据的内存小
png 内存大 透明
psd 有图层的
gif 动态,透明
13.浮动:
float: 浮动
float:left 左浮动
float:right 右浮动
说说这个浮动的特性:
是一个有方向的;
变成了块;
并到一排;
顶对齐;
宽度不够会掉下来;
脱离文档流;
*加上浮动的元素只会对下面的元素有影响
*文本环绕
加浮动必须得:
只要有一个标签加上了浮动,同级的标签都要加浮动
加上浮动就必须清浮动(只能写在父级)
overflow:hidden;
一定要设置宽度,不给宽度会是内容的宽度
清浮动:
overflow:hidden (溢出隐藏)
*给父级加
<div style="clear:both"></div>*必须用块标签
单独再写一个块标签,给这个块标签加上一个clear:both;
*清除掉左右浮动
.clearfix:after{
display:block;
clear:both;
content:"";
}
.clearfix{
zoom:1;
}
*给父级加
14.伪类选择器:
:after
:link (未访问)
:visited(访问过)
:hover (鼠标移入)
:active (鼠标按下)
link visited hover active
lvha
只有a标签才可以加这个lv
ha都可以加
15.定位:
position: 定位
absolute; 绝对定位
*脱离文档流
*把元素变成块
*根据body来定位的
top:;
left:;
right:;
bottom:;
position: 定位
relative;相对定位
*本身的还在站位
*并不会改变元素
*根据原先的位置来定位(自己)
top:;
left:;
right:;
bottom:;
position:fixed; 固定定位;
根据可视区来定位的;
脱离文档流
------------------(2)
z-index (层级)
{可以写正数也可以写负数}
普通元素<浮动<定位
*定位,后写的比先写的层级高
咱们定位是好用;但是不能多用,能用浮动的就用浮动,用不了再用定位
pacity:0.5; 透明
0-1
filter:alpha(opacity:80);兼容IE(透明)
0-100
*文字不能写透明里面(如果文字也透明了)
外联样式(外联样式表)
<link href="css/index.css" rel="stylesheet"/>
16.表单:
提交数据
<input type="text" class="txt" />
(明文输入框)文本输入框
placeholder 占位符
<input type="submit" value="百度一下" />
submit提交按钮
value可以改变按钮文字
<input type="password" name="num"/>
(密文输入框)密码框
<form action="模拟百度.html" method="get"></form>
action 数据提交的地址
method 提交的方式
get 地址栏 不安全
post 后台 相对安全一点
name---------想提交必须给它一个名字
<input type="checkbox" />复选框
<input type="radio" name="sex" id="id"/>单选框
*(用相同的name)
<label for="nv">女</label>
for="ID"
<select>
<option>下拉框内容</option>
</select>
下拉框
<input type="button" value="关闭" />普通按钮
<textarea></textarea>文本域
vertical-align: 垂直对齐方式
middle; 居中
top; 上边
bottom 下边
outline:none; 取消焦点
resize:none; 取消文本域拖拽
17.table
<table border="1" (边框)cellpadding="0"(清除单元格默认padding)cellspacing="0"(单元格间距)> 表格
<thead> 可省略
<tr> 行行
<th></th> 头列
</tr>
</thead> 表头
<tbody> 不可以
<tr> 行行
<td></td> 身列
</tr>
</tbody> 表身
<tfoot> 可省略
<tr> 行行
<td></td> 尾列
</tr>
</tfoot> 表尾
</table>
border-collapse:collapse; 取消间距
colspan="3" 行的单元格合并
rowspan="2" 列的单元格合并
如果没有内容,要个高度与宽度(因为不设置宽高的话它是根据内容撑开)
18.框架
溢出的部分变成滚动条:
overflow:scroll;
X部分溢出隐藏,Y轴变成滚动条:
overflow-x:hidden
框架
后台管理系统;
框架 <iframe></iframe>
<iframe src="../小米/index.html" scrolling="no" width="500" height="500" frameborder="0">
</ifra>
src="引入地址"
scrolling="no"(取消自带滚条)(写样式不好使)
frameborder="0" 取消边框
--------------------------------------------------------
框架集:
<body>
<frameset>
</frameset>
</body>
***在一个页面中要是有frameset就不能有body
<frameset rows="200,*">
<frame src="../小米/index.html" />
<frame src="../小米/index.html" />
</frameset>
<frameset cols="150,*">
<frame src="../小米/index.html" />
<frame src="../小米/index.html" />
</frameset>
网友评论