0

0

html快速入门(基础教程+资源推荐)_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-24 11:20:16

|

1067人浏览过

|

来源于php中文网

原创

1.html究竟是什么?

从字面上理解,html是超文本标记语言hyper text mark-up language的首字母缩写,指的是一种通用web页面描述语言,是用来描述我们打开浏览器就能看到的各种web页面的。

所以说,写html代码根本和 编程都扯不上边,不要一听源码两个字就绝望,以为要你攻读计算机学位似的。

你只要知道当你要在网页中展示内容的时候该用哪个标记就可以了。

即使一开始记不 住,也没关系,查课本,问度娘,分分钟搞定,用过几次,想记不住都难。

最近风靡各大博客和写作平台的markdown大家知道吧,html比它复杂不了多少。

立即学习前端免费学习笔记(深入)”;

目前最新版本是html5,比之前的版本有了质的飞跃,被新媒体领域寄予了厚望,特别是在移动端的应用,进行的如火如荼。

关于html5,可以另外开个话题来讲。今天不再多说。

2.html文档基本结构

首先需要明确一个概念,html文档是由元素组成的。基础文档元素有4个,任何HTML文档都需要所有这些元素。

每个html文档都需要以DOCTYPE元素开头,这样的目的是告诉浏览器:“即将要打开的文档类型是html,请按照html解析规则进行处理。

有的同学会发现,即使不写DOCTYPE元素,大多数浏览器仍然能够正确显示文档的内容。

但是在这里提醒大家的是,这样做并非明智之举,长期来看,过分依赖浏览器的“善解人意”,会使你在关键时刻抓狂。

html元素是html文档的根元素,里面包含真正的html内容。

html元素由head元素和body元素组成。

head元素中包含文档的元数据等信息,在html5中规定head元素中必须包含一个title元素。

body元素用于包装要展示在浏览器窗口中的文档内容。

他们之间的关系可以这样来理解,head元素本身不是文档内容,但是提供了关于后面的包装在body中的文档内容的重要信息。

对于用户来说,重要的是body元素里面的内容,但是若想要成功展示body元素中的内容,则离不开head元素。

所以说,当你创建一个下面这样的html文件,实际上就完成了一个web页面的创建。

1 2 3 4 我的第一个web应用5 6 7 8 

但是,当使用浏览器打开这个页面的时候,会发现展示在你面前的是一个空白窗口,那是因为我们并没有往里添加任何实质性的内容。

就好比我们印刷了一本书,但这本书正文页面全部都是空白一样。但不管怎样说,它仍然是一本书。

要想设计开发出真正实用的网页,需要添加各种元素。

3.html标记基本语法

在《HTML5权威指南》中有这样一句话:“html是一种标记语言。其标记以应用于文档内容(例如文本)的元素为其存在形式”。

通俗来讲就是要想让浏览器正确执行你的指令,必须使用标记。这些标记是早就定义好了的,不能自己创造。

标记是个什么东东呢?我们上面的代码中就用到了,像   

   等这些写在尖括号里面的内容统统都是标记。而且绝大多数的标记是成对出现的。

在html文档中一个应用了标记的元素基本语法如下:

<标记名称>元素内容

其中的   是开始标记, 标记名称> 结束标记, 元素内容 则指的是想要显示在浏览器窗口中的内容。

那么是不是所有的元素标记都有具有以上三要素呢?

BlessAI
BlessAI

Bless AI 提供五个独特的功能:每日问候、庆祝问候、祝福、祷告和名言的文本生成和图片生成。

下载

并非如此。

当元素的开始标记和结束标记之间没有内容时,就是一个空元素

空元素可以用一个更简洁的方式表达出来,就是将开始标记和结束标记合二为一,只用一个标记表示,比如  。

另外还有一些特殊的元素,使用一个标签来表示,称为虚元素比如用于在页面中插入水平线的 


,就是这样一种元素。

我们称成对出现的标记为双标记,反之则为单标记。

那html有多少标记呢?算上html5新增标记,大约有119个。

而最常用的则要少的多。

根据80/20原则,只要掌握约24(119*20%)个最常用标记,即可以解决80%的问题。

是否觉得欢欣鼓舞呢?

4.html常见标记及应用方法

新手熟悉以下标记的使用即可。

,

, <p><style><script></style></p> <p></p> <div>,<p>,<br></p> <p><img alt="html快速入门(基础教程+资源推荐)_html/css_WEB-ITnose" >,<a>,<embed></embed></a></p> <p></p> <form>,<input>,<button>,<txtarea>,<label> <p><frame>,</p> <frameset>,<iframe> <p></p> <ul>,</ul> <ol>,<li> <p></p> <table><tr><td> <p>因为网络上资源很多,在这里不再重复介绍。</p> <p>推荐w3school这个网站,里面有基础教程和高级教程,还有十分完备的参考手册,实在是初学者学习的好去处。地址如下:</p> <p>http://www.w3school.com.cn/index.html</p> <p>另外:推荐《html5权威指南》这本书,内容采用基于问题的组织方式,而且是经典书籍,利于正三观。</p> <p>后期我会结合CSS,以具体例子的形式给大家详细讲解html标记的使用。</p> <p>我的观点是,不要将html文档本身弄得太复杂,尽量使用语义性较强的标记,而少用主要功能是改变显示样式的标记,将样式交给CSS。</p> <p>版权声明:本文为作者原创,如需转载,请注明出处。谢谢!</p> <p> </p> </td></tr></table> </li> </ol></iframe> </frameset></label></txtarea></button> </form> </div>

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
Java 桌面应用开发(JavaFX 实战)
Java 桌面应用开发(JavaFX 实战)

本专题系统讲解 Java 在桌面应用开发领域的实战应用,重点围绕 JavaFX 框架,涵盖界面布局、控件使用、事件处理、FXML、样式美化(CSS)、多线程与UI响应优化,以及桌面应用的打包与发布。通过完整示例项目,帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。

37

2026.01.14

php与html混编教程大全
php与html混编教程大全

本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

19

2026.01.13

PHP 高性能
PHP 高性能

本专题整合了PHP高性能相关教程大全,阅读专题下面的文章了解更多详细内容。

37

2026.01.13

MySQL数据库报错常见问题及解决方法大全
MySQL数据库报错常见问题及解决方法大全

本专题整合了MySQL数据库报错常见问题及解决方法,阅读专题下面的文章了解更多详细内容。

19

2026.01.13

PHP 文件上传
PHP 文件上传

本专题整合了PHP实现文件上传相关教程,阅读专题下面的文章了解更多详细内容。

16

2026.01.13

PHP缓存策略教程大全
PHP缓存策略教程大全

本专题整合了PHP缓存相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.13

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

3

2026.01.13

交互式图表和动态图表教程汇总
交互式图表和动态图表教程汇总

本专题整合了交互式图表和动态图表的相关内容,阅读专题下面的文章了解更多详细内容。

45

2026.01.13

nginx配置文件详细教程
nginx配置文件详细教程

本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

9

2026.01.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号