前言
网上不少的前端入门书籍或博客，对0基础的新人都不太友好。有些过于空乏，理论太多，枯燥乏味，让人提不起学习的兴趣；有些作者字里行间洋溢出满满的优越感，让人不喜。所以，作为纯正工科男的我，决定写一遍简洁风的前端入门指南？助大家极速入门。
前端骨架：HTML
理论直接跳过（有兴趣的小伙伴可以去搜搜）。所谓的前端基础HTML，其实就相当于树的树干，起基本支撑作用。
好了，我们开始画个程序树
1.打开电脑记事本，新建一个txt文档。
2.输入以下代码
<html>
<head>
<title>树</title>
</head>
<body>
树干。
</body>
</html>
3.将txt文档后缀名改为html。
4.用浏览器打开。
5.鼠标右键，检查（快捷键Ctrl+Shift+i）。
好了，恭喜，HTML你已经会用了。
前端基本结构代码的简析
1.<html></html>，这一个标签相当于画纸，画作需要画在画纸中。
2.<head></head>，头部标签，存放title等标签。
3.<title></title>，标题，显示在浏览器顶部。
4.<body></body>，正文，用于存放所有的html的结构标签。
小练习
<html>
<head>
<title>前端</title>
</head>
<body>
<h3>网站前端</h3><hr/><br/>
<p>前端对于网站来说，通常是指，网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为<strong>前端设计</strong>和<strong>前端开发</strong>，前端设计一般可以理解为<ins>网站的视觉设计</ins>，前端开发则是<ins>网站的前台代码实现</ins>，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。</p>
<h3>基础技能</h3>
<p>HTML、CSS、JavaScript</p>
<a href='http://baike.baidu.com/link?url=UKIN5Wg73SgTfLg-eASzMnTLIQXYmj-E4H4qtDbxSECV8xk2_eArcpc44WAcIr08mZ6EmTMEun13VY_Ji48qaWgMCpM7FC_y2a6TmgCxHFW'>前端百科</a>
</body>
</html>
将以上代码复制到txt文档，改后缀名为html，查看效果吧。
ps：a链接指向的是前端的百度百科，有兴趣的同学可以看看。
其他常用标签介绍
1.h系列的标签(Header)：h1,h2,h3,h4,h5,h6
作用：把页面上的文字加上标题的语义。
代码：
<h1>这是标题</h1>
h1,h2,h3,h4,h5,h6:将文字放大，加粗.并且逐渐变小。（h1标签是最大的。）
注意：一个页面只能有一个h1标签
2.p标签(Paragraph)：段落标签
作用：给页面的上一段文字加上段落的说语义
代码：
<p>这是段落</p>
特点：页面上的一个段落，单独占一行，并且与上下内容之间存在距离。
3.hr标签(Horizontal Rule)
作用：在页面显示一条横线。
代码：
<hr/ >
特点：在页面显示一条横线，默认占整行。
4.br标签(break)
作用：换行。
代码：
<br/ >
特点：换行
5.b(Bold),u(Underlined),i(Italic),s(Strikethrough),strong,em,del,ins
作用：
b：加粗
u: 下划线
i: 倾斜
s: 删除线
建议不要使用，因为这些标签没有语义。
作用：
strong:加粗
ins:下划线
em:倾斜
del:删除线
可以使用
6.img标签(image)：
作用：在页面显示一张图片。
代码：
<img src ='图片的路径' title='对图片的描述（鼠标悬停在图片上显示）'>
特点：就是显示图片.
路径：就是该文件的存放位置。
7.a标签(Anchor)：锚
a标签的其它名称：
超级链接，超链接，锚链接。
作用：可以在一个页面跳转到另一个页面。
代码：
<a href="页面的路径">必须写文字</a>
注意：在a标签之内必须要写上文字，如果没有，那么这个标签在页面上找不到。
a标签的其它用法：
1.0可以不跳转（跳转到当前页面）href=”#”
2.0可以跳转到另外的页面。
3.0可以在当前页面进行定位。
A.设置a标签的href属性为“#id名”，
B.在页面的指定位置加入一个目标标签（可以是任意标签）
C.必须给这个标签设置一个id名：<p id="mubiao">这是目标</p>
4.0在跳转的页面进行定位。
标签的分类
1.双标签：有开始有结束，开始和结束之间是存在的内容。
<h1></h1>,<p></p>
2.单标签：只有一个标签，自己闭合自己。
<hr/> ,<br/>
标签与标签之间的关系：
1.嵌套关系：一个标签包含另外一个标签，他们之间构造父子关系。
2.并列关系：两个标签并列，他们构造兄弟关系。
HTML的局限性
上面用HTML实现的小练习，大家是不是觉得巨丑无比？
颜色就单一的黑色，字体大小都不能改，还不如word，前端功能就只是这样？
当然不是。所以我们就引出前端的另一个关键组成部分：CSS。
前端皮肤：CSS
CSS简介
CSS，简单来说就是一个样式表，旨在给HTML上色。让页面更加好看。
话不多说，来个例子先
<html>
<head>
<title>前端</title>
<style>
.titlt {
color: hotpink;
}
p{
color:gray;
}
#part1 {
color: green;
font-size: 14px;
font-weight: 900;
background-color: skyblue;
}
</style>
</head>
<body>
<h3 class='title'>网站前端</h3>
<hr/><br/>
<p id='part1'>前端对于网站来说，通常是指，网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。</p>
<h3>基础技能</h3>
<p>HTML、CSS、JavaScript</p>
<a href='http://baike.baidu.com/link?url=UKIN5Wg73SgTfLg-eASzMnTLIQXYmj-E4H4qtDbxSECV8xk2_eArcpc44WAcIr08mZ6EmTMEun13VY_Ji48qaWgMCpM7FC_y2a6TmgCxHFW'>点击跳转</a>
</body>
</html>```
1.所有与css相关的设置都放在style标签中，style标签是一个双标签，它放在head标签之中，在title标签下面(CSS的行内样式，下文会讲)。
2.例子中的p{}的p属于标签选择器，意思是给所有的p标签添加{}内的样式。下文会稍微介绍一下各种常用选择器。
3.css相关的属性：
color:设置字体的颜色。
font-size: 设置字体的大小。
font-weight：设置字体的粗细。
background-color:设置背景颜色。
...
###各种CSS样式及其属性
* 与字体相关的属性：
font-size（字体的大小）: 30px;
font-weight（字体的粗细）:
可以设置具体的数值：
是整百的数100-900，数值越大，字体越粗。
还可以设置一些关键字：
bold:加粗
normal:正常
font-family（字体的类型）:宋体 黑体 各种英文字体...
font-style（字体的样式）:normal（默认值） italic（倾斜）...
字体的连写形式：
font: font-style font-weight font-size font-family;
注意： font-style与font-weight:是可选属性
* 与颜色相关的赋值：
color:属性的取值可以是：
1.具体的颜色的英文单词
yellow,pink,red。
2.使用十六进制颜色表示法：
```#000000``` 黑色
```#ffffff``` 白色
3.rgb表示法：
rgb(255,255,255); 黑色
rgb(0,0,0); 白色
4.rgba表示法：
和rgb类似，a表示透明度，取值0-1;
rgba（123,222,12,0.5）;
### 简单选择器
1.标签选择器：
结构：
<style>
标签名（选择器） {属性名1：属性值1;
属性名2：属性值2;
.......
}
</style>
效果：会将所有的这类标签都加上相同的属性。
2.给要设置的标签添加一个类名：class
例如：`<p class="sun">太阳</p>`
结构：
<style>
.类名（选择器） {
属性名1：属性值1;
属性名2：属性值2;
.......
}
</style>
3.id选择器：
与类选择基本上相同：
结构：
<style>
id名（选择器） {
属性名1：属性值1;
属性名2：属性值2;
.......
}
</style>
#### id选择器与类选择器之间区别：
*类名：相当于是人的姓名。（可以重复）
特点：
1.一个类名可以设置给多个标签
2.一个标签可以有多个类名
*id名：相当于是身份证号码。（必须唯一）
特点：
1.只能给一个标签设置这个id名
2.一个标签只能有一个id名。
*id与类名命名的规则：
命名的取值范围只能是：
0-9,a-z,A-Z,_,-并且不能以数字开头。
### css样式的三种类型：
1.嵌套样式(内部样式)
所有与css相关的设置都放在style标签中，style标签是一个双标签，它放在head标签之中，在title标签下面.
<style>
p{
color:red;
...
}
</style>
2.行内样式（内联样式）
` <p style='color=red'>你好</p>`
3.外联样式（外部样式）
新建一个文件，后缀叫.css，在这个文件中直接写样式（不需要加上style标签）.在另一个页面引用的时候用加上：
`<link rel="stylesheet" href="外联样式的路径">`
前端还有一个JavaScript，这个东西三言俩语也不容易讲清楚。
我在这里附一个个人觉得比较好的js资料网站，大家有兴趣可以去学习学习。
http://javascript.ruanyifeng.com/
### 好了。该吃饭了。
## 总结
1.本文旨在引导0基础的工科生，快速对HTML有一个大致理解，不涉及技术知识的灌输。
2.希望大家按时吃饭。
网友评论