首先纠正一下,你这个是 css 不是 html
创新互联是专业的包河网站建设公司,包河接单;提供成都做网站、成都网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行包河网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
.portfolio .label-text{
}
这里的意思是给:类名选择器为 portfolio 的后代的所有 类名选择器为 label-text 的标签设置样式。
里面的样式解析:
position:relative; 是相对定位的意思,如果它的子级元素设置了 position: absolute;
则为子级元素根据当前元素来进行定位,如果子级元素没有设置 position: absolute; 则为当前元素相对于自身进行定位。
z-index:500; 这个样式为元素设置堆叠顺序。例如你有几本书,叠着放在桌子上,你一样只能看见最上面的那本,但是你想放那本在最上面呢? 通过 z-index 就可以设置元素在最上面。
padding:5px 8px; padding的作用就是设置内边距(也叫内补)第一个参数为设置上和下的内边距分别为 5px , 第二个参数为设置 左 和 右 的内边距分别为 8px;
var isplay = true;//默认是播放的
var video = document.getElementById("myVideo");
document.onkeyup=function(event){
var e = event || window.event || arguments.callee.caller.arguments[0];
if(e e.keyCode==8){ // 按 空格并让它弹起
//要做的事情
if(isplay) {//判断当前播放状态
isplay = false;
video.pause();
}else {
isplay = true;
video.play();
}
};
一、Html的基本结构:
!DOCTYPE html
html
head
meta charset=utf-8"
title/title
/head
body
网页的文本、图片等信息;
/body
/html
二、Head部分:用于表示网页的元数据即描述网页的基本信息
其常用标签及属性有:
1、title标签:浏览器标签页显示的标题
2、meta标签:其常用属性
①charset:设置文档的字符集编码格式。HTML5中设置字符集编码:meta charset="UTF-8"
常见的字符集编码格式:
a.GB-2312:国标码,简体中文
b.GBK:扩展的国标码
c.UTF-8:万国码 Unicode 常用
②http-equiv属性:将我们的信息写给浏览器看,让浏览器按照这里面的要求执行,可选属性值:Content-Type(文档类型) refresh(网页定时刷新) set-cookie(设置浏览器cookie缓存) 需要配合content属性使用。(http-equiv属性只是表明需要设置哪一部分,具体的设置内容,放到content属性中)
③name属性:使用方法同“http-equiv”。将我们的信息写给搜索引擎看
常用且需要掌握的属性值:author(作者) keywords(网页关键字) description(网页描述) 这两个属性设置,网页必不可少。
3、link标签:链接网页图标(title前的小logo),其常用属性有:
①rel属性:声明链接文件的类型,此处选icon
②type属性:可以省略
③href属性:表示图片的路径地址
三、body部分:网页的文本、图片等信息
标签的分类:
块级标签:显示为块,前后隔一行(自动换行)
行级标签:按行从左往右逐一显示。
1、 常见的块级标签:
①h1/h1......h6h6:标题标签,自动加粗,h1最大,h6最小。
②hr/:水平线标签,添加一条水平线。
③p/p:段落标签,
④br/:换行标签,
⑤blockquote//blockquote:引用标签,cite属性,表明引用的来源,一般引用网址
浏览器默认首行缩进。
⑥pre/pre:预格式标签,用于重载代码。浏览器默认显示样式:1、显示为等宽字体。 2、代码中的换行、
空格等元素能在浏览器中显示。
【补充】html 文件中空格的表示:nbsp;
2、 基于布局的块级标签
列表:无序列表、有序列表、定义列表
①有序列表:ol/ol 列表项:li/li
②无序列表:ul/ul 列表项:li/li
③定义列表(实现图文混排):dl/dl
列表标题:dt一般只有一项/dt
列表描述项:dd可以有很多项/dd
3、组合标签:figure/figure用于显示图片及图片标题
他有两个子标签:img /图片
figcaption/figcaption图片的标题
例如:figure
img src="img/EZ.jpg" height="20%" width="20%" alt="探险家"/
figcaption探险家 伊泽瑞尔/figcaption
/figure
4、分区标签:div/div
5、常见的行级标签
1span(文本):无实际意义,用于包裹某部分文字,修改特定样式,例如:
这是span style="color: red;font-size: 36px;"span/span中的文字
img(图片):其常用属性:①src:表示引用图片的地址。
路径地址的写法:相对路径:以当前文件为最准,去寻找图片地址
a、与文件处于同一层的图片,直接写图片名
b、图片在当前文件下一层:文件名/图片名
c、图片在当前文件上一层:../图片名
绝对路径:盘符:/文件夹/图片名,但 是严禁使用
图片网址:网络上的图片链接,但是一般不用
②height和width:图片的高度和宽度。可以用CSS样式代替
③title:图片标。当鼠标指上之后显示的文字
④alt:当图片无法显示的时候,显示的文字
2em(倾斜强调)
3strong(加粗强调)
4b(加粗)
5i(倾斜)
Strong、em、b、i的区别
1、Strong、em都表示强调,Strong为粗体,em为斜体,而Strong的强调 程度逗比em高
2、Strong和b都能加粗,em和i都能倾斜,,但是Strong和em多了一层强调的语义 。H5要求标签尽可能实现语义化。
6q(短引用)
7small/big(缩小/放大字体):small和big分别是缩小和扩大字体,都可以多层嵌套直至上限或下限
8a(超链接)
1、href:超链接的路径,可以是网络链接,也可以是本地文件。
2、target:跳转页面打开的位置。_self自身页面,_blank新页面。
3、title:鼠标指在超链接上显示的名称。
4、Rel(被链接是当前的前/后一篇):指定被链接文档与当前文档的关系,搜索引擎 会利用该属性 获取更多的有关链接的信息:
rel="prev"被链接文档是当前文档的前一篇文 档,
rel="next"被链接文档是当前文档的后一篇文档,
rel="icon"被链接文档是当前文档的图标
rel="stylesheet"被链接文档是当前文档的样式表
5、Rev(当前是被链接的前/后一篇)
锚链接:
①本页面锚链接:a、设置锚点:a name="top"/a
b、跳转锚点:#name名
①页面间锚链接:a、在即将跳转页面的指定位置设置锚点
b、跳转锚点:页面地址.html#name名
a href="02_常见的块级标签.html#Hbuilder"页面间锚链接/abr/
功能性链接: mailto用于给指定邮箱发送邮件
file:///e:/aaa.png打开本地文件
tencent://message/?uin=1315618220 给指定QQ发送息
9s标签,有误文本:删除线
s这是S标签中的文字/sbr /
10cite标签:浏览器显示为倾斜,常用于书、画作、作品的引用
cite这是cite中的文本/citebr /
11code:计算机代码,不保留代码格式
pre
code/code
/pre
12bdo:表示文本方向,属性:dir="ltr"表示从左往右,dir="rtl"表示从右往左
bdo dir="rtl"1234567/bdobr /
kbd:表示需要用户用键盘输入的内容,浏览器显示为等宽字体
请输入“kbdEsc/kbd”推迟系统br /
13sup:上标文本,sub:下标文本
xsub6/subbr /
© copy; 空格 nbsp;
© copy; 空格 nbsp;br /
14u:下划线
u这是下划线/ubr /
mark:高亮或标记文本,浏览器显示为黄色背景
markmark/markbr /
通常情况下,我们用空格键来打出多个空格,而在编写代码时,通过空格键、Tab键以及回车键打出的空格,都会被HTML(超文本标记语言)自动忽略。HTML将这样的键视为空白字符,并显示为单个空白间隔。尽管CSS提供了多种样式的空格和缩进,但是在HTML中也有一些工具可以让你自己定义空格。
1、插入一个非间断空格
一般来说,无论你按多少次空格键,HTML也只会在单词之间显示一个空白间隔。当你需要插入多个空格时,请输入nbsp;或#160;代码。[1] 它们名为“空格占位符”,你输入几个,就能在页面中显示几个空格。之所以称之为非间断空格,是因为这样不会产生换行符。如果你滥用这种空格,浏览器可能无法以整齐易读的方式插入换行符。
2、插入不同宽度的空格
有多种字符实体可以让浏览器显示空格。不同的浏览器在显示方式上可能会有一点不同,但是和nbsp;不同,它们不会影响换行:
ensp; — “en空格”是根据字体排印学的计量单位命名,宽度是两个普通空格的宽度
emsp; — “em空格”大概是四个普通空格的宽度
3、使用非间断空格模拟制表符
生成段落的一种方式就是在第一行前插入几个空格:nbsp;nbsp;nbsp;nbsp;。这个方法只适用于HTML,如果你使用CSS的话,不推荐这一方法(在其它步骤中会介绍别的方法)。如果段落的内容是富文本,请使用“pre”标签。
4、使用CSS生成段落。
CSS的内边距或外边距给浏览器指明了具体的显示格式,所以显示效果的一致性较高。即使你不是很了解CSS,手边也没有说明表,也可以很容易地添加。下面将具体说明如何将整个段落移到右边:[5]
在HTML文档的head/head部分,插入以下命令:
stylep.indent{ padding-left: 1.8em }/style
“p.indent”定义了一个叫“indent”(可以随意命名)的段落(标签为p)。剩下的命令则是给段落左侧添加内边距空格。
返回HTML文档的主体。每当你想添加段落时,在标签中插入以下内容:
p class="indent"/p
要调整缩进的数量,只需要更改CSS命令中的数字“1.8”即可。后面的“em”要保留,它是表示宽度的单位。
分享文章:html5空格代码,html5中的空格
文章分享:https://www.cdcxhl.com/article32/dsdpjpc.html
成都网站建设公司_创新互联,为您提供企业网站制作、品牌网站制作、响应式网站、建站公司、全网营销推广、搜索引擎优化
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联