【HTML】HTML基础

来源:互联网 发布:手机淘宝在哪里看等级 编辑:程序博客网 时间:2024/05/21 14:46

  • 写在前面的
  • HTML基础
    • 概念
    • 元素与标签
      • 标签
      • 元素
    • 结构
    • 实体引用
      • 概念
    • 列表使用
      • 创建有符号列表olliulli
      • 创建无符号列表dldtdd
    • 表格的使用
  • 总结

写在前面的

  • 通过对HTML一些基础知识的学习感觉并没有接触到自己想要的知识,为什么这么说呢,因为没有教会我渲染技术= =不论怎样,万丈高楼平地起,下面就把HTML的一些最最基础的东西总结一下。眼过千遍不如手过一遍,永远不要相信自己的记忆力!

  • 想知道什么是HTML5的渲染技术请点击这里,然后你就会对思维导图有一个新的认识。

HTML基础

概念

  • HyperText Markup Language-超文本传输协议,标准通用标记语言下的一个应用。所谓的“超文本”就是包括文本在内的一些其他形式的图片以及流媒体格式的信息都可以进行传输。

元素与标签

标签

  • 首先我们来看一张图,然后获取对HTML语言一个直观理解:这里写图片描述

元素

  • 元素包含空元素
  • 带有属性的空元素
  • 带有内容的空元素
  • 带有属性和内容的空元素

    这里写图片描述

  • 对于HTML来说,元素的属性相当重要,不同的属性应用方法也不同而且也比较繁杂,这里就不再过多的赘述了

结构

这里写图片描述

  • 与XML不同,HTML可以有多个根元素,比如上图中的标签。而且HTML的语言相比较与没有DTD的XML来说还是比较规范的,因为HTML不支持自定义功能。

实体引用

概念

  • 由于HTML本身语言的一些特性,有一些标点符号在该语言中承担一定的角色责任,所以不能够通过键盘用文本的形式展现出来,这时就需要用到实体引用了。顾名思义,就是通过一系列的特定的代码来实现特殊符号的输入。下面把常用的贴出来,仅供参考。

这里写图片描述

  • 在这里需要提一点的是,由于HTML文件需要经常在WEB上解析,所以对文件的大小有时有着比较严格的限制,所以有时我们必须为了性能而省去一部分效果。拿图片来举例,能用GIF就不用JPG,能用JPG就不用PNG (对于PNG和JPG来讲各有优缺吧,因为两种图片在大小上基本差不多,但是PNG色彩表现不是很好,但说PNG不好吧,GOOGLE全部的图片资源都是PNG,也被誉为能够代替GIF的图片格式,孰优孰劣各位看客自己下定论吧)可见我们的WEB世界对于传输成本的控制有多么的严格。

列表使用

创建有符号列表”ol”“li”/“ul”“li”

  • 对于这两个标签的使用每个人都有不同的看法,毕竟只要达到最终的效果就好,OL以及LI中的”value”值可以自定义该行其实的数字角标,比如这一行的行标是10
<ol value = 2>  <!--表示该列表的起始行行标为2-->    <li>《啦啦啦》    <li>《嘿嘿嘿》    <li value=10>《嘻嘻嘻》  <!--表示该行的其实行标为10-->    <li>《哈哈哈》</ol>
  • 当然,我认为列表符号比较好玩的一个属性就是TYPE了,如果你不想用普通的阿拉伯数字来开始一行的话,就可以用到TYPE,TYPE的种类如下图所示:

    这里写图片描述

  • 如果对于HTML本身规定的一些符号还是不满意,那么我们还可用“ul”“li”的type属性来创建其他样式的列表。

这里写图片描述

创建无符号列表“dl”“dt”“dd”

  • 如题所说,dl与dt可以创建无符号的列表,使用dd则可以在有些情况下替换“dt”来实现缩进。(对于这里还是想说,有时候为了达到某种缩进的效果我们会使用全角空格,因为相比于半角空格,全角空格“占地儿”小,“一个能顶两个用”)其实对于初学者来讲,最头疼的就是记住这些乱七八糟的规定字符了,所以我们才有了后来的XML嘛,二者是相互兼容和并通的。
<dl>    <dt>标题1    <dd>内容1……    <dt>标题2    <dd>内容2……</dl>
  • 显示效果:
    这里写图片描述

表格的使用

  • 对于表格的使用来讲,我自己认为应该是HTML中最最重要的一个基础知识了,因为表格使用的好坏直接影响到了页面的布局和效果,所以接下来重点来介绍一下表格使用的方法和技巧。

  • 首先,在HTML的表格中可以没有表头。然后就是运用“table”“caption”“tr”“th”“td”来构建表格。

    • caption:定义表格的标题。

    • tr:在表格中添加一行。

    • th:定义表头。

    • td:定义单元格。

  • 实例如下:

<html><head><title>表格的例子</title></head><body><table border="1" align="center" bgcolor="#ffdddd"><caption>无所谓是啥表格了</caption><tr align="center" valign="middle">    <th>姓名</th>    <th>性别</th>    <th>年龄</th>    <th>薪水</th></tr><tr align="center" valign="middle">    <th>习大大</th>    <th></th>    <th>年过半百</th>    <th>为国家操劳,能让我在这里安心的学习</th></tr></table></body></html>
  • 效果如图:
    这里写图片描述
    这里写图片描述

总结

  • 通过对HTML语法的回顾自己也收获了不少东西,有些知识在回顾的过程中又加深了很多,希望我的文章也能为像我一样的初学者提供一些简单的参考吧。
2 0
原创粉丝点击