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. 五、Pyqt5事件、信号和槽

    PyQt中提供了两种针对事件处理的机制:一种是事件,另一种则是信号和槽. 一.事件 事件处理在PyQt中是比较底层的,常用的事件有键盘事件.鼠标事件.拖放事件.滚轮事件.定时事件.焦点事件.进入和离开 ...

  2. 【mysql】：mysql性能优化总结

    一.Mysql引擎概述 1.MyISAM存储引擎 MyISAM表是独立于操作系统的,这说明可以轻松地将其从Windows服务器移植到Linux服务器:每当我们建立一个MyISAM引擎的表时,就会在本地 ...

  3. thymelead入门 git地址在文档最后

    流程:##### 流程###### 1:pom添加依赖 <dependency> <groupId>org.springframework.boot</groupId&g ...

  4. 《Linux就该这么学》第十八天课程

    1.使用MariaDB数据库管理系统 今天没什么笔记,就不发了.想深入学习的可以前往原创地址:https://www.linuxprobe.com/chapter-18.html 图18-1 Mari ...

  5. Linux 防火墙管理及操作

    1.关闭firewall:systemctl stop firewalld.service #停止firewallsystemctl disable firewalld.service #禁止fire ...

  6. Android逆向破解表单登录程序

    Android逆向破解表单登录程序 Android开发 ADT: android studio(as) 程序界面如下,登录成功时弹出通知登录成功,登录失败时弹出通知登录失败. 布局代码 <?xm ...

  7. 解决 Files 的值"<<<<<<< HEAD"无效。路径中具有非法字符

    通常我们使用版本控制后会出现诸如此类的问题,此时从vs工具找错误和调试是无法找到问题的,也不影响项目的运行,但是有错误就是得解决.原因是版本控制导致文件的路径出现问题. 解决 Files 的值&quo ...

  8. 自定义react-navigation的TabBar

    在某些情况下,默认的react-navigation的tab bar无法满足开发者的要求.这个时候就需要自定义一个tab bar了.本文就基于react-navigtion v2来演示如何实现一个自定 ...

  9. 文本超过控件长度自动显示省略号的css

    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;

  10. Java 8 特性

    1．简介 毫无疑问,Java 8是自Java  5(2004年)发布以来Java语言最大的一次版本升级,Java 8带来了很多的新特性,比如编译器.类库.开发工具和JVM(Java虚拟机).在这篇教程 ...