Mr.聂 带你成为web开发大牛——入门篇(上)
作为一名IT届的后生,当初也经历过懵懂无知的实习期,对那种无力感深有体会。在这,希望能用我这几年的开发经验,让各位即将踏入或者刚刚踏入web开发领域的新人们少走些弯路。鉴于这是入门篇,下面我就从零为大家介绍。
这里我主要介绍基于 H5,CSS,JS,PHP的web开发,入门篇的内容简单,完全可以自学,下面就为大家整理些制作静态网页的基础知识。以下是HTML5的内容。
HTML5:万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。博主我用的是HBuilder做开发,下面具体介它的常用标签,若有介绍不详尽的地方或者难以理解的地方,请浏览 w3cschool查看,或者是给我留言。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
以上是HTML5文件的基本结构,HTML5的基本元素是标签,每个标签都有自己的功能,一条条标签组成了一个HTML5文档。如上图,HTML结构主要包括三大部分:文档声明部分、<head>头部部分、<body>主体部分。!DOCTYPE 文档声明,html则是被声明的文档类型,<!DOCTYPE html>说明这是一个html文档,这句是我们必须写且写在最开头的东西。<html></html>是一对标签,表明以下是这个html文档的内容了,此标签可以省略(但是博主不推荐初学者省略,以博主多年工作经验来看,养成一个严禁优良的开发习惯对程序员以后影响是很大的),<head></head>他是html文档的头部,里面放这个网页的标题,字符集编码格式,及一些CSS文件链接。<body></body>是html文档的身体部分,里面放的是html文档具体内容的格式要求。html文档的其他标签都放在<head></head>和<body></body>当中。
下面说一下html文档的使用规范:
1.标签是html最基本单位和最重要的组合。
2.标签使用 <> 扩起来
3.标签是成对存在的<head>是开始,</head>他就是结束(当然也有半闭合标签,这个我们后续介绍)
4.标签有属性,而标签的属性有属性值(这个我们将在后面详细介绍)
5.标签的属性和属性值必定是成对出现,而且一个标签可以有多个属性
现在我们介绍一下head中的常用标签:
1.link 标签,用来链接网页图标或者CSS文件的。
<link rel="icon" type="image/x-icon" href="img/QQ截图" />
上述代码,rel,type和href都是link标签的属性,所谓属性就是,比方说,一个人可以有勇敢、聪明 、漂亮等很多特点来描述他,这些就是属性,而漂亮又可以分为倾国
倾城,一般漂亮等多个程度,这些修饰漂亮的程度就是属性值。好了,我们继续之前的话题。 rel属性,声明链接文件的类型,说明你链接的文件是啥样的;type 可以省略,
这里暂且不详尽介绍; href属性,表示你所连接文件的路径地址。以上是link标签的常用属性,其他属性大家可以百度 w3cschool 查阅。
今天的博客就先写到这,后续内容博主会坚持1~3期不定期更新。
Mr.聂 带你成为web开发大牛——入门篇(上)的更多相关文章
- 【ZZ】Web开发的入门指导 | 菜鸟教程
Web开发的入门指导 http://www.runoob.com/w3cnote/a-beginners-guide-to-web-development.html
- Laravel 教程 - Web 开发实战入门 ( Laravel 5.5 )购买链接
Laravel 教程 - Web 开发实战入门 ( Laravel 5.5 )购买链接: 推荐给你高品质的实战课程 https://laravel-china.org/courses?rf=158 ...
- 详细阐述Web开发中的图片上传问题
Web开发中,图片上传是一种极其常见的功能.但是呢,每次做上传,都花费了不少时间. 一个"小功能"花费我这么多时间,真心不愉快. So,要得认真分析下原因. 1.在最初学习Java ...
- 基于hi-nginx的web开发(python篇)——使用jinja2模板引擎
模板引擎的使用在web开发中是不可避免和必要的.hi.py框架使用jinja2作为模板引擎. 为了使用hi.py提供的jinja2引擎,首先需要引入它: from hi import hi,templ ...
- 移动WEB开发基础入门
什么是移动WEB开发,我个人理解就是,将网页更好的显示在移动端的一些设置,简单来说就两点如下: 1.流式布局,即百分比自适应布局 将body下的div容器的样式设置如下: div{ width:100 ...
- ASP.NET Web API 之一 入门篇
一.基于RESTful标准的Web Api 原文讲解:https://www.cnblogs.com/lori/p/3555737.html 微软的web api是在vs2012上的mvc4项目绑定发 ...
- 【数据库】Mean web开发 04-MongoDB在Linux上的安装及遇到的问题
简介 Mean是JavaScript的全栈开发框架.更多介绍 用MongoDB实现持久数据的存储是Mean Web全栈开发中的一部分. MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非 ...
- Flask Web开发从入门到放弃(一)
第1章 章节一 01 内容概要 02 内容回顾 03 路飞学城之加入购物车 04 路飞学城之结算 05 路飞学城之立即支付 06 路飞学城之后续计划 07 Flask框架简介和快速使用 08 FLas ...
- java Web开发实现手机拍照上传到服务器
第一步: 搭环境,基本jdk 1.6+apache tomcat6.0+myeclipse2014 1.我们要清楚自己的jdk版本.因为我们Apache Tomcat配置的成功的前提是版本相对应. 安 ...
随机推荐
- sae中thinkphp使用smarty
因为最近在学thinkphp跟着做一个小商城. 没有使用thinkphp自带的think引擎,使用的是smarty引擎. 在sea中使用的时候出现了问题.已经是前几天的事了,问题图片没保存下来. 在网 ...
- mysql授权远程用户连接(权限最小化原则)
1.进入MySQL,创建一个新用户root,密码为root: 格式:grant 权限 on 数据库名.表名 to 用户@登录主机 identified by "用户密码"; gra ...
- AngularJS最理想开发工具WebStorm
http://blog.fens.me/angularjs-webstorm-ide/ Angularjs插件下载地址:http://plugins.jetbrains.com/plugin/6971 ...
- 几个获取Windows系统信息的Delphi程序
1.获取windows版本信息 可以通过Windows API函数GetVersionEx来获得. 具体程序如下: Procedure Tform1.Button1Click(sender:TObje ...
- 【翻译】在Visual Studio中使用Asp.Net Core MVC创建你的第一个Web API应用(一)
HTTP is not just for serving up web pages. It's also a powerful platform for building APIs that expo ...
- OBJECT和EMBED标签
一.介绍: 我们要在网页中正常显示flash内容,那么页面中必须要有指定flash路径的标 签.也就是OBJECT和EMBED标签.OBJECT标签是用于windows平台的IE浏览器的,而EMBED ...
- 响应HttpServletResponse
可以使用HttpServletResponse来对浏览器进行响应,大部分情况下,会使用setContentType()设置响应类型,使用getWriter()取得PrintWriter对象,而后使用P ...
- WPF学习之数据绑定
WPF中的数据绑定提供了很强大的功能.与普通的WinForm程序相比,其绑定功能为我们提供了很多便利,例如Binding对象的自动通知/刷新,Converter,Validation Rules,Tw ...
- angular实现form验证
先上效果页面:https://lpdong.github.io/myForm-1/ 其中几个知识点 1.angularJs提供了几个新的type类型: type="password" ...
- 小兔JS教程(五) 简单易懂的JSON入门
上一节的参考答案: http://xiaotublog.com/demo.html?path=homework/04/index2 本节重点来介绍一下JSON,JSON(JavaScript Obje ...