加入收藏 | 设为首页 | 会员中心 | 我要投稿 湖南网 (https://www.hunanwang.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 编程 > 正文

HTML基本标签及结构详解

发布时间:2020-12-02 09:30:12 所属栏目:编程 来源:网络整理
导读:这篇文章首要先容了HTML根基标签及布局详解,本文给各人先容的很是具体,对各人的进修或事变具有必然的参考小心代价,必要的伴侣可以参考下
副问题[/!--empirenews.page--]

1.HTML:超文本标志说话。是一种标识性说话,非编程说话,不能行使逻辑运算。通过标签将收集上的文档名目举办同一,使分手的收集资源链接为一个逻辑整体。

超文本是一种组织信息的方法,通过超等链接将多种前言链接起来

标志:标签。用<>包裹的具有必然寄义的内容,好比:…

静态网页:稳固

动态网页:跟靠山同时改变

2.HTML标签布局

1.文档布局:

<!doctype html><!--!暗示声明的意思。这一行代码意思:下面的文档标签将以html5举办理会--> <html> <!-头部.用来完成一个网页的相干配置-> <head> <meta charset=http://www.jb51.net/web/"utf-8"><!--汉字编码--><!--meta:元,用来完成对应配置--> <meta name=http://www.jb51.net/web/"keywords" content=http://www.jb51.net/web/""><!--配置一个网站搜刮的要害字--> <meta name=http://www.jb51.net/web/"description" content=http://www.jb51.net/web/""><!--网站的描写内容--> <title>我的第一个html网页</title><!--问题--> <!--配置网站的小图标--> <link rel=http://www.jb51.net/web/"shortcut icon" href=http://www.jb51.net/web/"" type=http://www.jb51.net/web/"image/png"> <style> /*誊写样式的处所*/ </style> <link rel=http://www.jb51.net/web/"stylesheet" href=http://www.jb51.net/web/"style.css"><!--用来引入外部样式文件--> </head> <!--2.主体部门--> <body> <p>这是一个段落</p> </body> <script> //放剧本代码的处所 </script> </html>

2.常用标签:

<!--做移动端开拓配置--> <meta name=http://www.jb51.net/web/"viewport" content=http://www.jb51.net/web/"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <!--1.div标签,用于机关,没有详细寄义,分层。层--> <div></div> <!--2.hx:问题,从1级到6级,1级最大,6级最小,自动加粗,有默认字号--> <h1></h1>...<h6></h6> <!--3.p标签:暗示段落。相等与一个回车.--> <p></p> <!--4.br:天生换行符--> <br> <!--6.a标签,实现链接跳转,target:_blank新窗口/_self当前窗口_parent/top--> <a href=http://www.jb51.net/web/"url地点/链接" title=http://www.jb51.net/web/"B站">文本</a> <a href=http://www.jb51.net/web/"url地点" target=http://www.jb51.net/web/"_blank">文本</a> <a href=http://www.jb51.net/web/"url地点" target=http://www.jb51.net/web/"_self">文本</a> <a href=http://www.jb51.net/web/"'#href" target=http://www.jb51.net/web/"#href">文本</a> 锚点链接 href='#href' 方针位置的属性要配置为与其一向 <!--7.img用于加载外部图片图像,src用来计划加载的图片或图像的路径,alt当图片图像加载不乐成时,表现alt中的内容,不然不会表现--> src路径 alt替代文本 title 图片提醒文本 width:图像宽度 height:图像高度 border边框 <img src=http://www.jb51.net/web/"" alt=http://www.jb51.net/web/"表现不出的名字"> <!--8.span浸染与div一样,都是用于机关,div会单独有一行,span不会,span便签用于行内机关--> <span></span> <!--9.ul和ol,前者无序后者有序,都用的li标签。--> <ul> <li>li1</li> <li>li2</li> <li>li3</li> </ul> <ol> <li>li1</li> <li>li2</li> <li>li3</li> </ol> //自界说列表 重点每个网站的最下面根基都是通过自界说 <dl> dl中只能有dt和dd 一个dt对应多个dd 为兄弟相关 <dt></dt>名词1 <dd></dd>名词1表明1 <dd></dd>名词1表明2 </dl>自界说列表

4.标签属性:

<!--标签属性: 1.凡是由属性名=http://www.jb51.net/web/"属性值"构成 2.起附加信息的浸染。 3.不是全部标签都有属性,好比br标签--> 下面的title class就是属性名,尔后头的就是属性值 <p title=http://www.jb51.net/web/"段落" class=http://www.jb51.net/web/"content" id=http://www.jb51.net/web/"content">这是一个测试段落</p>

5.部门其他标签:

<!--文本名目化标签:就是通过标签来美化文本外面-> <!--1.b和strong:都有加粗浸染,且都是行级标签(不会自动换行), 但strong尚有夸大浸染。注:夸大首要是用于SEO时,便于提前要害字--> <b>加粗</b> <strong>加粗且夸大</strong> <!--2 i和em:使笔墨倾斜,em具有夸大浸染。且都是行级标签(不会自动换行), 假如只是简朴倾斜结果,用i标签就可以了,好比添加图标等--> <i>倾斜</i> <em>倾斜且夸大</em> <!--3.pre预名目化文本,保存换行和空格及宽度。 笔墨的字号会小一号,块级标签(在赏识器中会独有一行)--> <pre> pre预名目化 文本,保存换行和空 格及宽度 </pre> <!--samll和big,将笔墨缩小或放大一号(行级标签,不会独有一行,且不辨认宽高)--> <!--赏识器支持的最小字号是12px,表现比12px还小的笔墨的话,必要举办处理赏罚--> <p>我是正常的</p> <small>我是小一号的笔墨</small> <!--sub和sup:配置文本为下标和上标,用来调解文本正常表现的基线,且笔墨会自动小一号--> <p>正常表现:X1+X2=Y</p> <p>下标:X<sub>1</sub>+X<sub>2</sub>=Y</p> <p>下标:X<sup>1</sup>+X<sup>2</sup>=Y</p> 删除线 <del></del> <s></s> 下划线 <ins></ins> <u></u> 转义字符:&nbsp; 空格 &lt; 小于号 &gt;大于号

6.表格标签以及表单标签

(编辑:湖南网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读