HTML和CSS的知识点】的更多相关文章

HTML的知识点 HTML的结构: <!DOCTYPE html>: 文档类型性为HTML5文件 文档声明:在HTML的文档中必不可少,且必须在文档的第一行 文档声明的编码格式<!----> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body>. HTML的三个常见头部标…
Web前端-CSS必备知识点 css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位. 链接: <link rel="stylesheet" type="text/css" href="sheet.css" title="default"> link标签: <link rel="styleshe…
CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),是一种用来表现 HTML 文档样式的语言,样式定义如何显示 HTML 元素,是能够真正做到网页表现与结构分离的一种样式设计语言.样式通常存储在样式表中,外部样式表通常存储在 CSS 文件中,多个样式定义可层叠为一. HTML 标签被设计为用于定义文…
css入门知识点整理 不要嘲笑我这个蒟蒻..例子来源:w3school css其实就分为两个东西,一个是选择器,另外一个是声明.声明定义了某个对象的属性的值,这都是html的内容.重点要关注的是选择器.顾名思义,选择器就是用来"选择"HTML中的元素的.通过定义选择器可以选出HTML文档中的某些元素,然后把它们的样式变成声明中的.css的格式长这样: selector {declaration1; declaration2; ... declarationN } 这里有一个最基本的cs…
HTML&&CSS基础知识点整理 一.WEB标准:一系列标准的集合 1. 结构(Structure):html 语言:XHTML[可扩展超文本标识语言]和XML[可扩展标记语言] 2. 表现(Preasentation):css 3. 行为(Behavior):JS[DOM+ES] 其中一些小的具体要求: 结构:标签小写.闭合.不能随意嵌套 CSS+JS:精良使用外链,不用行内 优点: 1. 易于维护 2. 页面响应快 3. 可访问性高 4. 提高设备兼容性 5. 易被解析(搜索引擎) P…
CSS基本知识点 我们在学习HTML之后,前端三件套第二件便是CSS,但CSS内容较多,我们分几部分讲解: (如果没有学习HTML,请参考之前文章:HTML知识点概括--一篇文章带你完全掌握HTML>) CSS作用 如果说HTML为网页提供内容,那么CSS就是为内容进行装饰,为网页进行布局 CSS可以控制整体框架,控制文本字体,大小等诸多事宜 CSS语法 CSS基本语法只有一条: 选择器 { 声明1: 声明2: } 元素显示模式 首先我稍微解释一下元素显示模式: 元素以什么方式进行显示 HTML…
css3新单位vw.vh.vmin.vmax vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw; vmax: 相对于视窗的宽度或高度中较大的那个.其中最大的那个被均分为100单位的vmax; vmin: 相对于视窗的宽度或高度中较小的那个.其中最小的那个被均分为100单位的vmin; 视区所指为浏览器内部的可视区域大小, 即window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及底部工…
一.CSS的引入方式 1.1 css的介绍 HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 CSS:Cascading Style Sheet,层叠样式表.CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果.简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能. css的最新版本是css3,我们目前学习的是css2.1 1.2 css和html比较: 1)htm…
1. 盒子模型 CSS处理网页内容时,会把每一个元素"放在"一个盒子里,也就是所谓的盒子模型. 盒子模型包括4部分:内容,内边距(padding),边框(border)和外边距(margin) 上图展示了整个盒子模型的内容,怎么样?简单吧.如果你认为简单,那就大错特错了!! 盒子模型里边有一个坑,就是取元素的height和width时,可以多种方式来指定这个高和宽属性.换句话说在某些情况下,一个元素的height和width是不一样的.那么究竟是哪些情况下呢?答案就是box-sizin…
昨天早上看到了一篇很棒的文章,这篇文章将布局的一些知识点整理的很不错.我也想整理一下,这样在以后的项目中可以活学活用,避免只用一种方式. 参考文章:https://segmentfault.com/a/1190000013565024:https://segmentfault.com/a/1190000008789039#articleHeader4 前端布局是页面构建过程中很基础,很重要的一环.这里介绍一些我了解的,不足的地方大家可以补充. 一.常用的居中方法 1.水平居中 ①如果子元素是行内…
写在前面 一个周五的晚上,闲来无事整理下自己的 github(经常做收藏党),今天打算都过一遍,发现一个 star很高的项目,里面有大量的 CSS 片段,而且标题很诱人,然后又花了将近1个小时从头到尾过了一遍,其中一些是我们常用的一些知识点,另外也包含一些比较新的属性的应用,知识点挺多的,为了让大家看起来更方便些,然后又花了点(很长很长)时间翻译成中文. https://github.com/30-seconds/30-seconds-of-css 当然提前需要和作者沟通下得到作者的允许,作者希…
HTML 标签 meta 标签永远位于文档的头部,即head元素内部 可提供有关页面的元信息,如针对搜索引擎和更新频度的描述和关键词 charset 这个属性规定在外部脚本文件中使用的字符编码 如果外部文件中的字符编码与主文件中的编码方式不同,就要用到charset属性 默认的字符编码是 ISO-8859-1 标记了一个段落 p元素会自动在其前后创建一些空白.浏览器会自动添加这些空间 input 用于搜集用户信息 // 规定input元素的值 <input value="请输入姓名...&…
CSS继承性+层叠性+盒子+浮动 一.CSS继承性 eg:                 <style>                               div{                                      color: pink;                                      font-size: 30px;                                      width: 500px;      …
块级元素:width宽和height高有效. 内联元素:width宽和height高无效. 1.float:该属性的值指出了对象是否及如何浮动. none:设置对象不浮动left:设置对象浮在左边right:设置对象浮在右边 2.clear:该属性的值指出了不允许有浮动对象的边. none:允许两边都可以有浮动对象both:不允许有浮动对象left:不允许左边有浮动对象right:不允许右边有浮动对象 <!DOCTYPE html> <html lang="en"&g…
JS手册中提到:可以使用任意表达式作比较表达式.任何值为0.null.未定义或空字符串的表达式被解释为 false.其他任意值的表达式解释为 true.也就是说,这里会隐式的转换为布尔值.       //css :#id .下属class(可以是直接或间接下属classs)    #newfncbtnpanel .am-condition {             margin-top: 10px;             margin-left: 6px;             marg…
回顾 1.结构标记 <header></header> <nav></nav> <section></section> <aside></aside> <article></article> <footer></footer> 2.表单 1.作用 用于 收集 ,显示用户的信息并提交给服务器 2.组成 1.表单元素 1.语法 <form></for…
1.div如何让背景是透明的 如:<div class="ha"></div> <style> .ha{ background:transparent; } </style> 2.input有多种类型:如 radio.submit.text等,如何取出它们其中一个进行写css样式呐?看下边 <div class="ha"> <form> <input type="text&quo…
在这一篇中,主要总结一下CSS中的选择器. 参考:http://www.cnblogs.com/webblog/archive/2009/07/07/1518274.html CSS中的选择器主要包括: 派生选择器:通过依据元素在其位置的上下文关系来定义样式.包括后代选择器,子元素选择器,相邻兄弟选择器. id选择器:可以为标有特定 id 的 HTML 元素指定特定的样式. 类选择器:可以为class的 HTML 元素指定特定的样式. 属性选择器:为拥有指定属性的 HTML 元素设置样式,而不仅…
CSS(Cascading Style Sheets)全称为:层叠样式表. 1.HTML元素类型 (1) 内联元素(inline):可以理解为“文本模式”,即从左到右顺序显示,不单独换行.常用的内联元素有:a, img, input, select, lable, span, textarea 等,和一些文本标记标签,如:small, big, strong, em, i, b(加粗), sub(下标), sup(上标), u(下划线)等. (2) 块级元素(block):单独一行,没有特殊定位…
1.解释一下CSS的盒子模型? 回答一: a.标准的css盒子模型:宽度=内容的宽度+边框的宽度+加上内边具的宽度 b.网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性. c.这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式.CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型. 回答二:…
1.css重用                <style>            如果整个页面的宽度 > 900px时:            {                .c{                   共有                 }                .c1{                    独有                }            }                        .c2{              …
容器溢出: 语法:overflow: visible | hidden | scroll | auto | inherit; visible:默认值,溢出内容不会被裁剪,正常显示 hidden: 溢出内容隐藏不可见 scroll: 当容器溢出时,溢出的内容以滚动条的形式查看(当容器没有溢出时,也会显示一个默认的滚动条) auto: 当容器溢出时,以滚动条的形式查看剩余内容,没有溢出时,不会显示滚动条 inherit:规定继承父元素的overflow属性 注:还可以针对某一个方向的溢出做设置 语法…
inline: 此元素会被显示为内联元素,元素前后没有换行符.因此:无法设置宽度和高度- inline-block: 行内块元素.元素前后没有换行符(CSS2.1 新增的值) 用通俗的话讲,就是不独占一行的块级元素.然后拥有块级元素的属性,可以设置宽度和高度. line-height: 对于块级元素,line-height指定了元素内部line-boxes的最小高度 对于非替代行内元素,line-height用于计算line-box的高度 对于替代行内元素,例如input.button,line…
一.字体单位,pt?px?em?rem? pt:磅,一种固定长度的绝对的度量单位,是能够使用测量设备测得的长度,印刷业上经常使用,一般用于页面打印排版. px:屏幕设备上能显示出的最小的一个物理点,这个点不是固定大小的,会因为设备的不同而不同,假如:一个显示器上1px宽=1毫米,另一个显示器1px宽=两毫米,那么定义一个div宽度为100px,显示器1上看这个div是10厘米,显示器2上看是20厘米.另外一个px点的长宽不一定是1:1的正方形,有的设备上长宽比是不一样的. em:现代浏览器默认字…
1.单行文字溢出显示省略号: div{ width: 200px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } 2.对span设置text-indent期望缩进指定值,但是没有起作用,是因为text-indent只能给块级元素设置.所以改css为: span{ display:inline-block; } 不断积累完善中~~~…
1.float:left;表示靠左显示.它是相对于距离最近的且以relative作为position的父元素而言的. 2.块级元素和行内元素 块级元素:占据了一个矩形框的元素,display属性的值为block,可通过设置width,height,padding, margin等属性来确定矩形的大小, 内联元素:没有自己的独立空间,display的值为inline,依附于块级元素而存在,对其设置width,height,padding是无效的. 常用的块级元素:div,h1,p,ul,table…
转自:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多,小菜没有精力从头到尾讲一遍,只能有针对性的讲解. 如果读者理解CSS盒子模型,但对于浮动不理解,那么这篇文章可以帮助你. 小菜水平有限,本文仅仅是入门教程,不当之…
1.内核区分 希望某一个浏览器能一统江湖 -ms-transform:rotate(7deg); //-ms代表ie内核识别码 -moz-transform:rotate(7deg); //-moz代表火狐内核识别码 -webkit-transform:rotate(7deg); //-webkit代表谷歌内核识别码 -o-transform:rotate(7deg); //-o代表欧朋[opera]内核识别码 transform:rotate(7deg); //统一标识语句...最好这句话也写…
rgba:即rgb+a, a为图片透明度,a范围是0~1,越小就表示越透明 :hover 即鼠标悬停时改变样式,不仅仅能用在a元素上. <form>标签表示向浏览器提交表单,一般会包裹着输入元素. <label>标签为 input 元素定义标注(标记).label 元素不会向用户呈现任何特殊效果.不过,它为鼠标用户改进了可用性.如果在 label 元素内点击文本,就会触发此控件.就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上.就是说,不只是在输入框里点击…
知识点集锦 1.在html模板的代码中会有下面一类: {% block title %} Blog entries {% endblock %}这里的 block 和 endblock 是神马? {% %}是中间是服务器的代码,这是python的语法? {} 这种是python的语法 {name} 然后在外面“”.format(name="world"),这是python的格式化,那么 {%%}是神马呢? {% if name %} {% endif %} 这到底是给谁看的呀?不是给p…