【老白教小白】前端知识学习（1）——基于HTML+CSS实现静态页面
<p>标签： 前端 HTML CSS WEB 静态页面</p><hr>
<p>后端开发狗一只，前段时间有个朋友想要学习前端，问我要学习哪些知识。凭借我多年以前兼职写过web前端的丰富经验，决定装装b，给他汇总一些基础的学习知识（哈哈哈，其实我太深的我也不会啊），索性写都写了，分享一下吧，也算对的起码字过程中的抽的那半包烟了。</p>
<p>本篇文章主要介绍通过HTML+CSS实现静态HTML页面编程。精力原因，只讲解我个人在以前开发实践过程中，用到的必备知识。目的是通过简短的文章内容阅读后，在对构建一个HTML页面有一个整体的实现思路，知道如何下手，遇到问题时，能做到知道要通过搜索引擎准确的搜索到要学习的内容。简化在后续自学的过程中的学习路线。<br>
因为文章基本是根据我个人的想法及掌握的技能进行编写，在某些介绍的时候，我尽量使用白话文进行描述，在专业性上肯定不能与相关教材的介绍比较，甚至会有因为我个人掌握能力不足的原因，导致我对某些知识点的理解可能是有偏差甚至存在错误。阅读的朋友们如果发现有遗落或者错误的地方。可能的话，请对问题进行指正，方便大家共同提高。<br>
还是那句话，本文的内容仅供小白参考，批判性的看，我写的不一定是对的，至少肯定是不够准确的，目的还是希望通过后续的几篇问章将想要学习前端知识的小伙伴们带上道儿。</p>
<h1 id="一基础概况">一、基础概况</h1>
<h2 id="1什么是静态页面">1、什么是静态页面</h2>
<p>我们在浏览器中看到的页面，是浏览器通过加载HTML文件以后根据代码渲染出来的实际页面。静态页面中的数据内容是固定的。比如，我们开发一个页面用于展示新闻的标题列表。如果是静态页面，我们需要在编写HTML的时候，把要展示的新问标题一同编写进HTML代码中。 假如我们需要根据当前时间加载最新的新闻（也就是说新闻的内容是变化的），这种数据内容不固定（需要与服务器进行通讯）的情况，需要通过动态页面实现（以后再讲）。</p>
<h2 id="2什么是html">2、什么是HTML</h2>
<p>HTML是一种开发语言，正如java ，c#，c++等开发语言一样，HTML也是一套编程语言，有自己的语法（入门成本相对较低）。我们的浏览器在加载某一个web页面的时候（一个web页面不仅仅是由HTML组成，还有JavaScript、Jquery、CSS、静态资源等等共同组成，暂时先不用全部理解），会根据代码进行解析渲染成特定的页面要展示的内容。<br>
注意：我这里说的是展示的元素，但并与样式或者页面的排版无关。可以这样理解：<br>
比如“百度”的搜索（https://www.baidu.com）页面。<br>
<img src="http://static.zybuluo.com/Tatsuya/l4awliemrg0yu2kes2yvxw7q/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20200327205233.png"><br>
我们看到，这个页面里面，有两个控件 ，一个搜索框，一个“百度一下”的搜索按钮。HTML的作用就是负责将这两个控件在页面上呈现，如下图。具体控件的大小、布局（位置）、颜色等等属性的控制，就需要CSS配合实现。</p>
<h2 id="3什么是css-">3、什么是CSS ？</h2>
<p>前面已经提到了，通过html呈现出来了页面应该展示出的控件。这些控件的样式、布局则用到CSS（实际上CSS也是HTML中的一个应用）。<br>
好了，截止到目前，你已经对HTML、CSS有了一个概念上的理解，但可能在应用层面还是不请求，不要着急接着往下看。</p>
<h1 id="二html">二、HTML</h1>
<h2 id="1页面框架">1、页面框架</h2>
<p>针对每一个WEB页面，都遵循一套统一的页面框架。代码如下：<br>
<img src="http://static.zybuluo.com/Tatsuya/kodopzp24ur81hsifxjko69k/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20200326170354.png"><br>
这这段代码就是HTML空白页面的一个框架，页面展示的页面代码都写在这段代码之中。</p>
<h2 id="2语法">2、语法</h2>
<p>如上文代码所示，你会发现代码中的结构都是以</p>
<pre><code><>...</>
</code></pre>
<p>这样的标签形式<br>
比如</p>
<pre><code>< html > < / html >
</code></pre>
<p>在这样的标签内，还可以插入其他标签,比如<code><html></html></code>中嵌套了 <code><body> </body></code>，但是必须成对出现。如果某个元素中，没有其它子元素要显示的控件，比如输入框控件则写成<code><input/></code>我们在展示的页面中，所有的控件，都是通过标签形式（语法）进行编写的。</p>
<h2 id="3空白页面说明">3、空白页面说明</h2>
<p>空白模板中第一行有一段代码<code><!DOCTYPE html></code>这段代码比较特殊，语法上没有对应的< / >进行结尾，这行代码起到声明作用，表示下面的文件内容是html。现在你可以暂时认为，写一个页面就首先把上面的代码加上就可以。</p>
<p>往下看<code><html></html></code>,这个是所有页面中必要的标签，一个html页面中涉及到的所有代码都是在这个标签内写的。（有写代码通过外链的形式写在了其他文件中，引用进来的，看起来代码不在这个文件内，但你可以认为浏览器在解析的时候，还是会当作在同一个文件中的代码进行解析）。</p>
<p><code><html></html></code> 中 嵌套了<code><head></head></code> 和<code><body></body></code>。<br>
<code><head></head></code>标注可以在这里声明<code><mata></code>标签、编写css代码、编写js、jquery代码等。如果css或者js代码单独写在了其它文件上。则需要将对应的文件根据路径引用，引用代码的也写在<code><head></code>内（后文会有详细说明）。<br>
<code><body></body></code>标签要编写的内容，就是我们通过浏览器中看到的页面里的内容。（浏览器中会根据body中的内容为基础框架和元素，在配合加载css样式代码以及js代码等实现最终的样式以及动态效果等）</p>
<h2 id="4常用标签">4、常用标签</h2>
<p>我们已经知道，页面中需要展示哪些控件（如输入框、按钮、文字）等等，则把对应的代码写到<code><body></body></code>中即可。然后通过css调整控件在页面中的布局和样式。<br>
常用的控件有：</p>
<h3 id="div">div</h3>
<pre><code><div></div>
</code></pre>
<p>一个div标签你可以理解为一个“方块”。这是一个用途最广泛的标签。方块的作用有什么？有了div这个标签，我们在实现某一个页面的时候，将一个页面从大到小进行分区布局，然后再在每个方块中进行细化加入需要展示的控件标签等。<br>
比如下面这个页面，我们一开始可以将页面进行这样的划分。<br>
<img src="http://static.zybuluo.com/Tatsuya/8eq8x5tx40atcjllt9o0yb0b/web.png"></p>
<p>这是一个管理系统的页面，可以按照红圈的部分对页面进行框架布局。 而这些红圈就是div标签实现的。也就是说我们可以在body里面放入四个div。</p>
<pre><code><body>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</body>
</code></pre>
<p>这个时候，页面中就有了四个方块，当然，如果你不给div写样式的话，是透明的，也就是说我们看不到但是存在的。 页面中有了这四个方块，但这如果不写样式，不会按照咱们想要的布局进行排列，如上图那样左边一个方块，右侧三个方块。这块后面会进行讲解，现在只要知道div就是一个方块，一个页面的大体框架就是通过div（方块）的排列以及div中嵌套div，来实现框架布局就可以。</p>
<h3 id="input">input</h3>
<pre><code><input>
</code></pre>
<p>input标签表示一个输入控件，可以是文本框、按钮、选中框、密码输入框、文件上传控件等等，这些控件都是inout，通过设置type属性呈现不同控件。<br>
type的类型有button、checkbox、file、hidden、image、password、radio、reset、submit、text<br>
比如我们要在页面中呈现一个文本框控件，则可以在body中写：</p>
<pre><code><input type="text" />
</code></pre>
<p>下面汇总常用的几个类型的input控件，具体效果见下图：<br>
<img src="http://static.zybuluo.com/Tatsuya/bqf3zuf99rabcm6sw5oqiyuw/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20200327183038.png"></p>
<h2 id="ul-li">ul li</h2>
<pre><code> <ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
</code></pre>
<p>ul、li 标签用来表示无序列表，ui包裹着li，每个li表示一个列表项，效果如下：<br>
<img src="http://static.zybuluo.com/Tatsuya/l728o2r0qj9k4v6p2o4978jg/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20200327203442.png"></p>
<p>图中的显示样式为列表的默认样式，我们可以通过添加css样式，将每一项横向排列，以及调整其它样式，实现网站菜单的样式如下图：（具体内容可在阅读后续css用法后，网上搜索相关资料查看）<br>
<img src="http://static.zybuluo.com/Tatsuya/0kjwg8apiroz4dt2id58u27e/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20200327203826.png"></p>
<h2 id="span">span</h2>
<pre><code> <span>你好，欢迎光临</span>
</code></pre>
<p>span标签主要用来显示文字，当你的页面中，有文字要展示的时候，文字用span标签进行包裹，配合< p >标签实现段落效果， 配合< br / >标签实现换行效果。效果如下：<br>
<img src="http://static.zybuluo.com/Tatsuya/v70xde1qc05x5jyschnqnyoh/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20200327204054.png"></p>
<h2 id="img">img</h2>
<pre><code><img src="微信截图_20200327204445.png" />
</code></pre>
<p>img标签用来显示图片，img标签有一个必要属性就是src用来设置图片的路径（这里是相对路径，如果所在的html和图片在同一个文件夹下，则直接写图片名称，上一级文件夹则需要加入 ../ 具体路径格式可自己百度）<br>
img标签效果如下：<br>
<img src="http://static.zybuluo.com/Tatsuya/4sue5nkzxtazkwztw9e2uecd/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20200327204843.png"></p>
<h2 id="table">table</h2>
<pre><code><table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</code></pre>
<p>效果：<br>
<img src="http://static.zybuluo.com/Tatsuya/52z7zioa9mxuqkz4d9xjrir3/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20200327210109.png"><br>
table标签顾名思义，就是表格，可以定义几行几列，在没有div之前，很多网站使用table进行页面大框架的布局工作，就是div章节写道的红色框框，可以通过表格+合并单元格个的形式实现，但是使用table作为框架的时候，浏览器在加载页面的时候，必须将页面中所有的标签以及相关图片等资源下载到本地后，在一次展现出来。在体验上不是太友好。后来引入div标签，div标签相比table，浏览器在加载的是，只要每一块div内的元素加载完成以后，这一块的元素就会在页面中展示粗来，无需等待整个页面全部加载完成。<br>
tr：表示行<br>
th或者td表示列，th主要是表格表头，用来表示数据列。<br>
现在table的作用，主要是用来显示数据列表，如下图的效果：<br>
<img src="http://static.zybuluo.com/Tatsuya/qxzm9d3c8nifmmicdst2qu2y/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20200327205858.png"></p>
<h2 id="小结">小结</h2>
<p>好了，至此大致说明了html的语法、以及一些常用的标签，其它标签使用相对较少，如果遇到要展示的控件，可以通过检索引擎搜索对应的标签，掌握语法以后，使用起来很好理解。</p>
<h1 id="二css">二、CSS</h1>
<h2 id="1样式分类">1、样式分类</h2>
<p>上文中，我们已经学习了html的基础概念，我们现在已经可以在页面中展示出简单的控件了。但是一个页面仅有控件原因不够，我们需要通过css样式，实现控件的位置布局、样式风格。<br>
既然css是一套按照规则语法的代码，那我们首先要知道的就是，样式代码写在哪个位置。我们可以分为行内样式、内嵌样式、外链样式。</p>
<h3 id="行内样式">行内样式</h3>
<p>什么是行内样式？顾名思义，就是我们将样式代码，写在每个控件标签html代码的行内。比如，我们有一个<code><div></div></code>元素，我们可以试一下，默认写上这个元素后，你在页面中是看不到的，因为他是透明的方块。<br>
现在我们给这个方块的改为绿色的，并且设定一定的高度和宽度。</p>
<pre><code><div style="background-color:green;width:200px;height:100px;"></div>
</code></pre>
<p>你已经发下了 style=""这段代码，写在了div的内部，这种形式就是行内样式。要写行内样式，先写上 style="", 然后具体的样式写在引号中，样式以键值对的形式 “属性：属性值”表示，每个样式之间使用 分号 分割。比如我们设置背景为绿色 background-color : green ;</p>
<h3 id="内嵌样式">内嵌样式</h3>
<p>内嵌样式同样也是实现元素的样式效果，你可以理解成把它写在另外的地方，这个地方就是< header > 。代码如下：<br>
<img src="http://static.zybuluo.com/Tatsuya/8pt3x9bdwy1zrya9i22yu8ud/image_1e4e30m9sl2a1p2s1995169719hg3a.png"></p>
<p>我们可以在head中，写上<code><style type="text/css"> ... </style></code>,声明style以后，我们就可以在这里面别写css代码。看大括号里面的键值对就是属性和属性值。你这时候会问，属性我已经写好了，但是现在这段代码我并没有写在某一个html标签里面，浏览器怎么知道这个属性到底是给哪个html标签设置的呢。</p>
<p>这个时候，我们引入html标签中的两个属性 id ， 和 class<br>
id:表示给某个元素起一个唯一的名字<br>
class：表示给这个元素建立以类名<br>
每一个元素可以有相同的类名，但是只能由一个唯一的id。<br>
如上图所示，我们由两个div，一个div叫做 div1，另一个叫做div2 （id这个就是他们的名字，如果两个都叫div1就会报错），但是他们两个由同样一个类名“divclass”，这是允许的。</p>
<p>好了，我们已经给div设定了名称或者类名，那么我们在head中写的样式就可以指定给某个div了。看到样式中的 #div1 了吧，这个#号表示一个选择器，选择某一个id的元素，#div1就表示我后面的样式代码作用在id=div1的元素。<br>
在来看第二个 .divclass， 这个 . 表示的是类选择器，也就是说.divclass{} 这段样式表示的是class=“divclass”的所有元素，都会显示这个效果。</p>
<p>综上所述，嵌入样式就是根据选择器+样式属性的形式写在head中。</p>
<h2 id="外链样式">外链样式</h2>
<p>外链样式，就是单独创建一个后缀名为.css的文件，文件总的内容与内嵌样式的写法相同：<br>
<img src="http://static.zybuluo.com/Tatsuya/0k2cwpzr5i6qh2q84748qgxj/image_1e4e38nfs1s1aca31fmsvk3omb3n.png"><br>
我们把样式写在了单独的css文件中，这个时候，我们想将他作用在我们的某一个页面中，只需要在页面的head中进行引用<br>
<img src="http://static.zybuluo.com/Tatsuya/y4zl53mxvl7igsf6os6yxilp/image_1e4e3b6lp19pa101rqanc59esp44.png"><br>
通过link标签， href写上相对路径（与img元素类似），rel=“stylesheet” 这个默认写上就可以了，css文件中的写法与内嵌样式中的写法完全一样。</p>
<h3 id="优先级以及继承">优先级以及继承</h3>
<p>当你学会三种样式的写法的时候，可能会遇到一个问题，三个样式中可能有意无意的对同一个元素设定了不同的属性值，比如我在行内样式、内嵌、外链中，都给某一个div设定了颜色，但设定的分别是红色，绿色，黄色。这个时候就会有一个优先级问题，及行内样式>内嵌>外链 , 也就是说，实际的颜色会显示为行内样式设定的颜色。<br>
css样式的语法可以有继承关系，不在这里过多讲述了，自行搜索查看一下，很容易理解。</p>
<h2 id="常用样式属性">常用样式属性</h2>
<p>关于样式的类型和语法已经有了了解。现在我列举出来常用的属性（使用非常频繁），其余属性可以在用大的时候自己检索。<br>
width：<br>
设置控件的宽度，如100px</p>
<p>height：<br>
设置控件的高度，如200px</p>
<p>font-size<br>
设置文字的字号</p>
<p>font-family<br>
设置字体，如宋体、雅黑等</p>
<p>font-weight<br>
设置字体加粗</p>
<p>line-height<br>
设置字体的行高。比如，你有一个div，设置的高度为10px；在div里面添加几个文字< span > 你好啊< /span > 默认情况下，文字是在div的左上角开始往后展示的，但是你想让他在这个div中垂直居中，这个时候只要将span的line-height:10px 设置为与外层div的高度一直，文字就会垂直居中显示。</p>
<p>text-align：<br>
文字水平居中。同上div中文字如果要水平居中，则设置text-align:center即可。</p>
<p>margin<br>
margin是重点，百分之就是使用在div上，我们说了div你可以理解成为一个方块，那么方块一周是边框，margin就是设置边框外层的边框厚度。这里有一个需要注意的地方，<br>
比如你的div设定的时候高度是100px，宽度是200px，但是你给上边框margin设定为10px，这个时候其实你整体的div的高度就变成了110px。如果你给div的上下左右都设定成为了10px，实际上div的高度就变成了120px高，220px宽。<br>
因此你在布局的是要考虑margin的问题，页面的某个地方留有了100px宽度的位置，你可以放置100px宽的div进去，但是有时候你设置了marigin属性。你发现div放不进去了，这个时候是因为你的实际宽度并不是div设定的宽度，还要加上margin，一共小于等于100px的时候，才能放进去。</p>
<p>padding<br>
padding的跟margin唯一的区别就是 他设置的是内层边框的高度。再假设一下，有一个100px高100px宽的div方块。默认情况下你这个方块里面的容量应该是100 * 100，你可以再div中放置100 * 100的东西，但是你设置看四周的padding是10px，所以你实际div中的容量就变成了80 * 80 了。简单说margin影响了外层的布局，paddning影响了内层的布局。<br>
你可以搜索一下“CSS盒子模型”，查看详细解释，这个再布局中经常用到。<br>
以后我会根据时间情况详细讲解。<br>
<img src="http://static.zybuluo.com/Tatsuya/c43bmgvkmuchxw0lbhw4zl7k/image_1e4e4sd7e13ask2in4e1bothfc4h.png"></p>
<p>float<br>
浮动效果，所谓浮动就是元素根据规则靠在一起，假设我们有三个div，代码如下<br>
c<img src="http://static.zybuluo.com/Tatsuya/u9r6jd0awp4aua2juz89h390/image_1e4e59sjb14ij1r9npihnghbbj5b.png"><br>
如果不设定float，单个div是从上至下进行展示，如图：<br>
<img src="http://static.zybuluo.com/Tatsuya/38w2w3w8fospq9egt0tz2mjx/image_1e4e59hcv1nol6t610lkq7j1biu4u.png"><br>
这个时候我们给三个div加入float属性，设置为left（向左浮动），看下效果，<br>
<img src="http://static.zybuluo.com/Tatsuya/dord3pvser7fp3s1dnak2mmh/image_1e4e5cec6ofruf1r1m1a331svj65.png"><br>
你会发现三个div向左靠在一起了。加入你的div比较宽，这个时候，当某一个div想换行往左浮动的时候，发现位置不够了，那么就不会继续向上换行浮动，会再下一行贴靠再左边浮动。<br>
<img src="http://static.zybuluo.com/Tatsuya/t19vmdpwto2fp1c592dy79zu/image_1e4e5busr1o4b1o127mgmoa1om55o.png"><br>
display<br>
这个自己百度一下可以，我说明一点，如果你不清楚display的概念，那么只要你给属性设置float：left 的时候， 在后面加上一句 display：inline 。 百分之八十是你想要效果。</p>
<p>cursor<br>
当你给元素设定cursir的时候cursor:pointer，鼠标放上去变成了小手样式<br>
<img src="http://static.zybuluo.com/Tatsuya/ufcy3guwtx7bjf3awhc8bcyh/image_1e4e5g4foan9cn91q2q105d1m216i.png"></p>
<h1 id="小结-1">小结</h1>
<p>时间原因，我暂时先写到这，掌握了以上知识，页面总70%用到的元素都已经介绍了，没有介绍的东西还有还有很多很多，但哪些知识可能至再30%的情况中有用到，而你阅读完上面的内容以后，已经掌握了语法和相关知识点，其它的东西实际用到的是搜索完全来的及。<br>
另外，其实还有一个更重要的事情就是记录一下怎么基于上面这些已经介绍到的东西来实现一个静态页面的编写。这个以后我慢慢整理加工。<br>
总之，再你掌握了这些知识后，先找一个页面，发挥你的想想，这些标签和属性就是给你的工具，你要实现一个页面布局有n多种方法，你要做的就是如何通过这些东西进行组合搭配，呈现页面效果。<br>
最后：个人的经验，绘制一个页面，先从大到小对整个页面用div分成若干块。然后一次实现每一个块中的内容。再实现这一开的内容的是，如果展示的东西比较多，可以再将这块的内容使用div进行分块分区。从大到小依次深入到某个元素实现即可。</p><br><br>
来源：https://www.cnblogs.com/tatsuya90/p/12585305.html
頁:
[1]