HTML基本骨架
单表签
img input br hr link meta 剩下的基本都是双标签
文字类的标签
h1-h6 数值越大字体越小 段落标签p
字体 加粗 strong b 倾斜 i em(精灵图和字体图标等小装饰的内容 ) 删除del s 下划 ins u
多媒体标签
超链接 <a href="#"> </a> href是必写属性
target属性 +_self 默认 当前标签页打开新的页面 +_block 新建一个标签页打开新的页面
图像
<img src=" "> src属性是必写属性
title 鼠标悬停时提示显示文本 任何标签页都有这个属性
alt 图片无法加载时显示的替换文本
结构标签
列表
无序列表 ul li 有序列表 ol li 自定义列表 dl dd dt
表格
定义表格 table
属性 border边框 width 宽度 height高度 cellpadding 单元格边框和内容之间的距离 cellspacing 单元格和单元格之间的距离
align 控制整个表格的水平方向上的位置 left 默认值 center 居中 right 右
表格结构标签
caption 表格标题 thead表格头 tbody 表格体 tfoot 表格尾
基础标签
表格行 tr 单元格 td 表头单元格 th
合并单元格
rowspan 跨行合并 colspan 跨列合并
表单
form 表单域
input属性 <input type=" ">
text 默认文本输入乱搞 password 密码框 radio 单选按钮 多选一的效果需要设置相同的name属性 默认选中checked
checkbox 复选框 默认选中checked submit 提交 reset 重置 button 按钮 file 文件上传
name 表单起的名字 单选按钮多选一的效果 value按钮类的表单文案 输入框类表单的默认值
checked 单选和复选框的默认选中 disabled 禁止表单操作 maxlength限制输入最大值 placeholder 占位符
下拉选中项
select option 默认选中 给option 添加selected
文本域
textarea 禁止拖拽 resize:none;
lable 增大表单的响应面积
<lable> 用户名 ：<input type ="text"> </lable>
<lable for="username"> 用户名：<lable> <input type ="text" id ="username">
CSS
基本选择器
标签选择器 标签名 {} 类选择器 .类名{} id选择器 #id{} 通配符选择器*{}
复合选择器
后代选择器 选择器1 选择器2 {} 子代选择器 选择器1>选bing'ji择器2{} 并集选择器 选择器1选择器2 {}
连接伪类选择器
：link 未点击的链接 :visited 已访问过的链接 :hover 鼠标悬停 ：active 鼠标按压不公开
focus选择器
input:focus {} 表单元素获取焦点时应用样式 可输入的时候即可获取焦点的状态
css的三大特性
层叠性 相同选择器或者是相同权重的时候会发生样式重叠，后面设置的样式会覆盖前边设置的样式
继承性 子元素会继承父元素的一些属性 颜色color text-align font相关 line-height
a标签不能继承颜色 h标签不能继承字体大小
优先级 统配和继承0 标签选择器 1 类选择器10 id选择器100 行内样式 1000
css三种引入方式
内部样式表
优点：机构和样式部分分离，方便阅读 缺点：没有实现完全分离 可移植性，可复制性差
外部样式表：在html的head标签中利用link标签引入
优点：css样式独立存在，影响的范围比较广，整个站点都受影响，css与html结构实现完全分离
行内样式表
优点：无需写选择器，权重高 缺点：后续维护性差，没有实现结构样式分离
文字的样式
font-family 字体系列字体家族 默认微软雅黑 font-size 字体大小 默认16px
font-weight 字体粗细 400 normal 正常字体 700 bold 加粗字体 font-style字体倾斜 normal 正常字体 italic倾斜字体
font连写属性 font：倾斜 加粗 大小/行高 系列 必写大小和系列 顺序不能调换
文本的样式
行内元素与行内块元素的水平对齐方式 text-align left center right
行高 line-height 文本修饰线 text-decoration none去点文本修饰线 underline下划线 line-through删除线
首行缩进 text-indent text-indent:2em; 首行缩进2个字符
阴影
text-shadow 文字阴影 实际开发写法 text-shadow:0 0 0 #000; 打开控制台进行调试
box-shadow 盒子阴影 同理
背景
背景颜色 background-color 背景图片 background -image:url()
背景平铺 background-repeat no-repeat 不平铺 背景位置 background-position x y
背景附着 background-attachment scroll 默认 背景虽滚动条滚动而滚动 fixed 背景不随着滚动条滚动而滚动
盒子模型:content内容 padding内边距 border 边框 margin 外边距组成
相邻嵌套垂直方向上的外边距会发生塌陷
解决方法 父元素设置overflow:hidden; 父元素设置边框 父元素设置padding
border:1px(线的宽度) solid(实线) #000(颜色) ; dashed虚线 dotted点线
圆角边框 border-radius 圆形 border-radius：50%； 胶囊形：border-radius:高度的一半
元素的显示模式
行内元素 display:inline;
a span lable strong del em u i s b
特点：不能设置宽高 在一行显示 默认宽高有内容撑开
行内块元素 display:inline-block;
button input select textarea img 特点：设置宽高 在一显示行
块级元素 display:block;
div h1 p table ul li 特点：设置宽高 独占一行 默认宽度和父元素等宽
元素隐藏
display:none;隐藏占位置 display:block;显示 visibility：hidden; 隐藏占位置 visibility:visible;显示
溢出隐藏
浮动
float left right
特点 浮动的元素脱离标准流 不占位置 浮动的元素会贴顶对齐显示
浮动的元素具有行内块元素类似的特性 一般一个元素浮动了其余的兄弟也要浮动
本质 初衷解决文本绕图的问题 浮动元素不会压住标准流的文字
清除浮动的影响
定位
静态定位 position:static
相对定位 position:relative;
参考自身原来的位置进行移动 占位置 不脱标
绝对定位 position:absolute;
1没有父元素或者父元素无定位就参考浏览器进行移动 2参考最近一层有定位的父辈元素进行移动
固定定位 position:fixed;
参考浏览器可视窗口进行移动，不随着滚动条的滚动而滚动
粘性定位 position:sticky;
网页布局
字体图标
网友评论