http标签详解及讲解       
1.基础标签
  <!DOCTYPE html>               <!--表示文本类型-->

 <html>                        <!--<html></html>表示创建一个html文档-->

     <head>                    <!--<head></head>设置文档标题和其它在网页中不显示的信息-->

         <title>标题</title>   <!--<title></title>设置文档的标题，就是最上方的名字-->

     </head>

     <body>                    <!--<body></body>设置文档的内容-->

         <p>原创作者：雨点的名字</p>

    </body>

 </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>                                                    预编译格式很有用的标签
 
 <!DOCTYPE html>

 <head>

 <title>来吧</title>

 </head>

 <body>

 <!--这是一个注释标签，页面上你看不到-->

 <h4>我是标题哦</h4>

 <hr/>

 <p>我是p标签<b>我自动加粗的</b></p><br/>

 <s>我是删除线</s>

 <u>我是下划线</u><br/>

 <pre>  我是预编译，

          我怎么输它就怎么显示</pre>

 </body>

 </html>
运行结果如下：

3.图片标签

<img></img>

 <!DOCTYPE html>

 <head>

 <title>美女图片</title>

 </head>

 <body>

 <img src="first.jpg"   title="就问你美不美"  alt="这里显示第一张图"  width="200" height="300">

 <img src="second .jpg" title="身材太好了"   alt="这里显示第二张图"  width="200" height="300">

 </body>

 </html>

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

效果如下：

 4：链接标签   
（1）基本链接介绍

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

 <!DOCTYPE html>

 <html>

     <head>

         <title>我是a标签</title>

     </head>

     <body>

         <!-- 版权声明-->

         <a href="http://www.baidu.com/"

            title="百度一下，你就知道" target="_self">百度</a>

         <a href="http://www.163.com"

            title="网易新闻" target="_blank">网易</a>

    </body>

 </html

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

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

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

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

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

案例：点击回到页面顶部

 <!DOCTYPE html>

 <html>

     <head>

         <title>网页定位</title>

     </head>

     <body>

         <p id="top">这里是顶部</p>

         <p>原创作者：蜗牛</p>

         <p>原创作者：蜗牛</p>

         <a href="#top">返回顶部</a>

    </body>

 </html>

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

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

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

 <!DOCTYPE html>

 <html>

     <head>

         <title>下载</title>

     </head>

     <body>

         <a  href="6用户注册项目.docx">点击下载文档</a>

         <a  href="2017-1-4Jquery.rar">点击下载压缩文件</a>

         <a  href="second .jpg">点击图片</a>

    </body>

 </html>
想要实现图片的下载需要在添加一步;
 <body>

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

 </body>
5：html框架
 <!DOCTYPE html>

 <head>

 <title>Html框架</title>    <!--注意;搭建框架是不能出现<body></body>标签的，所以要先删除<body>标签-->

 </head>

 <frameset rows="25%,75%"> <!--frameset用来定义一个框架集 ，row代表有上下两个界面，占比为25%和75%-->

           <frame src="head.html" name="heand"/> <!--frame代表一个界面，界面内容为head.html中内容-->

           <frameset cols="25%,75%">    <!--在下面在定义一个框架级，再分为左右两部分 cols代表列-->

                 <frame src="left.html" name="left"/>

                 <frame src="center.html" name="body"/> <!--定义name="body"是有意义的，方便调用-->

            </frameset>

      </frameset><noframes></noframes>      <!--noframes还未知意义，删了照样运行所以知道的朋友可以给我留言-->

 </html>

下面是3个框架中的html

1：head.html
 <!DOCTYPE html>

 <head>

 <title>head.html</title>

 </head>

 <body>

     <h1 align="center" style="color:#FF0000; font-size:50 ">欢迎进入本管理系统</h1>

 </body>

 </html>

2:left.html

 <!DOCTYPE html>

 <head>

 <title>无标题文档</title>

 </head>

 <body>

     <a href="https://www.baidu.com" target="body">百度</a>    <!--这里target="body"，代表当点击百度时，内容会在name="body"的界面中出现-->

     <a href="http://www.163.com" target="body">网易</a>

 </body>

 </html>

3:center.html

 <!DOCTYPE HTML>

 <html>

 <head>

 <title>center.html</title>

 </head>

 <body>

 </body>

 </html>

运行结果如下：

 

 
 

html标签大全（1）的更多相关文章

  1. meta标签大全

    meta标签大全 <!--     x-ua-compatible(浏览器兼容模式)     仅对IE8+以效     告诉浏览器以什么版本的IE的兼容模式来显示网页     <meta ...

  2. 【转】Html标签大全

     Html标签大全 2013-07-05 18:22:33 分类: Python/Ruby Html标签大全 <a></a> 超文本链接 <a href="UR ...

  3. 常用的html标签大全

    html标签大全 一.文字 1.标题文字 <h#>..........</h#> #=1~6:h1为最大字,h6为最小字 2.字体变化 <font>........ ...

  4. 【HTML_标签大全】

    HTML标签大全 标签 描述 标签类型 备注 <!--...--> 定义注释 / 单标签 <!DOCTYPE> 定义文档类型 / 单标签 <head></he ...

  5. dedecms标签大全

    今天用了1个小时的时间整理了dedecms标签大全,非常经典,非常经典的织梦dedecms标签,希望对大家制作dedecms网站有帮助      channel_____栏目   dede_arcty ...

  6. meta标签大全（荐）

    html的meta总结(常用) 1.Meta标签大全 <!-- 声明文档使用的字符编码 --> <meta charset='utf-8'> <!-- 优先使用 IE 最 ...

  7. HTML基础标签大全

    HTML 标签大全及属性 常用的块级元素有 :div , from , table, p ,pre,h1-h5,dl,ol,ul 常用的内联元素:span ,a ,strong,em ,label , ...

  8. 【jsp】JSTL标签大全详解

    一.JSTL标签介绍 1.什么是JSTL? JSTL是apache对EL表达式的扩展(也就是说JSTL依赖EL),JSTL是标签语言!JSTL标签使用以来非常方便,它与JSP动作标签一样,只不过它不是 ...

  9. 织梦dedecms标签大全总结

    织梦dedecms标签大全总结,同时还建议多参考dede默认模板,织梦默认模板上的标签还是很有参考价值的. dedecms系统参数全局标签,在后台系统设置里可以看到这个参数 网站名称:{dede:gl ...

  10. POM标签大全详解

    父(Super) POM <project xmlns = "http://maven.apache.org/POM/4.0.0" xmlns:xsi = "htt ...

随机推荐

  1. Claris and XOR(模拟）

    Claris and XOR Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)To ...

  2. ural1650 Billionaires

    Billionaires Time limit: 3.0 secondMemory limit: 64 MB You probably are aware that Moscow holds the ...

  3. Spark+ECLIPSE+JAVA+MAVEN windows开发环境搭建及入门实例【附详细代码】

    http://blog.csdn.net/xiefu5hh/article/details/51707529 Spark+ECLIPSE+JAVA+MAVEN windows开发环境搭建及入门实例[附 ...

  4. Apache和PHP的优化

    调优 Apache Apache 是一种高度可配置的软件.它具有大量特性,但每一种都代价高昂.从某种程度上来说,调优 Apache 来说就是以恰当的方式分配资源,还涉及到将配置简化为仅包含必要内容. ...

  5. Apache Mina（二）

    在mina的源码,整个框架最核心的几个包是 : org.apache.mina.core.service :IoService.IoProcessor.IoHandler.IoAcceptor.IoC ...

  6. Thinking in scala (8)---- 乘幂计算

    递归的方式: b^n = (b^(n/2))^2 若n是偶数 b^n = b*(b^(n-1)) 若n是奇数 迭代的方式 product:存储中间结果,初始化为1 b^n = (b^2)^(n/2) ...

  7. IOS开发者证书申请及应用上线发布详解(2014版)

    其实一直以来我都想做一个最齐全的上传应用到appstore的教程,但一直狠不下心,今天凌晨2点12分,我鼓起勇气写教程,来吧不多说.登录开发者中心:http://developer.apple.com ...

  8. 一起学JUCE之HashMap

    基于哈希表的 Map 接口的实现.此实现提供所有可选的映射操作,并允许使用 null 值和 null 键.(除了非同步和允许使用 null 之外,HashMap 类与 Hashtable 大致相同.) ...

  9. 解决word启动时报找不到mathpage.wll错误

    按下面的网址进行操作即可: http://www.mathtype.cn/wenti/word-jianrong.html

  10. [vue最新实战] gank客户端（vue2 + vue-router2 + vuex +webpace + es6）新手福利，干货多多

    vue-meizi 本项目是基于vue2最新实战项目,是适合新手进阶的绝佳教程.代码简单易懂,注释多多.实现了移动端使用最多的 无限滚动,图片加载,左右滑动,等待.先发布预览版本,后面更多更全的功能和 ...