码迷,mamicode.com
首页 > Web开发 > 详细

HTML学习笔记

时间:2015-06-26 13:06:40      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:html 标签 dom

      HTML是超文本标记语言,所谓超文本就是HTML文件不只是包括文字, 还可以包括图片等其他的内容,而HTML里面的内容按照标签分隔开,整个文件里面有多个标签,或者叫做标记。

    标记一般要求成对,但是,也有不成对的,例如<br/>,在这里,强烈建议能成对尽量成对,使文本规范。(XML语言要规范得多)

    整个HTML语言就是由大量的标签和标签内包含的内容构成的,不同的标签有不同的作用。这些标签其实形成了一棵树:

技术分享

    从上面的树,也就看清楚了一个HTML文档的基本结构:

            <html>

                 <head>

                   …

            </head>

            <body>

                 …

            </body>

            </html>

属性

    属性是对一个标记元素进行的说明。语法上采用属性=的方式。值一般采用双引号或者单引号,甚至可以不用引号,但是最好采用引号,使得语法规范。

        HTML语法不区分大小写字母。再次说明了HTML是一种不严格的语言。

注释

    和所有的语言一样,HTML也是有注释的,采用标签对的形式:<!--  -->

HTML代码格式

        HTML是解释性语言,当我们用浏览器向服务器发送请求之后,服务器直接将HTML文件发过来,有浏览器解析之后显示在屏幕上,在文本上,为了代码规范而采用的空格和回车是不会体现在页面效果上的,浏览器只会对标签内的内容进行解析。至于如果要在页面上显示空格等的效果,自然有处理方法,后面介绍。

网页颜色

    如何在网页效果上显示各种颜色效果?HTML有两种方式:颜色关键字和数值标号。

字符实体

    这个就是回答前面的问题:如何在网页效果上显示空格之类的效果。将这个问题扩展,如何显示标签关键字或者特殊含义的符号?

    有两种方式:

        (1)      采用“&”加实体名称加“;”的形式,例如空格:&nbsp

        (2)      采用“&”加“#”加实体编号加“;”的形式,例如:&#160

 

详解各个标签

    从上面的文章我们知道了HTML的架构,就是一颗标签树,现在来解释下这棵树的标签。

    第一部分:

        <html></html>这是最外面的节点,它的作用就是告诉浏览器,在这对标签里面的是HTML文本

    第二部分:

        <head></head>这部分与<body></body>在地位上平级,主要干这些事情:首先他的内容不会显示在页面里,这部分里面主要有<title>标签对,<meta>标签对和<script>标签对、<style>标签对,<title>标签对是页面窗口的标题,<meta>标签是对这个文本的详细说明(SEO优化有对这部分动作),<script><style>这两个标签对主要是对JavaScriptCSS的。<link>标签则是对各种外部文件的引用。

    第三部分:

        <body>标签对包含的内容就是我们看到的页面了。这个载体里面包含了我们看到的图片,文字,等等。


通用属性

    每个标签都有自己的属性,但是有四个属性是任何HTML标签都可以使用的,他们的意义就是为了和CSS以及JavaScript结合到一起,供这两种语言控制HTML元素的。

属性

描述

ID

标签的ID,具有唯一性

Name

标签的名称

Class

标签的类选择器,可共多个元素公用

style

设置标签的样式属性

 

    HTML的标签元素很多,但是根据其内容,我们可以分类来描述:

    (1)      编辑文字,排版面用的

        A.   格式标签(设置文本的布局等)

            <br><p><center><pre><li><ul><ol><hr>

        B.   文本标签(强调或者特殊说明一部分文字)

            <h><b><i><u><sub><sup><font><tt><cite><em><strong><small><big>

    (2)      图片以及链接

        A.图片

            <img src=URL alt=text width=xxpx height=xxpx border=xxpx>

        B.锚点和超链接

            <a href=URL name=text target=target></a>

    (3)      表格表单

   A、 表格

        <table>

        <tr>

             <th>表头</th>

            </tr>

 

            <tr>

                 <td>数据内容</td>

                </tr>

            </table>

   B、 表单

        <form></form>标签内包含的内容构成了表单。里面主要有各种<input>标签。

    (4)      其他主体结构元素

        <article>标签对,它甚至有自己的<header><footer>标签。

         <section>标签对:负责分块。

         <nav>元素:用来构建导航

        <aside>元素:主要用作附属信息

    (5)      其他非主体结构元素

        <header>元素:在HTML里面可以有多个。

        <hgroup>元素:将标题和子标题进行分组。

        <footer>元素:注解

        <address>元素:地址

 

 


HTML学习笔记

标签:html 标签 dom

原文地址:http://3994129.blog.51cto.com/3984129/1665865

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!