在黑马已经学了半个多月了 在这里学习氛围特别好 而且同学们都是冲着找工作学技术来的 所以都是爱学习的人老师也特别好说话 和学生打成一片 而且老师讲解也特别用心 你如果听不懂老师还可以给你特别帮助 帮你解决你的问题 老师的标签就是不怕你问的多 就怕你不敢问辅导员也特别好 说话又好听 帮助同班同学 也是非常的棒 而且生活的事情也可以寻求辅导员的帮助 是非常的棒的地方
一下是小弟在黑马做的前段笔记
web标准 标签 img标签 链接标签 特殊标签符号 table表格 列表标签 表单按钮标签 表格域 css复合选择器
css样式 css选择器 font字体 css外观 背景颜色和图片 盒子边框 浮动 定位 css高级技能
滑动门
web标准
结构
表现
行为
html格式
标签
h1-h6标题标签 逐渐变小
p段落标签
hr水平线标签
br换行标签
div 表示一个盒子
span 表示一个盒子
文本格式标签
推荐用右边的
b stong文本加粗
i me 倾斜
s del删除线
u ins下划线
img标签
格式 img src="路径" ait="图片没有时上面的字" title="鼠标停在图片上面时显示的字" width="宽"height="高度" border="边框大小"
src 图片的路径
alt 图片不能加载
title 鼠标停住时显示文字
width 图像宽
height 图像高
border 边框宽度
链接标签
格式 a href="地址"target="self"或者"blank"
href 地址
target 打开方式 里面可以加self(在本窗口打开)和_blank(新建窗口打开)
路径 /表示下一级 ../表示上一级 ../../表示上上级
锚点链接 a href="#id" 链接地址
统一链接默认打开方式base target="_blank"
预格式化标签pre---你输入的什么就是什么的双标签
特殊字符
空格 ;
小于号 &it ;
大于号 > ;
和号 & ;
人民币 ¥ ;
版权 © ;
注册商标 ® ;
摄氏度 ° ;
正负号 ± ;
乘号 × ;
除号 ÷ ;
平方二(上2标) ² ;
平方三(上3标) ³ ;
视频笔记1前言和web标准
视频笔记2认识html
视频笔记3html常用标签
课堂笔记课堂笔记
知识点在文件夹里面
table表格
表格标签格式
表格属性tr是行td是行里面的单元 th是表头单元格 captions是表格标题标签
table应用
属性 含义 常用单位
border 边框 px
cellspacing 设置单元格边框之间的空白距离 px(默认2)
cellpadding 设置单元格内容与单元格边框之间的空白距离 px(默认1)
width 宽 px
height 高 px
align 水平对齐方式 left(左)center(中)right(右)
合并看注释
表格标签总汇
表格标签总汇
标签名 定义 说明
table 表格标签 像一个盒子
thead 头部标签 表示这是头部标题部分
tbody 中间内容标签 表示中间所有内容
tfoot 尾部标签 内容的尾部部分
tr 表格标签 这是行标签 只有在table标签里面才有意义
td 单元格标签 在这里面放内容
th 表头标签 居中加粗
caption 表格标题标签 表格的标题
clospan和rowspan 合并标签 用来合并单元 上下左右循序 在td里面
table里面必须要有tr
合并单元
列表标签
ul
无序
里面只能包含li
ol
有序
里面只能包含li
dl
自定义
里面可以包含dt和dd dt是上面的 dd是dt下面的
表单按钮标签
格式 input type="" name="" value=""
name的用法是区别名字,除了复选框其他的标签如果name值是一样的那就会变成单选
图片按钮的使用方式 input type="image" src="" name=""
laber标签是当鼠标点到laber标签内容时被绑定表单元素获得输入焦点
密码
包含法
密码
for id法
`
属性 属性值 描述
type text 单行文本输入框
passwodr 密码框
radio 单选按钮
checkbox 复选框
button 普通按钮
submit 提交按钮
reset 重置按钮
image 图像样式的提交按钮
name 用户自定义 控件名称
value 用户自定义 input控件中默认文本
size 正整数 input控件中显示的
checked checked 定义选择控件默认被选中
maxleength 正整数 控件允许输入最多字符数
双标签 laber 点击标签内容弹到输入框
textarea 文本域(评论框)
下拉列表
格式 select option /option /select
示例 selected表示默认
button标签可以在里面加图片
form表单域
格式 form action="url地址" method name /form
属性 属性值 作用
action url地址 用于指定接收并处理表单数据的服务器的url地址
method get/post 用于设置表单数据的提交方式,并取值为get或post
name 名称 用于指示表单名称 以区分同意页面的多个表单
表格 table
列表和表单
课堂笔记
css样式
行内式(内联式)
内嵌式(点击看格式)
外链式(点击看格式)
css选择器
标签选择器(选的是div li之类的)
类选择器(.class 在"里面可以有多个class")
id选择器(#id=)
通配符选择器(* 表示选全部内容)
font字体
font-size--字体大小
单位
font-family--字体 可以用多个字体,用"",进行隔开
字体名称
font-weight--字体加粗
weight属性
font-style--字体风格
字体风格属性
快捷写法 font:风格 粗细 大小 字体(必须要有大小和字体不然不能连写 循序不能换)
css外观
color--文本颜色
line-height--行间距
text-indent--首行缩进
text-decoration--文本的装饰
text-align--文本对齐方式
课堂笔记
css符合选择器
后代选择器(空格)
子代选择器(<)
交集选择器(不要空格)
并集选择器(,)
伪类选择器(: 循序是lvha)
display标签显示模式
block-level块级元素
独占一行
高宽可控
默认宽100%
是一个盒子容器 可以放各种行内或块级元素
inline-block行内元素
所有东西在一行上 可以显示多个
高宽无效
默认宽是本身宽
里面只能放文本或其他行内要素
inline-block行内块元素
和相邻的行内块在一行上
默认宽是自身宽
高 宽 内边框 外边框可以控制
display:inline块转行
display:block行转块
display:inline-block转换为行内块
背景颜色和背景图片
背景平铺
背景位子
背景附着
背景简写
背景透明
背景总结
CSS3大特性
层叠性
继承性
优先级
盒子边框
边框样式
边框写法
表格的细线表格边框
内边框
padding不会撑开盒子
box-sizing:border-box
外边距
盒子居中 如果父级盒子有宽度就用margin-auto
行内元素居中用text-align:centen; 文字marign只可以设置左右 上下两个元素相遇去大的边距 margin-bottom
插入图片和背景图片的区别
<
盒子内塌陷
去掉列表默认样式(li前面的小点之内的)
list-style:none
圆角边框
矩形设置高度一半
盒子阴影 格式=(box-shadou:(水平位置)15px(垂直位置)15px(模糊距离)30px(阴影尺寸)(阴影颜色)rgba(0,0,0,0.1)
浮动语法
<
浮漏特口诀
清除浮动
额外标签法(隔墙法)之最后一个盒子后面加一个空div
给父级添加overflow
hidden是超过盒子大小会隐藏 scroll表示溢出出现滚动条 auto表示没溢出照旧 溢出滚动条
使用after伪元素
使用after双元素
浮动总结
定位position
定位=定位模式+边偏移
边偏移
定位模式
静态定位
相对定位(原位置还是占地方)
绝对定位(父级没定位就按浏览器定位 不占位置)
子绝父相
固定定位
堆叠循序(z-index:整数)
定位改变display
矩形圆角循序
定位总结
<
css高级技能
元素的显示与隐藏
display显示
visibility可见性
overflow溢出
显示与隐藏总结
鼠标样式
轮廓线
文本域防止拖拽
用户界面总结
vertical-align 垂直对齐
去除图片底部空白缝隙
溢出的文字省略号表示
text-overflow文字溢出
滑动门
z-index: 10;(让图层显示在最外面)
千万不要把类名写错了
ico小图标
网站优化3大标题
title标题
Description网站说明
keywords关键词
字体图标
icomoon
icon font字库
引入字体图标
@font-face { font-family: 'icomoon'; src: url('../fonts/icomoon.eot?7kkyc2'); src: url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?7kkyc2') format('truetype'), url('../fonts/icomoon.woff?7kkyc2') format('woff'), url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg'); font-weight: normal; font-style: normal; }
logo优化
logo里面放h1 h1里面放a
title溢出
text-indent:-9999 overflow:hidden font-size:0
变成圆
实心圆给背景 空心给边框
过度
transparent 透明单词
链接里面不加# 加javascript:; 可以让链接可以点击 |
|