HTML基本标签及结构详解
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> 转义字符: 空格 < 小于号 >大于号 6.表格标签以及表单标签 (编辑:ASP站长网) |