html+css网页设计学习心得(网页制作基础之HTML和CSS的介绍与实施)

如今web页面制作的三兄弟

  1. HTML(超文本标记语言 :Hyper Text Markup Language)

  2. CSS(层叠样式表 :Cascading Style Sheets)

  3. JavaScript(直译式脚本语言)

html+css网页设计学习心得(网页制作基础之HTML和CSS的介绍与实施)(1)

一.HTML:超文本标记语言

HTML是一种标记语言,是一套标记标签,不是编程语言。它是一种规范一种标准,通过标记符号来标记要显示的网页中的各个部分。它的“超”是指文本中包含了“超级链接”点------就是一种URL指针,通过激活(点击)它,可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。

<html>

<body>

<h1>我的标题</h1>

<a href="页面地址">请点击我</a>

</body>

</html>

Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容,HTML文档包含标签和纯文本。

  • HTML 标签是由尖括号包围的关键词,比如 <html>

  • HTML 标签通常是成对出现的,比如 <p> 和 </p>

  • 标签对中的第一个标签是开始标签,第二个标签是结束标签

  • 开始和结束标签也被称为开放标签和闭合标签

html+css网页设计学习心得(网页制作基础之HTML和CSS的介绍与实施)(2)

  • 外部样式表:如下例

    <link rel="stylesheet" type="text/css" href="style.css" />

  • 内部样式表:如下例

  • <head>

    <style type="text/css">

    h1 {color: blue;}

    p {margin-left: 20px;}

    body {background-image: url("image/top1.gif");}

    </style>

    </head>

    3. 内联样式 :如下例

    <p style="color: orange; margin-left: 20px">

    由此可见,内联样式 > 内部样式 > 外部样式,如果你的哪个属性输出有问题,最好排查一下各层嵌套下来的样式有没有冲突覆盖了,很好的诠释了层叠样式表的含义。

    CSS样式定义丰富,使用和修改非常方便,样式表可以单独引用,使多个页面同用一个样式表,增加效率和复用性。说到底CSS主要就是美化页面的作用。

    html+css网页设计学习心得(网页制作基础之HTML和CSS的介绍与实施)(3)

    更多精彩内容下回介绍,下一张主要讲解一下JavaScript 脚本语言。

    ,

    免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

      分享
      投诉
      首页