从最基础的地方开始

学习CSS之前了解一些HTML的基础。
HTML(Hypertext Markup Language,超文本标记语言)

1.1 HTML标记基础

  • 标题 段落等文本元素都用闭合标签,要一个开标签和一个闭标签,显示的是实际内容。(<h1>中的1表示其为最高级别的标题,HTML有6级标题)
  • 引用内容用自闭合标签,实施提供一个对要显示内容的饮用。在写代码时不要省略结尾的斜杠,以方便检查。养成好的习惯。 <标签名 属性_1="属性值" 属性_n="属性值" />

记住本章将要使用的html标签。5个块级(block)标签和6个行内(inline)标签。虽然有的不知道怎么用但是先记着,慢慢可以积累。

  • 块级标签:<h1>-<h6><p>段落,<ol>有序列表,<li>列表项,<blockquote>独立引用。
  • 行内标签:<a>链接(anchor锚),<img>图片,<em>斜体,<strong>重要,<abbr>简写,<cite>引证,<q>文本内引用。

嵌套标签

被嵌套进去的就是子标签(子元素),嵌套它的就是其父标签(父元素)。
在书写时候,必须要先关闭后一个标签再关闭前面那个标签。


1.2 HTML文档剖析

html5语法编写的最简单的html页面的模版。

  • 声明以下时一个html文档。
  • 根级标签,其他标签嵌套在其中。
  • <head>这个子标签里的信息是用来帮助浏览器理解页面的。其中<meta>标签的属性是<charset>,告诉浏览器页面使用UTF-8编码(嘻嘻,我懂这个,这个编码。
  • <title>中的文字会作为网页标题出现在搜索结果列表中,要明确简洁,包含关键字。
  • 有注释的话用<!--开头,以-->结尾。内容写在之间。

链接和图片

链接和图片都时行内元素。

<a href="http://www.stylinwithcss.com">My Books</a>
<img src="images/cisco.jpg" alt="My dog Cisco" />

这样的效果是链接会和图片并列。为啥

链接的标签用<a>,给了个属性,href时hyperlinkreference,超链接引用,链接指向页面的URL。

图片的标签用<img>,用属性src来说明来源。其中图片的来源分相对路径和绝对路径。

  • 绝对URL:指向其他站点,后面应该跟站点地址了。
  • 相对URL:指向站点内的文件,比如上面的例子,跟文件名称以及图片名称。一般用相对路径。

而对于相对URL:

  • 直接都裸露出来就直接logo.png。
  • src="images/logo.png",表示这个文件在和index.html同一层的images文件夹里。
  • src="./images/logo.png"也是这个意思。logo这张图片,在和index.html文档同一层的images文件夹里。
  • src="../images/logo.png"这个就表示。logo.png这张图片在index.html所处文件夹的上一级文件夹同一层的images文件夹里。
  • 那如果图片在index.html文档的上一级的上一级呢?就用两个"../../images/logo.png"。 (此处引自joker oceansong)

另外积累一些html的学习网站:

http://www.stylinwithcss.com/resources_html_elements.php
http://dev.w3.org/html5/html-author/#syntactic-overview
http://htmldog.com/reference/htmltags/

今天学完了之后做出的页面在后面的链接里:

http://7xipcz.com1.z0.glb.clouddn.com/css_1.2.html

此处应该有掌声!~

2015-04-21 23:4879