1. HTML, CSS和 Java Script

HTML, CSS 和Java Script是网站设计的原始标配,在如今名目众多的新语言出现之前,大部分网站都是有这三种语言构建起来的,而这三种语言也是所有入门级网络开发课程的必修科目。

通常,HTML 定义了网页的内容,CSS 描述了网页的布局,Java 规定了网页的行为。根据W3 School 的定义:

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

HTML 不是一种编程语言,而是一种标记语言 (markup language)

HTML 使用标记标签来描述网页

 

CSS 指层叠样式表 (Cascading Style Sheets)

样式定义如何显示 HTML 元素

样式通常存储在样式表中

 

JavaScript 是属于 web 的语言,它适用于 PC、笔记本电脑、平板电脑和移动电话。

JavaScript 被设计为向 HTML 页面增加交互性。

 

很多人会把java 和java script搞混,可是它们两者除了名字相似,实质有着天壤之别,就像雷锋和雷峰塔一样,完全不能混为一谈。至于具体区别,大家可以去google,反正这个课程所提及的都是java script,和java没有关系就对了。

好了,从概念上介绍完了这三大预言,我们就开始实战阶段,让大家感受他们是如何操作运行的。

 

1.1 元素

HTML元素是指从开始标签到结束标签的所有代码。

  • HTML 元素以开始标签(Start Tag)起始
  • HTML 元素以结束标签(End Tag)终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容(empty content)
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)
  • 大多数 HTML 元素可拥有属性

1.2 Tag标签

Tag是HTML中最基本和常用的元素,即便你不熟悉网络设计,在一些电商平台的产品描述页面,也会常常见到HTML tag的身影,比如<p> <h1> <b>等等,下面我会列一些我们常见的HTML tag及所代表的意义。

他们的用法很直接,有一个opening tag<p>,也要有一个closing tag</p>,这两个<></>之间的内容收到tag的

<!–…–> 这表示<>之内的内容都是评论,不是真正的代码,你尝尝会在代码中看到此类tag作为注解,来解释这段代码的作用。

<!– This is comment –>

<a> hyperlink,超链接地址,当你在<a></a>之内输入任何内容时,他们都会以蓝色超链接的形式产生,但是这时这一超链接并不会链接到任何地方,因为并没有超链接的地址。<a href=”url”>,这时超链接就会链接到href后面的url.

<b> 加粗

<b>文字</b>   ===>  文字

<br> break, 空行,当你用<br>是,这一行空白

<h1> to <h6> 定义标题文字大小

如果你想知道每一个h tag对应的确切大小,请参照本文章

http://stackoverflow.com/questions/6140430/what-are-the-most-common-font-sizes-for-h1-h6-tags

<button>其间的内容成为一个可点击的按件,通常和超链接一起使用。

<form> 之后的内容会成为表格的形式

<hr> 通常出现在内容中的主题变化,就是下面的这道横线

____

 

<ul> <li> <ol> 这三个功能相似,<ul> 代表unordered list, <li>代表list item, <ol>代表ordered list. 用法如下:

<ul>

<li>point one</li>

<li>point two</li>

<li>point three</li>

</ul>

  • Point one
  • Point two
  • Point three

 

<ul>

<ol>point one</ol>

<ol>point two</ol>

<ol>point three</ol>

</ul>

  1. Point one
  2. Point two
  3. Point three

HTML tag非常多,我只是列出这些作为说明,像我的老师经常说的,”You don’t need to remember all of this”, “It is totally ok, even encouraged to copy code”,如果你遇到了一个不熟悉的tag, google 一下,如果在某种情况下,你不知道用哪种tag, 再google一下。

W3SCHOOL 有很详细的HTML tag资料,如果你想要了解更多,请参见W3SCHOOL TAG:https://www.w3schools.com/TAgs/

 

1.3 Attribute属性

 

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

属性总是以名称/值对的形式出现,比如:name=”value”。

属性总是在 HTML 元素的开始标签中规定。

 

例子1:

<a href=”http://www.w3school.com.cn”>This is a link</a>

向我们之前说过的,超链接由 <a> 标签定义,而想要真的链接到一个可用的地址,需要在 href 属性中指定。

 

例子2:

<h1 align=”center”>This is a title.</p>

一般来说CSS是用来定义网页的布局和设计,但是如果想要在HTML中加以设计,就可以通过属性来实现,这里的<h1>定义标题的开始,而align=”center”则拥有关于对其方式的附加信息。

 

1.3.1 id

id属性对丁HTML元素的唯一的id。id在HTML文档中必须是为利的。

Id属性可用作链接锚,通过JavaScript(HTML DOM)或通过CSS为带有制定id的元素改变或添加样式。

 

1.3.2 Class 类名

Class属性规定元素的类名(classname)。

Class属性大多数时候用于指向样式表中的类(class)。不过,也可以利用它通过JavaScript来改变带有制定class的元素。

提示:可以给 HTML 元素赋予多个 class,例如:<span class=”left_menu important”>。这么做可以把若干个 CSS 类合并到一个 HTML 元素。

提示:类名不能以数字开头!只有 Internet Explorer 支持这种做法。