HTML-常用标签总结与实践_html/css_WEB-ITnose

什么是HTML?

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

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

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

                                                              -----源于百度百科

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

   

一、元素and标签and属性

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

<title>这是标题</title>    	<p>HELLO WORLD!</p>    

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

HELLO WORLD!

就是元素，它构成了HTML的最基本单位。

   标签：就是

、、等被尖括号“”包起来的对象，绝大部分的标签都是成对出现的，如、。当然还有少部分不是成对出现的，如
、

---

等。

属性：

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

 

二、常用标签介绍

（1）与文字相关标签

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

   效果如下：

                           

    需要掌握的是

段落标签，

---

插入横线标签（其中的color属性可以设置线的颜色），
换行标签，而和则分别使得字体显示为粗体和斜体。

  （2）与表格相关标签

    <title>表格的例子</title>            

2004年度期末考试成绩单

姓名	语文	英语	数学
张三	69	27	76
李四	89	27	46
王五	39	88	67
马六	87	77	66

    效果如下：

                       

        几个属性和标签的介绍：

        1.border align valign bgcolor

          border设置边框宽度，默认为0.

          Align 设置水平对齐方式，属性值：left center right

          valign设置垂直对齐方式，属性值：top middle bottom

          bgcolor 设置背景颜色

 

       2.

定义表格

         

 向表格元素中添加新行           向行中添加内容

  （3）与图片相关标签

    在牛腩中，当时的common.Master模板中的一句：

很完美的将插入图片运用起来。通过href=””设置超链接，通过target=”_blank”打开一个新的页面，而元素则将图片显示出来。

 

   通过上述的对于元素、标签、属性的对比以及几个例子的训练，基本的HTML代码已经没有问题了。

版权声明：本文为博主原创文章，未经博主允许不得转载。