2018/1/16 HTML打卡

作为一个小白,上个暑假用过Dreamweaver做过一些简单的基础网页,寒假开始了,我决定重头开始学习Html与CSS,抛开Web页面制作的常用工具(比如Dreamweaver)通过文本编辑器打好代码基础,每日打卡,这里我选择的第一本自学图书是《Head First Html 与 CSS》

今天的学习内容如下两部分:

1.用文本编辑器通过Html语言创建一个简单的页面。

2.在简单的页面中加入简单的CSS样式。

第一部分:

Windows系统创建步骤:

1.选择一个常用的文本编辑器创建一个html文件,我选择了自带的记事本。

2.编辑具体内容(我选择了书上要求的练习)

如图:

2018/1/16 HTML打卡2018/1/16 HTML打卡

3.重命名intex.txt为intex.html,图标项发生变化,选择任意浏览器打开 ,如图

2018/1/16 HTML打卡


  这样,我的第一个用文本编辑器编写的简单网页制作完成,这是源于书中的案例,这个案例是编辑一个咖啡厅菜单,所以说,目前的网页内容层次不够分明,这里按照书中的内容继续学习,重新规划结构如图:

2018/1/16 HTML打卡

通过标签 ,重新划分了标题子标题和段落,重命名文件后通过浏览器打开,结果如图:2018/1/16 HTML打卡

此时,比起上一次网页中打开的内容,层次分明。

知识点总结:

要告诉浏览器页面的结构,需要用成对的标记包围页面内容

元素=开始标记+内容+结束标记

开始标记形式:< 字符 > 

结束标记形式:< / 字符 >

第二部分:

1.在第一部分中创建的Stabuzz页面中加入简单的css样式,加入后通过浏览器打开效果如图所示:

2018/1/16 HTML打卡

(部分截图)

具体实现的css语言如下:

2018/1/16 HTML打卡

知识点总结:

(1)HTML和CSS是用来创建网页的语言。

(2)Web服务器存储并提供HTML和CSS创建的网页。

(3)HTML是超文本标记语言(HypeText Markup Language)的缩写,用来建立网页的结构。

(4)CSS 是层叠样式表(Cascading Style Sheets)的缩写,用来控制HTML的表现。

(5)通过HTML,利用标记来标识内容提供结构。匹配标记以及标记所包围的内容称为元素。

(6)开始标记可以有属性,比如本次练习中已使用的type.

  (7)所有页面都要有一个<html>元素,其中要有一个<head>元素和一个<body>元素。

(8)网页的信息放在<head>元素里。

(9)<body>元素里的内容就是你将在浏览器里看到的东西。

(10)大多数空白符(制表符、回车、空格)都会被浏览器忽略,不过利用空白符可以让Html在编写时更具有可读性。

(11)可以在<style>元素中写CSS规则,为HTML网页增加CSS样式。<style>元素总要放在<head>元素里。

(12)可以使用CSS在HTML中指定元素的特性。





                                                                                笔记参考用书:《Head First Html 与 CSS》