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. mysql----快速删除数据表(drop,truncate.delete)

    概念: 三者均可删除数据表 TRUNCATE TABLE 在功能上与不带 WHERE 子句的 DELETE 语句相同:二者均删除表中的全部行.但 TRUNCATE TABLE 比 DELETE 速度快 ...

  2. spark 文件系统Alluxio(之前名为Tachyon)

    http://www.alluxio.org/documentation/v1.0.0/cn/ http://www.winseliu.com/blog/2016/04/15/alluxio-quic ...

  3. SVG页面loading动态图

    https://github.com/SamHerbert/SVG-Loaders demo http://samherbert.net/svg-loaders/

  4. hibernate---联合主键关联

    被主导方wife有两个主键: package com.bjsxt.hibernate; import javax.persistence.Entity; import javax.persistenc ...

  5. hibernate--对象的三种状态Transient,Persistent,Detached

    Transient:刚new出来的对象 Persistent: sava或者update之后的状态 Detached: close或者clear之后 test函数: @Test public void ...

  6. javadoc时候乱码-编码 GBK 的不可映射字符 - wqjsir的专栏 - 博客频道 - CSDN.NET

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  7. Eclipse 的 git 插件操作 "代码提交"以及"代码冲突"

    面向对象:曾经使用过SVN的同学. (因为Git 它 可以说是双重的SVN (本地一个服务器,远程一个服务器)),提交代码要有两次步骤,先提交到本地服务器,再把本地服务器在提交到远程服务器. 所以连S ...

  8. OSD的主要实现方法和类型(转)

    源:OSD的主要实现方法和类型 目前有两种主要的OSD实现方法:外部OSD发生器与视频处理器间的叠加合成;视频处理器内部 支持OSD,直接在视频缓存内部叠加OSD信息. 外部OSD发生器与视频处理器间 ...

  9. iOS开发——UITableView(未完,待续...)

    1.让tableview的自定义cell,自动计算高度. self.tableView.estimatedRowHeight = 44.0; self.tableView.rowHeight = UI ...

  10. 【转】Linux目录下/dev/shm的理解和使用

    一般来说,现场部署  都要根据内存的大小来设定/dev/shm的大小,大部分使用的是默认的值! Linux目录下/dev/shm的理解和使用 [日期:2014-05-16] 来源:Linux社区  作 ...