学会HTML就可以找工作了

最新推荐文章于 2022-10-09 16:32:13 发布

weixin_34281537

最新推荐文章于 2022-10-09 16:32:13 发布

阅读量159

点赞数

文章标签： javascript ViewUI

原文链接：https://yq.aliyun.com/articles/510475

版权

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

网页设计师

(http://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

列表标签-无序标签

<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