HTML---常用标签总结与实践

时间：2015-08-01 20:36:31 阅读：238 评论：0 收藏：0 [点我收藏+]

标签：html 标签元素

什么是HTML?

超文本标记语言，标准通用标记语言下的一个应用。

“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

-----源于百度百科

也就是说，前台的界面，包含文字、声音、图片等，是通过HTML这种语言来编写的，在牛腩新闻发布系统中接触过了整个Web系统的开发之后，对于HTML代码与CSS+DIV的结合有了新的认识，通过这篇总结对于HTML的标签做个简单的认识。

一、元素and标签and属性

我相信很多人学习完HTML不知道元素和标签之间的区别是什么，我也不知道，通过查询资料，自己解决了这个疑惑，分享给大家。

<html>

<head><title>这是标题</title></head>
    <body size=”12”>
	<p>HELLO WORLD!</p>
    </body>
</html>

元素：正如在高中化学学习中，元素二字即代表构成物质的组成最基本的单位，在这里也是，HTML元素就是构成HTML文件的基本对象，就像上述代码中：<p>HELLO WORLD!</p>就是元素，它构成了HTML的最基本单位。

标签：就是<head>、<body>、<table>等被尖括号“<”和“>”包起来的对象，绝大部分的标签都是成对出现的，如<table></talbe>、<form></form>。当然还有少部分不是成对出现的，如<br>、<hr>等。

属性：<body>标签中，size=”12”这就是<body>部分的一个属性，一般是在开始标签中定义，且伴随“=”成对出现。

二、常用标签介绍

（1）与文字相关标签

 <html>
    <head><title>静夜思</title></head>
    <body>
        <!--这是一首诗-->
        <center>
            <h2><font color="red">静夜思</font></h2>
                          <b>作者：李白</b>
            <hr color="blue">
            <p>
                <b><i><font color="green" size="3">
                    窗前明月光，疑是地上霜。<br>
                    举头望明月，低头思故乡。
                </font></i><b>
        </center>
    </body>
</html>

效果如下：

需要掌握的是<p>段落标签，<hr>插入横线标签（其中的color属性可以设置线的颜色），<br>换行标签，而<b>和<i>则分别使得字体显示为粗体和斜体。

（2）与表格相关标签

<html>
    <head><title>表格的例子</title></head>
    <body>
        <table border="1" align="center" bgcolor="#ffdddd">
            <caption>2004年度期末考试成绩单</caption>  
            <tr align="center" valign="middle">
                <th>姓名</th>
                <th>语文</th>
                <th>英语</th>
                <th>数学</th>
            </tr>
            <tr align="center" valign="middle">
                <th>张三</th>
                <th>69</th>
                <th>27</th>
                <th>76</th>
            </tr>
            <tr align="center" valign="middle">
                <th>李四</th>
                <th>89</th>
                <th>27</th>
                <th>46</th>
            </tr>
            <tr align="center" valign="middle">
                <th>王五</th>
                <th>39</th>
                <th>88</th>
                <th>67</th>
            </tr>
            <tr align="center" valign="middle">
                <th>马六</th>
                <th>87</th>
                <th>77</th>
                <th>66</th>
            </tr>
        </table>
    </body>
</html>

效果如下：