整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

不懂HTML?看这篇文章就够了

不懂HTML?看这篇文章就够了


多人都说我是一门很简单的语言,看看书,看看视频就能读懂我。但是,如果你完全没有接触过我,就想通过看一遍教程,背背标签,想要完全了解我,真的有点太天真了。

我叫“超文本标记语言",英文名字叫HTML,我没有变量,没有循环,没有函数,我只是单纯的一门静态语言而已。你可以用我来描述静态的东西,比如标题、段落、图片。

工作的时候,浏览器大叔是播放器,我是资源,你们看到的影片是大叔根据我收藏的内容播放出来的。

我们来看一张图,试着用语言描述一下:

在页面的顶部有一栏标题栏,下面有张大图,大图下面三张图和图片介绍,图文下面有一个标题,标题下面有三个图文链接介绍。

这只是结合图片来直观的描述,但是对于浏览器来说,需要一个精确的描述。比如:大图下面三张图和图片介绍,介绍中哪些文字需要强调?图文下面的标题是主标题还是二级标题?

这些都是我作为HTML要表述的。配上CSS来精确的描述字体的颜色,粗细,大小,图片的宽高,按钮的位置。

其实了解我并不是一件难事,什么时候学习都不晚。这取决于你是否有足够的兴趣和毅力去坚持你的选择问题。如果你要学习的话,那要确定自己是否坚定地走“敲代码”这条不归路。

入门容易,精通难,且学且珍惜。

在这里推荐一个我认为比较好的练习HTML的方法:抛开CSS,做纯粹的代码练习。其实就是单纯的书写HTML,最终的目的是他人可以通过阅读这个HTML文件理解到页面是怎样的结构,甚至可以通过HTML代码来画出大概的页面。

以下是HTML基本(常用)标签的整理,希望对你有帮助。

基本

<html>…</html> 定义 HTML 文档

<head>…</head> 文档的信息

<meta> HTML 文档的元信息

<title>…</title> 文档的标题

<link> 文档与外部资源的关系

<style>…</style> 文档的样式信息

<body>…</body> 可见的页面内容

<!--…--> 注释

文本

<h1>...</h1> 标题字大小(h1~h6)

<b>...</b> 粗体字

<strong>...</strong> 粗体字(强调)

<i>...</i> 斜体字

<em>...</em> 斜体字(强调)

<u>...</u> 下划线

<del>...</del> 删除线(表示删除)

<center>…</center> 居中文本

<ul>…</ul> 无序列表

<ol>…</ol> 有序列表

<li>…</li> 列表项目

<a href=”…”>…</a> 超链接

<font> 定义文本字体尺寸、颜色、大小

<sub> 下标

<sup> 上标

<br> 换行

<p> 段落

图形

<img src=’”…”> 定义图像

<hr> 水平线

表格

<table>…</table> 定义表格

<th>…</th> 定义表格中的表头单元格

<tr>…</tr> 定义表格中的行

<td>…</td> 定义表格中的单元

其它

<form>…</form> 定义供用户输入的 HTML 表单

<frame> 定义框架集的窗口或框架

果想开发一个网站,除了要精通后端开发语言(如:php)外,还要精通HTML代码。那么,什么是HTML呢?HTML是一种超文本标记语言,它包含有众多的标签,我们可以通过这些标签,把不同的internet资源(如:文字、图片、视频、音频、表单等等)整合在一个统一的文档中,这就形成了我们可以看得见的网页。那么,HTML都有哪些常用的标签呢?

一、文档类型声明。

html5文档类型声明:<!doctype html>

html4文档类型声明:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

二、html主标签。

这个标签是html最外层的标签,所有其它的HTML标签都要放在这个标签的内部。

<html>

<head></head>

<body></body>

</html>

三、双标签和单标签。

在HTML标签中,有的标签是成双成对的,如:<html></html>(如下图);而有的标签是单个的,如:<hr>横线标签。

四、head头部标签。

head头部有以下几种常用标签:

meta:主要提供有关页面的元信息。

link:用来定义文档与外部资源的关系,最常用的是调用CSS样式文件。

title:页面标题的标签。

script:用来调用JS文件或JS代码。当然,script标签也可以在body主体中使用。

五、body主体标签。

1、块级标签。

块级标签的特性是:独自占有一行;标签的高与宽、边距可以修改;没有设置宽与高时,默认继承父标签。例如:


<div>div1</div>

<div>div2</div>

<style>

.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }

.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }

</style>


前端页面显示的效果如下图:

常用的块级标签有:div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。

2、内联标签。

内联标签与块级标签不同,它不能独自占有一行,会与其它内联标签在同一样展示;内联标签的高与宽、上下边距是不能修改的,它里面的文字或图片有多高,它就是多高。例如如下代码:


<style>

.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }

.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }

</style>

<span>span1</span>

<span>span2</span>


CSS样式代码跟块级标签的例子是一样的,而显示的效果就不一样了,宽与高、上下边距没有效果。如下图:

常用的内联标签有:span、a、b、strong、i、em 。

3、内联块级标签。

内联块级标签,既有一些内联标签的特性,也有一些块级标签的特点:它不能独自占有一行,但是可以修改它的宽度和高度。例如下面这段代码:


<style>

.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }

.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }

</style>

<img src="w5.jpg" alt="">

<img src="w5.jpg" alt="">


CSS样式代码跟块级标签的那个例子仍然是一样的,图片的宽和高、上下边距修改成功,而2个图片不能独自占有一行,而是在同一行。如下图:

常用的内联块级标签有:img、input、textarea。

4、区域标签。

所谓区域标签,就是主要用来划分布局页面区域的。如:头部、主体内容、侧边栏、底部。这样划分的好处是:让页面布局更加清晰明了。

常用的区域标签有:header(头部)、footer(底部)、nav(导航)、aside(侧边栏)、section(主体)、article(独立内容)。

5、表单标签。

这个表单标签我们也是会经常用到的,如:登录网站的时候、提交数据的时候。如下图的评论表单:

?表单常用的标签有:form、input、select、option、textarea 。

以上就是我们开发网页时,会常用到的HTML标签。当然,HTML标签远不止这些,尤其是html5出来后,新增了许多的新标签。但是,有些标签在我们开发中很少用到,所以,这里就没有做相应的介绍。

技时代,哪个行业工资最高?待遇最好?当然是互联网IT行业。

2017年中国软件产业规模已超过5万亿元,软件和信息技术服务业占我国电子信息产业的比重将超过30%,软件产业能力显著提升。

但据国内权威数据统计,未来五年,我国信息化人才总需求量高达1500万—2000万人。其中“软件开发”、“网络工程”等人才的缺口最为突出。以软件开发为例,我国软件人才需求以每年递增20%的速度增长,每年新增需求近百万。

这也是目前很多非科班出身的同学为了搭上互联网的快车开始学习编程的原因,但是刚开始应该选择哪个学科,却给很多同学带来了很大困扰。

然而,大家对于“前端、后端、全栈”的概念还非常模糊,今天小编就带大家去了解什么是前端、后端以及全栈。

一、前端方向

网站的“前端”是与用户直接交互的部分,包括你在浏览网页时接触的所有视觉内容--从字体到颜色,以及下拉菜单和侧边栏。这些视觉内容,都是由浏览器解析、处理、渲染相关 HTML、CSS、Javascript 文件后呈现而来。

技能与工具

前端开发,就是要创造上面提到的网站面向用户的部分背后的代码,并通过建立框架,构建沉浸性的用户体验。为了实现这个目标,开发需要熟练运用下列语言、框架、工具库:

三大语言: HTML,CSS,和 Javascript;

此外,掌握 jQuery 和 LESS 等工具库也很重要,它们能帮助开发者以更高效的方式编码;

很多前端开发岗也要求 Ajax 方法的使用经验,它可以帮助你使用 Javascript 在后台从服务器拉取数据,协助实现页面的动态加载。

工程师的职责

-为网站上提供的产品和服务实现一流的Web界面,优化代码并保持良好兼容性。

-Web前端表现层及与前后端交互的架构设计和开发。

-JavaScript程序模块开发,通用类库、框架编写。

-利用各种Web技术模拟开发产品原型。

-配合后台开发人员实现产品界面和功能。

-Web新技术调研和资讯整理。

-精通HTML/XHTML、CSS,熟悉页面架构和布局,对Web标准和标签语义化有深入理解。

-精通Ajax、JavaScript(或者ActionScript)、DOM等前端技术,掌握面向对象编程思想。

-熟悉一种以上后台开发语言(如PHP/Java或C/C++/.NET)以及一种数据库(如MySQL/Oracle),有Linux系统操作。

web前端开发工程师需要长期的web开发经验,例如:

-对Web技术创新及丰富互联网应用开发(Rich Internet Applications)有浓厚兴趣。

-对用户体验、交互操作流程、及用户需求有深入理解。

二、后端方向

是什么给网站前端提供支持?数据存放在哪里?这就涉及后端内容了。网站后端包括服务器、应用还有数据库。后端开发者构建并维护这些组件,为网站提供多方面支持。

技能与工具

为了让服务器、应用、数据库能够彼此交互,后端工程师需要具有如下技能:

用于应用构建的服务器端语言: PHP, Ruby, Python, Java, .Net 等;

数据相关工具: MySQL, Oracle, SQL Server 等;

PHP框架: Zend, Symfony, CakePHP等;

版本控制工具:SVN, CVS , Git 等;

还要熟练使用 Linux 作为开发和部署环境。

工程师的职责

在Web开发世界中,大多数后端开发人员从事于构建他们正在工作的应用程序背后的实际逻辑。

通常,前端开发人员构建用户界面,而后端开发人员编写代码,使其工作。

例如,前端开发人员在应用程序中创建一个界面,上面有一个按钮,按下按钮来获取客户的数据。

后端开发人员写可使得按钮工作的代码,通过指出从数据库中提取哪些数据并将其传回到前端(并最终显示在那里)。

后端开发人员也可能会大量参与系统架构,决定如何组织系统的逻辑,以便能够正常维护和运行。

他可能会参与构建框架或系统架构,以便于更容易编写程序。后端开发人员比前端开发人员花费更多的时间在实现算法和解决问题上。

三、全栈

有时前后端之间并没有明确的界限,“前端开发者通常需要额外学习后端技巧,反之亦然,尤其在特定市场条件下”,Matranga 说:“开发者需要跨领域知识,有时甚至需要成为全才。”

全栈工程师,最初是6年多以前由 Facebook 带动的概念。全栈的核心,是指这批开发者能够承担包括前端、后端在内的所有功能开发任务,他们拥有一个技能全家桶。

“能够同时承担服务器端和客户端工作会为你带来更多机会,” Grovo 的全栈工程师 Federico Ulfo 说 “当然这也就意味着更多的挑战。以厨艺作类比,掌握烹饪和烘焙都需要时间与经验积累,同时掌握两者要花费更多精力。照着菜谱做谁都可以,我此处所说的是做出真正美味东西的能力。”

技能与工具

-通过终端连接到非图形化界面环境的远程服务器

-基本的 shell 脚本编程

-管理服务器的用户和用户组

-管理服务器程序比如 Apache 和 Nginx,以便其服务于应用程序

-管理防火墙和权限

-安装新软件,更新软件版本

工程师的职责

懂得如何通过 Docker 或虚拟机比如 Vagrant 来创建良好、健康、隔离的开发环境。

熟谙版本控制系统,才能够可靠地生成可共享的、协作的代码库及其备份, 并且随时间流逝跟踪其变化。

除了实际管理的或虚拟化的服务器,开发者可能还需要知道云 – 托管平台,像 Heroku、Google Clould、Azure、AWS 等。

看了这些,是不是对于选择职业有了更清晰的认识了呢?