简单说明:HTML5,市面上书籍很多,很厚很厚,也有很多大佬写了很多文章,很多很多,多到看不完,我只写两篇文章概述HTML5常用内容,可以为新手节省很多不必要的时间,两篇文章主要涵盖我开发多年常用到的功能。HTML5很强大但是在实际应用中用到的并不多。了解常用的足以在很多项目中发挥威力。一些特殊场景在自己查询就ok,系统学习这两篇我认为就够了
在开始进入操作之前需要了解几个基础的概念,之后开始用实践来证明这些概念,并在实践中不断运用。
HTML5 是从HTML的升级。那么什么是HTML?
HTML 是用来描述网页的一种语言
HTML 指的是超文本标记语言 (Hyper Text Markup Language)HTML 不是一种编程语言,而是一种标记语言 (markup language)标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页
对于第一次接触的人特别抽象,一系列读下来,还是不懂什么是HTML,没关系不懂就忘掉繁琐的文字,慢慢解释和操作就明白了。
来看点具体,动动手,在浏览器中输入 ,在空白出单机右键–》查看,看到如下图所示:第2快内容就是html,里面一对一对的就是html标签,第3快展示的是css,css以后的文章在详细说明。
html干的事情就是在第2块里面的内容,哇!都是英文看懂,没事就那么几个标签,无所畏惧。
目前市面上在浏览器输入域名,展现出来的内容99%。都是通过html渲染出来的。
html里面的内容是有什么组成的? 是标签( html tag)
HTML 标签是由尖括号包围的关键词,比如 <HTML>HTML 标签通常是成对出现的,比如 <b> 和 <b>标签对中的第一个标签是开始标签,第二个标签是结束标签开始和结束标签也被称为开放标签和闭合标签展示的汉子内容就是包含在闭合的标签以内
基本概念就到这里吧。动手之后就知道了怎么回事了
现在把上面啰啰嗦嗦的概念实现一下看看。我们把百度的html代码多余的删掉,留下结构看看是什么样子?怎么删除 选中上面图中红四表示第2快的内容按键盘上的 delete 就可以看到。留下基本结构:
这就是剩下的基本内容了,只有标题其他的都没有了;接下来我们手动实现一下,打开编辑软件,我用的是vscode, 建议你也下载一个。所有的html5 后缀名都是 ,
是不是和百度简化之后的代码一样,到这里html你已经基本掌握了。就是上面这个结构。一一说明一下:
<!DOCTYPE html>
是HTML5的标准申明,告诉浏览器解析我的文档并且是用HTML解析
必须放在第一行,这个标签不用闭合是一个特殊的标签仅此一行
<html> 标签
html所有内容都要包含在<html> 中它是一个成对的标签有开始和结束
html内容包含两部分head 和body
<head>标签
head 标签是 html的基本结构的重要标签
故名思议 head标签 表示者html整个文档的头部,需要做的事情很多比如:标题的添加,整个文档的编码控制等等,我们慢慢完善,
特点是很多在头部书写的内容,并不会展示出来,除了标题
<body>标签
整个标签也是html5 最重要的元素是基础的结构
所有网页展示的内容都是通过body向外展示的
body也是一个成对的标签,所有html上用到的几乎都是成对的标签
<meta charset=“utf-8”> 指定html整个文件的编码关键字
先说一件事: 在百度搜索豆瓣 然后就会看到豆瓣的名字出现在百度搜索里面,点击豆瓣,就能打开豆 瓣官网。百度怎么搜索到到呢? 来动动手,打开豆瓣 点击【右键】–》【查看源文件】,就看到来豆瓣到html,其中有两个地方留意观察:
这个就是我们说的关键字,keywords 是关键字存放的地方,description是对网站对描述,这两个地方就是告诉百度可以找到的依据,学到了吧。这些都是放在head里面,并且不会被用户看到,head 里面的内容还有很多很多,目前就介绍到这里,这些差不多是每个网站都必须用到:
完整例子:
在浏览器中打开看一下效果
这个标签也比价常用。是注解的意思,怎么用,比如 <!-- 我是注解 --> 这个内容在浏览器看不到但是在代码里面可以见看见,常用来标示当前代码的意义或者整个文档的意义,让更多人能够读懂
可以放到网站的html运行一下。要多练习。练习感悟其中的原理;
如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h60320.shtml