本周学习内容:css背景和列表、css盒模型
一.HTML部分内容总结
基本框架二.1.背景样式
back-ground-color:设置背景颜色
back-ground-image:把图像设置为背景
back-rround-position:设置背景图片的起始位置
back-ground-attachment:背景图片是否随着滚动条的滚动而滚动
back-ground-reprat:设置背景图片是否重复以及如何重复
background:简写属性
2.列表样式
list-style-type:设置列表标志的类型
list-style-image:将图像设置为列表项标签
list-style-position:设置列表中列表项的位置
list-style:简写属性
3.背景图片
①设置背景图片:back-ground-image:URL、none
注:引用时要
②背景图片的重复方式:repeat:重复;no-repeat:不重复;repeat-x:水平重复;repeat-y:垂直重复
③背景图片的显示方式:background-attachment:scroll(默认值,背景图片会随滚动条滚动)/fixed
④背景图片定位:back-ground-position:百分比、值、top、right、bottom、left、center
⑤背景颜色:颜色、transparent(透明)
⑥列表项标记的位置:inside、outside
(inside:列表项目标标记放置在文本以内,且环绕文版标记对齐;outside:默认值,列表项目标标记放置在文本之外,且环绕文本不根据标记对齐)
⑦列表样式缩写:list-style:list-style list-style-position list-style-image
顺序无严格界定,之间用空格分开,list-style-image的值会覆盖list-style-type的值
4.几个概念
get:将数据直接展示在URL地址的后面,具有一定的数据限制,保密性较差,用于数据的查询与获取
post:将数据整体打包发送,发送信息数量无限制,具有保密性,修改服务器下的一些资源
在何处打开action的URL
blank:在空的页面中打开
self;在当前的页面中打开
parent,top指在框架结构下使用
用HTML搭建网页,由外向里写
三大内容、;头部、主题、页脚
对于搜索引擎h1标签是一个很重要的标签
三.盒子模型
1.概念:盒子模型用来“放”网页中的各种元素;网页设计内容,如文字、图片等元素,都可使盒子(或者盒子的嵌套)
2.属性
宽高属性:width:长度值、百分比、auto
最大宽度:max-width:长度值、百分比、auto
最小宽度:min-width:长度值、百分比、auto
用于设置块级元素和替换元素的内容高度(eg:p标签内的内容是一个块级元素,占据一整行内容)
注:min-height:表示设置的最小宽度不能小于这个设定的值
max-height:设置宽度的最大宽度
当最大宽度值小于最小宽度值时,以最小宽度值为准进行展示
宽高属性中,若只设置一个,另一个默认为auto(有具体的内容来决定)
替换元素与不可替换元素
不可替换元素如p标签,直接将内容显示在浏览器上
对于图片,通过CSS样式和属性设置其宽度或者高度的某一个,宽高属性会根据具体设置进行等比例缩放
对于图片即通过CSS样式来设置它的高和宽,又通过属性来设置它的高和宽,最终展示的样式为CSS样式中的对应设置
边框属性
如果不设置border-style,border-color和border-width属性值的设置将无效
①border-width:thin、medium、thick、长度值
②边框缩写:border:宽度 样式 样色
不同方向:border-top/bottom/left/right:宽度 样式 颜色
(设置之后对于四个表明来说就是有分别的)
padding属性盒模型内容到边框之间的距离
①内边距属性:padding-top:长度值、百分比,其他三个方向如例
但是值不能为负
②盒模型在网页中所占的空间,不单与width和height有关,还与padding有关
(每当设置一个padding值,盒模型的对应宽或高属性会增加)
③内边距属性的缩写:
padding:值1 (四个方向值都为一)
padding:值1 值2 (上下=值1 ,左右=值2)
padding:值1 值2 值3 (上=值1,左右=值2, 下=值3)
padding:值1 值2 值3 值4 (分别对应上下左右的值)
四.几个概念
1.AJAX
Ajax (异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术
XML:可扩展标记语言,用于标记电子文件使其具有结构性的标记语言
(baike.baidu.com/item/可扩展标记语言/2885849)
Ajax = 异步JavaScript和XML(标准通用标记语言的子集)
Ajax 是一种用于创建快速动态网页的技术
Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面
2.在前端开发中,什么是页面渲染?
www.zhihu.com/question/2011741
blog.csdn.net/buzhibujuell/article/details/68952370
渲染引擎(Rendering engine):负责解析用户请求的内容(如HTML或XML,渲染引擎会解析HTML或XML,以及相关CSS,然后返回解析后的内容)
3.BOOTSTRAP(web框架)
Bootstrap,来自Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷
baike.baidu.com/item/Bootstrap/8301528
4.DOM(文档对象模型 (Document Object Model)
处理可扩展标志语言的标准编程接口
DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构
网友评论