《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》——第2章 HTML基础 2.1 HTML的基本概念

简介:

本节书摘来自异步社区《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》一书中的第2章,第2.1节,作者: 何新起 , 任慎存 , 田月梅更多章节内容可以访问云栖社区“异步社区”公众号查看。

第2章 HTML基础

在当今社会中,网络已成为人们生活的一部分,网页设计技术已成为学习计算机的重要内容之一。目前大部分网页都是采用可视化网页编辑软件来制作的,但是无论采用哪一种网页编辑软件,最后都是将所设计的网页转化为HTML。HTML是搭建网页的基础,如果不了解HTML,就不能灵活地实现想要的网页效果。本章就来介绍HTML的基本概念和编写方法以及浏览HTML文件的方法,使读者对HTML有个初步的了解,从而为后面的学习打下基础。

学习目标

  • HTML的基本概念
  • 掌握HTML文件的编写方法
  • 掌握HTML头部标记head
  • 掌握网页的主体标记body

2.1 HTML的基本概念

HTML的英文全称是Hyper Text Markup Language,它是网页超文本标记语言,也是全球广域网上描述网页内容和外观的标准。

2.1.1 HTML简介
HTML作为一种标记语言,它本身不能显示在浏览器中。标记语言经过浏览器的解释和编译,才能正确地反映HTML标记语言的内容。HTML发展至今经历了巨大的变化,从单一的文本显示功能到多功能互动,许多特性经过多年的完善,已经成为了一种非常成熟的标记语言。

HTML不是一种编程语言,而是一种描述性的标记语言,用于描述超文本中内容的显示方式。如文字以什么颜色、大小来显示等,这些都是利用HTML标记完成的。其最基本的语法就是<标记符>内容标记符>。标记符通常都是成对使用,有一个开头标记和一个结束标记。结束标记只是在开头标记的前面加一个斜杠“/”。当浏览器收到HTML文件后,就会解释里面的标记符,然后把标记符相对应的功能表达出来。

如在HTML中用< I > I >标记符来定义文字为斜体字,用< B > B >标记符来定义文字为粗体字。当浏览器遇到< I > I >标记时,就会把< I > I >标记之间的所有文字以斜体样式显示出来。遇到< B > B >标记时,就会把<
B > B >标记之间的所有文字以粗体样式显示出来。

2.1.2 HTML文件的基本结构
完整的HTML文件包括标题、段落、列表、表格以及各种嵌入对象,这些对象统称为HTML元素。一个HTML文件的基本结构如下。
screenshot
从上面的代码可以看出,在HTML文件中,所有的标记都是相对应的,开头标记为<>,结束标记为>,在这两个标记中间添加内容。

2.1.3 认识HTML标记
HTML是超文本标记语言,主要通过各种标记来标示和排列各对象,通常由尖括号“<”“>”以及其中所包含的标记元素组成。

在HTML中,所有的标记都是成对出现的,而结束标记总是在开始标记前增加一个“/”。标记与标记之间还可以嵌套,也可以放置各种属性。此外,在源文件中标记是不区分大小写的。

HTML定义了以下三种标记,用于描述页面的整体结构。

< html >标记:它放在HTML的开头,表示网页文档的开始。

< head >标记:出现在文档的起始部分,标明文档的头部信息,一般包括标题和主题信息,其结束标记指明文档标题部分的结束。

< body >标记:用来指明文档的主体区域,网页所要显示的内容都放在这个标记内,其结束标记

相关文章
|
4月前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
94 1
|
1月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
51 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
2月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
153 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
2月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
68 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
2月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
71 34
|
2月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
104 33
|
3月前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
127 24
|
3月前
|
存储 前端开发 JavaScript
前端状态管理:Vuex 核心概念与实战
Vuex 是 Vue.js 应用程序的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。本教程将深入讲解 Vuex 的核心概念,如 State、Getter、Mutation 和 Action,并通过实战案例帮助开发者掌握在项目中有效使用 Vuex 的技巧。
|
4月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
157 7