html+css学习记录1

在html中,写再多的空格,浏览器也会将其解析成一个空格,可以用<br/>来换行 <hr/>也是一个字节数标签,可以生成一条水平线。

在html中一些 如 <   >这种特殊字符是不能直接使用的,但是我么可以通过一些特殊的符号来表示这些特殊字符,这些特殊字符称之为实体(转义字符串)。实体的语法:&+实体的名字+;  小于号<    :&lt;  大于号  >&lt;   空格 &nbsp;   版权符号  &copy;  等等 实体可以去文档中去找

img  中alt的可以用于在图片不显示,显示对图片的描述。 alt的作用在于可以让搜索引擎 通过alt属性来识别不同的图片   src的相对路径就是当前资源所在目录下的路径

jpeg:支持图片颜色多,图片可压缩 但是不支持透明  一般用来保存颜色丰富的图片,如照片

gif:支持的颜色少、支持简单透明的、支持动态图

png:支持的颜色比较多、并且支持透明  。一般用来显示颜色复杂的透明图片

图片的使用原则:效果不一致 使用效果好的    效果一致  使用小的

HTML语法规则:HTML中标签不区分大小写 。注释不能嵌套。HTML中标签必须完整要么完整 要么自结束标签  .HTML标签可以嵌套,但不能交叉嵌套。 html中标签的属性必须有值,且必须加双引号

iframe可以引入一个外部的页面  使用iframe创建一个内联框架

href:可以写一个完整链接地址,也可以写一个相对路径   创建超链接时,如果跳转页面不确定,可以用#占位,同时,如果设置了#,点击链接会回到顶部

mailto:邮件地址    点击会默认打开计算机的电子邮件客户端

center标签让内容居中

CSS用link进行引用   CSS的注释  /**/    CSS分为选择器  声明块 选择器即标签元素、Class  id  等,声明块即大括号中的元素的属性

块元素 内联元素  块元素:div p h1 h2等 内联元素:span a iframe img等

元素选择器:对整个元素进行设置样式   id选择器 #   class选择器 .   通配选择器 *   复合选择器 交集选择器 属性选择器(p[titile])

元素之间的关系:父元素 子元素 祖先元素  后代元素   兄弟元素     语法

伪类:专门用来表示元素的一种特殊状态  如未访问的超链接  访问的超链接 获取超链接的焦点等

伪元素:使用伪元素来表示一些元素的特殊的位置   如:p:first-letter   p:first-line

before表示元素最前面的部分,通常与content结合使用   p:before{content:}   after用法一样

:nth-child(n)  第n个  even表示奇数   odd表示偶数

:first-child  第一个子元素  :last-child  最后一个子元素                 :first-of-type  当前类型中的第一个      :last-of-type   当前类型中的最后一个    :nth-of type   当前类型的第n个

p> span{}  表示寻找p元素的子元素 span          p+span  设置p元素后面紧挨着的兄弟元素 span   必须是紧挨着 的(如果p后面紧跟着的不是span,则没有效果)           p~span  p后面的所有的兄弟元素span

否定伪类:可以从选择的元素中剔除某一个元素  p:not(.类名)  选择除了类名为  的p元素

在CSS中,样式可以被继承 ,将一些基本的样式设置给祖先元素,这样这个样式就会被所有元素继承。但是不是所有样式都会被继承,比如背景相关的样式、边框相关的样式、定位相关的样式

选择器的优先级:选中同一个元素设置相同的样式时,产生冲突时,会有优先级的选择。id(#)>class(.)>元素

原文地址:https://www.cnblogs.com/fanlin92/p/9420530.html

时间: 2024-10-28 02:03:56

html+css学习记录1的相关文章

pure.css 学习记录

兼容性记录: IE 8+ Latest Stable: Firefox, Chrome, Safari iOS 6-8 Android 4.x 处理兼容性 <!--[if lte IE 8]> <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css"> <![endif]--> <!--[

CSS学习记录

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> <head> <met

CSS学习记录——表格

HTML部分 表格 表格由 table标签来定义.每个表格均有若干行(由 tr 标签定义),每行被分割为若干单元格(由 td标签定义).字母 td 指表格数据(table data),即数据单元格的内容.数据单元格可以包含文本.图片.列表.段落.表单.水平线.表格等等. <table> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> &

精通css学习记录

#字体 * 无衬线字体(Sans-serif):Helvetica,Arial,'Lucida Family',Verdana,Tohoma,'Trebuchet MS'  * 有衬线字体(Serif):Georgia,Times  * 等宽字体(monospace),常用于计算机书籍的代码板块,每个字母宽度相等  * 梦幻(fantasy)和草体(cuisive)在网页上不常用,因为浏览器间差异大  * 中文:宋体.微软雅黑.华文细黑 #背景图像 background-position:使用p

jQuery Moblile Demos学习记录Theming、Button、Icons图标,脑子真的不好使。

jQuery Moblile Demos学习记录Theming.Button.Icons图标,脑子真的不好使. 06. 二 / Jquery Mobile 前端 / 没有评论 本文来源于www.ifyao.com禁止转载!www.ifyao.com 一CSS Framework块 Theming 是一个整体了解默认主题和内置的A-E主题各个效果.待解决问题,自定义主题,下边是一个知识点. http://www.w3cschool.cc/jquerymobile/jquerymobile-them

jQuery学习记录1

jquery 和 js css里面都是坑呀 this.style.backgroundColor 和 css {background:#8df;} 是冲突的,用了前者,再$(this).addClass("css class name");效果显示不出来. http://youchenglin.iteye.com/blog/685026 前他的一些内容参见下列代码 <!DOCTYPE html> <html> <head> <meta char

JavaScript学习记录day1

JavaScript学习记录day1 学习 javascript JavaScript学习记录day1 1. 快速入门 2. 编程工具 3. 语法 4. 注释 5. 大小写 JavaScritps 是什么? JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能. 在Web世界里,只

Spring Boot学习记录(三)--整合Mybatis

Spring Boot学习记录(三)–整合Mybatis 标签(空格分隔): spring-boot 控制器,视图解析器前面两篇都已弄好,这一篇学习持久层框架整合. 1.数据源配置 数据源使用druid,maven引入相关依赖,包括spring-jdbc依赖,mysql依赖 1.转换问题 配置的过程要学会为什么这样配置,而不是只学会了配置.这里我们可以和以前的配置方式对比: 以前版本 <!--配置数据库连接池Druid--> <bean id="dataSource"

Spring Boot学习记录(二)--thymeleaf模板

Spring Boot学习记录(二)–thymeleaf模板 标签(空格分隔): spring-boot 自从来公司后都没用过jsp当界面渲染了,因为前后端分离不是很好,反而模板引擎用的比较多,thymeleaf最大的优势后缀为html,就是只需要浏览器就可以展现页面了,还有就是thymeleaf可以很好的和spring集成.下面开始学习. 1.引入依赖 maven中直接引入 <dependency> <groupId>org.springframework.boot</gr