h1标签

css3选择器

﹥>﹥吖頭↗ 提交于 2020-03-28 16:53:35
CSS3 css3属性选择器 根据属性名查找某个标签(E[attr]),代码如下 <style> p {height: 30px; border: 1px solid black;} // 查找含有属性test的p标签 p [test] {background: red;} </style> <body> <p test="dhl">dhl</p> <p test="xb">xiaobei</p> </body> 查找某个属性名为固定值的某个标签(E[attr="value"]),测试代码如下: <style> p {height: 30px; border: 1px solid black;} // 查找test属性值为dhl的p标签 p [test="dhl"] {background: red;} </style> <body> <p test="dhl">dhl</p> <p test="xb">xiaobei</p> </body> E[attr~="value"] 指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表包含了一个value词,而且等号前面的"~"不能不写,详细代码如下: <style> p {height: 30px; border: 1px solid black;} // 查找含有属性test

CSS学习总结(一)

半世苍凉 提交于 2020-02-22 13:37:24
1.1什么是CSS Cascading Style Sheet 层叠级联样式表 CSS : 表现 (美化网页) 1.2css的格式 1.在html内 <!DOCTYPE html> < html lang = " en " > < head > < meta charset = " UTF-8 " > < title > Title </ title > <!-- 直接在html界面写css语言 在style中可以写css代码,每一个声明,最好使用;结尾 格式: <style> 选择器{ 声明1; 声明2; ..... } </style> --> < style > h1 { color : #f02a52 ; } </ style > </ head > < body > < h1 > 我是h1标签 </ h1 > </ body > </ html > 2.将css与html分开写 建议使用这种写法 css的优势: 1.内容与表现分离 2.网页结构统一,可以重复使用。 3.样式十分丰富 4.建议使用独立于html的css文件 5.可以使用SEO,便于搜索引擎搜索 3.将css导入方式 1.内部样式 <!DOCTYPE html> < html lang = " en " > < head > < meta charset = " UTF-8 " > < title >

CSS选择器、盒子模型、浮动与定位等详解

别说谁变了你拦得住时间么 提交于 2020-02-09 15:14:18
文章目录 一、CSS 1、学习目标 1.1、什么是CSS 1.2、CSS样式的两种写的方法 1.3、CSS的3种导入方式 2、选择器(重要) 2.1、基本选择器 2.2、层次选择器 2.3、结构伪类选择器 2.4、属性选择器 3、美化网页元素 3.1、为什么美化网页 3.2、字体样式 3.3、文本样式 3.4、阴影 3.5、超链接伪类 3.7、背景 4、盒子模型 4.1、什么是盒子模型 4.2、边框 4.3、内外边距 4.4、圆角边框 4.5、盒子阴影 5、浮动 5.2、display 5.3、float 5.4、父级边框塌陷问题 6、定位 6.1、相对定位 6.2、绝对定位 6.3、固定定位 6.4、z-index 一、CSS 1、学习目标 CSS的作用及简单使用(入门) CSS选择器(重难点) 美化网页 盒子模型 浮动与定位 网页动画 1.1、什么是CSS CSS:层叠级联样式表(Cascading Style Sheet),作用是为了美化网页,给网页增添样式,包括字体、颜色、位置、背景图、定位与浮动等 CSS发展史: CSS1.0 CSS2.0:DIV(块) + CSS,产生了HTML 与 CSS 结构分离的思想,让网页变得简单 CSS2.1:增添浮动,定位 CSS3.0:增添圆角,阴影,动画…. 浏览器兼容性更好 1.2、CSS样式的两种写的方法

HTML+CSS学习第三篇 标题与段落

人盡茶涼 提交于 2020-01-31 04:33:37
标题与段落 标题 - -> 双标签: <h1><h1/> .... <h6></h6> 在一个网页中,h1标题最重要,并且一个.html文件中只能出现一次h1标签。| h5、h6标签在网页中不经常使用。| < ! DOCTYPE html > < html > < head > < meta charset = "utf-8" > < title > < /title > < /head > < body > < h1 > 标题 < /h1 > < h2 > 标题 < /h2 > < h3 > 标题 < /h3 > < h4 > 标题 < /h4 > < h5 > 标题 < /h5 > < h6 > 标题 < /h6 > < /body > < /html > 效果图 段落 --> 双标签: <p> </p> < ! DOCTYPE html > < html > < head > < meta charset = "utf-8" > < title > < /title > < /head > < body > < h1 > 标题 < /h1 > < h2 > 标题 < /h2 > < h3 > 标题 < /h3 > < h4 > 标题 < /h4 > < h5 > 标题 < /h5 > < h6 > 标题 < /h6 > < p > 1234567 < /p > < /body

html介绍和head标签

人盡茶涼 提交于 2020-01-29 19:56:48
一、web标准 web准备介绍: w3c:万维网联盟组织,用来制定web标准的机构(组织) web标准:制作网页遵循的规范 web准备规范的分类:结构标准、表现标准、行为标准。 结构:html。表示:css。行为:Javascript。 web准备总结: 结构标准:相当于人的身体。html就是用来制作网页的。 表现标准: 相当于人的衣服。css就是对网页进行美化的。 行为标准: 相当于人的动作。JS就是让网页动起来,具有生命力的 二、浏览器介绍 浏览器是网页运行的平台,常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、猎豹浏览器、Safari和Opera等 浏览器内核: 浏览器  内核 IE trident chrome blink 火狐 gecko Safari webkit PS:「浏览器内核」也就是浏览器所采用的「渲染引擎」,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。 渲染引擎是兼容性问题出现的根本原因。 三、开发工具介绍 Sublime Text的使用 参考链接: Sublime Text使用技巧 四、HTML介绍 1、HTML的概述 html全称HyperText Mackeup Language,翻译为超文本标记语言,它不是一种编程语言,是一种描述性的标记语言,用于描述超文本内容的显示方式。比如字体、颜色、大小等。 超文本:音频,视频

【插件】Emmet 快速编写代码

一曲冷凌霜 提交于 2020-01-14 02:16:51
最近新下载了一个编辑器,叫brackets。里面插件挺好弄的,直接安装就行。 据说Emmet很好用,所以打算把一些用法写在这里,方便查看。 一、在<head></head>中 link:css,然后 按Tab键     快速引入css文件 <link rel="stylesheet" href="style.css"> 二、在HTML中搞起来 1.初始化 输入!(叹号)或html:5,然后 按Tab键 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 9 </body> 10 </html> 2.添加类、id、文本和属性 输入p.p1    给p标签添加一个叫p1的类 <p class="p1"></p> 输入p#p2    给p标签添加一个叫p2的id <p id="p2"></p> 输入p.p1#p2    给p标签同时添加一个叫p1的类和p2的id <p class="p1" id="p2"></p> 输入h1{你好,我是h1标签}    在{}中填写文本内容 <h1>你好,我是h1标签</h1> 输入a[href=#]      在[]中填写元素的属性 <a href="#"></a> 3

Vue.js指令小结

谁说胖子不能爱 提交于 2020-01-10 17:45:40
主要简单的介绍一下Vue.js这个轻量级的前端框架的指令部分 Vue.js提供了很多的指令 , 简化了我们写JS的复杂度,下面简单的介绍各个指令的常规用法 。 v-text : 这个指令它的效果与双大括号效果是一样的,使用v-text可以避免因为js出错,而暴露了双括号里面的内容 1 <div id="app-text"> 2 // 下面两个效果一样 3 <span v-text="msg"></span> 4 <span>{{msg}}</span> 5 </div> 6 7 <script> 8 new .Vue({ 9 el:"#app-text" , 10 data(){ 11 return { 12 msg:"hello Vue.js" 13 } 14 } 15 16 }) 17 </script> v-html :这个指令的主要功能是把规范的html字符串渲染成浏览器可以解析的html内容 <div id="app-text"> //v-html会使用h1标签,而v-text会输出原内容 <span v-text="msg"></span> <p v-html="html-one"></p> <span v-text="html-two"/> </div> new new Vue({ el: "#app-text", data() { return { msg:

html seo优化

▼魔方 西西 提交于 2019-12-11 18:21:28
原文链接 Html代码seo优化最佳布局,实例讲解 众所周知,搜索引擎对html代码是非常优化的,所以html的优化是做好推广的第一步。一个符合seo规则的代码大体如下界面所示。 1、<!–聚酯多元醇)–> 这个东西是些页面注释的,可以在这里加我的“聚酯多元醇”,但过多关键字可能被搜索引擎惩罚哦! 2、 这个是代码开头 结尾时和对应。 3、 头标记结尾用 4、 (聚酯多元醇、热塑性聚氨酯树脂) 兵家必争之地,很重要,字字值千金啊,各位站长狠抓,注意关键字放置,不要堆砌关键字,不然后果够你吃的。 5、 6、 7、<meta name=”keywords” content=” 聚酯多元醇|热塑性聚氨酯树脂”> 这个现在权重不太高了,但是只要有轻重我们也要利用。 8、<meta name=”description” content=” 聚酯多元醇|热塑性聚氨酯树脂生产基地,山东华鑫有限公司!”>这个东西是你百度搜索时候网站下面的那个所用简介,有一定作用哦! 9、 10、 11、 12、 13、 聚酯多元醇 很重要,如果不写,你比丢钱了损失还大。 14、 聚酯多元醇|热塑性聚氨酯树脂 15、 聚酯多元醇系列1 16、 聚酯多元醇系列2 17、 聚酯多元醇系列3 18、 聚酯多元醇系列4 上面这些标题都是很重要的,对没有小版块的内容都要淡定哦! 19、<img src=”xxx.jpg”

CSS复合选择器是什么?复合选择器是如何工作

拈花ヽ惹草 提交于 2019-12-05 01:16:55
复合选择器介绍 复合选择器其实很好理解,说白了就跟我们生活中的有血缘关系家庭成员一样,通过标签或者 class 属性或 id 属性,去找对应的有血缘关系的某个选择器,具体的大家往下看哦。 如果是初学者对基本的选择器不是很了解的可以看笔者之前写过的基本选择器文章, CSS基本选择器是什么?基本选择器是如何工作 ,在这就不过多的介绍基本选择器的使用了。 复合选择器说明表 选择器 描述 举例 选择器1 选择器2{属性:值;} 多元素选择器。同时匹配选择器1和选择器2,多个选择器之间用逗号隔开即可。 h1,h2,h3{color: red;} E F {属性:值;} 后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格隔开即可。 .box h1{color: red;} E>F{属性:值;} 子元素选择器,匹配所有E元素的子元素为F div >h1{color:red;} E+F{属性:值;} 相邻元素选择器,匹配所有紧跟随着E元素之后的同级元素F div+div{color:red;} 多元素选择器 多元素选择器在工作当中经常会用到,主要用于设置多个元素使用同一种 CSS 样式。 让我们进入多元素选择器实践,实践内容如:将 HTML 页面中的 div 标签、 h1 标签、 p 标签、中的文本颜色设置为红色。 代码块 <!DOCTYPE html> <html lang="en

什么是基本选择

可紊 提交于 2019-12-04 07:13:40
基本选择器介绍 基本选择器又分为六种使用方式:如、通用选择器、标签选择器、类选择器、Id选择器、结合元素选择器、多类选择器。 基本选择器使用说明表。 选择器 语法格式 含义 举例 通用选择器 *{属性:值;} 通用选择器可以选择页面上的所有元素,并对它们应用样式,用 * 来表示。不建议使用,IE6不支持,给大型网站增加负担。 *{width: 300px;} 标签选择器 标签名{属性:值;} 标签选择器,匹配对应的HTML的标签。 h1{color: red;} 类选择器 .class属性值{属性:值;} 类选择器,给拥有指定的class属性值的元素设置样式。 .box{color: red;} Id选择器 #id属性值{属性:值;} Id选择器,在一个 HTML 文档中,Id 选择器会使用一次,而且仅一次。Id选择器以#来定义。 #box{color: red;} 结合元素选择器 标签名 .class属性值{属性:值} 选择器会根据标签名中包含指定的.class属性值的元素。 p.box {color:red;} 多类选择器 .class属性值.class属性值{属性:值;} 通过把两个类选择器链接在一起,仅可以选择同时包含这些类名的元素(类名的顺序不限)。注意:在 IE7 之前的版本中,不同平台的 Internet Explorer 都不能正确地处理多类选择器。 .box