2018/1/16 HTML打卡
作为一个小白,上个暑假用过Dreamweaver做过一些简单的基础网页,寒假开始了,我决定重头开始学习Html与CSS,抛开Web页面制作的常用工具(比如Dreamweaver)通过文本编辑器打好代码基础,每日打卡,这里我选择的第一本自学图书是《Head First Html 与 CSS》
今天的学习内容如下两部分:
1.用文本编辑器通过Html语言创建一个简单的页面。
2.在简单的页面中加入简单的CSS样式。
第一部分:
Windows系统创建步骤:
1.选择一个常用的文本编辑器创建一个html文件,我选择了自带的记事本。
2.编辑具体内容(我选择了书上要求的练习)
如图:
3.重命名intex.txt为intex.html,图标项发生变化,选择任意浏览器打开 ,如图
这样,我的第一个用文本编辑器编写的简单网页制作完成,这是源于书中的案例,这个案例是编辑一个咖啡厅菜单,所以说,目前的网页内容层次不够分明,这里按照书中的内容继续学习,重新规划结构如图:
通过标签 ,重新划分了标题子标题和段落,重命名文件后通过浏览器打开,结果如图:
此时,比起上一次网页中打开的内容,层次分明。
知识点总结:
要告诉浏览器页面的结构,需要用成对的标记包围页面内容
元素=开始标记+内容+结束标记
开始标记形式:< 字符 >
结束标记形式:< / 字符 >
第二部分:
1.在第一部分中创建的Stabuzz页面中加入简单的css样式,加入后通过浏览器打开效果如图所示:
(部分截图)
具体实现的css语言如下:
知识点总结:
(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》