作为一个小白，上个暑假用过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》
扫一扫
54
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
