学会HTML就可以找工作了

对编程小白来讲，想要学习门槛低，学习周期短，难度指数可忽略、短时间内可能找一份薪资不错编程相关工作，那就把HTML作为入门级语言吧。

网页设计师

(//upload-images.jianshu.io/upload_images/4176128-1bafe76ca96640c7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

网页设计师人才需求

Paste_Image.png

什么是网页

网页是构成网站的基本元素，通俗地说，您的网站就是由网页组成的。比如说把网站比作一本书，那个网页就是其中的一页。

网页作用：

1、构成网站 比如淘宝网、京东网 都是一个个的网页组合而成

2、表达内容 网页可以表达 商品、文章、业务表单

用什么来创建网页？

HTML 是用来描述网页的一种语言。而是一种标记语言(markup language)

HTML 使用标签来创建网页

积木式标签

网页是由各种不同类型的HTML标签组成。

HTML常用的标签也就二十多种。

每种标签有不同的功能。

比乐高还要简单（乐高积木是儿童喜爱的玩具。这种塑胶积木一头有凸粒，另一头

有可嵌入凸粒的孔，形状有1300多种，每一种形状都有12种不同的颜色，以红、黄、蓝、白、绿色为主。它靠小朋友自己动脑动手，可以拼插出变化无穷的造型，令人爱不释手，被称为“魔术塑料积木”）

通过HTML标签最后搭建出一棵树。

HTML标签固有结构

Paste_Image.png

HTML积木标签概貌

图片2.png

列表标签-无序列表标签

<ol start=“列表起点” type=“符合类型”> <li>外交部部长 王毅</li> <li>国防部部长 常万全（兼） </li> </ol>

Paste_Image.png

Paste_Image.png

列表标签-无序标签

<ul class="footer-two"> <li> <a href="/guowuyuan/xinwen.htm" target="_blank">领导动态</a> </li> <li> <a href="/guowuyuan/gwy_cwh.htm" target="_blank"></a>常务会议</a> </li> <li> <a href="/guowuyuan/quantihui.htm" target="_blank">全体会议</a> </li> <li> <a href="/guowuyuan/zuzhi.htm" target="_blank">组织机构</a> </li> <li> <a href="/guowuyuan/2006-02/16/content_2616810.htm" target="_blank">政府工作报告</a> </li> </ul>

Paste_Image.png

超链接标签

<a> 标签定义超链接，用于从一个世界链接到另外一个世界。

<a href="http://www.npc.gov.cn/" target="_blank">全国人大</a>

href :超链接网址 target：网页展现方式 （打开新页面 或者在当前页面）

Paste_Image.png

P标签

<p> 标签定义段落。

<p>会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。

Paste_Image.png

图片标签

<img>标签向网页中嵌入一幅图像。

<img> 标签有两个必需的属性：src 属性和 title 属性。
src ：图片的路径
Title：图片标题描述

Paste_Image.png

表格相关标签

<table> 标签定义 HTML 表格。

简单的 HTML 表格由 table 标签以及一个或多个 tr、th 或 td 标签组成。

tr 标签定义表格行，th 标签定义表头，td 标签定义表格单元。
<tbody> 标签表格主体（正文）

<table width="934" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th width="25%" align="center" class="jybl">留言人</th>
<th width="25%" align="center" class="jybl">办理单位</th>
<th width="25%" align="center" class="jybl">办理方式</th>
<th width="25%" align="center" class="jybl">办理日期</th>
</tr>
<tr>
<td align="center" class="jybl2"><span color="#000000">高兴</span>

</td><td align="center" class="jybl3"><span>国务院办公厅</span></td><td align="center" class="jybl3"><span>按职责程序办理</span></td><td align="center" class="jybl3"><span>2017-01-26</span></td></tr></tbody></table>`

32323.png

表单相关标签

<form> 标签用于为用户输入创建 HTML 表单

表单能够包含input 元素，比如文本字段、复选框、单选框、提交按钮等等。

文本域(Text fields) <input type="text" name="firstname">

密码域<input type="password" name="password">

复选框<input type="checkbox" name="Bike">

单选按钮<input type="radio" checked="checked" value="male" />

文本域(Textarea)<textarea rows="10" cols="30">

按钮<input type=“button” value=“提交">

简单的下拉列表<select name="cars">

<option value="volvo">Volvo</option>

</select>

3333333333.png

一天就可以做出这样的网页

Paste_Image.png

Paste_Image.png

继续修行

Paste_Image.png

Paste_Image.png

Paste_Image.png

结语

此篇文章只是入门而已，还有很多标签没有讲到。若想做出看过眼的网页，要懂得布局、搭配、还要会css、布局、javascript 脚本。看到这您已经入门了，下次会讲布局css,敬请期待。。。。。。。