html标签详解(1)

 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
<br>          换行标签
<hr/>         横线标签
<p></p>   表示段落
<h1></h1> 表示标题,分为h1到h6字体依次递减
 

<strong> </strong>和<b> </b>                将文本加粗

<em> </em>和<i> </i>                           将文本倾斜

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

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

<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.图片标签

<img></img>

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>
运行结果如下:
 



 
 
posted on 2017-01-17 12:15  雨点的名字  阅读(812)  评论(6编辑  收藏  举报