什么是HTML?
说起前端开发自然要从HTML说起了,正是一个一个的HTML页面搭建起了如今的网页世界,HTML本身并不是一种真正编程语言,而是定义内容结构的标记语言,并没有传统C语言和Java所具有的变量、循环等等这些。HTML文件就是以.html结尾的文件,它可以运行在浏览器上,由浏览器来解析。
你可以在桌面右键新建一个txt文件,复制粘贴如下代码:
我的第一个web页面这是一个段落
之后将文件扩展名改为html,通过浏览器打开就能看到以下结果了。
HTML元素
HTML由各种各样的元素组成,如下就是HTML元素:
这是一个段落
上面两个元素都是HTML元素:
第一个被称为闭合元素,闭合元素有着开始标签
、闭合标签
以及内容这是一个段落,他们被统称为一个闭合元素;第二个被称空元素,它没有 闭合标签,也没有内部内容。因为img元素不包含内容是有效果的,它的作用是向其所在的位置嵌入一个图像。
HTML元素中的属性
这里我们看在上一小节中的第二行代码:
通过阅读上面我们已经知道了img是空元素,那么img标签中的src="http://cdn2.jianshu.io/assets/web/nav-logo-4c7bbafe27adc892f3046e6978459bac.png" 和alt="简书LOGO"是什么呢?这些就是HTMl元素中的属性,举例来说,当img标签中含有src="http://cdn2.jianshu.io/assets/web/nav-logo-4c7bbafe27adc892f3046e6978459bac.png"这段代码时,就会在浏览器中显示简书的LOGO图,src就是设置img标签的显示内容,alt则是当浏览器加载不出图片时,代替图片显示的文字。
另外,每个不同的标签都会有不同的属性,需要我们不断地练习和熟悉。
使用HTML的正确姿势
接下来我们回到最开始的那一段代码,并逐行解析:
我的第一个web页面这是一个段落
和英文doctype的含义一样,这一行代表了该文档的类型为html,并且这行代码应该始终位于文档的最上面。
——html元素包含了整个页面的内容,有时也被称作根元素。该元素属性lang代表页面语言,当你设置这个属性时,浏览器就会默认该页面为你设置的语言,此时浏览器就可以做很多事情,比如当你的地区使用语言和你设置的语言不同时,就可以提醒你需不需要翻译。
——当前的这个meta元素定义了页面使用的字符集为UTF-8;meta元素也可提供有关页面的元信息,比如针对搜索引擎和更新频度的描述和关键词;meta标签位于文档的头部,不包含任何内容;meta 标签的属性定义了与文档相关联的名称/值对。关于meta的具体使用,请关注本博客的后续内容。
——title元素设置了页面的标题,标题显示在浏览器标签页上,而且在你将网页添加到收藏夹或喜爱中时将作为默认名称。常用标签
在这里将会对一些常用的标签进行详细的讲解。
关于文本
标题
标题就像一本书,它有它的书名,每本书会有章节,其中书名的标题就像
一级标题
,章节就像二级标题
。HTML有6种级别的标题-
,就像下面一样:
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
段落
标签代表着一个段落,就像上面的代码一样:
这是一个段落
列表
在web中,许多内容都是由列表来呈现,列表又分为无序列表( unordered lists)和有序列表
(ordered lists):
有序列表:
- 文章一
- 文章二
- 文章三
无序列表:
- 简·爱
- 钢铁是怎样炼成的
- 红楼梦
关于链接
链接可以进行页面跳转,首先创建一个a标签,将显示内容放入a标签中:
简书官网
之后向a标签添加href属性,并将href属性的值设置为https://www.jianshu.com/:
这样通过点击标签就可以跳转页面,进入简书官网了。
结束
通过上面的学习,可以搭建一个简单的页面,像这样:
简书简书
- 从HTML开始
- HTML表格
- HTML表单
五毛钱的仿简书官网
继续学习
想继续学习有关HTML的知识,可以通过下面的网站进行学习: