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. 实验十五 GUI编程练习与应用程序部署

    实验十五  GUI编程练习与应用程序部署 实验时间 2018-12-6 一:理论部分 1.Java 程序的打包:编译完成后,程序员将.class 文件压缩打包为 .jar 文件后,GUI 界面序就可以 ...

  3. Jmeter分布式部署测试-----远程连接多台电脑做压力性能测试

    在使用Jmeter进行接口的性能测试时,由于Jmeter 是JAVA应用,对于CPU和内存的消耗比较大,所以,当需要模拟数以万计的并发用户时,使用单台机器模拟所有的并发用户就有些力不从心,甚至会引起J ...

  4. Shell中的数组及其相关操作

    http://blog.csdn.net/jerry_1126/article/details/52027539 Shell中数据类型不多,比如说字符串,数字类型,数组.数组是其中比较重要的一种,其重 ...

  5. JSOI2018 简要题解

    潜入行动 复杂度分析题. 定义状态fi,j,0/1,0/1f_{i,j,0/1,0/1}fi,j,0/1,0/1​表示以iii为根子树放jjj个机器iii这个放不放,iii这个是否已放来进行dpdpd ...

  6. python模块：csv

    """ csv.py - read/write/investigate CSV files """ import re from _csv ...

  7. 特征选择 (feature_selection)

    目录 特征选择 (feature_selection) Filter 1. 移除低方差的特征 (Removing features with low variance) 2. 单变量特征选择 (Uni ...

  8. im4java+GraphicsMagick 的问题

    1.convert.exe: non-conforming drawing primitive definition `' @ error/draw.c/RenderMVGContent/3901. ...

  9. STM32F10x_StdPeriph_Lib_V3.5.0标准库文件关系（转载他人）

  10. 可遇不可求的Question之Mysql在不重启服务的情况下修改运行时变量篇

    比方说在一些实际生产环境中,想改个MYSQL的配置,但是又不想停止服务重起MYSQL,有什么办法呢?使用SET命令可以做到,请看下面几个例子: 1.设置key_buffer_size的大小为10M. ...