首页 > > 网页制作 > css >

html标签详解（1）

2018-06-24 00:53:33来源：未知阅读 ()

http标签详解及讲解

1.基础标签

1  <!DOCTYPE html>               <!--表示文本类型-->
2 <html>                        <!--<html></html>表示创建一个html文档-->
3     <head>                    <!--<head></head>设置文档标题和其它在网页中不显示的信息-->
4         <title>标题</title>   <!--<title></title>设置文档的标题，就是最上方的名字-->
5     </head>
6     <body>                    <!--<body></body>设置文档的内容-->
7         <p>原创作者：雨点的名字</p>
8    </body>
9 </html>

2.body内常用标签

注释标签快捷键：Ctrl+Shift+/, 我用的是myeclipse

换行标签

<hr/> 横线标签

表示段落

<h1></h1> 表示标题，分为h1到h6字体依次递减

和 将文本加粗

和 将文本倾斜

<del> </del>和<s> </s> 将文本设置删除线

<ins> </ins>和 将文本设置下划线

<pre></pre> 预编译格式很有用的标签

 1 <!DOCTYPE html>
 2 <head>
 3 <title>来吧</title>
 4 </head>
 5 <body>
 6 <!--这是一个注释标签，页面上你看不到-->
 7 <h4>我是标题哦</h4>
 8 <hr/>
 9 <p>我是p标签<b>我自动加粗的</b></p><br/>
10 <s>我是删除线</s>
11 <u>我是下划线</u><br/>
12 <pre>  我是预编译，
13          我怎么输它就怎么显示</pre>
14 </body>
15 </html>

运行结果如下：

3.图片标签

1 <!DOCTYPE html>
2 <head>
3 <title>美女图片</title>
4 </head>
5 <body>
6 <img src="first.jpg"   title="就问你美不美"  alt="这里显示第一张图"  width="200" height="300">
7 <img src="second .jpg" title="身材太好了"   alt="这里显示第二张图"  width="200" height="300">
8 </body>
9 </html>

注解：在该<img> </img>标签中常用src属性表示图片的来源和名称；用title属性设置鼠标放到图片上时显示的文字；用alt属性设置当图盘无法正常显示时对图片的描述；用width和height属性设置图片的宽和高

效果如下：

4：链接标签

（1）基本链接介绍

<a> </a> 标签实现超链接

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>我是a标签</title>
 5     </head>
 6     <body>
 7         <!-- 版权声明-->
 8         <a href="http://www.baidu.com/" 
 9            title="百度一下，你就知道" target="_self">百度</a>
10         <a href="http://www.163.com" 
11            title="网易新闻" target="_blank">网易</a>
12    </body>
13 </html

注解：在利用<a> </a>实现超链接时使用href属性指明跳转的地址；使用title属性设置当鼠标放到超链接上时显示的文字；用target属性指明超链接的跳转方式，其中_self表示不开启新窗口且在当前窗口打开跳转后的页面（默认）而_blank表示开启新窗口打开跳转后的页面。

细节：如果在一个页面中所有的超链接跳转方式均一致，那么可以在<head> </head>标签中进行统一的配置。在<head></head>标签中添加

<base target="_self"></base> 表示该页面的所有超链接均在原窗口显示

<base target="_blank"></base> 表示该页面的所有超链接均在新窗口显示

（2）通过a标签实现页面定位

案例：点击回到页面顶部

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>网页定位</title>
 5     </head>
 6     <body>
 7         <p id="top">这里是顶部</p>
 8         <p>原创作者：蜗牛</p>
 9         <p>原创作者：蜗牛</p>
10         <a href="#top">返回顶部</a>
11    </body>
12 </html>

注解：当点击返回顶部的时候，页面会定位在id=“top”标签的位置，而且是最上面，这就是通过id属性定位，这里网页中放的东西很少，没有啥效果，你要测试可以在这两者之间添加许多其他标签，这样效果就很明显

（3）通过a标签实现下载

注解：可以实现点击链接自动下载文档，和压缩文件，当不能直接下载图片，当点击图片后页面会打开图片而不是下载

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>下载</title>
 5     </head>
 6     <body>
 7         <a  href="6用户注册项目.docx">点击下载文档</a>
 8         <a  href="2017-1-4Jquery.rar">点击下载压缩文件</a>
 9         <a  href="second .jpg">点击图片</a>
10    </body>
11 </html>

想要实现图片的下载需要在添加一步;

1 <body>
2     <a href="first.jpg" download="first.jpg">点击图片</a> <!--download实现图片下载功能-->
3 </body>

5：html框架

 1 <!DOCTYPE html>
 2 <head>
 3 <title>Html框架</title>    <!--注意;搭建框架是不能出现<body></body>标签的，所以要先删除<body>标签-->
 4 </head>
 5 <frameset rows="25%,75%"> <!--frameset用来定义一个框架集 ，row代表有上下两个界面，占比为25%和75%-->
 6           <frame src="head.html" name="heand"/> <!--frame代表一个界面，界面内容为head.html中内容-->
 7           <frameset cols="25%,75%">    <!--在下面在定义一个框架级，再分为左右两部分 cols代表列-->
 8                 <frame src="left.html" name="left"/>
 9                 <frame src="center.html" name="body"/> <!--定义name="body"是有意义的，方便调用-->
10            </frameset> 
11      </frameset><noframes></noframes>      <!--noframes还未知意义，删了照样运行所以知道的朋友可以给我留言-->
12 </html>

下面是3个框架中的html

1：head.html

1 <!DOCTYPE html>
2 <head>
3 <title>head.html</title>
4 </head>
5 <body>
6     <h1 align="center" style="color:#FF0000; font-size:50 ">欢迎进入本管理系统</h1>
7 </body>
8 </html>

2:left.html

1 <!DOCTYPE html>
2 <head>
3 <title>无标题文档</title>
4 </head>
5 <body>
6     <a href="https://www.baidu.com" target="body">百度</a>    <!--这里target="body"，代表当点击百度时，内容会在name="body"的界面中出现-->
7     <a href="http://www.163.com" target="body">网易</a>
8 </body>
9 </html>

3:center.html

1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>center.html</title>
5 </head>
6 <body>
7 </body>
8 </html>

运行结果如下：

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：H5与CS3权威下.18 and 19 选择器（1）

下一篇：html标签详解（2）

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签