[学习笔记] 静态网页开发基础之HTML5基础

# 学习 # · 2020-04-10

HTML5文件的基本结构和W3C标准

1、HTML:

(1)HTML是用来描述网页的一种语言,它是一种超文本标记语言,也就是说,HTML不是一种编程语言,仅是一种标记语言(Markup Language)。

(2)使用浏览器打开任意一个页面,按下F12键,就会看到一段程序,里面显示的就是这个网页的源文件。

2、HTML5的优势:

(1)世界知名浏览器厂商HTML5的支持。

(2)市场的需求。

(3)跨平台。

3、W3C标准:

(1)使用W3C标准的原因:发明HTML的初衷是实现信息资料的网络传播和共享,希望HTML文档具有平台无关性,即同一HTML文档在不同浏览器上看到同样的页面内容和效果。在此背景下,万维网联盟(World Wide Web Consortium ,W3C)诞生了,由W3C组织制定和维护的WEB开发标准,也称为W3C标准,是web技术领域最权威和具有影响力的国际中立性技术标准机构。

(2)W3C标准的介绍:W3C标准不是一个标准,而是一系列的标准集合,一个网页主要由三部分组成,即结构(Structure)、表现(Presentation)和行为(Behavior)。

(3)W3C标准包括结构化标准语言(HTML,XML)、表现标准语言(CSS),行为标准(DOM,ECMAScript)。

4、HTML5文件的基本结构:

<!--基本语法-->
<标记>内容</标记>

<!--
标记也称标签或元素
整个HTML包括头部(head)和主体(body)两部分,头部包括网页标题(title)等基本信息,主体包括网页的内容信息。
-->
<!DOCTYPE html>
<html>
<head lang="cn">
    <title>title</title>
</head>
<body>
    网页主体
</body>
</html>

5、网页的基本信息:

(1)DOCTYPE声明:位于HTML文档的第一行,约束HTML文档结构,声明规范。

(2)<title>标签:描述网页标题。

(3)<meta>标签:描述网页摘要信息,包括文档内容类型,字符编码信息,搜索关键字,网站提供的功能和服务的详细描述等。并不显示,其目的是方便浏览器解析或利用搜索引擎搜索。采用“名称/值”的方式。

<!--设置网页编码-->
<meta charset="utf-8"/>
<!--设置网页关键词-->
<meta name="keywords" content="......"/>
<!--设置网页描述-->
<meta name="description" content="......"/>

网页的基本标签

1、标题标签:

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

2、段落标签和换行标签:

<p>p标签表示一个段落</p>

<br/><!--表示强制换行显示,无结束标签-->

3、水平线标签:

<hr/>

4、字体样式标签:

<strong>字体变粗</strong>
<em>文字倾斜</em>

5、注释和特殊符号:

<!-- 注释内容 -->

空格 &nbsq;
大于号(>)&gt;
小于号(<)&lt;
引号(")&quot;
版权符号 ()&copy;

图像标签

1、常见的图像格式:JPG、GIF、BMP、PNG等。

2、图像的基本标签:

<img src ="图片地址" alt="图像的替代文字" title="鼠标悬停时提示文字" width="图片宽度" height="图片高度"/>

超链接标签

1、超链接的基本用法:

<a href="链接地址" target="目标窗口位置">链接文本或图像</a>

2、目标窗口位置:

(1)_self:自身窗口。

(2)_blank:新建窗口。

2、超链接的应用场合:

(1)页面间链接:

<a href="https://www.baidu.com/">点击跳转到百度</a>

(2)锚链接:

<a name="market">目标位置乙</a>
<a href="#market">当前位置甲,点击跳转到目标位置乙</a>

(3)功能性链接:

mailto:电子邮件地址

3、行内元素和块元素:

(1)行内元素:内容撑开宽度,左右都是行内元素的可以排在一行。

(2)块元素:无论内容多少,该元素独占一行。

如无特殊说明,本博所有文章均为博主原创。

如若转载,请注明出处:一木林多 - https://www.l5v.cn/archives/255/

评论