HTML5基础知识(零基础进,都是细节!)

36,793次阅读
没有评论

共计 2362 个字符,预计需要花费 6 分钟才能阅读完成。

 一、HTML5 概述

        HTML 是构成 Web 页面(page)、表示 Web 页面的符号标签语言。通过 HTML,将需要表达的信息按某种规则写成 HTML 文件,再通过专用的浏览器进行识别,将这些 HTML 文件翻译成人们阅读的信息形式,就是所见到的网页。

(一)什么是 HTML

       HTML 的本质是指创建 HTML 文档需要遵循的一组 规范或者标准,遵循这些规范所创建的文档可以在浏览器中显示为网页的外观。

(二)什么是 HTML5

        HTML5 是 构建 Web 内容的一种语言描述方式。HTML5 是互联网的新一代标准,是构建以及呈现互联网内容 的一种语言方式,被认为是互联网的 核心技术 之一。

(三)HTML5 的应用

       HTML5 主要应用于前端 Web 开发,开发制作周期短,成本低。相对来讲,原生移动 APP 开发成本比较高,周期也较长。HTML5 应用范围非常广泛,目前主要应用于移动应用程序和游戏,重要原因在于 HTML5 技术可以进行跨平台使用。

  1.HTML5 的应用领域

(1)响应式网页

(2)HTML5 移动应用

(3)微信小程序

2. 搭建支持 HTML5 的浏览器环境

       HTML5 是一种全新的 HTML 标签语言,许多功能必须在搭建完成相应的浏览环境后才可以正常浏览。

二、HTML5 的基本构件

每个网页都有其基本的结构,包括 HTML 的语法结构、文档结构、标签的格式以及代码的编写规范等。

HTML5 基础知识(零基础进,都是细节!)

(一)HTML5 语法结构

1. 标签

     HTML 文档由标签和受标签影响的内容组成。标签(tag)是由一对尖括号“”括起来的单词或单词缩写,大多数标签都成对出现。开始标签用“标签”表示,结束标签用“/ 标签”表示。其格式为受标签影响的内容标签>

例如,一至六级标题标签表示为:

HTML5 基础知识(零基础进,都是细节!)

演示效果:

HTML5 基础知识(零基础进,都是细节!)

注:a. 每个标签都要用“”括起来,如

,以表示这是 HTML 代码而非普通文本。“”与标签名之间 不能留有空格或其他字符

      b. 在标签名前加上符号“/”便是其结束标签,表示该标签内容结束,如。标签也有不用标签>结尾的,称之为单标签,如换行标签

2. 属性

     标签仅规定这是什么信息,但是要想显示或控制这些信息,就需要在标签后面加上相关的属性。标签通过属性制作出各种效果,通常都是以“属性名 =” 值 ””的形式来表示。其格式为受标签影响的内容标签>

例如,一级标题标签

用属性 align 表示文字的对齐方式:

HTML5 基础知识(零基础进,都是细节!)

演示效果:

HTML5 基础知识(零基础进,都是细节!)

3. 元素

       元素是指包括标签在内的整体,不仅包含标签本身,还包括被标签影响的内容。元素的内容就是开始标签与结束标签之间的内容。没有内容的 HTML 元素被称为空元素,空元素没有结束标签,是在开始标签中关闭的。

例如,以下代码片段:

HTML5 基础知识(零基础进,都是细节!)

(二)HTML5 编写规范

       页面的 HTML 代码书写必须符合 HTML 规范,这是用户编写拥有良好结构文档的基础,这些文档可以很好地工作于所有浏览器,并且可以向后兼容。

1. 标签的规范

   (1)标签分单标签和双标签, 双标签往往成对出现, 所有标签 (包括空标签) 都必须关闭, 如、

等。

    (2)标签名和属性建议都用小写字母。

   (3)多数 HTML 标签可以嵌套, 但绝对不允许交叉

   (4)HTML 文件一行可以写多个标签, 但标签中的一个单词不能分两行写。

2. 属性的规范

   (1)可以根据需要使用某个标签的所有属性, 也可以只用其中的几个属性。在使用时属性之间没有         顺序。

   (2)属性值都要用半角双引号括起来。

   (3)并不是所有的标签都有属性, 如换行标签
就没有。

3. 元素的嵌套

   (1)块级元素可以包含行级元素或其他块级元素, 但行级元素不能包含块级元素, 它只能包含其他的行级元素。

   (2)有几个特殊的块级元素只能包含行级元素, 不能再包含块级元素, 这几个特殊的标签是:

、、、、、

、。

4. 代码的缩进

       HTML 代码并不要求在书写时缩进, 但为了文档的结构性和层次性, 建议初学者使用标记时首尾对齐, 内部的内容可向右缩进几格。

(三)HTML5 文档结构

HTML5 文档是一种纯文本格式的文件, 文档的基本结构为

HTML5 基础知识(零基础进,都是细节!)

注:“!”+“tab”键即可快捷键生成 HTML 基本框架,“!”为 英文输入法 下。

1. 文档类型

       文档类型声明的格式为,这行代码称为 doctype 声明。doctype 声明是必不可少的关键部分,它对于确保页面以正确的模式渲染,提高性能和保持与未来标准的兼容性都至关重要。

…“>3.HTML 文档头部标签 …

       HTML 文档包括头部(head)和主体(body)。文档头部内容在开始标签和结束标签之间定义,其内容可以是标题名或文本文件地址、创作信息等网页信息说明。

4. 网页头部标签

       在网页的头部,通常存放一些介绍页面内容的信息,例如页面标题、描述、关键词、链接的 CSS 样式文件和客户端的 JavaScript 脚本文件等。

(1)

标签 </p><p>            </p><p><title>标签是页面标题标签,它是对文件内容的概括,一个好的标题能使读者从中判断出该文件的大概内容。网页的标题是通过窗口的名称显示出来的,每个文档只允许有一个标题。</p><p>(2)<meta>标签</p><p>            <meta>标签是元信息标签,在 HTML 中是一个单标签,该标签可重复出现在头部标签中。</p><p>(3)<link>标签</p><p>            <link>标签是关联标签,用于定义当前文档与 Web 集合中其他文档的关系,建立一个树状链接组织。<link>标签只提供链接该文档的一个路径。</p><p>(4)<script>标签</script></p><p>            <script>标签是脚本标签,用于为 HTML 文档定义客户端脚本信息。</script></p><h6 id="5.HTML 文档编码">5.HTML 文档编码</h6><p>       HTML5 文档直接使用 meta 元素的 charset 属性指定文档编码,格式为</p><p><meta charset="gb2312"></p><p>

原文地址: HTML5 基础知识(零基础进,都是细节!)

    正文完
     0
    Yojack
    版权声明:本篇文章由 Yojack 于2024-09-26发表,共计2362字。
    转载说明:
    1 本网站名称:优杰开发笔记
    2 本站永久网址:https://yojack.cn
    3 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
    4 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
    5 本站所有内容均可转载及分享, 但请注明出处
    6 我们始终尊重原创作者的版权,所有文章在发布时,均尽可能注明出处与作者。
    7 站长邮箱:laylwenl@gmail.com
    评论(没有评论)