搜索
首页web前端html教程新手学习老知识(一)HTML语言基础

一、为什么要?

  近两年来,许多公司开发出了图形化的HTML开发工具,使得网页的制作变得非常简单。如微软公司推出的 Microsoft FrontPage, Adobe公司推出的 Adobe Pagemill, Micromedia公司推出的Dreamweaver等编辑工具,都被称为“所见即所得”的工具。这些图形化的开发工具可以直接处理网页,而不用书写费劲的标记。这使得用户在没有HTML语言基础的情况下,照样可以编写网页。这时,编写HTML文档的任务由开发工具替你完成了。 这是网页图形编辑工具的最大成功之处,但也是它们的最大不足之处。受到图形编辑工具自身的约束,将产生大量的垃圾代码。原因很简单,我举一个简单的例子你就明白了。比如:在网页设计一个表格,若是每个单元格的宽度和高度让它根据其中的内容自动确定,HTML只要你告诉它是表格和单元格的排列顺序(也就是行列数)就行了,但因为图形化开发工具无法得知你的这种特殊要求,所以只能取一般要求,把每个单元格的宽度和高度都定义起来,从而增加了许多代码。所以一个明智的网页编写者应该在掌握图形编辑工具的基础上进一步学会HTML语言,从而知道那些是垃圾代码,这样,我们就可以利用图形化HTML开发工具快速成地做出网页,又会消除无用的代码,从而达到快速制作高质量网页的目的。

  二、如何用HTML?

  HTML语言,又称超文本标记语言,是英文Hyper Text Markup Language的缩写。HTML语言作为一种标识性的语言,是由一些特定符号和语法组成的,所以理解和掌握都是十分容易的。可以说,HTML语言在所有的计算机编程语言中是最简单易学的。 组成HTML的文档都是ASCIlI档,所以创建HTML文件十分简单,只需一个普通的字符编辑器即可。如 Wndows中的记事本、写字板都可以使用。也可以采用专用的 HTML 编辑工具:如 CoffeeHTML、 Homesite、 HTMLedit Pro等工具,它们的特点是能够自动检查HTML文档中的语法错误并协助改正。由于有了图形化的HTML开发工具,使得我们更加容易,我们可以先用它制作好网页,再在它附带的HTML代码编辑器在删去那些无用的代码,利用它的所见即所得特性,从而使我们很快就能熟炼地掌握HTML。特别是 Micromedia 公司最近发布的Dreamweaver4,可以把源代码编辑器和网页编辑器放在同一个窗口中,真是方便极了。

  三、HTML基本概念

  1、标记

  HTML用于描述功能的符号称为“标记”。如“HTML”、“BODY”、“TABLE”等。标记在使用是必须用方括号“<>”括起来,而且是成对出现,无斜杠的标记表示该标记的作用开始,有斜杠的标记表示该标记的作用结束。如

表示一个表格的开始,表标一个表格的结束。在HTML中,标记的大小写作用相同,如和都是表示一个表格的开始。


  标记可以包含标记,如:表格中包含表格或其它标记,如下面这样的HTML代码结构是正确的:


   268.png


但是标记不能交叉嵌套,如下面这样的代码是错误的:


这是不正确的代码


  2、特殊字符

  由于方括号和英文双引号被用来提示HTML的标记及参数值,那么在网页中要显示方括号和英文引号只能用其它的符号来代替,下面是常见特殊字符所代表的正常字符:

<或<对应字符 <
>或>对应字符 >
"或"——对应字符 "
à——对应字符 A

  3、语法

  一个标记,为了明确它的功能,往往用一些属性参数来描述,对这些属性参数的规定上就是所谓的语法,例如:段落标记

,它的语法格式是:


  这就说明

标记有两个属性参数,即“align”和“class”,其中“align”用于定义段的位置是靠左、靠右还是居中。默认值是靠左。而“class ”则是定义所属的类型。在实际应用时当然可以没有“align”和“class”参数,按照默认情况显示,这一点非常重要,这是我们判断无用代码的主要标准之一,假如在网页代码中有对默认值进行描述设置的语句代码,显然是无用的代码。另外,在设置标记的属性值时,若是取默认值不影响效果或影响很少,我们就尽量取默认值,这样可以不用设置,从而达到减少代码的目的。

  标记参数的具体的值都有要加西文引号,如:要使段落内容居中,正确的写法是这样的:


段落内容居中示例


  学好用好HTML语言的关键是灵活应用标记的参数。特别是默认值的应用。

 以上就是新手学习老知识(一)HTML语言基础的内容,更多相关内容请关注PHP中文网(www.php.cn)!


声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
如何验证您的HTML代码?如何验证您的HTML代码?Apr 24, 2025 am 12:04 AM

HTML代码可以通过在线验证器、集成工具和自动化流程来确保其清洁度。1)使用W3CMarkupValidationService在线验证HTML代码。2)在VisualStudioCode中安装并配置HTMLHint扩展进行实时验证。3)利用HTMLTidy在构建流程中自动验证和清理HTML文件。

HTML与CSS和JavaScript:比较Web技术HTML与CSS和JavaScript:比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术:1.HTML定义网页结构,2.CSS负责网页外观,3.JavaScript提供网页动态和交互性,它们共同作用,打造出用户体验良好的网站。

HTML作为标记语言:其功能和目的HTML作为标记语言:其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容,其目的在于提供一种标准化的方式来展示信息。1)HTML通过标签和属性组织网页的各个部分,如标题和段落。2)它支持内容与表现分离,提升维护效率。3)HTML具有可扩展性,允许自定义标签增强SEO。

HTML,CSS和JavaScript的未来:网络开发趋势HTML,CSS和JavaScript的未来:网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件,CSS的未来趋势是CSS-in-JS和CSSHoudini,JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果,Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积,CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡,Serverless简化开发但需优化冷启动问题。

HTML:结构,CSS:样式,JavaScript:行为HTML:结构,CSS:样式,JavaScript:行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是:1.HTML定义网页结构,2.CSS控制网页样式,3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来:网络设计的发展和趋势HTML的未来:网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript:比较概述HTML与CSS vs. JavaScript:比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是:HTML负责内容结构,CSS负责样式,JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容,确保语义化。2.CSS通过选择器和属性控制网页样式,使其美观易读。3.JavaScript通过脚本控制网页行为,实现动态和交互功能。

HTML:是编程语言还是其他?HTML:是编程语言还是其他?Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增强WebevebDevelopment。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。