HTML5
hizyk
声明:本人的所有博客皆为个人笔记,作为个人知识索引使用,因此在叙述上存在逻辑不通顺、跨度大等问题,希望理解。分享出来仅供大家学习翻阅,若有错误希望指出,感谢!
展开
-
flex布局详解
声明:本人的所有博客皆为个人笔记,作为个人知识索引使用,因此在叙述上存在逻辑不通顺、跨度大等问题,希望理解。分享出来仅供大家学习翻阅,若有错误希望指出,感谢!flex基本概念任何一个容器都可以指定为Flex布局例如:.box{display:flex;}行内元素也可以使用Flex布局例如:.box{display:inline-flex;}注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效采用Flex布局的元素,称为Flex容器原创 2020-11-26 21:27:37 · 131 阅读 · 0 评论 -
构建Web的技术
声明:本人的所有博客皆为个人笔记,作为个人知识索引使用,因此在叙述上存在逻辑不通顺、跨度大等问题,希望理解。分享出来仅供大家学习翻阅,若有错误希望指出,感谢!构建Web的技术HTMLHTML是为了发送Web上的超文本而开发的标记语言超文本是一种文档系统,可将文档中任意位置的信息与其他信息建立关联,即超链接文本标记语言是指通过在文档的某部分穿插特别的字符串标签,用来修饰文档的语言CSSCSS可以指定如何展现HTML内的各种元素,属于样式表标准之一动态HTML所谓动态HTML,是指使用客户原创 2020-11-23 21:49:33 · 182 阅读 · 0 评论 -
HTML5页面布局基础
声明:本人的所有博客皆为个人笔记,作为个人知识索引使用,因此在叙述上存在逻辑不通顺、跨度大等问题,希望理解。分享出来仅供大家学习翻阅,若有错误希望指出,感谢!区块标签(sections)区块标签和分组标签通常在文档中充当容器和包含块等角色HTML中负责页面总体布局的文档结构都应由区块元素来定义这些新增标签主要是为替代div标签。这些新增的区块标签和div最大的区别就是其标签名带有语义区块标签body代表浏览器的所有可视区域。body标签比较特殊,该标签同时也是区块标签。在大部分浏览器中,b原创 2020-11-23 21:38:15 · 1727 阅读 · 0 评论 -
CSS中的浮动(float)
声明:本人的所有博客皆为个人笔记,作为个人知识索引使用,因此在叙述上存在逻辑不通顺、跨度大等问题,希望理解。分享出来仅供大家学习翻阅,若有错误希望指出,感谢!CSS 布局的三种机制网页布局的核心——就是用 CSS 来摆放盒子CSS 提供了来设置盒子的摆放位置,分别是(标准流)、和,其中:普通流(标准流)块级元素会独占一行,顺序排列;常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table行内元素会按照顺序,顺序排列,碰到父元素边缘则自动换行;常用元素:spa原创 2020-11-23 21:37:41 · 156 阅读 · 0 评论 -
HTML+CSS字体文本
HTML文本标签文本级语义标签包括:a 超连接em 侧重点的强调,可嵌套。表现为倾斜文字。HTML5中建议使用strong 表示内容重要性,可嵌套。表现为文字加粗。HTML5中建议使用small 旁注,比正文稍小dfn 定义术语,表现为文字倾斜abbr 缩写词,一般配合dfn使用<abbr title="World Wide Web">WWW</abbr>.data html5中新增标签,为元素赋以机器可读的数据,其中的value属性指定具体数据ti原创 2020-11-21 20:41:09 · 451 阅读 · 0 评论 -
HTML5概述
HTML5概述骨架标签<!DOCTYPE html><html lang="zh-CN"> <!--lang属性给浏览器用,不影响网页本身,可以不写--> <head> <meta charset="UTF-8"> <!--UTF-8包含世界所有语言,必写--> <title>标题</title> </head> <body>原创 2020-11-21 20:40:36 · 212 阅读 · 1 评论 -
CSS样式表+选择器+三大特性
引入CSS样式表(书写位置)行内式(内联样式)[不建议使用]通过标签的style属性来设置元素的样式任何HTML标签都拥有style属性,用来设置行内式<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>style其实就是标签的属性样式属性和值中间是多组属性值之间用;隔开内部样式表(内嵌样式表)[不建议使用]是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义<h原创 2020-11-21 20:38:59 · 297 阅读 · 0 评论 -
CSS书写规范
CSS属性书写顺序(重点)建议遵循以下顺序:布局定位属性:display / position / float / clear / visibility / overflow(建议 display 第一个写,毕竟关系到模式)自身属性:width / height / margin / padding / border / background文本属性:color / font / text-decoration / text-align / vertical-align / white- spac原创 2020-11-21 20:38:22 · 62 阅读 · 0 评论 -
CSS基本单位
CSS中的常见单位尺寸单位1.px:相对单位,页面按精确像素展示。2.em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算,整个页面内1em不是一个固定的值。3.rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性。4.vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%。5.vh:viewpoint height,视窗高度,1vh等于视窗高度的1%。6.vmin:vw和vh中较小的那个。7原创 2020-11-21 20:37:48 · 656 阅读 · 0 评论 -
CSS盒子模型
盒子模型(CSS重点)网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置。最后把网页元素比如文字图片等等,放入盒子里面。盒子模型(Box Model)所谓盒子模型:就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。盒子模型有元素的内容、边框(border)、内边距(padding)、和外边距(margin)组成。盒子里面的文字和图片等元素是 内容区域盒子的厚度 我们成为 盒子的边框盒子内容与边框的距离是内边距(类似单元格的 cellpaddi原创 2020-11-21 20:36:57 · 158 阅读 · 0 评论 -
CSS高级技巧
CSS高级技巧元素的显示与隐藏类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现!display 显示(重点)display 设置或检索对象是否及如何显示display: none 隐藏对象display:block 除了转换为块级元素之外,同时还有显示元素的意思。- 特点: 隐藏之后,不再保留位置#### visibility 可见性- 设置或检索是否显示对象。~~~cssvisibility:visible; 对象可视visibilit原创 2020-11-21 20:36:18 · 107 阅读 · 0 评论 -
CSS背景
CSS 背景(background)背景颜色(color)background-color:颜色值; //默认的值是 transparent 透明的背景图片(image)background-image : none | url (url) 参数作用none无背景图(默认的)url使用绝对或相对地址指定背景图像background-image : url(images/demo.png);小技巧:背景图片后面的地址,url最好不要加引号。背景平原创 2020-11-21 20:32:04 · 75 阅读 · 0 评论 -
CSS定位
CSS定位(position)CSS 布局的三种机制网页布局的核心 —— 就是用 CSS 来摆放盒子位置CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流、浮动和定位,其中:普通流(标准流)浮动让盒子从普通流中浮起来 —— 让多个盒子(div)水平排列成一行定位将盒子定在某一个位置 自由的漂浮在其他盒子的上面 —— CSS 离不开定位,特别是后面的 js 特效定位详解定位也是用来布局的,它有两部分组成: 定位 = 定位模式 + 边偏移边偏移我们定原创 2020-11-21 20:33:26 · 117 阅读 · 1 评论 -
CSS复合选择器与标签显示模式
CSS复合选择器使用CSS复合选择器目的是为了可以选择更准确更精细的目标元素标签。复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的后代选择器后代选择器又称为包含选择器用来选择元素或元素组的子孙后代写法就是把外层标签or类写在前面,内层标签or类写在后面,中间用空格分隔父级 子级{属性:属性值;属性:属性值;}子元素选择器子元素选择器只能选择作为某元素**子元素(亲儿子,不包含孙子 重孙子之类)**的元素。其写法就是把父级标签写在前面,子级标签写在后面,中原创 2020-11-21 20:34:09 · 167 阅读 · 0 评论