WEB前端开发学习----1.HTML基础

1.HelloWorld!

首先说一下html的基本格式,是必须要有的。

[html] view plaincopy

  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5. </body>
  6. </html></span>

不用多说,按照惯例,我们来制作第一个HTML文档。非常简单,打开文本编辑器,录入以下代码,保存为HelloWorld.html即可。

[html] view plaincopy

  1. <html>
  2. <head>
  3. </title>
  4. </head>
  5. <body>
  6. HelloWorld!
  7. </body>
  8. </html></span>

然后用你的浏览器打开它,就可以在屏幕上看到又爱又恨的HelloWorld!了。

 

2.Html的基本标签

1.<h1>这是标题1</h1>

标题标签,用来定义文档中的标题,从h1~h6字号越来越小,而且会进行自动换行。比如下面这段代码:

[html] view plaincopy

  1. <span style="font-size:14px;"><h1>这是正标题</h1>
  2. <h2>这是副标题</h2>
  3. <h3>这是小标题</h3></span>

可以将这段代码加在基本格式的<body>标签之后。用浏览器打开,可以看到效果

2.<p>这是段落</p>

段落标签,用来定义文档中的段落,会进行换行。

3.<a href="http://www.baidu.com">跳转到百度</a>

超级链接标记,用来定义超级链接。

href称为html的属性,引号内则为属性的值

4.<img src="路径" />

图像标签,用来在文档中插入图片。路径常使用相对路径,也可以是网络图片的网址。

src称为html的属性,引号内则为属性的值

5.<br />

换行标签,可以在文档中进行换行。

   基本语法:

    <开始标签 属性="属性值">内容</结束标签>

不难发现,标签分为单标签和双标签两种。

双标签:<h1></h1> 有开始标签和结束标签。一定要记得加上结束标签,以防出错。

单标签:如<br />没有关闭标签。但记得要正确的关闭,也就是加上“/”。

Html对大小写不明感,但是推荐使用小写。

属性值一定要放在引号中,一般使用双引号,但如果属性值本来就有双引号,则使用单引号。

其他简单的html标签我就不一一介绍了,在推荐的教程中写的非常的仔细易懂。我说一下重要的标签。

时间: 2024-10-10 02:15:18

WEB前端开发学习----1.HTML基础的相关文章

2018web前端学习路线,详谈web前端开发学习路线

近几年IT业可谓是发展火热,而且新生了很多的职业.在这众多的新生职业中备受瞩目的当属web前端工程师了,web前端在IT行业真正受到重视的时间不超过五年,但是web前端的发展前景却是非常的可观,好前景高薪资吸引了众多的人投入到前端开发的学习当中去,想学好web前端,这份web前端开发学习路线分享给你. 好的学习方法和掌握好正确的学习路线可以让我们的学习达到事半功倍的效果,如果你新手想要学习web前端的话,那么这份前端的学习路线图很适合你.这份学习路线的课程涵盖JavaScript.HTML5.C

web前端开发学习路线图分享,详谈2018web前端开发学习路线

近几年IT业可谓是发展火热,而且新生了很多的职业.例如安卓开发工程师.iOS开发工程师.在这众多的新生职业中备受瞩目的当属web前端工程师了,前端工程师薪资高,就业发展前景好,更多的人选择了这一职业成为自己的发展方向,想要自己成为一名合格的web前端工程师,web前端开发学习路线图值得大家去看看.挺适合大家借鉴来学习的.web前端课程包括了几个方面的内容: 1.学习HTML,这是最简单,最基本的是要掌握div,formtable.Ulli.P.跨度.字体这些标签,这些都是最常用的,尤其是DIV和

小猿圈web前端开发讲师:零基础自学html5开发方法

web前端开发目前市场使用率随着需求逐年递增.越来越多的年轻人转行进入了web前端开发领取.html5强大的功能是有目共睹的,本属自身独特的优势让这一技术越来越受欢迎,相比于原生APP,html5已经逐渐在用户体验生无限接近,再加上低廉的开发成本和强大的适配功能,早已经可以俘获开发商和开发者的芳心,本文小猿圈web前端开发讲师介绍零基础如何自学html5开发? 小猿圈web前端开发讲师:零基础自学html5开发方法: 1.拒绝插件,遇到交互效果就选择扒插件,这是一种非常不可取的方法,在这种情况之

WEB前端开发学习:源码canvas 雪

WEB前端开发学习:源码canvas 雪 双旦节要到了,程序员们为了响应气氛,特别用代码制作了动态雪花,WEB前端开发学习的初学者们一起跟着案例做一遍吧! <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body style="overflow: hidden;margin:

Web 前端开发学习之路(入门篇)

字数1374 阅读4622 评论0 喜欢49 以前学习过一段时间的web前端开发,整理了一些我看过的/我认为比较好的学习资料(网站.书籍).不要问我为啥没有进阶版,我只是一条产品汪而已,求轻喷.== 以下引用知乎 @李路 的话. 以我的经验,大部分技术,熟读下列四类书籍即可. 入门,用浅显的语言和方式讲述正确的道理和方法,如head first系列全面,巨细无遗地探讨每个细节,遇到疑难问题时往往可以在这里得到理论解答,如Definitive Guide/Programming xx系列实践,结合

web前端开发学习路线

首先分享一下我的经验,想做好一件事,必须要花费一些功夫,然后是多学.多思.多练.多交流.多总结,发现自己的问题,然后一定要克服,在状态不好的情况下,往往要及时调整.新手学习前端的话,一定要想想为什么要学习它,是出于一种什么心态,然后定位好自己,多向大牛请教,多教一些没有自己水平高的人,那样往往能让自己成长的快,切勿急躁.初学可以看一些入门视频教程,之后可以买一些书,做一些小项目,要学会投资,分析自己的现状及能力,实时调整,一定要有自己的想法,懂得创新.在这里一定要对自己做分析,然后找出一种适合的

《JavaScript &amp;amp; jQuery交互式Web前端开发》之JavaScript基础指令

       在本节中.你将開始学习阅读和编写JavaScript代码,还将学习怎样编写Web浏览器可以遵照运行的指令.在開始学习后面章节中的更复杂的概念之前.我们先学习语言的一些核心部分,然后看看怎样使用它们来编写一些很基础的(仅包括少量简单步骤)脚本程序.     在開始学习后面章节中的更复杂的概念之前,我们先学习语言的一些核心部分,然后看看怎样使用它们来编写一些很基础的(仅包括少量简单步骤)脚本程序. 语言: 语法结构 不论什么新的语言都一样,都要学习它们的新词汇(词汇表),以及将这些词汇

web前端开发学习课程大纲路线图及学习方法分享

想学好web前端开发,要学会阅读别人优秀的代码.web前端开发思想并不是统一固定不变的,阅读别人代码的过程就是间接的在向别人学习,这一过程中可以学习别人的开发思路,不同的人思路是不一样的,如果别人写的代码很优秀.很简单.且运行和性能上有很大的优势,就有很多可以借鉴的地方. 以下这份web前端学习路线图适合所以零基础的学员学习,都是从浅入深,没有基础的同学跟着视频教程及课程大纲一步一步的学习是可以很好的掌握的. 那么想要学好html5前端开发,那么需要掌握的专业技术有: 第一阶段:前端页面重构 内

web前端开发学习视频教程下载(百G)

1.妙味WEB前端开发全套视频教程 链接: http://pan.baidu.com/s/1bf1Ow2 密码: 2yyu 2.极客学院前端教程(html5 Bootstrap Nodejs) 链接: http://pan.baidu.com/s/1eQFcHoe 密码: iem6 3.前端与移动开发基础视频(h5\css3\html\css) 链接: http://pan.baidu.com/s/1c1wiSQc 密码:2cp4 4.2015前端工程师培训视频教程(html5\UI\JS\JQ