HTML+CSS基础
导航
- 搭积木
- 从Word排版开始
- 所见即所得
- 导演一部大片
- 设计思维
- 场景
- HTML
- 网页的结构
- 网页的标签
- 块级元素和行级元素
- 一个纯html实例
- CSS
- 设想元素周围有一个盒子
- 行内元素和块级元素进行切换
- 常用的网页制作工具
- 结语
- 参考
搭积木
1891年，奥利·柯克生于丹麦比隆附近的菲尔斯哥夫村。他有一手精湛的木匠手艺，年轻时就热衷于制作各种小玩具，出自他手的小飞机、汽车、动物个个形态逼真、维妙维肖。尽管他不懂经商，玩具经常滞销，但这并未使他放弃自己的爱好。后来，他设计的拼插玩具“约约”终于风靡一时。
1932年，他发明了一种可以互相拼插的塑料玩具，并将“Leg” 和“Godt”（丹麦语为“玩得好”）合在一起，创造了“lego”(乐高)这一品牌。
乐高积木拥有不同的形状,每个积木都是独立的,当我们把不同的积木拼接在一起,便可以搭建出动物,飞机,大炮和房子等不同的物件...
网页开发和搭建乐高积木非常相似。借助html&css提供的组件-积木,我们就可以构建出自己的网站。
从Word排版开始
在生活中，我们每天都会面对各式各样的文档、报纸、表单等。
许多网页就像是这些文档电子版本。
不论哪种文档，文档的结构都是非常重要的，它能帮助读者理解你所要传达的信息并对文档起到导航作用。
因此,理解文档的结构对学习编写网页是非常重要的。
任何文档中标题和子标题的使用通常反映出信息的层次性。
我们可以创建一个如下名为demo1.docx的word文档
上图中的Word的排版大家应该都很熟悉,我们可以直接翻译成html。
文件->另存为,选择demo1.html,保存之后,可以生成同名的HTML文件。
我们用谷歌浏览器打开看看,
你可以在浏览器窗口中看到一个与demo1.docx的word文档内容相同的网页。
将鼠标停留在浏览器窗口中,右键"检查"(或者F12键)
可以看到,上图的右侧展示了这段HTML代码。
用红线框起来的部分就是这个网页的核心代码。
注意到,HTML代码由包括在<>中的字符构成,这些代码称为HTML元素。元素通常有两个标签组成:一个起始标签<>和一个结束标签</>。每个HTML元素都会向浏览器传达其<>和</>之间的结构信息。
Note:目前市面上主流的浏览器- Internet Explorer, Firefox, Safari, Chrome 和 Opera.浏览器的主要功能是通过从服务器请求并在浏览器窗口中显示所选的web资源来显示该资源。关于浏览器是如何解析html的请查阅《How browsers work》
导演一部大片
网站的制作过程就像在导演一部大片。
当你开始设计和制作一个网站的时候,你应该将自己当成一个电影导演。
当你要打算网站的时候,考虑的因素很多,这个时候你就是在完成一个项目,一件艺术品。
搭建网站和拍大片颇有相似之处:
设计思维
一个设计作品有三种反馈，可以，不行，和哇喔，最后一个哇喔是我们要去追寻的。- Milton Glaser
一听到“设计”这个高大上的名词，你可能会被吓住。在早期，原型工具没有出来之前，一般都会使用PhotoShop来做出原型。所以，你还得学会PS技能。
随着原型工具的出现和越来越强大，小白也可以通过简单的拖放，将自己脑海里的想法拼出一个网站原型。
目前产品经理们常使用的原型图有Axure、墨刀、mockplus等。
在《让想法跃然纸上》章节,有原型工具画图的案例。
随着前端技术的发展，特别是各种框架的出现，如bootstrap,vue.js等，让网页开发变得更加像搭积木。
开发者不用太过关心组件的代码实现，而更加聚焦网页的设计和业务逻辑本身。
场景
网页就像一张张画布，而这一张张网页构成了绚丽多姿的网站。
网页上的每个按钮都都应该有对应的业务场景,否则就是多余的,应该被删除或者隐藏。
认识HTML
网页的结构
HTML是一种超文本标记语言，用于创建网页的一种标准标记语言。我们可以在HTML中添加图片和对象，创建交互式表单。
网页的一般格式如下:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
- <DOCTYPE>标签定义了文档类型
- 标签定义一个HTML文档
- <head>标签定义了网页的头部信息
- <body>标签定义了网页的主体信息
网页的标签
搭建房子,工人们通常会用砖和钢筋来搭建骨架，在html的世界里,html元素(标签)就充当了砖和钢筋的角色。
HTML提供了丰富的标签,如文档元数据标签、组织内容标签、文字形式标签、表格标签、表单标签...
文本格式化标签：
| 标签 | 描述 |
|---|---|
| <b> | 定义粗体文本。 |
| <big> | 定义大号字。 |
| <em> | 定义着重文字。 |
| <i> | 定义斜体字。 |
| <small> | 定义小号字。 |
| <strong> | 定义加重语气。 |
| <sub> | 定义下标字。 |
| <sup> | 定义上标字。 |
| <ins> | 定义插入字。 |
| <del> | 定义删除字。 |
| <s> | 不赞成使用。使用 <del> 代替。 |
| <strike> | 不赞成使用。使用 <del> 代替。 |
| <u> | 不赞成使用。使用样式（style）代替。 |
标签很丰富,但是常用也不多,能记住也不容易,使用的过程中可以慢慢熟悉。推荐一个在线查阅工具:https://www.w3school.com.cn/html/index.asp
块级元素和行级元素
块级元素
- 独占一行，不和其他元素在同一行
- 能设置宽高
html中的块级元素：
| 标签 | 描述 |
|---|---|
| <address> | 定义地址。 |
| <article> | 定义文章。 |
| <aside> | 定义页面内容之外的内容。 |
| <audio> | 定义声音内容。 |
| <blockquote> | 定义长的引用。 |
| <canvas> | 定义图形。 |
| <caption> | 定义表格标题。 |
| <dd> | 定义定义列表中项目的描述。 |
| <div> | 定义文档中的节。 |
| <dl> | 定义定义列表。 |
| <dt> | 定义定义列表中的项目。 |
| <details> | 定义元素的细节。 |
| <fieldset> | 定义围绕表单中元素的边框。 |
| <figcaption> | 定义 figure 元素的标题。 |
| <figure> | 定义媒介内容的分组，以及它们的标题。 |
| <footer> | 定义 section 或 page 的页脚。 |
| <form> | 定义供用户输入的 HTML 表单。 |
| <h1> to <h6> | 定义 HTML 标题。 |
| <header> | 定义 section 或 page 的页眉。 |
| <hr> | 定义水平线。 |
| <legend> | 定义 fieldset 元素的标题。 |
| <li> | 定义列表的项目。 |
| <menu> | 定义命令的列表或菜单。 |
| <meter> | 定义预定义范围内的度量。 |
| <nav> | 定义导航链接。 |
| <noframes> | 定义针对不支持框架的用户的替代内容。 |
| <noscript> | 定义针对不支持客户端脚本的用户的替代内容。 |
| <ol> | 定义有序列表。 |
| <output> | 定义输出的一些类型。 |
| <p> | 定义段落。 |
| <pre> | 定义预格式文本。 |
| <section> | 定义 section。 |
| <table> | 定义表格。 |
| <tbody> | 定义表格中的主体内容。 |
| <td> | 定义表格中的单元。 |
| <tfoot> | 定义表格中的表注内容（脚注）。 |
| <th> | 定义表格中的表头单元格。 |
| <thead> | 定义表格中的表头内容。 |
| <time> | 定义日期/时间。 |
| <tr> | 定义表格中的行。 |
| <ul> | 定义无序列表。 |
行级元素
- 能和其他元素在同一行
- 不能设置宽高
html中的行内元素：
| 标签 | 描述 |
|---|---|
| <a> | 定义锚。 |
| <abbr> | 定义缩写。 |
| <acronym> | 定义只取首字母的缩写。 |
| <b> | 定义粗体字 |
| <bdo> | 定义文字方向。 |
| <big> | 定义大号文本。 |
| <br> | 定义简单的折行。 |
| <button> | 定义按钮 (push button)。 |
| <cite> | 定义引用(citation)。 |
| <code> | 定义计算机代码文本。 |
| <command> | 定义命令按钮。 |
| <dfn> | 定义定义项目。 |
| <del> | 定义被删除文本。 |
| <em> | 定义强调文本。 |
| <embed> | 定义外部交互内容或插件。 |
| <i> | 定义斜体字。 |
| <img> | 定义图像。 |
| <input> | 定义输入控件。 |
| <kbd> | 定义键盘文本。 |
| <label> | 定义 input 元素的标注。 |
| <map> | 定义图像映射。 |
| <mark> | 定义有记号的文本。 |
| <objec> | 定义内嵌对象。 |
| <progress> | 定义任何类型的任务的进度。 |
| <q> | 定义短的引用。 |
| <samp> | 定义计算机代码样本。 |
| <select> | 定义选择列表（下拉列表）。 |
| <small> | 定义小号文本。 |
| <span> | 定义文档中的节。 |
| <strong> | 定义强调文本。 |
| <sub> | 定义下标文本。 |
| <sup> | 定义上标文本。 |
| <textarea> | 定义多行的文本输入控件。 |
| <time> | 定义日期/时间。 |
| <tt> | 定义打字机文本。 |
| <var> | 定义文本的变量部分。 |
| <video> | 定义视频。 |
| <wbr> | 定义可能的换行符。 |
一个纯html实例
注册页面是很多电商网站都必不可少的模块,我们使用纯html来实现一个注册页面。
效果如下:
看起来有点粗糙,使用html表格和表单元素就实现了一个注册页面,没有任何修饰,这个很帮助我们很容易的理解html标签是如何组合使用的。
代码很简单:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<center>
<h3 align="center">注册页面</h3>
<hr />
<form action="" method="post">
<table border="1px" cellpadding="10px" cellspacing="0">
<tr height="35px">
<td width="100px">用户名：</td>
<td width="200px">
<input type="text" name="uname" id="uname" value="" />
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password" name="upwd" id="upwd" value="" />
</td>
</tr>
<tr>
<td>邮箱：</td>
<td>
<input type="text" name="e-mail" id="e-mail" value="" />
</td>
</tr>
<tr>
<td>手机号：</td>
<td>
<input type="text" name="tel" id="tel" value="" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="radio" name="ag" id="ag" value="1" />我已阅读并同意协议
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注册"/>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
CSS
设想元素周围有一个盒子
盒模型(或框模型)是CSS的基石之一,它指定元素如何显示以及(在某种程度上)如何相互交互,页面上的每个元素被看做一个矩形框,这个框由元素的内容(Content)、内边距(Padding)、边框(Border)和外边距(Margin)组成。
当浏览器对一个HTML文档进行布局的时候，会把每一个元素都渲染成一个矩形的盒子。
- Margin(外边距) 清除边框外的区域，外边距是透明的。
- Border(边框) 围绕在内边距和内容外的边框。
- Padding(内边距) 清除内容周围的区域，内边距是透明的。
- Content(内容) 盒子的内容，显示文本和图像。
每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。
盒子模型特性
- 每个盒子都有：外边距、边框、填充(内边距)、内容 4个属性
- 每个属性都包括4个部分：上、右、下、左。属性的4部分可以同时设置，也可以分别设置
计算元素的大小
值得注意的是外边距(marign)是盒模型的一部分。由于外边距(margin)是盒子外部，也是就是元素之间的间距，一般来说，计算盒子（注意我这里表述的是盒子，不是盒模型）大小的时候,外边距(margin)不算在里面。
所以,每个盒子的大小是由内容(content)、填充（padding）、边框（border）这三个部分的实际大小来决定的，外边距(margin)不算在宽度里面。
一般来说，标准的盒模型实际占用空间计算公式为：
- 水平空间大小(宽度) = 2 * margin + 2 * border + 2 * padding + content
- 垂直空间大小(高度) = 2 * margin + 2 * border + 2 * padding + content
盒子占用空间计算公式为：
- 水平空间大小(宽度) = 2 * border + 2 * padding + width
- 垂直空间大小(高度) = 2 * border + 2 * padding + height
下面我们通过一个小例子来理解一下盒模型。
我们定义一个div 并将其宽高设置成200像素，内边距为10像素，边框为10像素， 外边距为10像素。代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型演示</title>
<style>
body{
margin: 0
}
#box{
margin: 10px;
padding: 10px;
border: 10px solid red;
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
按照上面的公式,我们计算一下id为box的div宽度,
盒子宽度=210+210+200=240
盒子高度=210+210+200=240
让我们打开谷歌浏览器,来验证一下我们的计算(F12可以进入浏览器控制你台,查看html元素的属性)。
从图中可以看出来,div盒子的的大小和我们计算的一样。
通过这个简单例子我们基本上就搞清楚了CSS的盒子模型。
行内元素和块级元素进行切换
行内元素与块级函数可以相互转换，通过修改display属性值来切换块级元素和行内元素。
display：
- inline（转为行内元素）
- inline-block（转为行内块元素）
- block（转为块元素）
- none（隐藏 不显示）
常用的网页制作工具
工欲善其事必先利其器
如果您对网站编程足够熟悉,其实工具已经不是太重要,您甚至可以直接在文本编辑器中开发代码。
但是,对于初学者,或者为了更好的提升编码效率,选一个适合自己的网页制作工具（IDE）非常重要。
这里推荐几款常用的:
- VSCODE
- Sublime Text
- WebStorm
结语
本节对html&css基础知识做了一个简单梳理,并结合实际案例进行了讲解,希望能够对初学者有所帮助。
参考
- 《精通CSS 高级Web标准解决方案》
- 《HTML & CSS 设计与构建网站》 [美] Jon Duckett
- 《W3school CSS 教程》
