登錄
手機訪問
街坊 · 留言 關於我 小遊戲 FlagList
为了更好的体验请切换为竖屏
回到顶部
分享页面
生成海报
邮箱订阅
今日访问
×
打开微信“扫一扫”,打开网页后点击屏幕右上角分享按钮
正在创建海报

教你:一天入门写网页

2019-08-19
伍子蛇 发布在 雜文
10985
28min
1687 °C

作为一个计算机专业的毕业生,本科期间在实验室学的是Web前端。期间教过很多朋友学习做网站。想想不如写一个教程,用最简短的文字最快的速度让想学习网页的你可以入门,要越过自己内心学习的恐惧,其实非常简单。

授人以鱼不如授人以渔,文中所写都是归纳的要点,要吸收要举一反三。

一个基础的网页只需要包含HTML和CSS就可以了,我有信心让你在一个下午的时间学会基础的网页,你也要对自己充满信心。

伍子蛇

目录

一. 创建目录结构二. 什么是HTML三. 什么是CSS
四. 做个小例子五. HTML+CSS布局六. 小结
七. 一个简单的网页八. 扩展阅读九. 最终测试

工欲善其事必先利其器,首先我们先下载Chrome浏览器,以及Sublime文本编辑器,当然文本编辑器可以用最简单的记事本代替,但一个好用的文本编辑器一定会让你更方便的,不要输在起跑线上。

选择chrome的原因:

“检查”模式可以很好的查看自己写的代码,以及出错找到原因。自己摸索”检查”模式。

“检查”快捷键:option + command + I

选择sublime的原因:

sublime是一款非常小巧轻量的编辑器,没有冗余的功能。也可以下载很多插件,比如自动排版;

注释快捷键:command + /

一定要熟练掌握chrome的检查模式,知道怎么在浏览器中查看想要查看的代码块。工欲善其事必先利其器!

一. 创建目录结构

规范的目录结构是成功的开始

如图创建一个基础的目录结构

① 创建一个名为index的文件夹

② 在文件夹中创建index.html以及css和images文件夹

③ 在css文件件中创建style.css文件

二. 什么是HTML

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

HTML 标签用于定义文档内容。通过使用 <h1>、<p>、<img> 这样的标签表达“这是标题”、“这是段落”、“这是图片”之类的信息。

HTML 是用来描述网页的一种语言。

右边是一个网页的基础HTML结构

① HTML 标签是由尖括号包围的关键词,比如 <html>

② HTML 标签通常是成对出现的,比如 <b> 和 </b>

③ 标签对中的第一个标签是开始标签,第二个标签是结束标签

将以上代码编辑在index.html中,在浏览器中访问index.html

<!DOCTYPE html>
<html>
    <head>
        <title>网站标题</title>
        <link rel="stylesheet" href="./css/style.css">
        <meta charset="utf-8">
    </head>
    <body>
        <div>
             我的第一个标题
        </div>
    </body>
</html>

注意,除了img以外大部分标签都是成对出现的,比如<div>后面一定会有</div>,请像上方代码一样缩进,使用tab键不要用空格,开始标签和结束标签对齐非常重要!开始标签和结束标签对齐非常重要!开始标签和结束标签对齐非常重要!

HTML所必须的元素

简单解释一下上文出现的HTML代码,这些代码是一个网页的必要元素。

标签说明
<!DOCTYPE html>声明
<html></html>定义 HTML 文档。
<head></head>头文件 / 用于引用外部文件等
<meta charset=”utf-8″>声明编码格式中文
<body></body>文档的主体,都写在这里
常用的HTML标签
标签说明示例文档
<div></div><div>块</div>查看
<img src=””/>图片<img src=”http://d-d.design/wp-content/uploads/2018/12/wzspic.png”/>查看
<h1> to <h6>标题<h1>标题1</h1><h2>标题2</h2>查看
<p></p>段落<p>这是一个段落</p>查看
<span></span>没有任何属性的标签<span>没有任何属性</span>查看
<a href=””></a>超链接<a href=”http://d-d.design”>一个链接</a>查看
<input></input>文本框<input tpye=”password”></input>查看
<button></button>按钮<button type=”button”>点击</button>查看

尝试将上面的示例分别放入index.html的<body></body>标签中,在浏览器中查看效果。

注意,代码中出现的所有符号都是英文符号,注意引号和分号!代码中出现的所有符号都是英文符号,注意引号和分号!代码中出现的所有符号都是英文符号,注意引号和分号!

三. 什么是CSS

你已经会写DIV、链接、图片、段落、标题、文本框、按钮了。恭喜你,你已经学会本次课程的全部HTML了。

这就学完了?好像这些HTML并没有什么用呀?也没有达到想要的视觉效果呀?是的,HTML就是单纯的表示“某个地方有某个东西”。

要让它又好看的样式,这就需要我们的CSS出场了。

伍子蛇

CSS 指层叠样式表 (Cascading Style Sheets);

CSS是用来形容HTML定义的结构,如div、a、img、p他们是什么颜色的字体、什么颜色的背景、字体靠左还是靠右、多宽、多高、在左边还是在右边等等。

在前文中<link rel="stylesheet" type="text/css" href="./css/style.css">这句话的意思是,index.html这个文件将用css文件夹下的style.css文件进行描述。

那么怎么使用呢?我们要先学一个概念,叫做选择器。

选择器

选择器通俗来说就是给我们的形如<a></a>这些标签命个名,这样我们才方便用CSS来形容它。

① 学习第一个选择器叫做ID选择器

<div id=’wuzishe’>伍子蛇</div>

如上文中的块标签,我们就已经给他命名成了”wuzishe”,你想象wuzishe是你的一个同学,接下来我们就可以来形容伍子蛇同学了,他多高、多宽、是什么颜色的……

例如: #wuzishe{color : red ; width : 100px}

意思就是:ID为wuzishe的元素,字体颜色为红色,宽度为100px。

② 学习第二个选择器叫类选择器(CLASS)

<div class=’classmate1′>伍子蛇</div><div class=’classmate1′>兰清发</div><div class=’classmate1′>蒋恩涛</div><div class=’classmate1′>赵伟豪</div>

如上文中的块标签,我们给他们都取了一个类名叫做classmata1,想象他们都是你的同学,你们在1班(classmate1),这样我们就可以来形容1班的同学的通用属性了,比如他们多高、多宽……

例如: .classmate1{color : yellow ; text-align : right}

意思就是:class为classmate1的全部元素,字体颜色为黄色,文字向右对齐。

说到这,应该理解ID选择器,和类选择器了吧,我来总结一下:

※ ID选择器只能选择一个标签,写作 id=“” ,类选择器可以选择多个标签,写作 class=“”;

四. 感受网页,做一个简单的小例子

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>个人介绍</title>
        <link rel="stylesheet" href="./css/style.css">
        <meta charset="utf-8">
    </head>
    <body>
    	<div id="cxy">
	        <img id="boxLeft" src="http://d-d.design/cxk.jpeg">
    	    <div id="boxRight"></div>
    	</div>
    </body>
</html>

style.css

#cxy{
	width: 100%;
	height: 200px;
}
#boxLeft{
	width: 200px;
	height: 100%;
	float: left;
}
#boxRight{
	width: 200px;
	height: 100%;
	float: left;
        background-color: lightgrey;
}

分别复制上面的代码到index.html和style.css中。可以看到我们在body中使用了三个标签,块标签命名为cxk,cxk中又包含一个图像以及一个块。

※ ID选择器在CSS中用’#’号选择

在CSS中我们对图像和块进行了描述,很容易看懂,width是描述宽度,height是描述高度,background-color是描述颜色。float是重点,我们后面再说。

尝试修改这些属性,看看网页的变化。

现在有了照片和右边的方框,我们要给他添加标题和描述。

在index.html <div id=”boxRight”></div>的 ‘三角形’ 处添加以下代码:

<div id="title">蔡徐坤</div><div id="intro"></div>

在style.css的文件中

#title的宽度设置为100%;高度设置为50px;文字居中;字体大小25px;行高50px;

#intro 的宽度100%;高度150px;

#title{
	width: 100%;
	height: 50px;
	text-align: center;
	font-size: 25px;
	line-height: 50px;
}
#intro{
	width: 100%;
	height: 150px;
}

在index.html的intro块中添加以下HTML

<div class=”hobby>唱</div>

<div class=”hobby>跳</div>

<div class=”hobby>RAP</div>

<div class=”hobby>篮球</div>

<div id="cxy">
    <img id="boxLeft" src="http://d-d.design/cxk.jpeg">
    <div id="boxRight">
    	<div id="title">蔡徐坤</div>
    	<div id="intro">
    		<div class="hobby">唱</div>
    		<div class="hobby">跳舞</div>
    		<div class="hobby">RAP</div>
    		<div class="hobby">篮球</div>
    	</div>
    </div>
</div>

描述一下刚才添加的class选择器

※ 类选择器在CSS用’.’号选择

10px的边距

上下左右各10px的空隙

白色背景色

5px的圆角

浮动:左边 //现在不用理解

字体颜色橙色

一像素的实线边框

.hobby{
    box-sizing: border-box;
    padding: 10px;
    margin: 10px;
    background-color: white;
    border-radius: 5px;
    float: left;
    color: orange;
    border:1px solid orange;
}

是不是已经感受到类选择器的作用了呢,可以批量的设置相同类型的标签。

看到一个新css:box-sizing;我们先不管他

通过以上的实际操作我们已经使用了一些常用的CSS,下面这张表我你在入门阶段会经常用到的CSS

属性说明示例
width宽度,单位(%)或(px)width:200px;
height高度,单位(%)或(px)height:200px;
float浮动,值(left)或(right)float:left;
color字体颜色,值(red、#d0d0d0……)color:black;
background-color背景颜色background-color:red;
line-height行高,单位(px)或(数字)代表倍数line-height:2;
text-align字体对齐,left,right,justify;text-align:justify;
border-radius圆角,单位(px)border-radius:5px;
border边框border:1px solid red;
padding外边距;如左边距padding-left:10pxpadding:10px;
margin内边距;左边内边距margin-leftmargin:10px;

五. HTML+CSS布局

以上就完成HTML以及CSS的简单上手了,现在,请忘记我们学过的所有内容!请忘记我们学过的所有内容!请忘记我们学过的所有内容!

第一阶段的学习只是让你对HTML和CSS有个初步的印象。

开始第二阶段的学习,用最简单的方式让你学会布局。

伍子蛇
伍子蛇 say:

我教你的还记得多少?

孤斗网友 say:

回子蛇哥,我只记得一大半。

伍子蛇 say:

那,现在呢?

孤斗网友 say:

已经只剩下一小半了。

伍子蛇 say:

那,现在呢?

孤斗网友 say:

我已经把所有的全忘记了!

伍子蛇 say:

好,你可以上了…

忘记之前学过的所有东西,HTML只需要记住div就可以了,前面我们说了’块’是div,块级元素的概念就不展开讲了,理论上div可以模拟所有的标签,那么就意味着只要会用DIV了就会使用HTML了!

CSS我们只用记住最简单的4个属性

属性名简介示例
width宽度:单位(px)或者(%)width:200px;
height宽度:单位(px)或者(%)height:200px;
float浮动:left 或者 rightfloat:left
background-color背景色(orange、#d0d0d0……)background-color:red;

上面的东西都已经记住了吧,记住之后我们继续往下。我们来动手写一个布局。

step1 一个灰色的块

最好在不看我的代码的情况下自己手动完成。

需求:写一个宽1000px;高600px;颜色为grey的块

//html
<div id="box"></div>

//css
#box{
	width: 1000px;
	height: 600px;
	background-color: grey;
}

step2 在灰色块中建立两个块

需求:将灰色块分为上下两个块,上面的块高度:120px,颜色为红色。下面的块高度为剩下的部分,颜色为burlywood

//html
//在box块中加入下面两行代码
	<div id="box1"></div>
	<div id="box2"></div>

//css
#box1{
	width: 100%;
	height: 120px;
	background-color: red;
}
#box2{
	width: 100%;
	height: 480px;
	background-color: burlywood;
}

通过step2,我们就已经掌握了标签的嵌套,可以在一个标签内写入标签。

step3 将burlywood块分为左右两块

需求:将颜色为burlywood的块分为左右两块,左边块的宽度为70%;颜色为cadetblue。右边的块宽度为剩余宽度,颜色为orange。

//html
// 在box2块中加入下面两行代码
<div id="box3"></div>
<div id="box4"></div>

//css
#box3{
	width: 70%;
	height: 100%;
	background-color: cadetblue;
	float: left;
}
#box4{
	width: 30%;
	height: 100%;
	background-color: orange;
	float: right;
}

发现了么,flot的用法就是将一个块分为左右两块的时候,左边的块float:left;右边的块float:right

step4 将cadetblue块分为上下两块

需求:将颜色为cadetblue的块上下分为两块,上面的块高度为120px;颜色为skyblue。下面的块高度为剩余高度,颜色为pink。

//html
// 在box2块中加入下面两行代码
<div id="box5"></div>
<div id="box6"></div>

//css
#box5{
	width: 100%;
	height: 120px;
	background-color: skyblue;
}
#box6{
	width: 100%;
	height: 360px;
	background-color: pink;
}

发现了么,step4和step2几乎是一样的。

写了这几个块你会发现很简单就可以完成色块的搭建,那么这些色块的搭建有什么用呢?看看下面的图你会发现,其实这就是本页面的简单架构。只不过是嵌套了更多层级罢了。

※ 注意:在入门阶段一定要做到一个块只分成两块(无论是上下分还是左右分)

布局原则:

① 从最大的块开始写

② 将最大的块分为两个部分

③ 将分出来的两个部分继续分成两个部分

④ 以此循环直至分到最终想要的布局效果

六. 小结

通过以上的学习,我们学习到了以下几点,请按顺序确认是否学会:

① 已经初步认识了HTML和CSS

② 学会了div+css对页面进行布局(ID选择器的使用、类选择器的使用、左右分布的元素使用float)

很好,你已经掌握了写网页的思想核心。

接下来我们将继续练习写布局,并在写好的布局里面增加更多的html标签,以及描述。

初极狭,才通人,复行数十步,仿佛若有光,成功就在不远处。

伍子蛇

七. 一个简单的网页

我们继续使用刚才的布局代码,进一步写它的样式。

在写之前,你有没有发现之前我们做的布局外部有一圈白边,那是浏览器给body标签预设的CSS,所以我们要在CSS中加入以下这一段来去掉这个白边。

body{
	margin: 0;
}

有没有觉得这个选择器我们并不认识?既不是ID选择器,也不是类选择器。这是我们要学的第三种选择器,叫做元素选择器

元素选择器是最常见的 CSS 选择器。换句话说,文档的元素就是最基本的选择器。比如:div{background-color:”orange”},这句话的意思就是所有的div的背景色都是橙色。这就是我没有把它放在前面讲的原因,一般单独的元素选择器是用来做默认样式声明的。不要直接使用。

step5 红色块分为上下两个块

需求:红色的块分为上下两个块,上面的块高度40px;颜色3c3c3c。下面的块高度为剩余高度;颜色为白色

//html
// 在box7块中加入下面两行代码
<div id="box7"></div>
<div id="box8"></div>

//css
#box7{
	width: 100%;
	height: 40px;
	background-color:#3c3c3c;
}
#box8{
	width: 100%;
	height: 80px;
	background-color: white;
}

与step4和step2一样

step6 白色块横向平分为7块

需求:将白色块分为7个小块,高度不变,并且加上1px的实线黑色边框

//html
// 在box8块中将下面这行代码复制7遍
<div class="box8child"></div>

//css
.box8child{
	width:-webkit-calc(100%/7);
	float: left;
	height: 100%;
	border: 1px solid black;
	box-sizing: border-box; 
}
//宽度可以写成上面这样,也可以算出100%/7的结果
//写成width:14.28% 也是可以的

这里有个新的css叫做box-sizing;它有什么用呢,你可以去掉这个属性再看看。

box-sizing是将border以及padding放在块的内部。以实现加上border和padding块的高度和宽度不改变。

step7 给类为box8child的块加上链接

需求:给类为box8child的块加上链接,链接指向http://d-d.desing,链接颜色为黑色,链接名字为:栏目,链接名字上下居中,触摸链接颜色变成红色;去除类为box8child块的边框。

//html
// 给每个box8child块中都加入下面这行代码
<a href="http://d-d.dsign">栏目</a>

//css
.box8child{
	width:-webkit-calc(100%/7);
	float: left;
	height: 100%;
	text-align: center;
}
.box8child a{
	text-align: center;
	line-height: 80px;
	text-decoration: none;
        //上面这条的意思是去掉链接自带的下划线
	color: black;
	font-weight: bolder;
        //字体为粗体
	font-size: 20px;
}
.box8child a:hover{
	color: red;
}

这里有很多新的CSS

.box8chid a{}这样的写法,这叫派生选择器。意思是class名为box8child的全部标签中全部a标签

文字左右居中需要在它的父级设置text-align:center;也就是标签a要居中需要在父级box8child中设置

※ 文字上下居中小窍门:将需要上下居中的元素设置line-heignt的值等于父级元素的高。

元素:hover{}这样可以设置该元素被触摸后的变化。这样的写法叫做伪类

遇到任何无法解决的问题请精准的描述进行百度,比如遇到标签a有下划线无法去除,则百度 ‘css 去除a标签下划线’

根据step7可以同理做出最顶端黑色块的详细内容和橘色的内容了,自己可以试一试;

有点需要补充说明,不仅仅是img标签可以插入图像,用div也可以,并且更多时候用div插入图片可以更好的控制。下面我们将在粉色区域插入一张图片给你演示。

step8 在粉色块中插入图片并铺满

下载一张图片,放在images文件夹中,在粉色块中插入该图片作为背景图片,图片尺寸铺满

//css
#box6{
	width: 100%;
	height: 360px;
	background-color: pink;
	background-image: url(../images/bph.jpeg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

//可以发现background-color和background-image可以同时存在
//如果插入的图片是透明的png
//那么就会看到背景色和图片的样子

在div中插入图片作为背景图的方式为background-image:url(‘图片地址’);

注意这里的图片地址用的是../,这是为什么呢,../代表的是上一级文件夹,./代表着当前文件夹,可以回到最顶上去看看目录结构。

铺满是background-size:cover;

八. 扩展阅读

通过以上的学习,你已经学习到了一个网页的基础知识

需要更多的反复联系才能变成自己的知识

在文末我会出一道测试题,做出来你就通过了本次学习

不用强硬的背HTML或者CSS,熟能生巧,什么都不记得才是无招胜有招。

伍子蛇

一些重点难点的扩展阅读,不需要完全理解,慢慢来比较快。

CSS重点难点内容

padding、margin、border

padding是内边距、border是边框、margin是外边距。

通俗来说,一个块,border是它的边界,padding在边界里面,margin是这个块与其他块的缝隙

要熟练掌握还需反复测试与练习。还记得之前出现的css:box-sizing:border-box。对于padding是有奇效的

float 浮动 [不用深入理解]

HTML的文件流是至上而下的,但是很多时候我们需要从左向右或者从右向左的布局,因此,就用了float

请看右图

当把框 1 向右浮动时,它脱离文档流并且向右移动

直到它的右边缘碰到包含框的右边缘

再请看右图,当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。

如果把所有三个框都向左移动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。

如下图所示,如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”:

九. 最终测试

在测试的过程中,有不懂的地方请查阅W3school;以及描述清楚进行百度,请相信我所讲的内容已经涵盖了HTML和CSS的核心,你已经可以写一个网页了。剩下的,靠你了!

看到这里的童鞋们,你们已经胜利了,我们接下来开始对你的学习成果进行检验

请按照下面的设计图进行制作。

伍子蛇

注意!一定要尽一切可以做得和设计图一样,一模一样!任何的差池都是不及格的,一模一样!下面会给出这个网页将用到的css。

提示:做测试的步骤第一步是画布局,就像我们做的练习一样,画色块。其实我已经帮你做出了色块如何分布的图。布局好了之后第二步是做布局里面的细节,加油吧!

width 宽度height 高度margin 外边距
pading 内边距border 边框background-color 背景色
background-image 背景图background-position 背景位置background-size 背景尺寸
float 浮动line-height 行高border-radius 圆角
※ box-sizing

可以随时在评论区留言遇到的问题,看到后一定第一时间解答。

完成测试的同学们,请点击此处前往W3school从头至尾阅读HTML以及CSS,不要求记住,但脑海中完整的知识图谱在你入门以后是非常重要的。以上!

送TA咖啡
- 请作者喝一杯咖啡吧!速溶的也可以 -
点点广告也是支持作者哦
討論區
  1. cunzher says:

    大佬作风,受教了!

  2. Lvtu says:

    做出来已经很牛,能把做的详细写出来就更牛了。。。

  3. yhd says:

    写的太棒了

  4. 三棵树人 says:

    上初中的时候,学过用FrontPage制作网页,那时候只会制作一些插入图片和文字超链接之类的网页。
    会写代码自然就能更轻松地把想要达到的效果给展现出来,总觉得这门技术太过专业,难学。
    看来,有时间还是可以学学的~

    1. 伍子蛇 says:

      我已经成功教会了好几个朋友,有句话叫做师傅领进门修行靠个人,入门不难,但要学精任何东西都还需要持续不断的行动力。我相信你可以,技多不压身,花个一两天时间,按照我这个教程做完准没错~

      1. 三棵树人 says:

        哈哈哈,可以的。

    1. 伍子蛇 says:

      什么叫做真实特别😯

      1. Fong。 says:

        你这个排版特别。

        1. 伍子蛇 says:

          谢谢

          1. Fong。 says:

            要是我就没这个心思写教程,佩服。

        2. 伍子蛇 says:

          因为断断续续会有朋友叫我教,每次说来说去花费的时间还不如出个教程来得省事和周到

  5. DOUMA says:

    太巧了,我也是前端出生,在大学学的Web前端,这个教程对于入门来说太好了

    1. 伍子蛇 says:

      哈哈哈,谢谢,第一次写这个东西,肯定有蛮多不足

  6. 逗逗 says:

    博主你也太优秀了,教程出的好,学了一天就入门了,赞,期待出第二期

    1. 伍子蛇 says:

      第二期教响应式布局以及语义化?还是加深基础练习?再等等吧,哈哈

  7. 阿发 says:

    完成最终测试😆

    1. 伍子蛇 says:

      是不是只需要一天的时间🤩

      1. 阿发 says:

        多花了半天😝

  8. 第一笔记 says:

    很基础的,讲得好,非常适合入门级学习

    1. 伍子蛇 says:

      谢谢,能最快速的上手并保有兴趣是学习的最好方式😺

Leave a Reply

Your email address will not be published.

@
+
=
取消
發送
最新文章
Latest articles
因利来,因利走
2020-07-30 38 °C
为什么你觉得头(大脑)很重要?
2020-06-23 429 °C
自己的近况,Better man?
2020-06-10 662 °C
构建梦境的库,GoodNight.js
2020-06-06 1086 °C
最新活动
Latest events
随机推送 / Random push
365 °C
采莲时节桂花香 丨 陳老茂
242 °C
高一新生寄语 丨 陳老茂
436 °C
爱因斯坦的小板凳 丨 陳老茂
1524 °C
时间重来不饶人 丨 信天翁
×
当前选择的是支付宝