首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

HTML基础(上)

闲扯加介绍

什么是HTML?

HTML是一种超文本标记语言

广泛应用于web前端开发

有如下四个显著特点:

1、不需编译直接由浏览器执行

2、HTML文件是一个文本文件

3、HTML文件必须使用html或htm作为文件名后缀

4、HTML大小写不敏感。

为什么要发关于HTML的文章?

因为HTML很有用,我回家后在学,整理总结了一些东西,分享给大家的同时,重新温习一下加深印象。(还是说我发的文章内容不保证知识点全,但保证正确好理解)

HTML有什么用?

1:很轻松的修改你的网站、博客的网页结构。

2:对SEO网站优化很有用处。

3:拿来主义,通过保存其他网站页面源代码,适当的修改,可以仿制出你想要的模板。

4:当你有一张漂亮的PSD源文件图片时,你可以很轻易的把图片切割制作成网页。

5:无论是PHP、ASP、.NET、JSP等网站编程语言,都要用到HTML。

6:可以轻松检测出网站是否中了网页木马.和预防网页木马。

7:可以向更高一层次进阶:DIV+CSS网页设计。

反正记住一点,很有用,学计算机就得学!

如何学习HTML?

前面说那么多好像整的HTML挺难,其实不然,HTML相对比较简单,它是一种标记语言,都是结构化的,只要边学边练,理解每个标签,多练两遍就OK了!

工欲善其事,必先利其器

虽然说HTML用记事本编写也行,但是总是没有那些个比较好的编辑器用的舒服。

这里给大家推荐一款编译器Atom。

HTML基本结构

在说HTML基本结构之前,我要先说说HTML在网页开发中的作用,提到网页开发都能够想到的是H5+CSS+JS,分别对应的作用是,结构+表现+行为。就是HTML5构建框架,CSS负责美化,JavaScript确定功能。

说完这些也算是给HTML做好了一个定位。

下面开始说HTML的基本结构:

如图我们可以看出一个HTML文件内容要包含在这对标签内,其中为开始标签,自然就是结束标签,不难看出结束标签相比于开始标签多了一个“/”,大多数HTML标签都有开始和结束标签,但也有一部分是单标签如

换行标签,大家需要注意单标签和成对出现的标签“/”位置的不同。(练两遍就明白)

在这对标签内包含了头部信息和网页信息,

头部信息不会在网页上出现更多的是一种说明和设置,包含在这对标签内。

网页信息是整个网页的主体部分,及用户看到的内容,包含在这对标签内。

这些相信大家一看就能够明白,但我还是要说一点,html标签对head和body两个标签是包含关系,head和body两个标签是同级平行关系,或者可以理解为没有关系,明白两个标签之间的关系,对程序的书写尤为重要,一定要时刻想着!

HTML最基本的结构就是这个,是不是很简单,最后对于它的基本结构还有一点要说,一个HTML文件html标签head标签body标签包括title标签都是唯一的!

下面接着来说;

一个HTML文件的最前面还需要有一个文档类型的说明(说真的我感觉没啥用,结构化的东西写上就好)这只是声明不是标签

head标签里的内容

1、标题

2、网页编码设置

标题就是title标签,用法呢就是把标题写到内容标签里面,那么这个标题是在哪显示的呢?

没错就是网页的名称(如图所示)

再来说网页编码设置meta标签,其实呢也就是一段相对固定的代码,一般不会变就是这样一段代码。http-equiv属性表示文档行类型;

content属性就是内容,charset是编码格式。

Utf-8是一般常用的编码格式,这段代码呢,直接多打两遍记住就行。

这里面我提到一个词是属性,一个标签可以有很多个属性,属性是用来描述和修饰标签的。

总以“属性名=属性值”这种名值对的形式出现就是在开始标签后空一格,开始写需要的这个标签的属性,属性与属性之间呢也是由空格隔开,一个标签可以有多个属性,当然单标签虽然没有开始标签,但也可以有属性,如meta的属性http-equiv和content。

上面说的所有内容也就构成了一个整体的外部框架,我将其的代码表示展现出来。

图中的p标签我还没有说,大家先不用细想,下载好Atom后,把这段代码敲出来吧!

最后格式性的东西我就不再说了,我重复一下我认为很重要的一点:注意标签之间的关系(以后标签越来越多,千万不要忘了这点)

说在最后

HTML基础大概还会有三篇文章:分别来说“文字段落标签”“列表标签”和“图像和超链接标签”其实·今天明白了,之后这三个都一样,希望大家能够喜欢。

明天周六我会整理一下我在使用pr时常用的插件分享给大家!

好了明天见!!!

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180727G1RU2W00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券