HTML+CSS学习笔记
超文本标记语言
基础标签
根标签<html></html>
head标签
不会展示的
title标签 标题栏内容
<meta charset='gbk2312' name='duyi' des='jiaoyu'></meta>
本页面的字符集
主题
描述
可用于竞价排名等
body标签
会被展示给用户的
p标签 段落 用于文字展示
h标签 文字标题
em 字体倾斜
文字分隔符 换行和空格
span 容器标签，占用一列
div 容器标签，占用一行
border:xxpx solid 实线
空格
<%gt HTML编码大全
ol li ul 列表 type （1 a ...） start=x reversed逆序 ul的style:none cycle ...
img alt补救描述 title悬停 描述
a href="mileto:xxxx@xxx" phoneto 手机端
table border cellspacing cellpadding table必须全部加载完才能显示
form 前后端通信
method='GET' action='./'
input radio单选框 checkbox复选框
select options
css文件
行间
内联
link link rel='stylesheet' src=''
选择器
标签选择器 div{}
类选择器 .xxx{}
ID选择器 #xxx{}
通配符选择器 *xxx{}
属性选择器 [aaa='xxx']{}
!importent无穷>内联1000>id100>class10>标签1
某项属性取极值，不是取最值
父子选择器
并列选择器 ?
分组选择器 aa,bb,cc{}
参考手册 css88.
span 一般用来给文本赋予样式
对齐属性给父级元素定义，其他自己定义
折行 一串字母自动被当做单词解析，所以不折
text-indent 首行缩进
text-decoration 划线
color rgb(a,b,c)
cursor pointer(鼠标指针变小手)
伪类选择器 span:hover(鼠标悬停的..) 权重为10
行块元素
行级
独占一行（高度自适应），可以设置宽高
div p ol ul li address
块级
根据自身内容决定所占据的空间，不能设置宽高
span a em strong del
自定义
display:inline;（行级） block块级 img是inline-block，行级块元素，类似于文本
vertical-align:bottom;middle top oopx; 给行级元素加后，后续文字以该行级的底部对齐
盒模型
weight height（content）padding(垫料) boder(壳) margin(间距)
padding-left right top bottom 可以分别设置 margin同理 *{ 0px;}可以清空所有默认
border-width style（solid实线等样式） color等 也可以单侧设置
margin塌陷 解决：1.外层加border-top 2.bfc block format ccontext overflow:hidden
display:inline-block; 3.position:absolute;
margin合并 上下取大值 左右取和值 解决
position:absolute;（绝对定位）该元素脱离原来的层面
z-index：x;
left: xx px top:xx px 定位左下，以元素左下角为基准，定位右上则以元素右上角为准
定位可以用auto代替xx px
绝对定位的元素参照距离他最近的有定位的父级进行定位
position:relative(相对定位，相对于原来的自己定位)
两栏布局 容器中央 悬挂广告
position:fixed 固定定位 完全参考与浏览器设备窗口定位
浮动
float
加上后元素的块级规则不再使用
1.凡是产生bfc元素都能看见浮动层上的元素 2.凡是具有文本特征的元素都能看见浮动层上的元素
bfc规则后续需要单独学习
clear:both ？？？
span::before{content:'he is'; } 能证明标签前后本来就有隐藏的伪元素，也可以操作
图文混排 给img加样式 float:left;
文字溢出要打点展示
单行 white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
多行 overflow:hidden 设置容器和文字高度成整倍数
企业开发经验
行级元素只能嵌套行级 块级元素什么都能套 p标签除外，p不能套div a标签不能套a
float或者positionab:solutely 都会把元素自动转换为行级块元素，可以设置宽高
文本类元素 如果文本类元素里面还有文本，后面会与内层的文本对齐 vertical-align:10px
可以让文本对齐线移动
浙公网安备 33010602011771号