中山手机建网站,phpcms 网站,牛栏前网站建设,新开传奇目录 1.HTML块级和内联标签#xff1a;
1.块级元素#xff1a;
2.内联元素:
3.元素嵌套#xff1a;
4.元素转换#xff1a;
示例如下: 2.内联框架#xff1a;
前言#xff1a; 示例如下: 3.布局#xff1a;
4.头部标签#xff1a;
前言#xff1a;
说明…目录 1.HTML块级和内联标签
1.块级元素
2.内联元素:
3.元素嵌套
4.元素转换
示例如下: 2.内联框架
前言 示例如下: 3.布局
4.头部标签
前言
说明 1.HTML块级和内联标签
1.块级元素
块级元素的特点就是他们自己独占一行代表就是div,还有p,nav,aside,footer等等。块级元素一般都具有特定的语义可以使代码的可读性更强。HTML表格表单以及列表-CSDN博客
块级元素的特征如下:
不管用不用换行块级元素总是在新的一行上开始。块级元素的宽度高度以及外边距都可以控制。如果省略块级元素的宽度那么他的宽度为浏览器窗口的默认宽度。块级元素中可以包含其他内容和块级元素。
2.内联元素:
内联元素也称为行内元素行内元素最常见的是span,还有b,i,u,em....等等,内联元素往往带有特殊的显示效果可以代替CSS样式非常实用,行内元素的主要特征如下:
行内元素和其他元素在同一行向上显示。行内元素的宽度高度以及外边距和内边距都不可改变。行内元素的宽度就是其中内容的宽度且不可改变。内联元素只能容纳文本或者其他内联元素。
对于行内元素的使用需要注意几点
设置宽度width无效。设置高度无效但可以通过line-height来设置行高。可以设置margin外边距但是只有左右边距有效上下无效。设置padding内边距只有左右有效上下无效需要注意是元素范围是增大了但是对元素周围的内容是没有影响的。可以通过display属性将元素在行内元素和块级元素之间切换。
3.元素嵌套
大部分的HTML元素都可相互嵌套并且深度也没有明确限制块级和内联如下:
块级元素可以嵌套块级元素。块级元素可以嵌套内联元素。内联元素可以嵌套内联元素。内联元素可以嵌套块级元素。
需要注意的是一般不建议在内联元素中嵌套块级元素这样不符合规范还会导致内联元素被撑开独自占据一行但是又不得不这样做。
4.元素转换
在很多时候我们可以借助CSS改变我们可以通过CSS中的display属性将块级元素改为内联元素或者将内联元素修改成块级元素或者两者优点都保存将标签设置为行内快元素。虽然CSS可以改变标签显示的类型但是不能改变标签的语义例如:
div标签用来布局的而不是用来显示文本的。p标签是用来显示文本的而不是用来布局的。strong标签是用来强调文本的加粗是附带的b标签只是用来加粗的。
示例如下:
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {background-color: rgb(116, 209, 40);}p {background-color: red;}span {background-color: aqua;}/style
/headbodyspan(第一个span)/spanspan(第二个span)/spanp(第一个p)/pspan(第三个span)/spandivspan(div里的span)/spanpdiv里的p/p/divspan(最后一个span)/span
/body/html 2.内联框架
前言
在HTML中可以使用iframe标签来设置一个内联框架它的功能是将一个网页嵌入到另一个网页中iframe标签会在网页中定一个矩形的区域在这里面可以显示另一个网页的内容。
iframe使用说明:
iframe标签的语法如下:
iframe srcurl widthm heightniframe
其中src里面的url是其他网页的地址width和height来决定这个网页在次页面显示的高度和宽度一般情况下单位是像素也可换成百分比。
HTMLiframe标签对搜索引擎的抓取有负面影响在现代的Web设计中不建议使用。
下列是iframe的属性:
属性值描述alignleft,right,top,middle,bottomHTML5不支持HTML4.01已经废弃设置如何来对齐iframe.frameborder1, 0HTML5不支持。设置是否显示iframe周围的边框。height像素设置iframe的高度。longdescURLHTML5不支持。设置一个页面该页面中包含了有关iframe的描述。marginheight像素HTML5不支持。设置iframe的顶部和底部的边距。marginwidth像素HTML5不支持。设置iframe的左侧和右侧的边距。nametext设置iframe的名称。sandbox,allow-forms,allow-same-origin,allow-scripts,allow-top-navigation对iframe的内容定义一系列额外的限制。scrollingyes,no,autoHTML5不支持设置是否在iframe中显示滚动条。seamlessseamless让irame看起来像是父文档中的一部分(即没有边框和滚动条)。srcURL设置要在iframe中显示的文档地址(URL)。srcdocHTML代码设置iframe中要显示的内容该属性会覆盖src属性。width像素设置iframe的宽度。
示例如下:
下列代码中的style定义的事标签的样式也就是CSS下面把iframe定义成550像素宽度1000像素高度。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.size {width: 550px;height: 1000px;}/style
/headbodya hrefhttps://www.bilibili.com/此链接到bilibili/abriframe srchttps://www.bilibili.com/ frameborder0 classsize/iframe/body/html
可以看到运行结果按照我们设置的宽度和高度嵌入到页面中了。 iframe除了可以嵌入其他页面还可以嵌入图片视频音频等等其他资源下列代码我是使用的自己当前文件夹的路径当然若想更换则需要修改地址即可也可用https这样的:
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleiframe {width: 550px;height: 500px;}/style
/headbodyiframe src./img/F9704A2AF819298B60DCB7FE6A077918.jpg frameborder0/iframeiframe src./MPG4/277330630_da2-1-192.mp4 frameborder0/iframe/body/html
运行结果如下图: 3.布局
布局是网页中必不可少的一部分通过布局可以改变网页中内容的排列方式让网页看起来更加美观合理在布局的过程中会经常用到CSS来修改HTML标签的样式或者使用JavaScript给页面添加一些功能。
在上述的块级和内联中我们知道div标签是一个专门用来布局的标签但是使用div标签进行布局具有不明确的语义对于搜索引擎理解页面内容也是不好的。所以在HTML5中出现了专门用于布局的标签他们用来定义网页的各个部分的内容使得语义更加明确HTML5布局标签表如下所示:
标签说明header用于定义网页的头部头部中一般包含一些介绍性的内容如网站名称logo或者作者的信息。nav用于定义网页中的导航栏。section 用于在网页中第一个单独的部分可以包含文本图像表格。 section代表HTML文档中的节或段段可以认为是一篇文章里主体的分段节可以认为是一个页面里面的分组主要作用就是对页面进行分块或者对文章内容进行分段。 article用于定义文章或者其他独立的信息代表一个页面中自成一体的内容如博客上的文章bilibili里面博主发的视频等等。aside用于定义网页内容以外的部分如网页的侧边栏。footer用于定义网页底部如网页说明。details用于定义一些详细信息并且可以根据要求隐藏或者显示这些信息。summary用于为details标签定义标题。 示例代码如下:
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title这里存放了一个网页的标题/titlestylebody {font: 14px Arial, sans-serif;margin: 0px;}header {padding: 10px 20px;background: red;}header h1 {font-size: 24px;}.container {width: 100%;background: #f2f2f2;}nav,section {float: left;padding: 20px;min-height: 170px;box-sizing: border-box;}section {background-color: yellow;width: 80%;height: 100%;}nav {width: 20%;background: yellowgreen;}nav ul {list-style: none;line-height: 24px;padding: 0px;}nav ul li a {color: #333;}.clearfix:after {content: .;display: block;height: 0;clear: both;visibility: hidden;}footer {background: red;text-align: center;padding: 5px;}/style
/headbodydiv classcontainerheaderh1bilibili简介/h1/headerdiv classwrapper clearfixnavullia hrefhttps://www.bilibili.com/首页/a/lilia hrefhttps://www.bilibili.com/anime/?spm_id_from333.1007.0.0番剧/a/lilia hrefhttps://manga.bilibili.com/?frombill_top_mnavspm_id_from666.4.0.0漫画/a/lilia hrefhttps://www.bilibili.com/guochuang/?spm_id_from333.1007.0.0国创/a/lilia hrefhttps://www.bilibili.com/v/knowledge/?spm_id_from333.1007.0.0知识/a/lilia hrefhttps://www.bilibili.com/v/sports/运动/a/li/ul/navsectionh2网站简介/h2p哔哩哔哩了(bilibili.com)是国内知名的视频弹幕网站这里有及时的动漫新番活跃的ACG氛围有创意的Up主。/p/section/divfooterpwww.bilibili.com/p/footer/div/body/html 4.头部标签
前言
在HTML中head标签是所有头部标签的容器这些头部标签用来定义有关HTML文档的元数据(描述数据的数据)以及所需资源的引用如CSS文件JavaScript脚本对文档能在浏览器中正确显示起到了非常重要的作用我们可以根据需求在HTML头部定义大量的元数据也可以定义很少或者不定义虽然头部标签是HTML文档的一部分但是里面的内容并不会显示在浏览器中。
说明
在head标签中可以使用的标签有title,base,link,style,meta,script和noscript等如下就来一一说明:
1.title标签
title标签是用来定义HTML中的标题的只有包含title标签的文档才是一个有效的HTML文档。在HTML文档中只允许有一个tilte标签并且title标签 必须放在head标签里。需要注意的是title标签只能包含纯文本内容。title标签里面的内容不应该太长。
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title这里存放了一个网页的标题/title
/head
title的作用如下
在浏览器标题栏或者任务栏中显示标题。当页面被添加到收藏夹(书签)时提供标题。在搜索结果中显示页面的标题。 2.base 标签
base标签用于为页面中所有相对链接指定一个基本链接当设置了基本连接后当前页面中的所有相对链接都会使用这个基本链接作为前缀需要注意的是base标签必须出现在任何引用外部资源标签之前并且一个HTML文档只能存在一个base标签。
!DOCTYPE html
html langen
headmeta charsetutf-8titlelt;basegt;标签演示/titlebase hrefhttps://www.bilibili.com/
/head
bodyullia hrefindex.html首页/a/lilia hrefhtml/index.htmlHTML搜索/a/li/ul
/body
/html
如上述的示例中首页的a标签中的链接会变成https://www.bilibili.com/index.html,HTML搜索的a中链接会变成https://www.bilibili.com/html/index.html. 3.link标签
link标签大部分情况下都是用来引用外部CSS样式表link主要包含两个属性:
rel属性用来指示引用文件的类型。href属性用来设置外部文件的路径。
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href../test1.css
/headHTML文档head中可以有任意数量的link标签 4.style标签:
style标签可以在HTML文档中嵌入CSS样式style标签定义的样式仅仅只对当前的HTML文档有效代码如下:
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleiframe {width: 550px;height: 500px;}/style
/head 5.meta标签
meta标签可以提供关于HTML文档的元数据如页面有效期页面作者关键字......。meta标签中定义的数据不会在页面显示但是会被浏览器解析。属性说明如下
charset属性用来指定文档的编码。name属性用来描述页面信息。
meta charsetUTF-8
meta name此页面并没有什么东西。 6.script标签
在HTML文档可以在script标签中书写JavaScript脚本示例如下:
button classpink按钮1/buttonbutton按钮2/buttonbutton按钮3/buttonbutton按钮4/buttonscriptlet bts document.querySelectorAll(botton)for (let i 0; i bts.length; i) {bts[i].addEventListener(click, function () {document.querySelector(.pink).className this.className pink})} /script 7.noscript标签
如果浏览器不支持JavaScript脚本或者JavaScript被浏览器禁用时在可以使用noscript标签来提供给用户提示里面除了不可以包好script外可以包含任何HTML元素:
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlenoscripth2你的浏览器不支持JavaScript或者禁用了javaScript/h2/noscript
/head
