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. js中判断输入框是否为空（判断是一串空的字符串）

    function ltrim(str) {  if(str.length==0)    return(str);   else {    var idx=0;    while(str.charAt( ...

  2. [转]Axis2创建WebService实例

    以下文章来自http://clq9761.iteye.com/blog/976029,作者clq9761 一.Axis2的下载和安装 1.可从http://ws.apache.org/axis2/ 下 ...

  3. java开发之提高java和mysql代码性能和质量

    0.if嵌套的层数最好不要超过3层 点击(此处)折叠或打开 import java.util.HashMap; import java.util.Map; public class Qiantao { ...

  4. Codeforces#362

    A题 题意:给定一串数列,t,t+s,t+s+1,t+2s,t+2s+1......问某一个数是否是数列当中的 题意:只需判断(x-t)与(x-t-1)能否整除s即可,注意起始时的判断 #includ ...

  5. iOS动画特效 分类： ios技术 2015-05-15 16:29 311人阅读 评论(0) 收藏

    关于图层的几个坐标系. 对于ios来说,坐标系的(0,0)点在左上角,就是越往下,Y值越大.越往右,X值越大. 一个图层的frame,它是position,bounds,anchorPoint和tra ...

  6. NOIP前刷水行动

    2016.11.15 BZOJ1009:DP+矩阵乘法+KMP BZOJ1898:矩阵乘法 BZOJ4101:贪心,考虑我们往右边撞的时候,我们会向左边冲 ,于是枚举答案点利用一个指针计算即可! 20 ...

  7. C++的封装性

    C++的封装性 C++的阶段,我想根据C++的一些特有的特性分别写一些专题,每个专题我都捎带讲一些语法,当然不会很多,我还是会像C语言那样,内存结构贯穿始终,有汇编就有真相…… 本专题,我们讲述封装性 ...

  8. C # 产生鼠标点击事件

    新建一个WinFrom,找到MouseDown,回车,生成代码如下点击的效果如图 参考文章:http://blog.csdn.net/u012842807/article/details/454143 ...

  9. java中集合框架

    java平台提供了一个全新的集合框架."集合框架"主要由一组用来操作对象的接口组成.不同接口描述一组不同数据类型. 在很大程度上,一旦您理解了接口,您就理解了框架.虽然您总要创建接 ...

  10. django QuerySet里那些常用又不常见的技巧

    QuerySet 像Entry.Objects.all(),这些操作返回的是一个QuerySet对象,这个对象比较特别,并不是执行Objects.all(),或者filter之后就会与数据库交互,具体 ...