- 博客(22)
- 收藏
- 关注
原创 (二十三)HTML501
H5新变化1.新的特性:语义特性 本地存储特性 设备兼容特性 连接特性 网页多媒体特性 三维、图形及特效特性 性能与集成特性 CSS3特性2.废弃了一些元素和属性:font centerH5中的新增语义化标签1.header 标签 头部标签2.nav 标签 导航标签3.main 标签 主体标签4.aside 标签 侧边栏标签(可左可右)5.article 标签 独立的内容标签6.section 标签 区段标签7.footer 标签 尾部标签9注意事项:1.这种语义化标准主要针对搜
2021-08-08 12:04:50 170
原创 (二十二)定位02
绝对定位(继续)1.如果祖先级中有定位的元素,就不参考body2.参考的是祖先元素中有任意定位的,在html结构中距离目标最近的祖先3.根据绝对定位的参考元素不同,有三种定位组合方式:子绝父相 子绝父绝 子绝父固 ,由于相对定位的祖先级位置更稳定,大多使用子觉父相的情况固定定位1.属性值:fixed2.参考元素:浏览器窗口3.参考点:浏览器窗口的四个顶点,跟偏移量组合方向有关4.由于浏览器的四个顶点不会发生变化,会导致固定定位的元素会始终显示在定位位置5.固定定位的特性:(1)固定定位
2021-08-06 21:37:17 117
原创 (二十二)定位01
什么是定位1.定位另外一种布局的重要属性,常用于制作压盖或者位置相关的效果2.属性名:position3.属性值:relative absolute fixed4.作用:设置定位的元素,它需要根据某个参考元素发生位置的偏移5.定位的元素想要发生位置的移动,必须搭配偏移量属性的设置水平方向:left right垂直方向:top bottom属性值:常用px为单位的数值,或者百分比相对定位 relative1.属性值:relative 相对的意思2.参考元素:标签加载的原始位置,参考自己原
2021-08-06 21:09:53 134
原创 (二十一)CSS背景01
background作用:设置元素背景,是一个复合属性1.背景颜色 backgroud-color作用:在盒子区域添加背景颜色的修饰加载区域:在border及内加载背景颜色属性值:颜色名 颜色值(16进制 rgb)2.背景图片 backgroud-image作用:给盒子添加图片的背景修饰加载范围:默认在border及内加载背景图片,如果设置了repeat,就在border以内加载属性值:url 指定图片资源所在路径注意:背景颜色和背景图片可以同时设置,背景颜色在背景图片的下面3.背景
2021-08-06 20:05:03 135
原创 (十九)浮动01
浮动float作用:让元素脱离标准流,同一级的浮动元素可以并排显示在一排属性值:(1)left 左浮动(2)right 右浮动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
2021-08-05 21:39:13 73
原创 (十八)显示模式
display作用:改变一个标签的显示模式属性值:(1)block 表示元素要以块级元素进行加载(2)inline 表示元素要以行内元素进行加载(3)inline-block 表示元素要以行内块元素加载(4)none 表示标签及内容直接隐藏,让出原来标准流中的位置标签脱离标准流的方法:浮动 绝对定位 固定定位...
2021-08-05 21:26:17 172
原创 (十七)标准文档流
标准文档流1.标准文档流,指的是元素排版布局过程中,元素回默认自动从左往右,从上往下的流式排列。前面的内容发生了变化,后面的内容位置也会随着变化2.微观现象空白部分折叠3.元素等级块级元素行内元素行内块元素块级元素:(1)可以设置宽高,在浏览器中正常加载(2)块级元素必须独占一行(3)如果块级元素不设置宽度,会自动撑满父级元素的宽度,高度是内容的高度行内元素:(1)多个行内元素或行内块元素可以在一行(2)行内元素宽高不加载,其他的盒模型属性虽然能设置,但是容易出现加载问题(3)
2021-08-05 21:19:47 508
原创 (十六)盒模型的扩展应用
清除默认样式1.大部分的标签在浏览器加载时都会有默认样式,这些样式会对我们的布局造成一定影响,所以需要先清除<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
2021-08-05 21:05:09 87
原创 (十五)CSS盒模型01
盒模型的组成(1)width 宽(2)height 高(3)boder 边框(4)padding 内边距(5)margin 外边距书写元素的区域区域:width+height区域内盒子可实体化区域区域:width +height +border +padding盒子实际占位的区域区域:width +height +padding +border+margin宽度width作用:设置可以添加元素内容的区域的宽度属性值:(1)px 像素(2)% 设置为父元素宽度的
2021-08-04 21:42:24 78
原创 (十四)CSS常用属性03
text-align作用:设置文本的水平对齐方式(多行 单行)属性值:(1)center 水平居中对齐(2)left 水平居左对齐(3)right 水平居右对齐<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g
2021-08-04 20:36:27 87
原创 (十三)CSS常用属性02
CSS常用样式font-weight作用:设置文字是否加粗显示文字类属性值:(1)normal 默认值,定义标准的字体(2)bold 定义粗体字符,也是b strong 标签的默认值(3)bolder 定义更粗的字体(4)lighter 定义更细的字体...
2021-08-04 13:12:37 111
原创 (十一)CSS选择器
CSS标签选择器1.为什么要用到选择器?在内嵌式,和外部CSS中,要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素,这时需要用到CSS中的选择器2.什么是选择器?选择要添加样式的HTML标签的一种方法3.选择器有哪些?(2.1版本)基础选择器:标签选择器 类选择器 id选择器 通配符选择器高级选择器:后代选择器 交集选择器 并集选择器标签选择器将标签名作为选择器的名称p {color: red;}h1 {color: #ccc}特点:便于设置公共样式 不能给局部
2021-08-02 13:18:14 108
原创 (十)盒子实体化三属性
盒子实体化三属性1.如果想要在浏览器中具体可能看到一个盒子占有的实际位置,需要设置盒子可以实体化的三属性实体化属性width 宽度height 高度background-color 背景颜色
2021-08-02 12:30:22 123
原创 (九)CSS常用属性01
常用属性color作用:给文字设置颜色写法:color:value(颜色名、颜色值)颜色值:又分为rgb模式 16进制font-family作用:定义元素内文字的字体属性值:字体名称,必须包裹在一对引号中注意事项:1.font-family 可以设置多个字体名称,在实际加载过程中只会选择一种,选择的依据时按照书写顺序进行,如果浏览器不支持第一个字体,那么则会尝试下一个,直到找到第一个支持的字体2.浏览器中加载的字体是用户机器中自带的,如果用户的电脑中没有我们设置的字体,那么加载失败,需要
2021-08-02 12:25:24 61
原创 (八)CSS引入方式
CSS(二)CSS规则1.书写时由两部分组成:选择器+样式声明(可以有一条或者多条,属性:属性值)span {font-size:'16px'; color:#ccc;}2.书写位置可以分为:内联式(行内式) 外联式 内嵌式 导入内联式(行内式)<span style='font-size:"16px"; clolor:"red"'></span>1.优点:权重高2.缺点:(1)必须写在标签上,没有做到样式与结构的完全分离(2)CSS样式代码让标签
2021-08-01 11:59:12 80
原创 (六)CSS简介
CSS(一)什么是CSS1.全称 cascading style sheets ,层叠样式表,是一种用来表现HTML的文本样式的计算机语言2.作用:静态地修饰网页,并且可以配合各种脚本语言动态的对网页各元素进行格式化回顾一下前端三层技术1.HTML 结构层2.CSS 样式层3.JavaScript 行为层特点1.层叠性(先不展开)2.继承性(先不展开)关于样式1.就是定义如何显示HTML...
2021-08-01 10:13:52 104
原创 (五)字符实体
字符实体1.在铺统文字书写时,有一些特殊符号不能直接书写,或则符号具有特殊功能也不能直接书写2.可以使用一些html提前预留好的替换字符进行书写,这些替换字符叫做字符实体3.可以在W3Cschool中查询4.常用的字符实体:  空格< 小于号> 大于号© 版权符号5.规则:都是以&开头 以;结尾...
2021-07-31 19:55:24 80
原创 (四)常用标签02
常用标签表单1.表单的作用:用于收集不同类型的用户输入,表单元素就是网页中提供用户进行输入或点击的小控件2.表单的组成:表单域、提示信息、表单控件(或者叫表单元素)3个部分组成表单域1.表单域相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法 如果不定义表单域 表单中的数据就无法传送到后台服务器提示信息1.提示信息就是一个表单中通常用来提示用户进行填写和操作的说明性文字表单控件1.包含了具体的表单功能项,如单行文本
2021-07-31 19:47:58 664
原创 (三)常用标签01
常用标签有序列表 ol1.代码<ol> <li>中国</li> <li>俄罗斯</li> <li>加拿大</li> <li>巴基斯坦</li></ol>2.ol标签之内只可以嵌套li标签3.li标签只能嵌套在ol标签或者ul标签中4.li标签中可以嵌套其他标签定义列表 dl1.自定义列表不仅仅市一列项目,二十项目机器注释的组合2.有三个完整的标签组成 dl d
2021-07-30 14:02:43 148
原创 (一)HTML标签语法
小白学前端0基础day1()欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:全新的界面设计 ,将会带来全新的写作体验;在创作中心设置你喜爱的代码高亮样式,Markdown 将代码片显示选择的高亮
2021-07-28 13:23:16 194
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人