html5和css 初步学者应用笔记

HTML 超文本标记语言
标签：是由一对 <> 构成的，有开始、有结束。
html架构：
<!doctype html>

网页的名称、网页的样式css、网页相关的js、网页的编码

书写要学习的标签（内容）

例子1：
<!doctype html>

hello world

hello world

例子2：设置中文编码
!doctype html>

hello world

哈哈哈

（1）网页的编码
（2）网页文件的编码

标签：
块标签：单独占一行

1.标题标签从1到6 文字大小依次变小

2.水平线

3.段落标签

4.无序列表

5.div 布局标签

6.换行标签

行标签：不单独占一行
7.span 标签对文字起强调的作用

8.a标签
（1）链接
外网
内网
（2）锚链接链接到一个确定的位置
位置锚点
去锚点
回到顶部
(3)空链接
9.图片标签

10.音频标签
<audio src="音频的地址" autoplay controls >
11.视频标签
<video src="视频的地址" autoplay controls>

CSS层叠样式表：
1.行内样式表
在标签的开始元素里面添加 style="" 属性

在style="样式名:样式值;样式名:样式值;样式名:样式值;...."

字体样式：
字体粗细 font-weight:bold;
字体大小 font-size:像素值; 像素值=数字+px 如 24px
字体倾斜 font-style: italic; normal
字体下划线 text-decoration:underline ; 上划线 text-decoration:overline ; 删除线 text-decoration:line-through ; 去掉线 text-decoration:none;
字体颜色 color: red; 英文表示颜色 16进制颜色 #000-#fff 第一位代表红第二位代表绿第三位代表蓝 #000000-#ffffff rgb颜色 rgb(0,0,0)-rgb(255,255,255)
字体 font-family:'宋体'
字体水平位置 text-align: right; left center
背景样式
背景颜色：background-color: green; 英文 16进制 rgb
背景图片：background-image:url(图片的地址) ;
背景图重复：background-repeat:no-repeat ;
背景图大小：background-size:100% 800px; 第一个值控制宽度第二个值控制高度表示像素值百分比
背景图固定：
背景图位置：

div的盒子模型
宽度 width：像素值;
高度 height:像素值;

外边距 margin 对div的大小没有影响
margin-left:像素值;
margin-right:像素值;
margin-top:像素值;
margin-bottom:像素值;
argin-left:20px;
内边距 padding 对div的大小有影响

padding-left:像素值;
padding-right:像素值;
padding-top:像素值;
padding-bottom:像素值;

padding-left:10px;

边框 border 对div的大小有影响

border-left: 边框的宽度（像素值）边框的样式（solid、dashed）边框的颜色;
border-right: 边框的宽度（像素值）边框的样式（solid、dashed）边框的颜色;
border-top: 边框的宽度（像素值）边框的样式（solid、dashed）边框的颜色;
border-bottom: 边框的宽度（像素值）边框的样式（solid、dashed）边框的颜色;
border: 边框的宽度（像素值）边框的样式（solid、dashed）边框的颜色;

border:1px solid red;

div的实际宽度=width+内边距（左右）+边框（左右）;
div的实际高度=height+内边距（上下）+边框（上下）;
div的水平居中
margin:0 auto;
把块标签你变成行标签
float:left;
2.页内样式表
在head里面 title的下面加上：

选择器：
（1）标签选择器

(2)ID选择器 id名字不能重复出现
定义id

选择

（3）class选择器多用class 选择器
定义

选择

html中的注释：注释快捷键 ctrl+shift+/ 描述网页中标签内容

css中的注释
/**/
去掉li的点点
list-style: none;

文字垂直居中
line-height:与height保持一致;
例：
height:50px;
line-height:50px;
伪类选择器
hover 鼠标移动到某个标签上面，设置器其样式
a:hover{
color:#fff;
}
把行标签变成快标签
display:block;
通用选择器用于新建网页时，初始化网页的元素
*{margin: 0; padding: 0;}
子类选择器

充当父类选择器>充当父类的儿子{
}
.nav_div>ul>li{
list-style: none;
}

图片效果:
放大、缩小 transform:scale(放大的倍数); transform:scale(1.5);
放大镜 overflow:hidden;