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标签详解(HTML JAVASCRIPT)

    Meta标签详解,在网上转的,希望对大家有用 您的个人网站即使做得再精彩,在“浩瀚如海”的网络空间中,也如一叶扁舟不易为人发现,如何推广 个人网站,人们首先想到的方法无外乎以下几种: ● 在搜索引擎中 ...

  2. 网页设计：Meta标签详解

    很多人忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧! META标签是HTML语言HEAD区的一个辅 ...

  3. meta标签详解(meta标签的作用)///////////////////////////转

    meta标签详解(meta标签的作用) 很多人却忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧   ...

  4. 引用 struts2标签详解 - wo的的日志 - 网易博客

    引用 元元 的 struts2标签详解   引用 COLD 的 struts2标签详解 要在jsp中使用Struts2的标志,先要指明标志的引入.通过jsp的代码的顶部加入以下的代码: <%@t ...

  5. html标签详解

    html标签详解   <!DOCTYPE> 标签 <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前. <!DOCTYPE ...

  6. html标签详解（2）

    http标签详解 声明 1:这里的文字都是我从我自己csdn账号拷贝过来,是本人学习总结的结晶,所以请尊重本作品.2:如要要转载本文章,则要说明文字的出处.3:如有哪里不对欢迎指出. 在上一篇文章中主 ...

  7. 转：springmvc常用注解标签详解

    Spring5:@Autowired注解.@Resource注解和@Service注解 - IT·达人 - 博客园--这篇顺序渐进,讲得超级好--此人博客很不错http://www.cnblogs.c ...

  8. embed标签详解

    HTML-embed标签详解 Embed(一).基本语法:embed src=url说明:embed可以用来插入各种多媒体,格式可以是 Midi.Wav.AIFF.AU.MP3等等,      Net ...

  9. Meta标签详解

    [转载]Meta标签详解 Posted on 2005-05-17 20:00 二十四画生 阅读(54195) 评论(102)  编辑 收藏 Meta标签详解,在网上转的,希望对大家有用 引言 您的个 ...

随机推荐

  1. Java上传和下载

    1.文件的上传 [1] 简介 > 将一个客户端的本地的文件发送到服务器中保存. > 上传文件是通过流的形式将文件发送给服务器. [2] 表单的设置 > 向服务器上传一个文件时,表单要 ...

  2. mysql中的concat函数,concat_ws函数，concat_group函数之间的区别

    一.CONCAT()函数CONCAT()函数用于将多个字符串连接成一个字符串.使用数据表Info作为示例,其中SELECT id,name FROM info LIMIT 1;的返回结果为+----+ ...

  3. 使用rancher2建k8s集群--个人学习记录

    视频地址这里: http://live.vhall.com/431874021 原生文档这里:https://www.cnrancher.com/docs/rancher/v2.x/cn/overvi ...

  4. MongoDB + Express 环境搭建记

    最近项目需要使用 MongoDB,所以不得不搭建 MongoDB 环境,此文记录搭建过程及使用过程中需要了解的问题. Linux + Windows 混合搭建调试 MongoDB 记录 版本介绍 : ...

  5. shell脚本编写遍历某一目录下的所有文件

    遍历/root/321321/目录显示里面的所有文件 #!/bin/bash dir=`ls /root//` #定义遍历的目录 for i in $dir do echo $i done

  6. keras常见参数input_dim、input_length理解

    在看keras文档embedding层的时候,不太理解其中的input_dim 和input_length 这两个参数,查阅了一下资料,记录下来. keras.layers.Embedding(inp ...

  7. abaqus修改inp直接建立工程

    前面已经知道,通过修改以下inp的节点和单元编号,就可以新建模型,可是对于大的工程来说,逐个选取单元进行添加材料以及确定哪步进行填土仍是比较麻烦的(如果工程网格划分好并告知哪些单元好属于哪些材料,哪些 ...

  8. SLAM

    |__all together ship |__SLAM__ |__Graph SLAM__ |__完成约束 |__完成Graph SLAM__ |                          ...

  9. mac os 下 vs code 开发 .net core

    1.软件下载 .net core 2.0 sdk: vs code 最新版: 2.用 dotnet 命令行 dotnet cli 创建项目 打开终端,创建这次项目的文件夹,mkdir Demo1: c ...

  10. noip第31课资料