对编程小白来讲,想要学习门槛低,学习周期短,难度指数可忽略、短时间内可能找一份薪资不错编程相关工作,那就把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,敬请期待。。。。。。。