黑马程序员技术交流社区

标题: 前段的学习经历以及前期笔记 [打印本页]
作者: 小高aaaaaa    时间: 2019-4-23 14:37
标题: 前段的学习经历以及前期笔记
在黑马已经学了半个多月了 在这里学习氛围特别好 而且同学们都是冲着找工作学技术来的 所以都是爱学习的人老师也特别好说话 和学生打成一片 而且老师讲解也特别用心 你如果听不懂老师还可以给你特别帮助 帮你解决你的问题 老师的标签就是不怕你问的多 就怕你不敢问辅导员也特别好 说话又好听 帮助同班同学 也是非常的棒 而且生活的事情也可以寻求辅导员的帮助 是非常的棒的地方  
一下是小弟在黑马做的前段笔记
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:; 可以让链接可以点击



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2