Rumah > Artikel > hujung hadapan web > html标签详解（1）

html标签详解（1）

高洛峰asal: 2017-02-16 14:05:591505semak imbas

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

换行标签

横线标签

表示段落

表示标题，分为h1到h6字体依次递减

和将文本加粗

和将文本倾斜

和将文本设置删除线

和将文本设置下划线

预编译格式很有用的标签

<!DOCTYPE html>
<head>
<title>来吧</title>
</head>
<body>
<!--这是一个注释标签，页面上你看不到-->
<h4>我是标题哦</h4>
<hr/>
<p>我是p标签<b>我自动加粗的</b></p><br/>
<s>我是删除线</s>
<u>我是下划线</u><br/>
<pre class="brush:php;toolbar:false">  我是预编译，
         我怎么输它就怎么显示

运行结果如下：

html标签详解（1）

3.图片标签

效果如下：

<!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>

注解：在该标签中常用src属性表示图片的来源和名称；用title属性设置鼠标放到图片上时显示的文字；用alt属性设置当图盘无法正常显示时对图片的描述；用width和height属性设置图片的宽和高

效果如下：

html标签详解（1）

4：链接标签

（1）基本链接介绍

标签实现超链接

<!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

注解：在利用实现超链接时使用href属性指明跳转的地址；使用title属性设置当鼠标放到超链接上时显示的文字；用target属性指明超链接的跳转方式，其中_self表示不开启新窗口且在当前窗口打开跳转后的页面（默认）而_blank表示开启新窗口打开跳转后的页面。

细节：如果在一个页面中所有的超链接跳转方式均一致，那么可以在标签中进行统一的配置。在标签中添加

表示该页面的所有超链接均在原窗口显示

表示该页面的所有超链接均在新窗口显示

（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）

更多html标签详解（1）相关文章请关注PHP中文网！

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：HTML的入门概念 Artikel seterusnya：html标签详解（2）

Artikel berkaitan

Lihat lagi