HTML5前端开发入门:HTML页面的基本代码结构是什么?
很多刚入门HTML5前端开发的小伙伴对HTML页面的基本机构代码还不是很清楚,下面和千锋广州小编一起来看看吧。
1、什么是标签:
html标签组成是html文档的最基本元素,一般是成对出现,由开始标签和与其对应的结束标签构成.?如<html></html>,<p></p>,<body></body>,<head></head>,<span></span>等,此外,还有一些标签是单独出现的,如<img/>,<input/>等,标签可以相互嵌套使用。
由于html语言是一门弱类型语言,对格式的要求不是非常严格,因此所有标签是不区分大小写的,但是,一般在实际开发中,大家都统一使用小写。
2、html文档的基本结构
如上图,每一个html文档的基本结构为:
第一层:
<!DOCTTYPE>——!文档类型,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档,在html5文档中,一般写为<!DOCTTYPE html> ;值得注意的是,<!DOCTTYPE>不属于html标签。
<html></html>——-html标签,是html文档的根标签,所有的网页标签都放在这对标签中,是所有html标签的祖先容器。
第二层:
<head></head>——-头部标签,代表着html文档的头信息,是所有头部元素的容器,内部一般包含:<title> <script><style><meta><link>这些头部元素。
<body></body>——-网页主体标签,其内部主要包含着构成网页内容的一些元素,如<p></p>,<span></span>,<div></div>,<table></table>等。这些元素都会在网页的内容部分显示。
3、标签的属性
就如人有这身高、体重、年龄等这些属性一样,html标签也有自己的属性,如字体颜色,宽,高,背景等。这些属性一般通过键值对的形式卸载标签中,是标签的一部分,并且每种标签的属性都不完全像同,有的标签有着自己特有的属性。如下图所示:
4、html注释
在实际开发中,我们需要在html文档中做一些标记,方便日后对代码的维护及修改,也方便其他程序员了解我们的代码。而在html文档中,注释的格式为:
我们可以理解为,html中,标签元素是给计算机读的,为注释是给程序员看的。
以上就是今天分享的内容,希望对大家有帮助哦!
花二十分钟看完html入门,你会发现代码也会如此简单
首先花三秒钟时间知道html的概念
Hyper text markup language 中文为超文本标记语言,其次html文件的名字都是以.html或者.htm结尾的
2.html的基本语法
2.1html主要采取标记语法,那么什么是标记呢?
描述功能的符号称为标记,不同的标记具备不同的功能
2.2其次我们要知道标记的组成,标记到底是什么样子的?
标记全是由<>组成,分为单标记和双标记,它的写法就是这样:<标记名>
2.3标记的分类,标记一共就分为两种
封闭类型标记(双标记)
有开始,也有显示的结束的标记
<标记名></标记名>,例如<a></a>这是一个超链接双标记,例如<b></b>加粗双标记
非封闭类型标记(或者又叫做空标记,单标记)
有开始,可以没有结束或者自己既可以表示开始,又可以表示结束。
它的写法就是<标记名>或者<标记名称/>举三个栗子:<br>换行,<hr>水平线,<img>图片
3.知识点:元素的定义
元素就是标记,标记中开始到结束之间的所有内容,都统称为元素。
元素:包含标记,包含属性,包含值。
在这里,我们要掌握一个知识点:元素嵌套
在一个元素内部又增加了另外一个元素。我们的html页面就是由各种各样的元素组成的
<标记1>
<标记2></标记2>
<标记1>
需要注意的地方:
1.标记之前的嵌套顺序
一定要完整嵌套,一个标记嵌套另一个标记一定要完整嵌套
2.代码缩进,嵌套代码中,子级元素(被嵌套的标记)前,要通过几个空格来表示层级关系(属性)
<div>
<p></p>
</div>
4.知识点:属性和值
属性:修饰元素不同显示效果的内容
值:确定显示的效果的内容。
属性只能声明在开始标记中,并且属性和标记名称要有空格分开。
属性和值用=关联,值用\”\”(双引号)或者\”(单引号)引起来。
例如<a href=\”网址\”></a>,这是一个双标记,也是我们网站建设中用到的最多的html代码。如果说标记中有多个属性,那么属性间用空格区分,并且排名不分先后。
那么下面小编就写最简单的一个html网页分享给初学者
html网页分享:
<!–1,文档类型声明–>
<!doctype html>
<!–2,html根标记–>
<html>
<!–网页头部–>
<head>
<!–指定网页标题–>
<title>钟老师的标题</title>
<!–修改编码格式–>
<meta charset=\”utf-8\”>
</head>
<!–网页主体–>
<body text=\”green\” bgcolor=\”red\”>
<!–主页字体蓝色,背景黑色–>
我的网页
</body>
<!–网页头部–>
</html>
好了,最后讲几个文本标记特殊字符的小知识
1.<>不能随意输出
2.无论输入多少个回车和空格最终都被解释成1个空格。
解决方案
靠转义字符
<是<
>是>
是空格
©是©
在学习过程中,只要我们找到了规律,其实网站建设知识中的html并不难。
更多知识关注小编,或者百度网络营销师钟震,钟震讲网络营销。会有很多相关知识,公众号网络营销师钟震,以后每天都会分享淘宝运营,竞价,网站建设和优化,社媒方面的知识。与大家共同进步。希望对您有一点点帮助,喜欢记得关注公众号。
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场,未经允许不得转载。